-
+
{genre?.icon ?? '🎵'}
-
-
{track.title}
-
- {fmtTime(totalSec)} · {track.bpm} BPM · {track.key} {track.scale}
-
-
+
{track.title}
+
+
{filename}
+
+ {totalSec != null ? fmtTime(totalSec) : '--:--'} · {track.bpm ? `${track.bpm} BPM` : ''} {track.key} {track.scale}
+
+
{isPlaying && (
{
{m}
))}
+ {hasSunoId && (
+
+
+
+ {track.audio_url && (
+
+ ↓ Download
+
+ )}
+
+ )}
+ {!hasSunoId && track.audio_url && (
+
+ )}
{track.created_at ? new Date(track.created_at).toLocaleDateString('ko-KR') : ''}
@@ -488,13 +550,26 @@ const LibraryCard = ({ track, onDelete, onPlay, isPlaying }) => {
/* ─────────────────────────────────────────────
Library Section
───────────────────────────────────────────── */
-const Library = ({ tracks, onDelete, onRefresh }) => {
+const Library = ({ tracks, onDelete, onRefresh, onExtend, onVocalRemoval, isGenerating, loading }) => {
const [playingId, setPlayingId] = useState(null);
const handlePlay = (track) => {
setPlayingId((prev) => (prev === track.id ? null : track.id));
};
+ if (loading) {
+ return (
+
+
+
My Library
+
+
+ {Array.from({ length: 4 }, (_, i) => )}
+
+
+ );
+ }
+
if (tracks.length === 0) {
return (
@@ -522,6 +597,9 @@ const Library = ({ tracks, onDelete, onRefresh }) => {
onDelete={onDelete}
onPlay={handlePlay}
isPlaying={playingId === track.id}
+ onExtend={onExtend}
+ onVocalRemoval={onVocalRemoval}
+ isGenerating={isGenerating}
/>
))}
@@ -539,6 +617,7 @@ export default function MusicStudio() {
/* ── Provider 상태 ── */
const [providers, setProviders] = useState([]);
const [provider, setProvider] = useState('suno');
+ const [providerError, setProviderError] = useState(false);
/* ── 컨트롤 상태 ── */
const [genre, setGenre] = useState(null);
@@ -554,6 +633,9 @@ export default function MusicStudio() {
const [lyrics, setLyrics] = useState('');
const [instrumental, setInstrumental] = useState(false);
const [lyricsLoading, setLyricsLoading] = useState(false);
+ const [model, setModel] = useState('V4');
+ const [models, setModels] = useState([]);
+ const [credits, setCredits] = useState(null);
/* ── 생성 상태 ── */
const [isGenerating, setIsGenerating] = useState(false);
@@ -588,13 +670,24 @@ export default function MusicStudio() {
.then((data) => {
const list = data.providers ?? [];
setProviders(list);
+ setProviderError(false);
if (list.length > 0 && !list.find((p) => p.id === provider)) {
setProvider(list[0].id);
}
})
- .catch(() => {});
+ .catch(() => setProviderError(true));
}, []); // eslint-disable-line react-hooks/exhaustive-deps
+ /* ── 모델 & 크레딧 로드 ── */
+ useEffect(() => {
+ getMusicModels()
+ .then((data) => setModels(data.models ?? []))
+ .catch(() => {});
+ getMusicCredits()
+ .then((data) => setCredits(data))
+ .catch(() => {});
+ }, []);
+
/* ── 가사 AI 생성 ── */
const handleGenerateLyrics = async () => {
if (!prompt && !genre) return;
@@ -730,6 +823,7 @@ export default function MusicStudio() {
const payload = {
provider,
+ model,
title,
genre,
moods,
@@ -774,6 +868,62 @@ export default function MusicStudio() {
setLibrary((prev) => prev.filter((t) => t.id !== id));
};
+ /* ── 곡 연장 핸들러 ── */
+ const handleExtend = async (track) => {
+ if (!track.suno_id || isGenerating) return;
+ setTab('create');
+ setIsGenerating(true);
+ setTrack(null);
+ setGenProgress(0);
+ setGenStep('곡 연장 요청 중…');
+ setGenError(null);
+ try {
+ const res = await extendMusicTrack({
+ suno_id: track.suno_id,
+ continue_at: track.duration_sec ?? 60,
+ prompt: '',
+ style: track.genre ?? '',
+ title: `${track.title} (Extended)`,
+ model,
+ });
+ if (res?.task_id) {
+ taskIdRef.current = res.task_id;
+ setGenStep('AI가 곡을 연장하고 있습니다…');
+ setGenProgress(5);
+ startPolling(res.task_id, `${track.title} (Extended)`);
+ }
+ } catch {
+ setIsGenerating(false);
+ setGenError('곡 연장에 실패했습니다');
+ }
+ };
+
+ /* ── 보컬 분리 핸들러 ── */
+ const handleVocalRemoval = async (track) => {
+ if (!track.suno_id || isGenerating) return;
+ setTab('create');
+ setIsGenerating(true);
+ setTrack(null);
+ setGenProgress(0);
+ setGenStep('보컬 분리 요청 중…');
+ setGenError(null);
+ try {
+ const res = await removeVocals({
+ suno_id: track.suno_id,
+ title: track.title,
+ });
+ if (res?.task_id) {
+ taskIdRef.current = res.task_id;
+ setGenStep('AI가 보컬을 분리하고 있습니다…');
+ setGenProgress(5);
+ startPolling(res.task_id, `${track.title} (Vocal Removed)`);
+ }
+ } catch {
+ setIsGenerating(false);
+ setGenError('보컬 분리에 실패했습니다');
+ }
+ };
+
const handleNewTrack = () => {
setTrack(null);
setGenProgress(0);
@@ -799,6 +949,14 @@ export default function MusicStudio() {
+ {/* Provider Error */}
+ {providerError && (
+
+ ⚠ 음악 서비스 연결 실패
+
+
+ )}
+
{/* Provider Selector */}
{providers.length > 0 && (
@@ -860,6 +1039,26 @@ export default function MusicStudio() {
)}
+ {/* Model Selector (Suno only) */}
+ {provider === 'suno' && models.length > 0 && (
+
+
Model
+
+ {models.map((m) => (
+
+ ))}
+
+
+ )}
+
{/* Step 1: Genre */}
diff --git a/src/routes.jsx b/src/routes.jsx
index 8cfff7f..8f0d8e5 100644
--- a/src/routes.jsx
+++ b/src/routes.jsx
@@ -6,6 +6,7 @@ import {
IconStock,
IconBuilding,
IconTravel,
+ IconMusic,
IconLab,
IconTodo,
} from './components/Icons';
@@ -79,6 +80,15 @@ export const navLinks = [
icon: ,
accent: '#fb923c',
},
+ {
+ id: 'music',
+ label: 'Music',
+ path: '/music',
+ subtitle: 'SONIC FORGE',
+ description: 'AI로 세상에 하나뿐인 음악을 만드는 스튜디오',
+ icon: ,
+ accent: '#f5a623',
+ },
{
id: 'lab',
label: 'Lab',
@@ -145,7 +155,7 @@ export const appRoutes = [
element: ,
},
{
- path: 'lab/music',
+ path: 'music',
element: ,
},
{