Music Lyrics: 가사 저장/수정/삭제 기능 추가

- AI 생성 가사 즉시 DB 저장 (세션 휘발 → 영구 보관)
- 저장된 가사 목록 자동 로드 (탭 진입 시)
- 인라인 수정: 제목 + 가사 텍스트 편집 후 저장/취소
- 개별 삭제 버튼
- api.js: getSavedLyrics, saveLyrics, updateLyrics, deleteLyrics

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/api.js

@@ -312,6 +312,28 @@ export function removeVocals(payload) {
   return apiPost('/api/music/vocal-removal', payload);
 }
 
+// ── 저장된 가사 CRUD ─────────────────────────────────────────────────────────
+
+// GET /api/music/lyrics/library → { lyrics: [{ id, title, text, prompt, created_at, updated_at }] }
+export function getSavedLyrics() {
+  return apiGet('/api/music/lyrics/library');
+}
+
+// POST /api/music/lyrics/library  body: { title, text, prompt }
+export function saveLyrics(data) {
+  return apiPost('/api/music/lyrics/library', data);
+}
+
+// PUT /api/music/lyrics/library/:id  body: { title?, text?, prompt? }
+export function updateLyrics(id, data) {
+  return apiPut(`/api/music/lyrics/library/${id}`, data);
+}
+
+// DELETE /api/music/lyrics/library/:id
+export function deleteLyrics(id) {
+  return apiDelete(`/api/music/lyrics/library/${id}`);
+}
+
 // ── 로또 고도화 API ────────────────────────────────────────────────────────────
 
 // GET /api/lotto/stats/performance

src/pages/music/MusicStudio.css

@@ -2110,6 +2110,311 @@
     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);
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 8px;
+}
+
+.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__date {
+    font-family: var(--ms-ff-mono);
+    font-size: 9px;
+    color: var(--ms-dim);
+    letter-spacing: 0.04em;
+    margin-left: auto;
+    flex-shrink: 0;
+}
+
+.ms-lyrics-card__actions {
+    display: flex;
+    gap: 6px;
+    padding: 8px 16px 12px;
+    border-top: 1px solid var(--ms-line-2);
+    flex-wrap: wrap;
+}
+
+/* ── 수정 모드 ── */
+.ms-lyrics-card.is-editing {
+    border-color: var(--ms-accent);
+    box-shadow: 0 0 16px rgba(245, 166, 35, 0.08);
+}
+
+.ms-lyrics-card__title-input {
+    width: 100%;
+    background: var(--ms-surface2);
+    border: 1px solid var(--ms-line);
+    border-radius: 6px;
+    padding: 6px 10px;
+    font-family: var(--ms-ff-disp);
+    font-size: 16px;
+    letter-spacing: 0.04em;
+    color: var(--ms-text);
+    outline: none;
+    margin-bottom: 4px;
+}
+
+.ms-lyrics-card__title-input:focus {
+    border-color: var(--ms-accent);
+}
+
+.ms-lyrics-card__text-input {
+    width: 100%;
+    background: var(--ms-surface2);
+    border: none;
+    border-top: 1px solid var(--ms-line-2);
+    border-bottom: 1px solid var(--ms-line-2);
+    padding: 14px 16px;
+    font-family: var(--ms-ff-mono);
+    font-size: 12px;
+    line-height: 1.8;
+    color: rgba(255,255,255,0.85);
+    resize: vertical;
+    min-height: 200px;
+    outline: none;
+}
+
+.ms-btn--danger-text {
+    color: #e85c3a !important;
+    opacity: 0.7;
+}
+
+.ms-btn--danger-text:hover {
+    opacity: 1;
+}
+
+.ms-btn--accent.ms-btn--sm {
+    padding: 3px 10px;
+    font-size: 11px;
+}
+
 /* ═══════════════════════════════════════════════════
    REDUCED MOTION
 ═══════════════════════════════════════════════════ */

src/pages/music/MusicStudio.jsx

