From a89de57b7975e0b076aceb1259a141efcc9bc738 Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Fri, 1 May 2026 14:44:21 +0900
Subject: [PATCH] =?UTF-8?q?feat(youtube-tab):=20YoutubeTab=20=EC=84=9C?=
 =?UTF-8?q?=EB=B8=8C=ED=83=AD=20shell=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20+=20=EC=8A=A4=ED=85=81=20=ED=83=AD=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/music/components/RevenueTab.jsx     |  3 ++
 src/pages/music/components/TrendsTab.jsx      |  3 ++
 .../music/components/VideoProjectsTab.jsx     |  3 ++
 src/pages/music/components/YoutubeTab.jsx     | 51 +++++++++++++++++++
 4 files changed, 60 insertions(+)
 create mode 100644 src/pages/music/components/RevenueTab.jsx
 create mode 100644 src/pages/music/components/TrendsTab.jsx
 create mode 100644 src/pages/music/components/VideoProjectsTab.jsx
 create mode 100644 src/pages/music/components/YoutubeTab.jsx

diff --git a/src/pages/music/components/RevenueTab.jsx b/src/pages/music/components/RevenueTab.jsx
new file mode 100644
index 0000000..623301e
--- /dev/null
+++ b/src/pages/music/components/RevenueTab.jsx
@@ -0,0 +1,3 @@
+export default function RevenueTab() {
+    return null;
+}
diff --git a/src/pages/music/components/TrendsTab.jsx b/src/pages/music/components/TrendsTab.jsx
new file mode 100644
index 0000000..8612b5f
--- /dev/null
+++ b/src/pages/music/components/TrendsTab.jsx
@@ -0,0 +1,3 @@
+export default function TrendsTab() {
+    return null;
+}
diff --git a/src/pages/music/components/VideoProjectsTab.jsx b/src/pages/music/components/VideoProjectsTab.jsx
new file mode 100644
index 0000000..51b82d7
--- /dev/null
+++ b/src/pages/music/components/VideoProjectsTab.jsx
@@ -0,0 +1,3 @@
+export default function VideoProjectsTab({ library, initialTrackId, onClearInitialTrack }) {
+    return null;
+}
diff --git a/src/pages/music/components/YoutubeTab.jsx b/src/pages/music/components/YoutubeTab.jsx
new file mode 100644
index 0000000..9def1b8
--- /dev/null
+++ b/src/pages/music/components/YoutubeTab.jsx
@@ -0,0 +1,51 @@
+import { useState, useEffect } from 'react';
+import VideoProjectsTab from './VideoProjectsTab';
+import RevenueTab from './RevenueTab';
+import TrendsTab from './TrendsTab';
+
+export default function YoutubeTab({ library, initialTrackId, onClearInitialTrack }) {
+    const [subtab, setSubtab] = useState('video');
+
+    // initialTrackId가 들어오면 video 서브탭으로 전환
+    useEffect(() => {
+        if (initialTrackId) setSubtab('video');
+    }, [initialTrackId]);
+
+    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>
+            </nav>
+
+            {subtab === 'video' && (
+                <VideoProjectsTab
+                    library={library}
+                    initialTrackId={initialTrackId}
+                    onClearInitialTrack={onClearInitialTrack}
+                />
+            )}
+            {subtab === 'revenue' && <RevenueTab />}
+            {subtab === 'trends' && <TrendsTab />}
+        </div>
+    );
+}