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:
@@ -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;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════
|
||||
|
||||
Reference in New Issue
Block a user