From 4281c1873f3114fc1b8c5d0f507671addc85f612 Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Fri, 1 May 2026 15:49:56 +0900
Subject: [PATCH] =?UTF-8?q?feat(music):=20Create=20=ED=83=AD=20=ED=8A=B8?=
 =?UTF-8?q?=EB=9E=99=20=EC=A0=9C=EB=AA=A9=20=EC=A7=81=EC=A0=91=20=EC=9E=85?=
 =?UTF-8?q?=EB=A0=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/music/MusicStudio.css | 21 +++++++++++++++++++++
 src/pages/music/MusicStudio.jsx | 18 +++++++++++++++++-
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/src/pages/music/MusicStudio.css b/src/pages/music/MusicStudio.css
index d4b743a..8956cf5 100644
--- a/src/pages/music/MusicStudio.css
+++ b/src/pages/music/MusicStudio.css
@@ -932,6 +932,27 @@
     margin: 0;
 }
 
+/* ── Track title input ── */
+.ms-title-input-wrap {
+    padding: 0 24px;
+    margin-bottom: 12px;
+}
+
+.ms-title-input {
+    width: 100%;
+    box-sizing: border-box;
+    background: #1f2937;
+    border: 1px solid #374151;
+    border-radius: 8px;
+    padding: 9px 14px;
+    color: #ccc;
+    font-size: 13px;
+    text-align: center;
+}
+
+.ms-title-input::placeholder { color: #4b5563; }
+.ms-title-input:focus { outline: none; border-color: var(--ms-accent, #22c55e); }
+
 /* ═══════════════════════════════════════════════════
    GENERATE BUTTON
 ═══════════════════════════════════════════════════ */
diff --git a/src/pages/music/MusicStudio.jsx b/src/pages/music/MusicStudio.jsx
index e7a89f5..095b7b4 100644
--- a/src/pages/music/MusicStudio.jsx
+++ b/src/pages/music/MusicStudio.jsx
@@ -536,6 +536,7 @@ export default function MusicStudio() {
     const [musicalKey, setMusicalKey] = useState('C');
     const [scale,      setScale]      = useState('Major');
     const [prompt,     setPrompt]     = useState('');
+    const [customTitle, setCustomTitle] = useState('');
 
     /* ── Suno 전용 상태 ── */
     const [lyrics,        setLyrics]        = useState('');
@@ -736,7 +737,7 @@ export default function MusicStudio() {
 
         const durSec   = DURATIONS.find((d) => d.id === duration)?.sec ?? 60;
         const moodLabel = moods[0] ? MOODS.find((m) => m.id === moods[0])?.label : 'Original';
-        const title    = `${activeGenre?.label} — ${moodLabel} Mix`;
+        const title    = customTitle.trim() || `${activeGenre?.label} — ${moodLabel} Mix`;
         const instList = instruments.length > 0 ? instruments : ['piano', 'synth', 'bass'];
 
         const payload = {
@@ -1073,6 +1074,7 @@ export default function MusicStudio() {
         setTrack(null);
         setGenProgress(0);
         setGenError(null);
+        setCustomTitle('');
         clearInterval(pollRef.current);
     };
 
@@ -1689,6 +1691,20 @@ export default function MusicStudio() {
                             </div>
                         </div>
 
+                        {/* Track title input */}
+                        {!track && (
+                            <div className="ms-title-input-wrap">
+                                <input
+                                    type="text"
+                                    className="ms-title-input"
+                                    placeholder="트랙 제목 (비워두면 자동 생성)"
+                                    value={customTitle}
+                                    onChange={(e) => setCustomTitle(e.target.value)}
+                                    maxLength={80}
+                                />
+                            </div>
+                        )}
+
                         {/* Generate button */}
                         {!track && (
                             <button