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() { + {/* Track title input */} + {!track && ( +
+ setCustomTitle(e.target.value)} + maxLength={80} + /> +
+ )} + {/* Generate button */} {!track && (