feat(music): Create 탭 트랙 제목 직접 입력 추가

This commit is contained in:
2026-05-01 15:49:56 +09:00
parent 8a7b5e8a38
commit 4281c1873f
2 changed files with 38 additions and 1 deletions

View File

@@ -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
═══════════════════════════════════════════════════ */

View File

@@ -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