feat(web-ui): YouTube 6 서브탭 + Library 영상 파이프라인 트리거

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 (
         <div className="yt-container">
             <nav className="yt-subtabs">
-                <button
-                    type="button"
-                    className={`yt-subtab ${subtab === 'video' ? 'is-active' : ''}`}
-                    onClick={() => setSubtab('video')}
-                >
-                    🎬 영상 제작
-                </button>
-                <button
-                    type="button"
-                    className={`yt-subtab ${subtab === 'revenue' ? 'is-active' : ''}`}
-                    onClick={() => setSubtab('revenue')}
-                >
-                    💰 수익 추적
-                </button>
-                <button
-                    type="button"
-                    className={`yt-subtab ${subtab === 'trends' ? 'is-active' : ''}`}
-                    onClick={() => setSubtab('trends')}
-                >
-                    📊 시장 트렌드
-                </button>
-                <button
-                    type="button"
-                    className={`yt-subtab ${subtab === 'compile' ? 'is-active' : ''}`}
-                    onClick={() => setSubtab('compile')}
-                >
-                    🎵 컴파일
-                </button>
+                {tabs.map(([key, label]) => (
+                    <button
+                        key={key}
+                        type="button"
+                        className={`yt-subtab ${subtab === key ? 'is-active' : ''}`}
+                        onClick={() => setSubtab(key)}
+                    >
+                        {label}
+                    </button>
+                ))}
             </nav>
 
+            {subtab === 'pipeline' && <PipelineTab library={library} initialTrackId={openPipelineFor} />}
             {subtab === 'video' && (
                 <VideoProjectsTab
                     library={library}
@@ -52,9 +49,10 @@ export default function YoutubeTab({ library, initialTrackId, onClearInitialTrac
                     onClearInitialTrack={onClearInitialTrack}
                 />
             )}
-            {subtab === 'revenue' && <RevenueTab />}
-            {subtab === 'trends' && <TrendsTab />}
             {subtab === 'compile' && <CompileTab library={library} />}
+            {subtab === 'trends' && <TrendsTab />}
+            {subtab === 'revenue' && <RevenueTab />}
+            {subtab === 'setup' && <SetupTab />}
         </div>
     );
 }