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

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

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-05 19:11:47 +09:00
parent c9e29bdad9
commit e8e45391ae
3 changed files with 236 additions and 34 deletions

View File

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