64 lines
2.1 KiB
JavaScript
64 lines
2.1 KiB
JavaScript
import { useState, useEffect } from 'react';
|
|
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, openPipelineFor }) {
|
|
const [subtab, setSubtab] = useState('pipeline');
|
|
|
|
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">
|
|
{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}
|
|
initialTrackId={initialTrackId}
|
|
onClearInitialTrack={onClearInitialTrack}
|
|
/>
|
|
)}
|
|
{subtab === 'compile' && (
|
|
<CompileTab
|
|
library={library}
|
|
onSwitchToPipeline={() => setSubtab('pipeline')}
|
|
/>
|
|
)}
|
|
{subtab === 'trends' && <TrendsTab />}
|
|
{subtab === 'revenue' && <RevenueTab />}
|
|
{subtab === 'setup' && <SetupTab />}
|
|
</div>
|
|
);
|
|
}
|