feat(music): Create 탭 트랙 제목 직접 입력 추가
This commit is contained in:
@@ -932,6 +932,27 @@
|
|||||||
margin: 0;
|
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
|
GENERATE BUTTON
|
||||||
═══════════════════════════════════════════════════ */
|
═══════════════════════════════════════════════════ */
|
||||||
|
|||||||
@@ -536,6 +536,7 @@ export default function MusicStudio() {
|
|||||||
const [musicalKey, setMusicalKey] = useState('C');
|
const [musicalKey, setMusicalKey] = useState('C');
|
||||||
const [scale, setScale] = useState('Major');
|
const [scale, setScale] = useState('Major');
|
||||||
const [prompt, setPrompt] = useState('');
|
const [prompt, setPrompt] = useState('');
|
||||||
|
const [customTitle, setCustomTitle] = useState('');
|
||||||
|
|
||||||
/* ── Suno 전용 상태 ── */
|
/* ── Suno 전용 상태 ── */
|
||||||
const [lyrics, setLyrics] = useState('');
|
const [lyrics, setLyrics] = useState('');
|
||||||
@@ -736,7 +737,7 @@ export default function MusicStudio() {
|
|||||||
|
|
||||||
const durSec = DURATIONS.find((d) => d.id === duration)?.sec ?? 60;
|
const durSec = DURATIONS.find((d) => d.id === duration)?.sec ?? 60;
|
||||||
const moodLabel = moods[0] ? MOODS.find((m) => m.id === moods[0])?.label : 'Original';
|
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 instList = instruments.length > 0 ? instruments : ['piano', 'synth', 'bass'];
|
||||||
|
|
||||||
const payload = {
|
const payload = {
|
||||||
@@ -1073,6 +1074,7 @@ export default function MusicStudio() {
|
|||||||
setTrack(null);
|
setTrack(null);
|
||||||
setGenProgress(0);
|
setGenProgress(0);
|
||||||
setGenError(null);
|
setGenError(null);
|
||||||
|
setCustomTitle('');
|
||||||
clearInterval(pollRef.current);
|
clearInterval(pollRef.current);
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -1689,6 +1691,20 @@ export default function MusicStudio() {
|
|||||||
</div>
|
</div>
|
||||||
</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 */}
|
{/* Generate button */}
|
||||||
{!track && (
|
{!track && (
|
||||||
<button
|
<button
|
||||||
|
|||||||
Reference in New Issue
Block a user