From 28b072df42983a78f6b0b6544ee3b704470ef506 Mon Sep 17 00:00:00 2001
From: "hehihoho3@gmail.com" <hehihoho3@gmail.com>
Date: Wed, 8 Jul 2026 12:52:39 +0900
Subject: [PATCH] =?UTF-8?q?feat(comment-cards):=20=ED=83=80=EC=9E=84?=
 =?UTF-8?q?=EB=9D=BC=EC=9D=B8=20=EB=B6=84=EC=84=9D=EC=97=90=20=EC=8B=9C?=
 =?UTF-8?q?=EA=B0=84=EC=88=9C=20=EC=A0=95=EB=A0=AC=20=EC=98=B5=EC=85=98=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

많이 언급된 타임라인 섹션에 '언급순/시간순' 선택 추가.
시간순은 선별된 상위 구간을 재생 순서대로 재정렬해 보여줌.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/main/resources/static/js/comment-cards.js   | 12 ++++++++++--
 src/main/resources/templates/comment-cards.html |  4 +++-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/main/resources/static/js/comment-cards.js b/src/main/resources/static/js/comment-cards.js
index fbaeb8a..37b1dc6 100644
--- a/src/main/resources/static/js/comment-cards.js
+++ b/src/main/resources/static/js/comment-cards.js
@@ -229,8 +229,10 @@
     if (!all || !all.length) { box.style.display = 'none'; box.innerHTML = ''; return; }
 
     const weighted = !!($('ccWeighted') && $('ccWeighted').checked);
+    const tlSort = ($('ccTlSort') && $('ccTlSort').value) || 'count';
     const stats = computeStats(all);
-    const tl = computeTimeline(all);
+    let tl = computeTimeline(all);                                  // 언급 많은 순 top-N 선별
+    if (tlSort === 'time') tl = tl.slice().sort((a, b) => a.sec - b.sec); // 선별본을 시간순 재정렬
     const words = computeWords(all, weighted);
     const vid = window.__videoId;
 
@@ -247,7 +249,11 @@
       + '</div>';
 
     // 타임라인
-    html += '<div class="cc-an-sec"><h4>⏱ 많이 언급된 타임라인</h4>';
+    html += '<div class="cc-an-sec"><div class="cc-an-sechead"><h4>⏱ 많이 언급된 타임라인</h4>'
+      + '<select id="ccTlSort" class="cc-mini-select">'
+      + '<option value="count"' + (tlSort === 'count' ? ' selected' : '') + '>언급순</option>'
+      + '<option value="time"' + (tlSort === 'time' ? ' selected' : '') + '>시간순</option>'
+      + '</select></div>';
     if (tl.length) {
       const mx = tl[0].cnt;
       html += '<div class="cc-bars">' + tl.map(t => {
@@ -304,6 +310,8 @@
     });
     const wt = $('ccWeighted');
     if (wt) wt.addEventListener('change', () => renderAnalytics(window.__all));
+    const tls = $('ccTlSort');
+    if (tls) tls.addEventListener('change', () => renderAnalytics(window.__all));
   }
 
   /* ------------------------- 캡처/복사/저장 ------------------------- */
diff --git a/src/main/resources/templates/comment-cards.html b/src/main/resources/templates/comment-cards.html
index 9226d2f..12d193f 100644
--- a/src/main/resources/templates/comment-cards.html
+++ b/src/main/resources/templates/comment-cards.html
@@ -58,6 +58,8 @@
         .cc-an-sec h4 { font-size:13.5px; font-weight:600; color:var(--text-2); margin:0 0 .5rem; }
         .cc-an-sechead { display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
         .cc-wlabel { font-size:12px; color:var(--text-2); display:flex; align-items:center; gap:.3rem; cursor:pointer; }
+        .cc-mini-select { background:var(--surface-2); color:var(--text); border:1px solid var(--border);
+            border-radius:8px; padding:.25rem .5rem; font-size:12px; cursor:pointer; }
         .cc-an-empty { color:var(--text-3); font-size:13px; margin:.2rem 0; }
         .cc-bars { display:flex; flex-direction:column; gap:.35rem; }
         .cc-bar-row { display:grid; grid-template-columns:76px 1fr 52px; align-items:center; gap:.5rem; font-size:12.5px; }
@@ -114,7 +116,7 @@
 <th:block layout:fragment="script">
     <!-- DOM→이미지 캡처 (Task 5에서 사용). blur 필터 지원 위해 modern-screenshot 사용. -->
     <script src="https://cdn.jsdelivr.net/npm/modern-screenshot@4/dist/index.js"></script>
-    <script th:src="@{/js/comment-cards.js(v=20260708)}"></script>
+    <script th:src="@{/js/comment-cards.js(v=20260708b)}"></script>
 </th:block>
 </body>
 </html>