From 1847771ad2644f41939a2a735228aaef77947ef8 Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Fri, 1 May 2026 15:01:38 +0900
Subject: [PATCH] =?UTF-8?q?fix(music):=20TrendsTab=20=EB=A1=9C=EB=94=A9?=
 =?UTF-8?q?=EC=83=81=ED=83=9C=C2=B7=EC=97=90=EB=9F=AC=ED=94=BC=EB=93=9C?=
 =?UTF-8?q?=EB=B0=B1=C2=B7=EB=A9=94=ED=83=80=EB=8D=B0=EC=9D=B4=ED=84=B0=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
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 | 40 +++++++++++++++++-------
 1 file changed, 28 insertions(+), 12 deletions(-)

diff --git a/src/pages/music/components/TrendsTab.jsx b/src/pages/music/components/TrendsTab.jsx
index f241de8..726b637 100644
--- a/src/pages/music/components/TrendsTab.jsx
+++ b/src/pages/music/components/TrendsTab.jsx
@@ -10,6 +10,7 @@ const FLAG = { BR: '🇧🇷', US: '🇺🇸', ID: '🇮🇩', MX: '🇲🇽', K
 function fmtDateTime(iso) {
     if (!iso) return null;
     const d = new Date(iso);
+    if (isNaN(d.getTime())) return iso.slice(0, 10);
     const today = new Date().toDateString();
     if (d.toDateString() === today) {
         return `오늘 ${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}`;
@@ -24,16 +25,25 @@ export default function TrendsTab() {
     const [selectedReport, setSelectedReport] = useState(null);
     const [researching,    setResearching]    = useState(false);
     const [copiedIdx,      setCopiedIdx]      = useState(null);
+    const [loading,        setLoading]        = useState(true);
+    const [researchMsg,    setResearchMsg]    = useState('');
 
     const loadAll = async () => {
-        const [latest, rpts, sugg] = await Promise.all([
-            getLatestTrendReport().catch(() => null),
-            getTrendReports().catch(() => []),
-            getMarketSuggestions().catch(() => []),
-        ]);
-        setLatestReport(latest);
-        setReports(Array.isArray(rpts) ? rpts : rpts.reports ?? []);
-        setSuggestions(Array.isArray(sugg) ? sugg : sugg.suggestions ?? []);
+        setLoading(true);
+        try {
+            const [latest, rpts, sugg] = await Promise.all([
+                getLatestTrendReport().catch(() => null),
+                getTrendReports().catch(() => []),
+                getMarketSuggestions().catch(() => []),
+            ]);
+            setLatestReport(latest);
+            setReports(Array.isArray(rpts) ? rpts : rpts.reports ?? []);
+            setSuggestions(Array.isArray(sugg) ? sugg : sugg.suggestions ?? []);
+        } catch (e) {
+            console.error('loadAll:', e);
+        } finally {
+            setLoading(false);
+        }
     };
 
     useEffect(() => { loadAll(); }, []);
@@ -42,6 +52,8 @@ export default function TrendsTab() {
         setResearching(true);
         try {
             await triggerYoutubeResearch();
+            setResearchMsg('수집이 시작되었습니다. 잠시 후 새로고침하세요.');
+            setTimeout(() => setResearchMsg(''), 4000);
         } catch (e) {
             console.error('triggerYoutubeResearch:', e);
         } finally {
@@ -66,6 +78,8 @@ export default function TrendsTab() {
         ? (selectedReport.recommended_styles ?? [])
         : suggestions;
 
+    if (loading) return <div className="yt-content"><p className="yt-empty">데이터 로딩 중...</p></div>;
+
     return (
         <div className="yt-content">
             {/* 수집 상태 바 */}
@@ -85,6 +99,7 @@ export default function TrendsTab() {
                 >
                     {researching ? '수집 중...' : '↻ 수동 수집'}
                 </button>
+                {researchMsg && <p className="yt-empty" style={{ color: '#22c55e', marginTop: 4 }}>{researchMsg}</p>}
             </div>
 
             {/* 인기 장르 Top 5 */}
@@ -168,9 +183,10 @@ export default function TrendsTab() {
                             <div
                                 key={r.id ?? r.report_date}
                                 className={`yt-report-row ${selectedReport?.report_date === r.report_date ? 'is-selected' : ''}`}
-                                onClick={() => setSelectedReport(
-                                    selectedReport?.report_date === r.report_date ? null : r
-                                )}
+                                onClick={() => {
+                                    setSelectedReport(selectedReport?.report_date === r.report_date ? null : r);
+                                    setCopiedIdx(null);
+                                }}
                             >
                                 <span className="yt-report-row__date">
                                     {r.report_date}
@@ -179,7 +195,7 @@ export default function TrendsTab() {
                                     )}
                                 </span>
                                 <span className="yt-report-row__meta">
-                                    {r.top_genres?.length ?? 0}개 장르 · {r.recommended_styles?.length ?? 0}개 추천
+                                    {r.insights ? r.insights.slice(0, 60) + (r.insights.length >= 60 ? '…' : '') : ''}
                                 </span>
                                 <span className="yt-report-row__action">보기 →</span>
                             </div>