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

refactor(music-lab): 컴포넌트 분할 — AudioPlayer, LyricsTab, CreditsBadge 추출

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
gahusb
2026-04-08 08:48:35 +09:00
parent 6786f8c883
commit 312677e624
5 changed files with 438 additions and 378 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/pages/music/MusicStudio.css
View File

@@ -2426,3 +2426,26 @@
animation: none !important;
}
}
/* ── Phase 1: Credits Badge ─────────────────────────────── */
.ms-credits-badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 14px; border-radius: 20px;
background: rgba(245, 166, 35, 0.1);
border: 1px solid rgba(245, 166, 35, 0.25);
font-family: 'Courier Prime', monospace;
font-size: 0.85rem; color: var(--ms-accent);
}
.ms-credits-badge__icon { font-size: 1rem; }
.ms-credits-badge__value { font-weight: 700; font-size: 1.1rem; }
.ms-credits-badge__label { color: var(--ms-muted); font-size: 0.75rem; text-transform: uppercase; }
.ms-credits-badge.is-low {
background: rgba(231, 76, 60, 0.15);
border-color: rgba(231, 76, 60, 0.4);
color: #e74c3c;
animation: pulse-badge 1.5s ease-in-out infinite;
}
@keyframes pulse-badge {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}

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

@@ -7,15 +7,14 @@ import {
getMusicProviders,
getMusicStatus,
getMusicModels,
getMusicCredits,
extendMusicTrack,
removeVocals,
getSavedLyrics,
saveLyrics,
updateLyrics,
deleteLyrics,
} from '../../api';
import './MusicStudio.css';
import AudioPlayer from './components/AudioPlayer';
import { fmtTime } from './components/AudioPlayer';
import CreditsBadge from './components/CreditsBadge';
import LyricsTab from './components/LyricsTab';
/* ─────────────────────────────────────────────
데이터 상수
@@ -83,12 +82,6 @@ const SIM_STEPS = [
{ msg: 'Track ready!', pct: 100 },
];
/* ─────────────────────────────────────────────
유틸
───────────────────────────────────────────── */
const pad = (n) => String(Math.floor(n)).padStart(2, '0');
const fmtTime = (s) => `${pad(s / 60)}:${pad(s % 60)}`;
/* ─────────────────────────────────────────────
Loading Skeleton
───────────────────────────────────────────── */
@@ -261,125 +254,6 @@ const GenerationProgress = ({ progress, stepMsg }) => (
</div>
);
/* ─────────────────────────────────────────────
Audio Player (실제 <audio> 기반)
───────────────────────────────────────────── */
const AudioPlayer = ({ audioUrl, totalSec, accentColor }) => {
const audioRef = useRef(null);
const [playing, setPlaying] = useState(false);
const [elapsed, setElapsed] = useState(0);
const [duration, setDuration] = useState(totalSec ?? 0);
const [volume, setVolume] = useState(1);
/* 실제 오디오가 없으면 가짜 타이머로 폴백 */
const isFake = !audioUrl;
const timerRef = useRef(null);
const total = duration || totalSec || 60;
const togglePlay = () => {
if (isFake) {
if (playing) {
clearInterval(timerRef.current);
setPlaying(false);
} else {
setPlaying(true);
timerRef.current = setInterval(() => {
setElapsed((e) => {
if (e >= total - 1) {
clearInterval(timerRef.current);
setPlaying(false);
return 0;
}
return e + 1;
});
}, 1000);
}
return;
}
const el = audioRef.current;
if (!el) return;
playing ? el.pause() : el.play();
};
const handleSeek = (e) => {
const rect = e.currentTarget.getBoundingClientRect();
const ratio = (e.clientX - rect.left) / rect.width;
const newTime = ratio * total;
if (!isFake && audioRef.current) {
audioRef.current.currentTime = newTime;
}
setElapsed(newTime);
};
const handleVolumeChange = (e) => {
const v = Number(e.target.value);
setVolume(v);
if (!isFake && audioRef.current) audioRef.current.volume = v;
};
useEffect(() => () => clearInterval(timerRef.current), []);
const progress = (elapsed / total) * 100;
return (
<div className="ms-audio-player" style={{ '--player-accent': accentColor }}>
{!isFake && (
<audio
ref={audioRef}
src={audioUrl}
onLoadedMetadata={(e) => setDuration(e.target.duration)}
onTimeUpdate={(e) => setElapsed(e.target.currentTime)}
onPlay={() => setPlaying(true)}
onPause={() => setPlaying(false)}
onEnded={() => { setPlaying(false); setElapsed(0); }}
/>
)}
<button
type="button"
className={`ms-player__play ${playing ? 'is-playing' : ''}`}
onClick={togglePlay}
aria-label={playing ? '일시정지' : '재생'}
>
{playing ? (
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<rect x="3" y="2" width="4" height="12" rx="1" />
<rect x="9" y="2" width="4" height="12" rx="1" />
</svg>
) : (
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path d="M4 2l10 6-10 6V2z" />
</svg>
)}
</button>
<div className="ms-player__timeline">
<div className="ms-player__bar" onClick={handleSeek} role="slider"
aria-label="재생 위치" aria-valuenow={Math.round(elapsed)} aria-valuemin={0} aria-valuemax={Math.round(total)}>
<div className="ms-player__fill" style={{ width: `${progress}%` }} />
<div className="ms-player__thumb" style={{ left: `${progress}%` }} />
</div>
<div className="ms-player__times">
<span>{fmtTime(elapsed)}</span>
<span>{fmtTime(total)}</span>
</div>
</div>
<div className="ms-volume">
<svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor" aria-hidden>
<path d="M2 5h2.5l3-3v10l-3-3H2V5zm8.5-1.5a4.5 4.5 0 010 7" stroke="currentColor" strokeWidth="1.2" fill="none" strokeLinecap="round"/>
</svg>
<input
type="range" min={0} max={1} step={0.02} value={volume}
onChange={handleVolumeChange}
className="ms-volume__slider"
aria-label="볼륨"
/>
</div>
</div>
);
};
/* ─────────────────────────────────────────────
Track Result Card
───────────────────────────────────────────── */
@@ -611,241 +485,6 @@ 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
───────────────────────────────────────────── */
@@ -874,7 +513,6 @@ export default function MusicStudio() {
const [lyricsLoading, setLyricsLoading] = useState(false);
const [model, setModel] = useState('V4');
const [models, setModels] = useState([]);
const [credits, setCredits] = useState(null);
/* ── 생성 상태 ── */
const [isGenerating, setIsGenerating] = useState(false);
@@ -917,14 +555,11 @@ export default function MusicStudio() {
.catch(() => setProviderError(true));
}, []); // eslint-disable-line react-hooks/exhaustive-deps
/* ── 모델 & 크레딧 로드 ── */
/* ── 모델 로드 ── */
useEffect(() => {
getMusicModels()
.then((data) => setModels(data.models ?? []))
.catch(() => {});
getMusicCredits()
.then((data) => setCredits(data))
.catch(() => {});
}, []);
/* ── 가사 AI 생성 ── */
@@ -1188,14 +823,7 @@ export default function MusicStudio() {
</p>
</div>
<div className="ms-header__right">
{credits && (
<div className="ms-credits">
<span className="ms-credits__label">Credits</span>
<span className="ms-credits__value">
{credits.credits_left ?? credits.remaining ?? '—'}
</span>
</div>
)}
<CreditsBadge />
<SonicRadar isGenerating={isGenerating} accentColor={accentColor} />
</div>
</header>

128
src/pages/music/components/AudioPlayer.jsx Normal file
View File

@@ -0,0 +1,128 @@
import React, { useRef, useState, useEffect } from 'react';
/* ─────────────────────────────────────────────
유틸
───────────────────────────────────────────── */
const pad = (n) => String(Math.floor(n)).padStart(2, '0');
export const fmtTime = (s) => `${pad(s / 60)}:${pad(s % 60)}`;
/* ─────────────────────────────────────────────
Audio Player (실제 <audio> 기반)
───────────────────────────────────────────── */
const AudioPlayer = ({ audioUrl, totalSec, accentColor }) => {
const audioRef = useRef(null);
const [playing, setPlaying] = useState(false);
const [elapsed, setElapsed] = useState(0);
const [duration, setDuration] = useState(totalSec ?? 0);
const [volume, setVolume] = useState(1);
/* 실제 오디오가 없으면 가짜 타이머로 폴백 */
const isFake = !audioUrl;
const timerRef = useRef(null);
const total = duration || totalSec || 60;
const togglePlay = () => {
if (isFake) {
if (playing) {
clearInterval(timerRef.current);
setPlaying(false);
} else {
setPlaying(true);
timerRef.current = setInterval(() => {
setElapsed((e) => {
if (e >= total - 1) {
clearInterval(timerRef.current);
setPlaying(false);
return 0;
}
return e + 1;
});
}, 1000);
}
return;
}
const el = audioRef.current;
if (!el) return;
playing ? el.pause() : el.play();
};
const handleSeek = (e) => {
const rect = e.currentTarget.getBoundingClientRect();
const ratio = (e.clientX - rect.left) / rect.width;
const newTime = ratio * total;
if (!isFake && audioRef.current) {
audioRef.current.currentTime = newTime;
}
setElapsed(newTime);
};
const handleVolumeChange = (e) => {
const v = Number(e.target.value);
setVolume(v);
if (!isFake && audioRef.current) audioRef.current.volume = v;
};
useEffect(() => () => clearInterval(timerRef.current), []);
const progress = (elapsed / total) * 100;
return (
<div className="ms-audio-player" style={{ '--player-accent': accentColor }}>
{!isFake && (
<audio
ref={audioRef}
src={audioUrl}
onLoadedMetadata={(e) => setDuration(e.target.duration)}
onTimeUpdate={(e) => setElapsed(e.target.currentTime)}
onPlay={() => setPlaying(true)}
onPause={() => setPlaying(false)}
onEnded={() => { setPlaying(false); setElapsed(0); }}
/>
)}
<button
type="button"
className={`ms-player__play ${playing ? 'is-playing' : ''}`}
onClick={togglePlay}
aria-label={playing ? '일시정지' : '재생'}
>
{playing ? (
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<rect x="3" y="2" width="4" height="12" rx="1" />
<rect x="9" y="2" width="4" height="12" rx="1" />
</svg>
) : (
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path d="M4 2l10 6-10 6V2z" />
</svg>
)}
</button>
<div className="ms-player__timeline">
<div className="ms-player__bar" onClick={handleSeek} role="slider"
aria-label="재생 위치" aria-valuenow={Math.round(elapsed)} aria-valuemin={0} aria-valuemax={Math.round(total)}>
<div className="ms-player__fill" style={{ width: `${progress}%` }} />
<div className="ms-player__thumb" style={{ left: `${progress}%` }} />
</div>
<div className="ms-player__times">
<span>{fmtTime(elapsed)}</span>
<span>{fmtTime(total)}</span>
</div>
</div>
<div className="ms-volume">
<svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor" aria-hidden>
<path d="M2 5h2.5l3-3v10l-3-3H2V5zm8.5-1.5a4.5 4.5 0 010 7" stroke="currentColor" strokeWidth="1.2" fill="none" strokeLinecap="round"/>
</svg>
<input
type="range" min={0} max={1} step={0.02} value={volume}
onChange={handleVolumeChange}
className="ms-volume__slider"
aria-label="볼륨"
/>
</div>
</div>
);
};
export default AudioPlayer;

36
src/pages/music/components/CreditsBadge.jsx Normal file
View File

@@ -0,0 +1,36 @@
import React, { useEffect, useState, useCallback } from 'react';
import { getMusicCredits } from '../../../api';
const CreditsBadge = () => {
const [credits, setCredits] = useState(null);
const fetchCredits = useCallback(async () => {
try {
const data = await getMusicCredits();
setCredits(data);
} catch {}
}, []);
useEffect(() => {
fetchCredits();
const interval = setInterval(fetchCredits, 30000);
return () => clearInterval(interval);
}, [fetchCredits]);
if (!credits) return null;
const remaining = credits.credits_left ?? credits.remaining ?? credits.data ?? null;
if (remaining == null) return null;
const isLow = remaining <= 10;
return (
<div className={`ms-credits-badge ${isLow ? 'is-low' : ''}`}>
<span className="ms-credits-badge__icon">⚡</span>
<span className="ms-credits-badge__value">{remaining}</span>
<span className="ms-credits-badge__label">credits</span>
</div>
);
};
export default CreditsBadge;

245
src/pages/music/components/LyricsTab.jsx Normal file
View File

@@ -0,0 +1,245 @@
import React, { useEffect, useState } from 'react';
import {
generateMusicLyrics,
getSavedLyrics,
saveLyrics,
updateLyrics,
deleteLyrics,
} from '../../../api';
/* ─────────────────────────────────────────────
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>
);
};
export default LyricsTab;