Music: AI 작사(Lyrics) 전용 탭 추가
- Create ↔ Library 사이에 Lyrics 탭 신설 - 프롬프트 입력 (200자) → Suno AI 가사 생성 - 결과 카드: 제목, 가사 텍스트, 프롬프트 표시 - 클립보드 복사 / "Create에서 사용" 버튼 (가사 자동 세팅 후 Create 탭 전환) - 로딩 shimmer, 에러 배너, 빈 상태 UI Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -2110,6 +2110,243 @@
|
|||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ═══════════════════════════════════════════════════
|
||||||
|
LYRICS TAB
|
||||||
|
═══════════════════════════════════════════════════ */
|
||||||
|
.ms-lyrics-tab {
|
||||||
|
display: grid;
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ms-lyrics-tab__head {
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ms-lyrics-tab__title {
|
||||||
|
font-family: var(--ms-ff-disp);
|
||||||
|
font-size: 28px;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
margin: 0 0 8px;
|
||||||
|
color: var(--ms-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ms-lyrics-tab__desc {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--ms-muted);
|
||||||
|
margin: 0;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Input area ── */
|
||||||
|
.ms-lyrics-tab__form {
|
||||||
|
display: grid;
|
||||||
|
gap: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ms-lyrics-tab__input-wrap {
|
||||||
|
display: grid;
|
||||||
|
gap: 8px;
|
||||||
|
background: var(--ms-surface);
|
||||||
|
border: 1px solid var(--ms-line);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 14px;
|
||||||
|
transition: border-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ms-lyrics-tab__input-wrap:focus-within {
|
||||||
|
border-color: var(--ms-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ms-lyrics-tab__input {
|
||||||
|
width: 100%;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
color: var(--ms-text);
|
||||||
|
font-family: var(--ms-ff-body);
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.6;
|
||||||
|
resize: vertical;
|
||||||
|
min-height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ms-lyrics-tab__input::placeholder {
|
||||||
|
color: var(--ms-dim);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ms-lyrics-tab__input-footer {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ms-lyrics-tab__count {
|
||||||
|
font-family: var(--ms-ff-mono);
|
||||||
|
font-size: 10px;
|
||||||
|
color: var(--ms-dim);
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Accent button ── */
|
||||||
|
.ms-btn--accent {
|
||||||
|
padding: 8px 20px;
|
||||||
|
font-size: 13px;
|
||||||
|
font-family: var(--ms-ff-body);
|
||||||
|
font-weight: 600;
|
||||||
|
background: var(--ms-accent);
|
||||||
|
color: #0c0b09;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: opacity 0.2s, transform 0.15s;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ms-btn--accent:hover:not(:disabled) {
|
||||||
|
opacity: 0.9;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ms-btn--accent:disabled {
|
||||||
|
opacity: 0.4;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ms-btn--accent.is-loading {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ms-btn__spinner {
|
||||||
|
display: inline-block;
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
border: 2px solid rgba(12,11,9,0.2);
|
||||||
|
border-top-color: #0c0b09;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: ms-spin 0.7s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes ms-spin {
|
||||||
|
to { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Empty state ── */
|
||||||
|
.ms-lyrics-tab__empty {
|
||||||
|
text-align: center;
|
||||||
|
padding: 48px 20px;
|
||||||
|
border: 1px dashed var(--ms-line);
|
||||||
|
border-radius: 16px;
|
||||||
|
background: var(--ms-surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ms-lyrics-tab__empty-icon {
|
||||||
|
font-size: 40px;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ms-lyrics-tab__empty p {
|
||||||
|
color: var(--ms-muted);
|
||||||
|
font-size: 13px;
|
||||||
|
margin: 0 0 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ms-lyrics-tab__empty-hint {
|
||||||
|
font-family: var(--ms-ff-mono);
|
||||||
|
font-size: 10px !important;
|
||||||
|
color: var(--ms-dim) !important;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Loading state ── */
|
||||||
|
.ms-lyrics-tab__loading {
|
||||||
|
text-align: center;
|
||||||
|
padding: 32px 20px;
|
||||||
|
border: 1px solid var(--ms-line);
|
||||||
|
border-radius: 16px;
|
||||||
|
background: var(--ms-surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ms-lyrics-tab__loading p {
|
||||||
|
color: var(--ms-muted);
|
||||||
|
font-size: 12px;
|
||||||
|
font-family: var(--ms-ff-mono);
|
||||||
|
margin: 12px 0 0;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ms-lyrics-tab__loading-bar {
|
||||||
|
height: 3px;
|
||||||
|
width: 60%;
|
||||||
|
margin: 0 auto;
|
||||||
|
border-radius: 2px;
|
||||||
|
background: linear-gradient(90deg, transparent, var(--ms-accent), transparent);
|
||||||
|
background-size: 200% 100%;
|
||||||
|
animation: ms-shimmer 1.2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Results list ── */
|
||||||
|
.ms-lyrics-tab__results {
|
||||||
|
display: grid;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Lyrics Card ── */
|
||||||
|
.ms-lyrics-card {
|
||||||
|
background: var(--ms-surface);
|
||||||
|
border: 1px solid var(--ms-line);
|
||||||
|
border-radius: 14px;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: border-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ms-lyrics-card:hover {
|
||||||
|
border-color: color-mix(in srgb, var(--ms-accent) 50%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ms-lyrics-card__header {
|
||||||
|
padding: 14px 16px 10px;
|
||||||
|
border-bottom: 1px solid var(--ms-line-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ms-lyrics-card__title {
|
||||||
|
font-family: var(--ms-ff-disp);
|
||||||
|
font-size: 18px;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
color: var(--ms-text);
|
||||||
|
margin: 0 0 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ms-lyrics-card__prompt {
|
||||||
|
font-family: var(--ms-ff-mono);
|
||||||
|
font-size: 10px;
|
||||||
|
color: var(--ms-dim);
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ms-lyrics-card__text {
|
||||||
|
padding: 14px 16px;
|
||||||
|
margin: 0;
|
||||||
|
font-family: var(--ms-ff-mono);
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1.8;
|
||||||
|
color: rgba(255,255,255,0.75);
|
||||||
|
white-space: pre-wrap;
|
||||||
|
max-height: 400px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ms-lyrics-card__actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 6px;
|
||||||
|
padding: 8px 16px 12px;
|
||||||
|
border-top: 1px solid var(--ms-line-2);
|
||||||
|
}
|
||||||
|
|
||||||
/* ═══════════════════════════════════════════════════
|
/* ═══════════════════════════════════════════════════
|
||||||
REDUCED MOTION
|
REDUCED MOTION
|
||||||
═══════════════════════════════════════════════════ */
|
═══════════════════════════════════════════════════ */
|
||||||
|
|||||||
@@ -607,6 +607,133 @@ const Library = ({ tracks, onDelete, onRefresh, onExtend, onVocalRemoval, isGene
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/* ─────────────────────────────────────────────
|
||||||
|
Lyrics Tab
|
||||||
|
───────────────────────────────────────────── */
|
||||||
|
const LyricsTab = ({ onUseInCreate }) => {
|
||||||
|
const [lyrPrompt, setLyrPrompt] = useState('');
|
||||||
|
const [lyrLoading, setLyrLoading] = useState(false);
|
||||||
|
const [lyrResults, setLyrResults] = useState([]); // [{text, title}]
|
||||||
|
const [lyrError, setLyrError] = useState(null);
|
||||||
|
const [copied, setCopied] = useState(null); // index
|
||||||
|
|
||||||
|
const handleGenerate = async () => {
|
||||||
|
if (!lyrPrompt.trim() || lyrLoading) return;
|
||||||
|
setLyrLoading(true);
|
||||||
|
setLyrError(null);
|
||||||
|
try {
|
||||||
|
const res = await generateMusicLyrics(lyrPrompt.trim());
|
||||||
|
if (res?.text) {
|
||||||
|
setLyrResults((prev) => [{ text: res.text, title: res.title || '', prompt: lyrPrompt.trim() }, ...prev]);
|
||||||
|
} else {
|
||||||
|
setLyrError('가사 생성 결과가 없습니다');
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
setLyrError(e.message || '가사 생성에 실패했습니다');
|
||||||
|
} finally {
|
||||||
|
setLyrLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCopy = (text, idx) => {
|
||||||
|
navigator.clipboard.writeText(text).then(() => {
|
||||||
|
setCopied(idx);
|
||||||
|
setTimeout(() => setCopied(null), 2000);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="ms-lyrics-tab">
|
||||||
|
<div className="ms-lyrics-tab__form">
|
||||||
|
<div className="ms-lyrics-tab__head">
|
||||||
|
<h2 className="ms-lyrics-tab__title">AI Lyrics Generator</h2>
|
||||||
|
<p className="ms-lyrics-tab__desc">
|
||||||
|
원하는 분위기, 주제, 스타일을 설명하면 AI가 가사를 작성합니다.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="ms-lyrics-tab__input-wrap">
|
||||||
|
<textarea
|
||||||
|
className="ms-lyrics-tab__input"
|
||||||
|
placeholder="예: 비 오는 밤, 혼자 걷는 도시의 거리를 배경으로 한 감성적인 발라드 가사"
|
||||||
|
value={lyrPrompt}
|
||||||
|
onChange={(e) => setLyrPrompt(e.target.value)}
|
||||||
|
rows={3}
|
||||||
|
maxLength={200}
|
||||||
|
onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleGenerate(); } }}
|
||||||
|
/>
|
||||||
|
<div className="ms-lyrics-tab__input-footer">
|
||||||
|
<span className="ms-lyrics-tab__count">{lyrPrompt.length}/200</span>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`ms-btn ms-btn--accent ${lyrLoading ? 'is-loading' : ''}`}
|
||||||
|
onClick={handleGenerate}
|
||||||
|
disabled={!lyrPrompt.trim() || lyrLoading}
|
||||||
|
>
|
||||||
|
{lyrLoading ? (
|
||||||
|
<><span className="ms-btn__spinner" /> 생성 중...</>
|
||||||
|
) : (
|
||||||
|
'✨ 가사 생성'
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{lyrError && (
|
||||||
|
<div className="ms-error-banner">
|
||||||
|
<span>⚠ {lyrError}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{lyrResults.length === 0 && !lyrLoading && (
|
||||||
|
<div className="ms-lyrics-tab__empty">
|
||||||
|
<span className="ms-lyrics-tab__empty-icon">🎤</span>
|
||||||
|
<p>프롬프트를 입력하고 가사를 생성해보세요</p>
|
||||||
|
<p className="ms-lyrics-tab__empty-hint">
|
||||||
|
생성된 가사는 [Verse], [Chorus] 등 섹션 태그가 포함됩니다
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{lyrLoading && (
|
||||||
|
<div className="ms-lyrics-tab__loading">
|
||||||
|
<div className="ms-lyrics-tab__loading-bar" />
|
||||||
|
<p>AI가 가사를 작성하고 있습니다...</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="ms-lyrics-tab__results">
|
||||||
|
{lyrResults.map((item, idx) => (
|
||||||
|
<div key={idx} className="ms-lyrics-card">
|
||||||
|
<div className="ms-lyrics-card__header">
|
||||||
|
{item.title && <h3 className="ms-lyrics-card__title">{item.title}</h3>}
|
||||||
|
<span className="ms-lyrics-card__prompt">{item.prompt}</span>
|
||||||
|
</div>
|
||||||
|
<pre className="ms-lyrics-card__text">{item.text}</pre>
|
||||||
|
<div className="ms-lyrics-card__actions">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="ms-btn ms-btn--ghost ms-btn--sm"
|
||||||
|
onClick={() => handleCopy(item.text, idx)}
|
||||||
|
>
|
||||||
|
{copied === idx ? '✓ 복사됨' : '📋 복사'}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="ms-btn ms-btn--ghost ms-btn--sm"
|
||||||
|
onClick={() => onUseInCreate(item.text)}
|
||||||
|
>
|
||||||
|
🎵 Create에서 사용
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
/* ─────────────────────────────────────────────
|
/* ─────────────────────────────────────────────
|
||||||
Main Page
|
Main Page
|
||||||
───────────────────────────────────────────── */
|
───────────────────────────────────────────── */
|
||||||
@@ -970,6 +1097,13 @@ export default function MusicStudio() {
|
|||||||
>
|
>
|
||||||
<span className="ms-tab__icon">⚗</span> Create
|
<span className="ms-tab__icon">⚗</span> Create
|
||||||
</button>
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`ms-tab ${tab === 'lyrics' ? 'is-active' : ''}`}
|
||||||
|
onClick={() => setTab('lyrics')}
|
||||||
|
>
|
||||||
|
<span className="ms-tab__icon">🎤</span> Lyrics
|
||||||
|
</button>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className={`ms-tab ${tab === 'library' ? 'is-active' : ''}`}
|
className={`ms-tab ${tab === 'library' ? 'is-active' : ''}`}
|
||||||
@@ -995,6 +1129,11 @@ export default function MusicStudio() {
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* ═══ LYRICS TAB ═══ */}
|
||||||
|
{tab === 'lyrics' && (
|
||||||
|
<LyricsTab onUseInCreate={(text) => { setLyrics(text); setInstrumental(false); setProvider('suno'); setTab('create'); }} />
|
||||||
|
)}
|
||||||
|
|
||||||
{/* ═══ CREATE TAB ═══ */}
|
{/* ═══ CREATE TAB ═══ */}
|
||||||
{tab === 'create' && (
|
{tab === 'create' && (
|
||||||
<div className="ms-layout">
|
<div className="ms-layout">
|
||||||
|
|||||||
Reference in New Issue
Block a user