refactor(music-lab): 컴포넌트 분할 — AudioPlayer, LyricsTab, CreditsBadge 추출
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -2426,3 +2426,26 @@
|
|||||||
animation: none !important;
|
animation: none !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ── Phase 1: Credits Badge ─────────────────────────────── */
|
||||||
|
.ms-credits-badge {
|
||||||
|
display: inline-flex; align-items: center; gap: 6px;
|
||||||
|
padding: 6px 14px; border-radius: 20px;
|
||||||
|
background: rgba(245, 166, 35, 0.1);
|
||||||
|
border: 1px solid rgba(245, 166, 35, 0.25);
|
||||||
|
font-family: 'Courier Prime', monospace;
|
||||||
|
font-size: 0.85rem; color: var(--ms-accent);
|
||||||
|
}
|
||||||
|
.ms-credits-badge__icon { font-size: 1rem; }
|
||||||
|
.ms-credits-badge__value { font-weight: 700; font-size: 1.1rem; }
|
||||||
|
.ms-credits-badge__label { color: var(--ms-muted); font-size: 0.75rem; text-transform: uppercase; }
|
||||||
|
.ms-credits-badge.is-low {
|
||||||
|
background: rgba(231, 76, 60, 0.15);
|
||||||
|
border-color: rgba(231, 76, 60, 0.4);
|
||||||
|
color: #e74c3c;
|
||||||
|
animation: pulse-badge 1.5s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
@keyframes pulse-badge {
|
||||||
|
0%, 100% { opacity: 1; }
|
||||||
|
50% { opacity: 0.6; }
|
||||||
|
}
|
||||||
|
|||||||
@@ -7,15 +7,14 @@ import {
|
|||||||
getMusicProviders,
|
getMusicProviders,
|
||||||
getMusicStatus,
|
getMusicStatus,
|
||||||
getMusicModels,
|
getMusicModels,
|
||||||
getMusicCredits,
|
|
||||||
extendMusicTrack,
|
extendMusicTrack,
|
||||||
removeVocals,
|
removeVocals,
|
||||||
getSavedLyrics,
|
|
||||||
saveLyrics,
|
|
||||||
updateLyrics,
|
|
||||||
deleteLyrics,
|
|
||||||
} from '../../api';
|
} from '../../api';
|
||||||
import './MusicStudio.css';
|
import './MusicStudio.css';
|
||||||
|
import AudioPlayer from './components/AudioPlayer';
|
||||||
|
import { fmtTime } from './components/AudioPlayer';
|
||||||
|
import CreditsBadge from './components/CreditsBadge';
|
||||||
|
import LyricsTab from './components/LyricsTab';
|
||||||
|
|
||||||
/* ─────────────────────────────────────────────
|
/* ─────────────────────────────────────────────
|
||||||
데이터 상수
|
데이터 상수
|
||||||
@@ -83,12 +82,6 @@ const SIM_STEPS = [
|
|||||||
{ msg: 'Track ready!', pct: 100 },
|
{ msg: 'Track ready!', pct: 100 },
|
||||||
];
|
];
|
||||||
|
|
||||||
/* ─────────────────────────────────────────────
|
|
||||||
유틸
|
|
||||||
───────────────────────────────────────────── */
|
|
||||||
const pad = (n) => String(Math.floor(n)).padStart(2, '0');
|
|
||||||
const fmtTime = (s) => `${pad(s / 60)}:${pad(s % 60)}`;
|
|
||||||
|
|
||||||
/* ─────────────────────────────────────────────
|
/* ─────────────────────────────────────────────
|
||||||
Loading Skeleton
|
Loading Skeleton
|
||||||
───────────────────────────────────────────── */
|
───────────────────────────────────────────── */
|
||||||
@@ -261,125 +254,6 @@ const GenerationProgress = ({ progress, stepMsg }) => (
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
/* ─────────────────────────────────────────────
|
|
||||||
Audio Player (실제 <audio> 기반)
|
|
||||||
───────────────────────────────────────────── */
|
|
||||||
const AudioPlayer = ({ audioUrl, totalSec, accentColor }) => {
|
|
||||||
const audioRef = useRef(null);
|
|
||||||
const [playing, setPlaying] = useState(false);
|
|
||||||
const [elapsed, setElapsed] = useState(0);
|
|
||||||
const [duration, setDuration] = useState(totalSec ?? 0);
|
|
||||||
const [volume, setVolume] = useState(1);
|
|
||||||
|
|
||||||
/* 실제 오디오가 없으면 가짜 타이머로 폴백 */
|
|
||||||
const isFake = !audioUrl;
|
|
||||||
const timerRef = useRef(null);
|
|
||||||
|
|
||||||
const total = duration || totalSec || 60;
|
|
||||||
|
|
||||||
const togglePlay = () => {
|
|
||||||
if (isFake) {
|
|
||||||
if (playing) {
|
|
||||||
clearInterval(timerRef.current);
|
|
||||||
setPlaying(false);
|
|
||||||
} else {
|
|
||||||
setPlaying(true);
|
|
||||||
timerRef.current = setInterval(() => {
|
|
||||||
setElapsed((e) => {
|
|
||||||
if (e >= total - 1) {
|
|
||||||
clearInterval(timerRef.current);
|
|
||||||
setPlaying(false);
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
return e + 1;
|
|
||||||
});
|
|
||||||
}, 1000);
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const el = audioRef.current;
|
|
||||||
if (!el) return;
|
|
||||||
playing ? el.pause() : el.play();
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSeek = (e) => {
|
|
||||||
const rect = e.currentTarget.getBoundingClientRect();
|
|
||||||
const ratio = (e.clientX - rect.left) / rect.width;
|
|
||||||
const newTime = ratio * total;
|
|
||||||
if (!isFake && audioRef.current) {
|
|
||||||
audioRef.current.currentTime = newTime;
|
|
||||||
}
|
|
||||||
setElapsed(newTime);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleVolumeChange = (e) => {
|
|
||||||
const v = Number(e.target.value);
|
|
||||||
setVolume(v);
|
|
||||||
if (!isFake && audioRef.current) audioRef.current.volume = v;
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => () => clearInterval(timerRef.current), []);
|
|
||||||
|
|
||||||
const progress = (elapsed / total) * 100;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="ms-audio-player" style={{ '--player-accent': accentColor }}>
|
|
||||||
{!isFake && (
|
|
||||||
<audio
|
|
||||||
ref={audioRef}
|
|
||||||
src={audioUrl}
|
|
||||||
onLoadedMetadata={(e) => setDuration(e.target.duration)}
|
|
||||||
onTimeUpdate={(e) => setElapsed(e.target.currentTime)}
|
|
||||||
onPlay={() => setPlaying(true)}
|
|
||||||
onPause={() => setPlaying(false)}
|
|
||||||
onEnded={() => { setPlaying(false); setElapsed(0); }}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className={`ms-player__play ${playing ? 'is-playing' : ''}`}
|
|
||||||
onClick={togglePlay}
|
|
||||||
aria-label={playing ? '일시정지' : '재생'}
|
|
||||||
>
|
|
||||||
{playing ? (
|
|
||||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
|
|
||||||
<rect x="3" y="2" width="4" height="12" rx="1" />
|
|
||||||
<rect x="9" y="2" width="4" height="12" rx="1" />
|
|
||||||
</svg>
|
|
||||||
) : (
|
|
||||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
|
|
||||||
<path d="M4 2l10 6-10 6V2z" />
|
|
||||||
</svg>
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div className="ms-player__timeline">
|
|
||||||
<div className="ms-player__bar" onClick={handleSeek} role="slider"
|
|
||||||
aria-label="재생 위치" aria-valuenow={Math.round(elapsed)} aria-valuemin={0} aria-valuemax={Math.round(total)}>
|
|
||||||
<div className="ms-player__fill" style={{ width: `${progress}%` }} />
|
|
||||||
<div className="ms-player__thumb" style={{ left: `${progress}%` }} />
|
|
||||||
</div>
|
|
||||||
<div className="ms-player__times">
|
|
||||||
<span>{fmtTime(elapsed)}</span>
|
|
||||||
<span>{fmtTime(total)}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="ms-volume">
|
|
||||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor" aria-hidden>
|
|
||||||
<path d="M2 5h2.5l3-3v10l-3-3H2V5zm8.5-1.5a4.5 4.5 0 010 7" stroke="currentColor" strokeWidth="1.2" fill="none" strokeLinecap="round"/>
|
|
||||||
</svg>
|
|
||||||
<input
|
|
||||||
type="range" min={0} max={1} step={0.02} value={volume}
|
|
||||||
onChange={handleVolumeChange}
|
|
||||||
className="ms-volume__slider"
|
|
||||||
aria-label="볼륨"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
/* ─────────────────────────────────────────────
|
/* ─────────────────────────────────────────────
|
||||||
Track Result Card
|
Track Result Card
|
||||||
───────────────────────────────────────────── */
|
───────────────────────────────────────────── */
|
||||||
@@ -611,241 +485,6 @@ const Library = ({ tracks, onDelete, onRefresh, onExtend, onVocalRemoval, isGene
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
/* ─────────────────────────────────────────────
|
|
||||||
Lyrics Tab
|
|
||||||
───────────────────────────────────────────── */
|
|
||||||
const LyricsTab = ({ onUseInCreate }) => {
|
|
||||||
const [lyrPrompt, setLyrPrompt] = useState('');
|
|
||||||
const [lyrLoading, setLyrLoading] = useState(false);
|
|
||||||
const [lyrError, setLyrError] = useState(null);
|
|
||||||
const [copied, setCopied] = useState(null); // id
|
|
||||||
const [saved, setSaved] = useState([]); // DB에 저장된 가사
|
|
||||||
const [loadingSaved, setLoadingSaved] = useState(true);
|
|
||||||
const [editingId, setEditingId] = useState(null);
|
|
||||||
const [editTitle, setEditTitle] = useState('');
|
|
||||||
const [editText, setEditText] = useState('');
|
|
||||||
|
|
||||||
/* ── 저장된 가사 로드 ── */
|
|
||||||
useEffect(() => {
|
|
||||||
setLoadingSaved(true);
|
|
||||||
getSavedLyrics()
|
|
||||||
.then((data) => setSaved(data.lyrics ?? []))
|
|
||||||
.catch(() => {})
|
|
||||||
.finally(() => setLoadingSaved(false));
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
/* ── AI 생성 → 즉시 저장 ── */
|
|
||||||
const handleGenerate = async () => {
|
|
||||||
if (!lyrPrompt.trim() || lyrLoading) return;
|
|
||||||
setLyrLoading(true);
|
|
||||||
setLyrError(null);
|
|
||||||
try {
|
|
||||||
const res = await generateMusicLyrics(lyrPrompt.trim());
|
|
||||||
if (res?.text) {
|
|
||||||
const record = await saveLyrics({
|
|
||||||
title: res.title || '',
|
|
||||||
text: res.text,
|
|
||||||
prompt: lyrPrompt.trim(),
|
|
||||||
});
|
|
||||||
setSaved((prev) => [record, ...prev]);
|
|
||||||
} else {
|
|
||||||
setLyrError('가사 생성 결과가 없습니다');
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
setLyrError(e.message || '가사 생성에 실패했습니다');
|
|
||||||
} finally {
|
|
||||||
setLyrLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/* ── 복사 ── */
|
|
||||||
const handleCopy = (text, id) => {
|
|
||||||
navigator.clipboard.writeText(text).then(() => {
|
|
||||||
setCopied(id);
|
|
||||||
setTimeout(() => setCopied(null), 2000);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/* ── 삭제 ── */
|
|
||||||
const handleDelete = async (id) => {
|
|
||||||
try {
|
|
||||||
await deleteLyrics(id);
|
|
||||||
setSaved((prev) => prev.filter((l) => l.id !== id));
|
|
||||||
} catch {}
|
|
||||||
};
|
|
||||||
|
|
||||||
/* ── 수정 시작 ── */
|
|
||||||
const startEdit = (item) => {
|
|
||||||
setEditingId(item.id);
|
|
||||||
setEditTitle(item.title);
|
|
||||||
setEditText(item.text);
|
|
||||||
};
|
|
||||||
|
|
||||||
/* ── 수정 저장 ── */
|
|
||||||
const handleSaveEdit = async () => {
|
|
||||||
if (editingId == null) return;
|
|
||||||
try {
|
|
||||||
const updated = await updateLyrics(editingId, { title: editTitle, text: editText });
|
|
||||||
setSaved((prev) => prev.map((l) => l.id === editingId ? updated : l));
|
|
||||||
setEditingId(null);
|
|
||||||
} catch {}
|
|
||||||
};
|
|
||||||
|
|
||||||
/* ── 수정 취소 ── */
|
|
||||||
const cancelEdit = () => setEditingId(null);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="ms-lyrics-tab">
|
|
||||||
<div className="ms-lyrics-tab__form">
|
|
||||||
<div className="ms-lyrics-tab__head">
|
|
||||||
<h2 className="ms-lyrics-tab__title">AI Lyrics Generator</h2>
|
|
||||||
<p className="ms-lyrics-tab__desc">
|
|
||||||
원하는 분위기, 주제, 스타일을 설명하면 AI가 가사를 작성합니다.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="ms-lyrics-tab__input-wrap">
|
|
||||||
<textarea
|
|
||||||
className="ms-lyrics-tab__input"
|
|
||||||
placeholder="예: 비 오는 밤, 혼자 걷는 도시의 거리를 배경으로 한 감성적인 발라드 가사"
|
|
||||||
value={lyrPrompt}
|
|
||||||
onChange={(e) => setLyrPrompt(e.target.value)}
|
|
||||||
rows={3}
|
|
||||||
maxLength={200}
|
|
||||||
onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleGenerate(); } }}
|
|
||||||
/>
|
|
||||||
<div className="ms-lyrics-tab__input-footer">
|
|
||||||
<span className="ms-lyrics-tab__count">{lyrPrompt.length}/200</span>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className={`ms-btn ms-btn--accent ${lyrLoading ? 'is-loading' : ''}`}
|
|
||||||
onClick={handleGenerate}
|
|
||||||
disabled={!lyrPrompt.trim() || lyrLoading}
|
|
||||||
>
|
|
||||||
{lyrLoading ? (
|
|
||||||
<><span className="ms-btn__spinner" /> 생성 중...</>
|
|
||||||
) : (
|
|
||||||
'✨ 가사 생성'
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{lyrError && (
|
|
||||||
<div className="ms-error-banner">
|
|
||||||
<span>⚠ {lyrError}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{lyrLoading && (
|
|
||||||
<div className="ms-lyrics-tab__loading">
|
|
||||||
<div className="ms-lyrics-tab__loading-bar" />
|
|
||||||
<p>AI가 가사를 작성하고 있습니다...</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 저장된 가사 목록 */}
|
|
||||||
{loadingSaved && (
|
|
||||||
<div className="ms-lyrics-tab__loading">
|
|
||||||
<div className="ms-lyrics-tab__loading-bar" />
|
|
||||||
<p>저장된 가사를 불러오는 중...</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{!loadingSaved && saved.length === 0 && !lyrLoading && (
|
|
||||||
<div className="ms-lyrics-tab__empty">
|
|
||||||
<span className="ms-lyrics-tab__empty-icon">🎤</span>
|
|
||||||
<p>저장된 가사가 없습니다</p>
|
|
||||||
<p className="ms-lyrics-tab__empty-hint">
|
|
||||||
프롬프트를 입력하면 AI가 [Verse], [Chorus] 등 섹션이 포함된 가사를 작성합니다
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="ms-lyrics-tab__results">
|
|
||||||
{saved.map((item) => (
|
|
||||||
<div key={item.id} className={`ms-lyrics-card ${editingId === item.id ? 'is-editing' : ''}`}>
|
|
||||||
<div className="ms-lyrics-card__header">
|
|
||||||
{editingId === item.id ? (
|
|
||||||
<input
|
|
||||||
className="ms-lyrics-card__title-input"
|
|
||||||
value={editTitle}
|
|
||||||
onChange={(e) => setEditTitle(e.target.value)}
|
|
||||||
placeholder="제목"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
{item.title && <h3 className="ms-lyrics-card__title">{item.title}</h3>}
|
|
||||||
<span className="ms-lyrics-card__prompt">{item.prompt}</span>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
<span className="ms-lyrics-card__date">
|
|
||||||
{item.created_at ? new Date(item.created_at).toLocaleDateString('ko-KR') : ''}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{editingId === item.id ? (
|
|
||||||
<textarea
|
|
||||||
className="ms-lyrics-card__text-input"
|
|
||||||
value={editText}
|
|
||||||
onChange={(e) => setEditText(e.target.value)}
|
|
||||||
rows={12}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<pre className="ms-lyrics-card__text">{item.text}</pre>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="ms-lyrics-card__actions">
|
|
||||||
{editingId === item.id ? (
|
|
||||||
<>
|
|
||||||
<button type="button" className="ms-btn ms-btn--accent ms-btn--sm" onClick={handleSaveEdit}>
|
|
||||||
✓ 저장
|
|
||||||
</button>
|
|
||||||
<button type="button" className="ms-btn ms-btn--ghost ms-btn--sm" onClick={cancelEdit}>
|
|
||||||
취소
|
|
||||||
</button>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="ms-btn ms-btn--ghost ms-btn--sm"
|
|
||||||
onClick={() => handleCopy(item.text, item.id)}
|
|
||||||
>
|
|
||||||
{copied === item.id ? '✓ 복사됨' : '📋 복사'}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="ms-btn ms-btn--ghost ms-btn--sm"
|
|
||||||
onClick={() => onUseInCreate(item.text)}
|
|
||||||
>
|
|
||||||
🎵 Create에서 사용
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="ms-btn ms-btn--ghost ms-btn--sm"
|
|
||||||
onClick={() => startEdit(item)}
|
|
||||||
>
|
|
||||||
✏️ 수정
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="ms-btn ms-btn--ghost ms-btn--sm ms-btn--danger-text"
|
|
||||||
onClick={() => handleDelete(item.id)}
|
|
||||||
>
|
|
||||||
🗑 삭제
|
|
||||||
</button>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
/* ─────────────────────────────────────────────
|
/* ─────────────────────────────────────────────
|
||||||
Main Page
|
Main Page
|
||||||
───────────────────────────────────────────── */
|
───────────────────────────────────────────── */
|
||||||
@@ -874,7 +513,6 @@ export default function MusicStudio() {
|
|||||||
const [lyricsLoading, setLyricsLoading] = useState(false);
|
const [lyricsLoading, setLyricsLoading] = useState(false);
|
||||||
const [model, setModel] = useState('V4');
|
const [model, setModel] = useState('V4');
|
||||||
const [models, setModels] = useState([]);
|
const [models, setModels] = useState([]);
|
||||||
const [credits, setCredits] = useState(null);
|
|
||||||
|
|
||||||
/* ── 생성 상태 ── */
|
/* ── 생성 상태 ── */
|
||||||
const [isGenerating, setIsGenerating] = useState(false);
|
const [isGenerating, setIsGenerating] = useState(false);
|
||||||
@@ -917,14 +555,11 @@ export default function MusicStudio() {
|
|||||||
.catch(() => setProviderError(true));
|
.catch(() => setProviderError(true));
|
||||||
}, []); // eslint-disable-line react-hooks/exhaustive-deps
|
}, []); // eslint-disable-line react-hooks/exhaustive-deps
|
||||||
|
|
||||||
/* ── 모델 & 크레딧 로드 ── */
|
/* ── 모델 로드 ── */
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
getMusicModels()
|
getMusicModels()
|
||||||
.then((data) => setModels(data.models ?? []))
|
.then((data) => setModels(data.models ?? []))
|
||||||
.catch(() => {});
|
.catch(() => {});
|
||||||
getMusicCredits()
|
|
||||||
.then((data) => setCredits(data))
|
|
||||||
.catch(() => {});
|
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
/* ── 가사 AI 생성 ── */
|
/* ── 가사 AI 생성 ── */
|
||||||
@@ -1188,14 +823,7 @@ export default function MusicStudio() {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="ms-header__right">
|
<div className="ms-header__right">
|
||||||
{credits && (
|
<CreditsBadge />
|
||||||
<div className="ms-credits">
|
|
||||||
<span className="ms-credits__label">Credits</span>
|
|
||||||
<span className="ms-credits__value">
|
|
||||||
{credits.credits_left ?? credits.remaining ?? '—'}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<SonicRadar isGenerating={isGenerating} accentColor={accentColor} />
|
<SonicRadar isGenerating={isGenerating} accentColor={accentColor} />
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|||||||
128
src/pages/music/components/AudioPlayer.jsx
Normal file
128
src/pages/music/components/AudioPlayer.jsx
Normal file
@@ -0,0 +1,128 @@
|
|||||||
|
import React, { useRef, useState, useEffect } from 'react';
|
||||||
|
|
||||||
|
/* ─────────────────────────────────────────────
|
||||||
|
유틸
|
||||||
|
───────────────────────────────────────────── */
|
||||||
|
const pad = (n) => String(Math.floor(n)).padStart(2, '0');
|
||||||
|
export const fmtTime = (s) => `${pad(s / 60)}:${pad(s % 60)}`;
|
||||||
|
|
||||||
|
/* ─────────────────────────────────────────────
|
||||||
|
Audio Player (실제 <audio> 기반)
|
||||||
|
───────────────────────────────────────────── */
|
||||||
|
const AudioPlayer = ({ audioUrl, totalSec, accentColor }) => {
|
||||||
|
const audioRef = useRef(null);
|
||||||
|
const [playing, setPlaying] = useState(false);
|
||||||
|
const [elapsed, setElapsed] = useState(0);
|
||||||
|
const [duration, setDuration] = useState(totalSec ?? 0);
|
||||||
|
const [volume, setVolume] = useState(1);
|
||||||
|
|
||||||
|
/* 실제 오디오가 없으면 가짜 타이머로 폴백 */
|
||||||
|
const isFake = !audioUrl;
|
||||||
|
const timerRef = useRef(null);
|
||||||
|
|
||||||
|
const total = duration || totalSec || 60;
|
||||||
|
|
||||||
|
const togglePlay = () => {
|
||||||
|
if (isFake) {
|
||||||
|
if (playing) {
|
||||||
|
clearInterval(timerRef.current);
|
||||||
|
setPlaying(false);
|
||||||
|
} else {
|
||||||
|
setPlaying(true);
|
||||||
|
timerRef.current = setInterval(() => {
|
||||||
|
setElapsed((e) => {
|
||||||
|
if (e >= total - 1) {
|
||||||
|
clearInterval(timerRef.current);
|
||||||
|
setPlaying(false);
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
return e + 1;
|
||||||
|
});
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const el = audioRef.current;
|
||||||
|
if (!el) return;
|
||||||
|
playing ? el.pause() : el.play();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSeek = (e) => {
|
||||||
|
const rect = e.currentTarget.getBoundingClientRect();
|
||||||
|
const ratio = (e.clientX - rect.left) / rect.width;
|
||||||
|
const newTime = ratio * total;
|
||||||
|
if (!isFake && audioRef.current) {
|
||||||
|
audioRef.current.currentTime = newTime;
|
||||||
|
}
|
||||||
|
setElapsed(newTime);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleVolumeChange = (e) => {
|
||||||
|
const v = Number(e.target.value);
|
||||||
|
setVolume(v);
|
||||||
|
if (!isFake && audioRef.current) audioRef.current.volume = v;
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => () => clearInterval(timerRef.current), []);
|
||||||
|
|
||||||
|
const progress = (elapsed / total) * 100;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="ms-audio-player" style={{ '--player-accent': accentColor }}>
|
||||||
|
{!isFake && (
|
||||||
|
<audio
|
||||||
|
ref={audioRef}
|
||||||
|
src={audioUrl}
|
||||||
|
onLoadedMetadata={(e) => setDuration(e.target.duration)}
|
||||||
|
onTimeUpdate={(e) => setElapsed(e.target.currentTime)}
|
||||||
|
onPlay={() => setPlaying(true)}
|
||||||
|
onPause={() => setPlaying(false)}
|
||||||
|
onEnded={() => { setPlaying(false); setElapsed(0); }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`ms-player__play ${playing ? 'is-playing' : ''}`}
|
||||||
|
onClick={togglePlay}
|
||||||
|
aria-label={playing ? '일시정지' : '재생'}
|
||||||
|
>
|
||||||
|
{playing ? (
|
||||||
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
|
||||||
|
<rect x="3" y="2" width="4" height="12" rx="1" />
|
||||||
|
<rect x="9" y="2" width="4" height="12" rx="1" />
|
||||||
|
</svg>
|
||||||
|
) : (
|
||||||
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
|
||||||
|
<path d="M4 2l10 6-10 6V2z" />
|
||||||
|
</svg>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div className="ms-player__timeline">
|
||||||
|
<div className="ms-player__bar" onClick={handleSeek} role="slider"
|
||||||
|
aria-label="재생 위치" aria-valuenow={Math.round(elapsed)} aria-valuemin={0} aria-valuemax={Math.round(total)}>
|
||||||
|
<div className="ms-player__fill" style={{ width: `${progress}%` }} />
|
||||||
|
<div className="ms-player__thumb" style={{ left: `${progress}%` }} />
|
||||||
|
</div>
|
||||||
|
<div className="ms-player__times">
|
||||||
|
<span>{fmtTime(elapsed)}</span>
|
||||||
|
<span>{fmtTime(total)}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="ms-volume">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor" aria-hidden>
|
||||||
|
<path d="M2 5h2.5l3-3v10l-3-3H2V5zm8.5-1.5a4.5 4.5 0 010 7" stroke="currentColor" strokeWidth="1.2" fill="none" strokeLinecap="round"/>
|
||||||
|
</svg>
|
||||||
|
<input
|
||||||
|
type="range" min={0} max={1} step={0.02} value={volume}
|
||||||
|
onChange={handleVolumeChange}
|
||||||
|
className="ms-volume__slider"
|
||||||
|
aria-label="볼륨"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AudioPlayer;
|
||||||
36
src/pages/music/components/CreditsBadge.jsx
Normal file
36
src/pages/music/components/CreditsBadge.jsx
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
import React, { useEffect, useState, useCallback } from 'react';
|
||||||
|
import { getMusicCredits } from '../../../api';
|
||||||
|
|
||||||
|
const CreditsBadge = () => {
|
||||||
|
const [credits, setCredits] = useState(null);
|
||||||
|
|
||||||
|
const fetchCredits = useCallback(async () => {
|
||||||
|
try {
|
||||||
|
const data = await getMusicCredits();
|
||||||
|
setCredits(data);
|
||||||
|
} catch {}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchCredits();
|
||||||
|
const interval = setInterval(fetchCredits, 30000);
|
||||||
|
return () => clearInterval(interval);
|
||||||
|
}, [fetchCredits]);
|
||||||
|
|
||||||
|
if (!credits) return null;
|
||||||
|
|
||||||
|
const remaining = credits.credits_left ?? credits.remaining ?? credits.data ?? null;
|
||||||
|
if (remaining == null) return null;
|
||||||
|
|
||||||
|
const isLow = remaining <= 10;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`ms-credits-badge ${isLow ? 'is-low' : ''}`}>
|
||||||
|
<span className="ms-credits-badge__icon">⚡</span>
|
||||||
|
<span className="ms-credits-badge__value">{remaining}</span>
|
||||||
|
<span className="ms-credits-badge__label">credits</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CreditsBadge;
|
||||||
245
src/pages/music/components/LyricsTab.jsx
Normal file
245
src/pages/music/components/LyricsTab.jsx
Normal file
@@ -0,0 +1,245 @@
|
|||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
import {
|
||||||
|
generateMusicLyrics,
|
||||||
|
getSavedLyrics,
|
||||||
|
saveLyrics,
|
||||||
|
updateLyrics,
|
||||||
|
deleteLyrics,
|
||||||
|
} from '../../../api';
|
||||||
|
|
||||||
|
/* ─────────────────────────────────────────────
|
||||||
|
Lyrics Tab
|
||||||
|
───────────────────────────────────────────── */
|
||||||
|
const LyricsTab = ({ onUseInCreate }) => {
|
||||||
|
const [lyrPrompt, setLyrPrompt] = useState('');
|
||||||
|
const [lyrLoading, setLyrLoading] = useState(false);
|
||||||
|
const [lyrError, setLyrError] = useState(null);
|
||||||
|
const [copied, setCopied] = useState(null); // id
|
||||||
|
const [saved, setSaved] = useState([]); // DB에 저장된 가사
|
||||||
|
const [loadingSaved, setLoadingSaved] = useState(true);
|
||||||
|
const [editingId, setEditingId] = useState(null);
|
||||||
|
const [editTitle, setEditTitle] = useState('');
|
||||||
|
const [editText, setEditText] = useState('');
|
||||||
|
|
||||||
|
/* ── 저장된 가사 로드 ── */
|
||||||
|
useEffect(() => {
|
||||||
|
setLoadingSaved(true);
|
||||||
|
getSavedLyrics()
|
||||||
|
.then((data) => setSaved(data.lyrics ?? []))
|
||||||
|
.catch(() => {})
|
||||||
|
.finally(() => setLoadingSaved(false));
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
/* ── AI 생성 → 즉시 저장 ── */
|
||||||
|
const handleGenerate = async () => {
|
||||||
|
if (!lyrPrompt.trim() || lyrLoading) return;
|
||||||
|
setLyrLoading(true);
|
||||||
|
setLyrError(null);
|
||||||
|
try {
|
||||||
|
const res = await generateMusicLyrics(lyrPrompt.trim());
|
||||||
|
if (res?.text) {
|
||||||
|
const record = await saveLyrics({
|
||||||
|
title: res.title || '',
|
||||||
|
text: res.text,
|
||||||
|
prompt: lyrPrompt.trim(),
|
||||||
|
});
|
||||||
|
setSaved((prev) => [record, ...prev]);
|
||||||
|
} else {
|
||||||
|
setLyrError('가사 생성 결과가 없습니다');
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
setLyrError(e.message || '가사 생성에 실패했습니다');
|
||||||
|
} finally {
|
||||||
|
setLyrLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/* ── 복사 ── */
|
||||||
|
const handleCopy = (text, id) => {
|
||||||
|
navigator.clipboard.writeText(text).then(() => {
|
||||||
|
setCopied(id);
|
||||||
|
setTimeout(() => setCopied(null), 2000);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/* ── 삭제 ── */
|
||||||
|
const handleDelete = async (id) => {
|
||||||
|
try {
|
||||||
|
await deleteLyrics(id);
|
||||||
|
setSaved((prev) => prev.filter((l) => l.id !== id));
|
||||||
|
} catch {}
|
||||||
|
};
|
||||||
|
|
||||||
|
/* ── 수정 시작 ── */
|
||||||
|
const startEdit = (item) => {
|
||||||
|
setEditingId(item.id);
|
||||||
|
setEditTitle(item.title);
|
||||||
|
setEditText(item.text);
|
||||||
|
};
|
||||||
|
|
||||||
|
/* ── 수정 저장 ── */
|
||||||
|
const handleSaveEdit = async () => {
|
||||||
|
if (editingId == null) return;
|
||||||
|
try {
|
||||||
|
const updated = await updateLyrics(editingId, { title: editTitle, text: editText });
|
||||||
|
setSaved((prev) => prev.map((l) => l.id === editingId ? updated : l));
|
||||||
|
setEditingId(null);
|
||||||
|
} catch {}
|
||||||
|
};
|
||||||
|
|
||||||
|
/* ── 수정 취소 ── */
|
||||||
|
const cancelEdit = () => setEditingId(null);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="ms-lyrics-tab">
|
||||||
|
<div className="ms-lyrics-tab__form">
|
||||||
|
<div className="ms-lyrics-tab__head">
|
||||||
|
<h2 className="ms-lyrics-tab__title">AI Lyrics Generator</h2>
|
||||||
|
<p className="ms-lyrics-tab__desc">
|
||||||
|
원하는 분위기, 주제, 스타일을 설명하면 AI가 가사를 작성합니다.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="ms-lyrics-tab__input-wrap">
|
||||||
|
<textarea
|
||||||
|
className="ms-lyrics-tab__input"
|
||||||
|
placeholder="예: 비 오는 밤, 혼자 걷는 도시의 거리를 배경으로 한 감성적인 발라드 가사"
|
||||||
|
value={lyrPrompt}
|
||||||
|
onChange={(e) => setLyrPrompt(e.target.value)}
|
||||||
|
rows={3}
|
||||||
|
maxLength={200}
|
||||||
|
onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleGenerate(); } }}
|
||||||
|
/>
|
||||||
|
<div className="ms-lyrics-tab__input-footer">
|
||||||
|
<span className="ms-lyrics-tab__count">{lyrPrompt.length}/200</span>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`ms-btn ms-btn--accent ${lyrLoading ? 'is-loading' : ''}`}
|
||||||
|
onClick={handleGenerate}
|
||||||
|
disabled={!lyrPrompt.trim() || lyrLoading}
|
||||||
|
>
|
||||||
|
{lyrLoading ? (
|
||||||
|
<><span className="ms-btn__spinner" /> 생성 중...</>
|
||||||
|
) : (
|
||||||
|
'✨ 가사 생성'
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{lyrError && (
|
||||||
|
<div className="ms-error-banner">
|
||||||
|
<span>⚠ {lyrError}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{lyrLoading && (
|
||||||
|
<div className="ms-lyrics-tab__loading">
|
||||||
|
<div className="ms-lyrics-tab__loading-bar" />
|
||||||
|
<p>AI가 가사를 작성하고 있습니다...</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 저장된 가사 목록 */}
|
||||||
|
{loadingSaved && (
|
||||||
|
<div className="ms-lyrics-tab__loading">
|
||||||
|
<div className="ms-lyrics-tab__loading-bar" />
|
||||||
|
<p>저장된 가사를 불러오는 중...</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!loadingSaved && saved.length === 0 && !lyrLoading && (
|
||||||
|
<div className="ms-lyrics-tab__empty">
|
||||||
|
<span className="ms-lyrics-tab__empty-icon">🎤</span>
|
||||||
|
<p>저장된 가사가 없습니다</p>
|
||||||
|
<p className="ms-lyrics-tab__empty-hint">
|
||||||
|
프롬프트를 입력하면 AI가 [Verse], [Chorus] 등 섹션이 포함된 가사를 작성합니다
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="ms-lyrics-tab__results">
|
||||||
|
{saved.map((item) => (
|
||||||
|
<div key={item.id} className={`ms-lyrics-card ${editingId === item.id ? 'is-editing' : ''}`}>
|
||||||
|
<div className="ms-lyrics-card__header">
|
||||||
|
{editingId === item.id ? (
|
||||||
|
<input
|
||||||
|
className="ms-lyrics-card__title-input"
|
||||||
|
value={editTitle}
|
||||||
|
onChange={(e) => setEditTitle(e.target.value)}
|
||||||
|
placeholder="제목"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{item.title && <h3 className="ms-lyrics-card__title">{item.title}</h3>}
|
||||||
|
<span className="ms-lyrics-card__prompt">{item.prompt}</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
<span className="ms-lyrics-card__date">
|
||||||
|
{item.created_at ? new Date(item.created_at).toLocaleDateString('ko-KR') : ''}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{editingId === item.id ? (
|
||||||
|
<textarea
|
||||||
|
className="ms-lyrics-card__text-input"
|
||||||
|
value={editText}
|
||||||
|
onChange={(e) => setEditText(e.target.value)}
|
||||||
|
rows={12}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<pre className="ms-lyrics-card__text">{item.text}</pre>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="ms-lyrics-card__actions">
|
||||||
|
{editingId === item.id ? (
|
||||||
|
<>
|
||||||
|
<button type="button" className="ms-btn ms-btn--accent ms-btn--sm" onClick={handleSaveEdit}>
|
||||||
|
✓ 저장
|
||||||
|
</button>
|
||||||
|
<button type="button" className="ms-btn ms-btn--ghost ms-btn--sm" onClick={cancelEdit}>
|
||||||
|
취소
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="ms-btn ms-btn--ghost ms-btn--sm"
|
||||||
|
onClick={() => handleCopy(item.text, item.id)}
|
||||||
|
>
|
||||||
|
{copied === item.id ? '✓ 복사됨' : '📋 복사'}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="ms-btn ms-btn--ghost ms-btn--sm"
|
||||||
|
onClick={() => onUseInCreate(item.text)}
|
||||||
|
>
|
||||||
|
🎵 Create에서 사용
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="ms-btn ms-btn--ghost ms-btn--sm"
|
||||||
|
onClick={() => startEdit(item)}
|
||||||
|
>
|
||||||
|
✏️ 수정
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="ms-btn ms-btn--ghost ms-btn--sm ms-btn--danger-text"
|
||||||
|
onClick={() => handleDelete(item.id)}
|
||||||
|
>
|
||||||
|
🗑 삭제
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LyricsTab;
|
||||||
Reference in New Issue
Block a user