diff --git a/src/pages/music/MusicStudio.jsx b/src/pages/music/MusicStudio.jsx index 095b7b4..5d35d44 100644 --- a/src/pages/music/MusicStudio.jsx +++ b/src/pages/music/MusicStudio.jsx @@ -338,7 +338,7 @@ const TrackResult = ({ track, onDownload, onNew }) => { /* ───────────────────────────────────────────── Library Card ───────────────────────────────────────────── */ -const LibraryCard = ({ track, onDelete, onPlay, isPlaying, onExtend, onVocalRemoval, onCoverArt, onWavConvert, onStemSplit, onSyncedLyrics, onVideoGenerate, onVideoProject, isGenerating }) => { +const LibraryCard = ({ track, onDelete, onPlay, isPlaying, onExtend, onVocalRemoval, onCoverArt, onWavConvert, onStemSplit, onSyncedLyrics, onVideoGenerate, onVideoProject, onVideoPipeline, isGenerating }) => { const [menuOpen, setMenuOpen] = useState(false); const genre = GENRES.find((g) => g.id === track.genre); const totalSec = track.duration_sec ?? null; @@ -429,6 +429,9 @@ const LibraryCard = ({ track, onDelete, onPlay, isPlaying, onExtend, onVocalRemo + )} @@ -439,6 +442,10 @@ const LibraryCard = ({ track, onDelete, onPlay, isPlaying, onExtend, onVocalRemo ↓ Download + )}

@@ -451,7 +458,7 @@ const LibraryCard = ({ track, onDelete, onPlay, isPlaying, onExtend, onVocalRemo /* ───────────────────────────────────────────── Library Section ───────────────────────────────────────────── */ -const Library = ({ tracks, onDelete, onRefresh, onExtend, onVocalRemoval, onCoverArt, onWavConvert, onStemSplit, onSyncedLyrics, onVideoGenerate, onVideoProject, isGenerating, loading }) => { +const Library = ({ tracks, onDelete, onRefresh, onExtend, onVocalRemoval, onCoverArt, onWavConvert, onStemSplit, onSyncedLyrics, onVideoGenerate, onVideoProject, onVideoPipeline, isGenerating, loading }) => { const [playingId, setPlayingId] = useState(null); const handlePlay = (track) => { @@ -506,6 +513,7 @@ const Library = ({ tracks, onDelete, onRefresh, onExtend, onVocalRemoval, onCove onSyncedLyrics={onSyncedLyrics} onVideoGenerate={onVideoGenerate} onVideoProject={onVideoProject} + onVideoPipeline={onVideoPipeline} isGenerating={isGenerating} /> ))} @@ -521,6 +529,7 @@ export default function MusicStudio() { /* ── 탭 ── */ const [tab, setTab] = useState('create'); const [initialTrackId, setInitialTrackId] = useState(null); + const [openPipelineFor, setOpenPipelineFor] = useState(null); /* ── Provider 상태 ── */ const [providers, setProviders] = useState([]); @@ -1070,6 +1079,11 @@ export default function MusicStudio() { setTab('youtube'); }; + const handleVideoPipeline = (track) => { + setOpenPipelineFor(track.id); + setTab('youtube'); + }; + const handleNewTrack = () => { setTrack(null); setGenProgress(0); @@ -1159,6 +1173,7 @@ export default function MusicStudio() { onSyncedLyrics={handleSyncedLyrics} onVideoGenerate={handleVideoGenerate} onVideoProject={handleVideoProject} + onVideoPipeline={handleVideoPipeline} isGenerating={isGenerating} /> @@ -1193,6 +1208,7 @@ export default function MusicStudio() { library={library} initialTrackId={initialTrackId} onClearInitialTrack={() => setInitialTrackId(null)} + openPipelineFor={openPipelineFor} /> )} diff --git a/src/pages/music/components/YoutubeTab.jsx b/src/pages/music/components/YoutubeTab.jsx index f822d93..9aa8f46 100644 --- a/src/pages/music/components/YoutubeTab.jsx +++ b/src/pages/music/components/YoutubeTab.jsx @@ -3,48 +3,45 @@ import VideoProjectsTab from './VideoProjectsTab'; import RevenueTab from './RevenueTab'; import TrendsTab from './TrendsTab'; import CompileTab from './CompileTab'; +import PipelineTab from './PipelineTab'; +import SetupTab from './SetupTab'; -export default function YoutubeTab({ library, initialTrackId, onClearInitialTrack }) { - const [subtab, setSubtab] = useState('video'); +export default function YoutubeTab({ library, initialTrackId, onClearInitialTrack, openPipelineFor }) { + const [subtab, setSubtab] = useState('pipeline'); - // initialTrackId가 들어오면 video 서브탭으로 전환 useEffect(() => { if (initialTrackId) setSubtab('video'); }, [initialTrackId]); + useEffect(() => { + if (openPipelineFor) setSubtab('pipeline'); + }, [openPipelineFor]); + + const tabs = [ + ['pipeline', '🚀 진행'], + ['video', '🎬 영상 제작'], + ['compile', '🎵 컴파일'], + ['trends', '📊 시장 트렌드'], + ['revenue', '💰 수익 추적'], + ['setup', '⚙️ 구성'], + ]; + return (

+ {subtab === 'pipeline' && } {subtab === 'video' && ( )} - {subtab === 'revenue' && } - {subtab === 'trends' && } {subtab === 'compile' && } + {subtab === 'trends' && } + {subtab === 'revenue' && } + {subtab === 'setup' && }
); }