@@ -10,6 +10,10 @@ import {
     getMusicCredits,
     extendMusicTrack,
     removeVocals,
+    getSavedLyrics,
+    saveLyrics,
+    updateLyrics,
+    deleteLyrics,
 } from '../../api';
 import './MusicStudio.css';
 
@@ -607,6 +611,241 @@ const Library = ({ tracks, onDelete, onRefresh, onExtend, onVocalRemoval, isGene
     );
 };
 
+/* ─────────────────────────────────────────────
+   Lyrics Tab
+───────────────────────────────────────────── */
+const LyricsTab = ({ onUseInCreate }) => {
+    const [lyrPrompt, setLyrPrompt]     = useState('');
+    const [lyrLoading, setLyrLoading]   = useState(false);
+    const [lyrError, setLyrError]       = useState(null);
+    const [copied, setCopied]           = useState(null);  // id
+    const [saved, setSaved]             = useState([]);     // DB에 저장된 가사
+    const [loadingSaved, setLoadingSaved] = useState(true);
+    const [editingId, setEditingId]     = useState(null);
+    const [editTitle, setEditTitle]     = useState('');
+    const [editText, setEditText]       = useState('');
+
+    /* ── 저장된 가사 로드 ── */
+    useEffect(() => {
+        setLoadingSaved(true);
+        getSavedLyrics()
+            .then((data) => setSaved(data.lyrics ?? []))
+            .catch(() => {})
+            .finally(() => setLoadingSaved(false));
+    }, []);
+
+    /* ── AI 생성 → 즉시 저장 ── */
+    const handleGenerate = async () => {
+        if (!lyrPrompt.trim() || lyrLoading) return;
+        setLyrLoading(true);
+        setLyrError(null);
+        try {
+            const res = await generateMusicLyrics(lyrPrompt.trim());
+            if (res?.text) {
+                const record = await saveLyrics({
+                    title: res.title || '',
+                    text: res.text,
+                    prompt: lyrPrompt.trim(),
+                });
+                setSaved((prev) => [record, ...prev]);
+            } else {
+                setLyrError('가사 생성 결과가 없습니다');
+            }
+        } catch (e) {
+            setLyrError(e.message || '가사 생성에 실패했습니다');
+        } finally {
+            setLyrLoading(false);
+        }
+    };
+
+    /* ── 복사 ── */
+    const handleCopy = (text, id) => {
+        navigator.clipboard.writeText(text).then(() => {
+            setCopied(id);
+            setTimeout(() => setCopied(null), 2000);
+        });
+    };
+
+    /* ── 삭제 ── */
+    const handleDelete = async (id) => {
+        try {
+            await deleteLyrics(id);
+            setSaved((prev) => prev.filter((l) => l.id !== id));
+        } catch {}
+    };
+
+    /* ── 수정 시작 ── */
+    const startEdit = (item) => {
+        setEditingId(item.id);
+        setEditTitle(item.title);
+        setEditText(item.text);
+    };
+
+    /* ── 수정 저장 ── */
+    const handleSaveEdit = async () => {
+        if (editingId == null) return;
+        try {
+            const updated = await updateLyrics(editingId, { title: editTitle, text: editText });
+            setSaved((prev) => prev.map((l) => l.id === editingId ? updated : l));
+            setEditingId(null);
+        } catch {}
+    };
+
+    /* ── 수정 취소 ── */
+    const cancelEdit = () => setEditingId(null);
+
+    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>
+
+            {lyrLoading && (
+                <div className="ms-lyrics-tab__loading">
+                    <div className="ms-lyrics-tab__loading-bar" />
+                    <p>AI가 가사를 작성하고 있습니다...</p>
+                </div>
+            )}
+
+            {/* 저장된 가사 목록 */}
+            {loadingSaved && (
+                <div className="ms-lyrics-tab__loading">
+                    <div className="ms-lyrics-tab__loading-bar" />
+                    <p>저장된 가사를 불러오는 중...</p>
+                </div>
+            )}
+
+            {!loadingSaved && saved.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">
+                        프롬프트를 입력하면 AI가 [Verse], [Chorus] 등 섹션이 포함된 가사를 작성합니다
+                    </p>
+                </div>
+            )}
+
+            <div className="ms-lyrics-tab__results">
+                {saved.map((item) => (
+                    <div key={item.id} className={`ms-lyrics-card ${editingId === item.id ? 'is-editing' : ''}`}>
+                        <div className="ms-lyrics-card__header">
+                            {editingId === item.id ? (
+                                <input
+                                    className="ms-lyrics-card__title-input"
+                                    value={editTitle}
+                                    onChange={(e) => setEditTitle(e.target.value)}
+                                    placeholder="제목"
+                                />
+                            ) : (
+                                <>
+                                    {item.title && <h3 className="ms-lyrics-card__title">{item.title}</h3>}
+                                    <span className="ms-lyrics-card__prompt">{item.prompt}</span>
+                                </>
+                            )}
+                            <span className="ms-lyrics-card__date">
+                                {item.created_at ? new Date(item.created_at).toLocaleDateString('ko-KR') : ''}
+                            </span>
+                        </div>
+
+                        {editingId === item.id ? (
+                            <textarea
+                                className="ms-lyrics-card__text-input"
+                                value={editText}
+                                onChange={(e) => setEditText(e.target.value)}
+                                rows={12}
+                            />
+                        ) : (
+                            <pre className="ms-lyrics-card__text">{item.text}</pre>
+                        )}
+
+                        <div className="ms-lyrics-card__actions">
+                            {editingId === item.id ? (
+                                <>
+                                    <button type="button" className="ms-btn ms-btn--accent ms-btn--sm" onClick={handleSaveEdit}>
+                                        ✓ 저장
+                                    </button>
+                                    <button type="button" className="ms-btn ms-btn--ghost ms-btn--sm" onClick={cancelEdit}>
+                                        취소
+                                    </button>
+                                </>
+                            ) : (
+                                <>
+                                    <button
+                                        type="button"
+                                        className="ms-btn ms-btn--ghost ms-btn--sm"
+                                        onClick={() => handleCopy(item.text, item.id)}
+                                    >
+                                        {copied === item.id ? '✓ 복사됨' : '📋 복사'}
+                                    </button>
+                                    <button
+                                        type="button"
+                                        className="ms-btn ms-btn--ghost ms-btn--sm"
+                                        onClick={() => onUseInCreate(item.text)}
+                                    >
+                                        🎵 Create에서 사용
+                                    </button>
+                                    <button
+                                        type="button"
+                                        className="ms-btn ms-btn--ghost ms-btn--sm"
+                                        onClick={() => startEdit(item)}
+                                    >
+                                        ✏️ 수정
+                                    </button>
+                                    <button
+                                        type="button"
+                                        className="ms-btn ms-btn--ghost ms-btn--sm ms-btn--danger-text"
+                                        onClick={() => handleDelete(item.id)}
+                                    >
+                                        🗑 삭제
+                                    </button>
+                                </>
+                            )}
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+};
+
 /* ─────────────────────────────────────────────
    Main Page
 ───────────────────────────────────────────── */
@@ -970,6 +1209,13 @@ export default function MusicStudio() {
                 >
                     <span className="ms-tab__icon">⚗</span> Create
                 </button>
+                <button
+                    type="button"
+                    className={`ms-tab ${tab === 'lyrics' ? 'is-active' : ''}`}
+                    onClick={() => setTab('lyrics')}
+                >
+                    <span className="ms-tab__icon">🎤</span> Lyrics
+                </button>
                 <button
                     type="button"
                     className={`ms-tab ${tab === 'library' ? 'is-active' : ''}`}
@@ -995,6 +1241,11 @@ export default function MusicStudio() {
                 />
             )}
 
+            {/* ═══ LYRICS TAB ═══ */}
+            {tab === 'lyrics' && (
+                <LyricsTab onUseInCreate={(text) => { setLyrics(text); setInstrumental(false); setProvider('suno'); setTab('create'); }} />
+            )}
+
             {/* ═══ CREATE TAB ═══ */}
             {tab === 'create' && (
                 <div className="ms-layout">