feat(web-ui): 배치 장르 목록 동적 fetch (POOLS 추가 시 자동 반영)

This commit is contained in:
2026-05-10 23:53:49 +09:00
parent ec22321d56
commit 95edc9d232
2 changed files with 21 additions and 4 deletions

View File

@@ -678,4 +678,5 @@ export const disconnectYoutube = () => apiPost('/api/music/youtu
export const startBatchGen = (payload) => apiPost('/api/music/generate-batch', payload); export const startBatchGen = (payload) => apiPost('/api/music/generate-batch', payload);
export const getBatchJob = (id) => apiGet(`/api/music/generate-batch/${id}`); export const getBatchJob = (id) => apiGet(`/api/music/generate-batch/${id}`);
export const listBatchJobs = (status='all') => apiGet(`/api/music/generate-batch?status=${status}`); export const listBatchJobs = (status='all') => apiGet(`/api/music/generate-batch?status=${status}`);
export const listGenres = () => apiGet('/api/music/genres');

View File

@@ -17,6 +17,7 @@ import {
generateVideo, generateVideo,
startBatchGen, startBatchGen,
getBatchJob, getBatchJob,
listGenres,
} from '../../api'; } from '../../api';
import PullToRefresh from '../../components/PullToRefresh'; import PullToRefresh from '../../components/PullToRefresh';
import FAB from '../../components/FAB'; import FAB from '../../components/FAB';
@@ -603,6 +604,7 @@ export default function MusicStudio() {
const [batchAutoPipe, setBatchAutoPipe] = useState(true); const [batchAutoPipe, setBatchAutoPipe] = useState(true);
const [currentBatch, setCurrentBatch] = useState(null); const [currentBatch, setCurrentBatch] = useState(null);
const [batchPolling, setBatchPolling] = useState(false); const [batchPolling, setBatchPolling] = useState(false);
const [batchGenresList, setBatchGenresList] = useState(['lo-fi', 'phonk', 'ambient', 'pop']);
const batchPollRef = useRef(null); const batchPollRef = useRef(null);
const activeGenre = GENRES.find((g) => g.id === genre); const activeGenre = GENRES.find((g) => g.id === genre);
@@ -680,6 +682,19 @@ export default function MusicStudio() {
} }
}; };
/* ── 배치: 지원 장르 목록 fetch (mount 시 1회) ── */
useEffect(() => {
listGenres()
.then((r) => {
if (Array.isArray(r?.genres) && r.genres.length) {
setBatchGenresList(r.genres);
if (!r.genres.includes(batchGenre)) setBatchGenre(r.genres[0]);
}
})
.catch(() => { /* fallback hardcoded list 유지 */ });
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
/* ── 배치 폴링 ── */ /* ── 배치 폴링 ── */
useEffect(() => { useEffect(() => {
if (!batchPolling || !currentBatch?.id) return; if (!batchPolling || !currentBatch?.id) return;
@@ -1332,10 +1347,11 @@ export default function MusicStudio() {
<div className="ms-batch-form"> <div className="ms-batch-form">
<label>장르 <label>장르
<select value={batchGenre} onChange={e => setBatchGenre(e.target.value)}> <select value={batchGenre} onChange={e => setBatchGenre(e.target.value)}>
<option value="lo-fi">Lo-Fi</option> {batchGenresList.map(g => (
<option value="phonk">Phonk</option> <option key={g} value={g}>
<option value="ambient">Ambient</option> {g.split('-').map(s => s.charAt(0).toUpperCase() + s.slice(1)).join('-')}
<option value="pop">Pop</option> </option>
))}
</select> </select>
</label> </label>
<label>트랙 : <strong>{batchCount}</strong> <label>트랙 : <strong>{batchCount}</strong>