From 3f5cd32c7724a91ea2464a10a0ae1e189735cc33 Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Sat, 9 May 2026 13:36:26 +0900
Subject: [PATCH] =?UTF-8?q?feat(web-ui):=20SetupTab=20visual=5Fdefaults=20?=
 =?UTF-8?q?6=EC=98=B5=EC=85=98=20=ED=99=95=EC=9E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/music/MusicStudio.css         |  9 ++++++
 src/pages/music/components/SetupTab.jsx | 43 ++++++++++++++++++++++---
 2 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/src/pages/music/MusicStudio.css b/src/pages/music/MusicStudio.css
index 08d4027..3f446f1 100644
--- a/src/pages/music/MusicStudio.css
+++ b/src/pages/music/MusicStudio.css
@@ -3236,6 +3236,15 @@
 .setup-card button:hover {
     background: rgba(245, 166, 35, 0.25);
 }
+.setup-checkbox {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+}
+.setup-checkbox input[type="checkbox"] {
+    width: auto;
+}
 .setup-channel {
     display: flex;
     align-items: center;
diff --git a/src/pages/music/components/SetupTab.jsx b/src/pages/music/components/SetupTab.jsx
index 926d5c3..d5e1f12 100644
--- a/src/pages/music/components/SetupTab.jsx
+++ b/src/pages/music/components/SetupTab.jsx
@@ -113,19 +113,52 @@ export default function SetupTab() {
 
             <section className="setup-card">
                 <h3>영상 비주얼 기본값</h3>
+
                 <label>해상도
-                    <select value={setup.visual_defaults.resolution}
+                    <select value={setup.visual_defaults.resolution || '1920x1080'}
                         onChange={e => setSetup(s => ({...s, visual_defaults: {...s.visual_defaults, resolution: e.target.value}}))}>
                         <option value="1920x1080">1920×1080 (가로)</option>
                         <option value="1080x1920">1080×1920 (세로/Shorts)</option>
                     </select>
                 </label>
-                <label>스타일
-                    <select value={setup.visual_defaults.style}
-                        onChange={e => setSetup(s => ({...s, visual_defaults: {...s.visual_defaults, style: e.target.value}}))}>
-                        <option value="visualizer">Visualizer (파형)</option>
+
+                <label>기본 시각 스타일
+                    <select value={setup.visual_defaults.default_visual_style || 'essential'}
+                        onChange={e => setSetup(s => ({...s, visual_defaults: {...s.visual_defaults, default_visual_style: e.target.value}}))}>
+                        <option value="essential">essential (배경 + 중앙 비주얼)</option>
+                        <option value="single">single (커버 + 가장자리 파형)</option>
                     </select>
                 </label>
+
+                <label>기본 배경 모드
+                    <select value={setup.visual_defaults.default_background_mode || 'static'}
+                        onChange={e => setSetup(s => ({...s, visual_defaults: {...s.visual_defaults, default_background_mode: e.target.value}}))}>
+                        <option value="static">정적 사진</option>
+                        <option value="video_loop">영상 루프 (Pexels)</option>
+                    </select>
+                </label>
+
+                <label>기본 배경 키워드 (비우면 장르 기반 자동)
+                    <input value={setup.visual_defaults.default_background_keyword || ''}
+                        onChange={e => setSetup(s => ({...s, visual_defaults: {...s.visual_defaults, default_background_keyword: e.target.value}}))}
+                        placeholder="lofi cafe, rainy window, mountain ..." />
+                </label>
+
+                <label>배경 이미지 소스 (정적 모드)
+                    <select value={setup.visual_defaults.background_image_source || 'ai'}
+                        onChange={e => setSetup(s => ({...s, visual_defaults: {...s.visual_defaults, background_image_source: e.target.value}}))}>
+                        <option value="ai">AI 생성 (DALL·E)</option>
+                        <option value="pexels">Pexels 스톡 사진</option>
+                    </select>
+                </label>
+
+                <label className="setup-checkbox">
+                    <input type="checkbox"
+                        checked={setup.visual_defaults.subtitle_track_titles ?? true}
+                        onChange={e => setSetup(s => ({...s, visual_defaults: {...s.visual_defaults, subtitle_track_titles: e.target.checked}}))}/>
+                    Mix에서 곡명 자막 표시 (트랙 시작 시 5초)
+                </label>
+
                 <button onClick={() => save({ visual_defaults: setup.visual_defaults })}>저장</button>
             </section>