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

@@ -2311,6 +2311,10 @@
 .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 {
@@ -2340,11 +2344,75 @@
     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;
 }
 
 /* ═══════════════════════════════════════════════════

src/pages/music/MusicStudio.jsx

@@ -10,6 +10,10 @@ import {
     getMusicCredits,
     extendMusicTrack,
     removeVocals,
+    getSavedLyrics,
+    saveLyrics,
+    updateLyrics,
+    deleteLyrics,
 } from '../../api';
 import './MusicStudio.css';
 
@@ -613,10 +617,24 @@ const Library = ({ tracks, onDelete, onRefresh, onExtend, onVocalRemoval, isGene
 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 [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);
@@ -624,7 +642,12 @@ const LyricsTab = ({ onUseInCreate }) => {
         try {
             const res = await generateMusicLyrics(lyrPrompt.trim());
             if (res?.text) {
-                setLyrResults((prev) => [{ text: res.text, title: res.title || '', prompt: lyrPrompt.trim() }, ...prev]);
+                const record = await saveLyrics({
+                    title: res.title || '',
+                    text: res.text,
+                    prompt: lyrPrompt.trim(),
+                });
+                setSaved((prev) => [record, ...prev]);
             } else {
                 setLyrError('가사 생성 결과가 없습니다');
             }
@@ -635,13 +658,42 @@ const LyricsTab = ({ onUseInCreate }) => {
         }
     };
 
-    const handleCopy = (text, idx) => {
+    /* ── 복사 ── */
+    const handleCopy = (text, id) => {
         navigator.clipboard.writeText(text).then(() => {
-            setCopied(idx);
+            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">
@@ -686,16 +738,6 @@ const LyricsTab = ({ onUseInCreate }) => {
                 )}
             </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" />
@@ -703,21 +745,75 @@ const LyricsTab = ({ onUseInCreate }) => {
                 </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">
-                {lyrResults.map((item, idx) => (
+                {saved.map((item) => (
-                    <div key={idx} className="ms-lyrics-card">
+                    <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, idx)}
+                                        onClick={() => handleCopy(item.text, item.id)}
                                     >
-                                {copied === idx ? '✓ 복사됨' : '📋 복사'}
+                                        {copied === item.id ? '✓ 복사됨' : '📋 복사'}
                                     </button>
                                     <button
                                         type="button"
@@ -726,6 +822,22 @@ const LyricsTab = ({ onUseInCreate }) => {
                                     >
                                         🎵 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>
                 ))}