feat(youtube-tab): YoutubeTab 서브탭 shell 컴포넌트 + 스텁 탭 추가
This commit is contained in:
3
src/pages/music/components/RevenueTab.jsx
Normal file
3
src/pages/music/components/RevenueTab.jsx
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
export default function RevenueTab() {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
3
src/pages/music/components/TrendsTab.jsx
Normal file
3
src/pages/music/components/TrendsTab.jsx
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
export default function TrendsTab() {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
3
src/pages/music/components/VideoProjectsTab.jsx
Normal file
3
src/pages/music/components/VideoProjectsTab.jsx
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
export default function VideoProjectsTab({ library, initialTrackId, onClearInitialTrack }) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
51
src/pages/music/components/YoutubeTab.jsx
Normal file
51
src/pages/music/components/YoutubeTab.jsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user