gahusb/web-page
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

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

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

22
src/api.js
View File

@@ -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

68
src/pages/music/MusicStudio.css
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;
}
/* ═══════════════════════════════════════════════════

150
src/pages/music/MusicStudio.jsx
View File

@@ -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) => (
<div key={idx} className="ms-lyrics-card">
{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, 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>
))}