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

src/pages/music/MusicStudio.jsx

@@ -17,6 +17,7 @@ import {
     generateVideo,
     startBatchGen,
     getBatchJob,
+    listGenres,
 } from '../../api';
 import PullToRefresh from '../../components/PullToRefresh';
 import FAB from '../../components/FAB';
@@ -603,6 +604,7 @@ export default function MusicStudio() {
     const [batchAutoPipe, setBatchAutoPipe] = useState(true);
     const [currentBatch, setCurrentBatch] = useState(null);
     const [batchPolling, setBatchPolling] = useState(false);
+    const [batchGenresList, setBatchGenresList] = useState(['lo-fi', 'phonk', 'ambient', 'pop']);
     const batchPollRef = useRef(null);
 
     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(() => {
         if (!batchPolling || !currentBatch?.id) return;
@@ -1332,10 +1347,11 @@ export default function MusicStudio() {
                             <div className="ms-batch-form">
                                 <label>장르
                                     <select value={batchGenre} onChange={e => setBatchGenre(e.target.value)}>
-                                        <option value="lo-fi">Lo-Fi</option>
-                                        <option value="phonk">Phonk</option>
-                                        <option value="ambient">Ambient</option>
-                                        <option value="pop">Pop</option>
+                                        {batchGenresList.map(g => (
+                                            <option key={g} value={g}>
+                                                {g.split('-').map(s => s.charAt(0).toUpperCase() + s.slice(1)).join('-')}
+                                            </option>
+                                        ))}
                                     </select>
                                 </label>
                                 <label>트랙 수: <strong>{batchCount}</strong>