fix(music): TrendsTab 리포트 selected_styles 표시 + created_at 시간 포맷

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-05-01 14:56:47 +09:00
parent 3f2fdb095c
commit 0f0ca8610d

View File

@@ -7,6 +7,16 @@ import {
const FLAG = { BR: '🇧🇷', US: '🇺🇸', ID: '🇮🇩', MX: '🇲🇽', KR: '🇰🇷' }; const FLAG = { BR: '🇧🇷', US: '🇺🇸', ID: '🇮🇩', MX: '🇲🇽', KR: '🇰🇷' };
function fmtDateTime(iso) {
if (!iso) return null;
const d = new Date(iso);
const today = new Date().toDateString();
if (d.toDateString() === today) {
return `오늘 ${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}`;
}
return iso.slice(0, 10); // YYYY-MM-DD
}
export default function TrendsTab() { export default function TrendsTab() {
const [latestReport, setLatestReport] = useState(null); const [latestReport, setLatestReport] = useState(null);
const [reports, setReports] = useState([]); const [reports, setReports] = useState([]);
@@ -51,6 +61,11 @@ export default function TrendsTab() {
const topGenres = displayReport?.top_genres?.slice(0, 5) ?? []; const topGenres = displayReport?.top_genres?.slice(0, 5) ?? [];
const maxScore = topGenres.length > 0 ? Math.max(...topGenres.map(g => g.score)) : 1; const maxScore = topGenres.length > 0 ? Math.max(...topGenres.map(g => g.score)) : 1;
// Suno 프롬프트: 선택된 리포트가 있으면 그것의 recommended_styles, 없으면 라이브 suggestions
const displaySuggestions = selectedReport
? (selectedReport.recommended_styles ?? [])
: suggestions;
return ( return (
<div className="yt-content"> <div className="yt-content">
{/* 수집 상태 바 */} {/* 수집 상태 바 */}
@@ -58,7 +73,7 @@ export default function TrendsTab() {
<div className="yt-status-bar__left"> <div className="yt-status-bar__left">
<span className="yt-status-dot" /> <span className="yt-status-dot" />
<span className="yt-status-bar__text"> <span className="yt-status-bar__text">
마지막 수집: <strong>{latestReport?.report_date ?? '없음'}</strong> 마지막 수집 일시: <strong>{fmtDateTime(latestReport?.created_at) ?? latestReport?.report_date ?? '없음'}</strong>
{latestReport && ` · ${latestReport.top_genres?.length ?? 0}개 장르`} {latestReport && ` · ${latestReport.top_genres?.length ?? 0}개 장르`}
</span> </span>
</div> </div>
@@ -106,11 +121,15 @@ export default function TrendsTab() {
</div> </div>
{/* Suno 프롬프트 추천 */} {/* Suno 프롬프트 추천 */}
{suggestions.length > 0 && ( {displaySuggestions.length > 0 && (
<div className="yt-card"> <div className="yt-card">
<h3 className="yt-card__title"> AI 추천 Suno 프롬프트</h3> <h3 className="yt-card__title">
{selectedReport
? `${selectedReport.report_date} 추천 프롬프트`
: '✨ AI 추천 Suno 프롬프트'}
</h3>
<div className="yt-prompt-list"> <div className="yt-prompt-list">
{suggestions.map((s, i) => ( {displaySuggestions.map((s, i) => (
<div key={i} className="yt-prompt-card"> <div key={i} className="yt-prompt-card">
<div className="yt-prompt-card__header"> <div className="yt-prompt-card__header">
<span className="yt-prompt-card__genre">{s.genre}</span> <span className="yt-prompt-card__genre">{s.genre}</span>