배치 #{batch.id} — {batch.genre} ·{' '}
{batch.completed}/{batch.count} 완료 ·{' '}
{STATUS_LABELS[batch.status] || batch.status}
{batch.error &&
에러: {batch.error}
}
{trackList.map(n => {
const completed = n <= batch.completed;
const current = n === batch.current_track_index && batch.status === 'generating';
const tr = (batch.tracks || [])[n - 1];
return (
-
{completed ? '✓' : current ? '⏳' : '○'}
{' '}Track {n}: {tr?.title || (current ? '생성 중...' : '대기')}
);
})}
{batch.compile_job_id && (
📀 컴파일 #{batch.compile_job_id}
)}
{batch.pipeline_id && (
🎬 영상 파이프라인 #{batch.pipeline_id} —
{' '}YouTube 탭 → 진행 탭에서 확인
)}
);
}
```
- [ ] **Step 3: MusicStudio.jsx Create 탭에 배치 섹션 추가**
Create 탭 jsx 영역 (handleGenerate 근처) 위 또는 옆에:
```jsx
import BatchProgress from './components/BatchProgress';
import { startBatchGen, getBatchJob } from '../../api';
// 컴포넌트 내부 state:
const [batchOpen, setBatchOpen] = useState(false);
const [batchGenre, setBatchGenre] = useState('lo-fi');
const [batchCount, setBatchCount] = useState(10);
const [batchDuration, setBatchDuration] = useState(180);
const [batchAutoPipe, setBatchAutoPipe] = useState(true);
const [currentBatch, setCurrentBatch] = useState(null);
const [batchPolling, setBatchPolling] = useState(false);
const batchPollRef = useRef(null);
const startBatch = async () => {
try {
const res = await startBatchGen({
genre: batchGenre,
count: batchCount,
target_duration_sec: batchDuration,
auto_pipeline: batchAutoPipe,
});
setCurrentBatch(res);
setBatchPolling(true);
} catch (e) {
alert(`배치 시작 실패: ${e.message || e}`);
}
};
useEffect(() => {
if (!batchPolling || !currentBatch?.id) return;
const tick = async () => {
const j = await getBatchJob(currentBatch.id).catch(() => null);
if (j) {
setCurrentBatch(j);
if (['piped', 'failed', 'cancelled'].includes(j.status)) {
setBatchPolling(false);
if (j.pipeline_id) loadLibrary?.(); // refresh library to show new tracks
}
}
};
batchPollRef.current = setInterval(tick, 5000);
return () => clearInterval(batchPollRef.current);
}, [batchPolling, currentBatch?.id]);
// ... Create 탭 jsx 안: