From 0f0ca8610d8fc35135019ef7c8f29f5ebb1c857b Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Fri, 1 May 2026 14:56:47 +0900
Subject: [PATCH] =?UTF-8?q?fix(music):=20TrendsTab=20=EB=A6=AC=ED=8F=AC?=
 =?UTF-8?q?=ED=8A=B8=20selected=5Fstyles=20=ED=91=9C=EC=8B=9C=20+=20create?=
 =?UTF-8?q?d=5Fat=20=EC=8B=9C=EA=B0=84=20=ED=8F=AC=EB=A7=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/pages/music/components/TrendsTab.jsx | 27 ++++++++++++++++++++----
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/pages/music/components/TrendsTab.jsx b/src/pages/music/components/TrendsTab.jsx
index e070694..f241de8 100644
--- a/src/pages/music/components/TrendsTab.jsx
+++ b/src/pages/music/components/TrendsTab.jsx
@@ -7,6 +7,16 @@ import {
 
 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() {
     const [latestReport,   setLatestReport]   = useState(null);
     const [reports,        setReports]        = useState([]);
@@ -51,6 +61,11 @@ export default function TrendsTab() {
     const topGenres = displayReport?.top_genres?.slice(0, 5) ?? [];
     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 (
         <div className="yt-content">
             {/* 수집 상태 바 */}
@@ -58,7 +73,7 @@ export default function TrendsTab() {
                 <div className="yt-status-bar__left">
                     <span className="yt-status-dot" />
                     <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}개 장르`}
                     </span>
                 </div>
@@ -106,11 +121,15 @@ export default function TrendsTab() {
             </div>
 
             {/* Suno 프롬프트 추천 */}
-            {suggestions.length > 0 && (
+            {displaySuggestions.length > 0 && (
                 <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">
-                        {suggestions.map((s, i) => (
+                        {displaySuggestions.map((s, i) => (
                             <div key={i} className="yt-prompt-card">
                                 <div className="yt-prompt-card__header">
                                     <span className="yt-prompt-card__genre">{s.genre}</span>