From 95edc9d23286a095062a9d831ee780f1cf15a65b Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Sun, 10 May 2026 23:53:49 +0900
Subject: [PATCH] =?UTF-8?q?feat(web-ui):=20=EB=B0=B0=EC=B9=98=20=EC=9E=A5?=
 =?UTF-8?q?=EB=A5=B4=20=EB=AA=A9=EB=A1=9D=20=EB=8F=99=EC=A0=81=20fetch=20(?=
 =?UTF-8?q?POOLS=20=EC=B6=94=EA=B0=80=20=EC=8B=9C=20=EC=9E=90=EB=8F=99=20?=
 =?UTF-8?q?=EB=B0=98=EC=98=81)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api.js                      |  1 +
 src/pages/music/MusicStudio.jsx | 24 ++++++++++++++++++++----
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/api.js b/src/api.js
index d570b3d..64c873a 100644
--- a/src/api.js
+++ b/src/api.js
@@ -678,4 +678,5 @@ export const disconnectYoutube   = ()               => apiPost('/api/music/youtu
 export const startBatchGen   = (payload)        => apiPost('/api/music/generate-batch', payload);
 export const getBatchJob     = (id)             => apiGet(`/api/music/generate-batch/${id}`);
 export const listBatchJobs   = (status='all')   => apiGet(`/api/music/generate-batch?status=${status}`);
+export const listGenres      = ()               => apiGet('/api/music/genres');
 
diff --git a/src/pages/music/MusicStudio.jsx b/src/pages/music/MusicStudio.jsx
index 41728a7..cb03bdf 100644
--- a/src/pages/music/MusicStudio.jsx
+++ b/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>