From 1ebe2dda44d16597bd56cc217b305082ed3af189 Mon Sep 17 00:00:00 2001 From: "hehihoho3@gmail.com" Date: Sat, 13 Jun 2026 06:22:55 +0900 Subject: [PATCH] feat(ui): discover filter chips + help modals, localize, tokenize long pages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - discover: filter converted to toggle chips + inline selects (matches 수집함); page-header + 사용법 modal (배율 지표/필터/고른 뒤 안내) - rework: 사용법 modal (전사·세그먼트·무음제거·내보내기·발행 guide) + page-header - dashboard: h1 "Dashboard" -> "대시보드" - channel_detail: sort-active header uses accent color (was invisible text-white) - multi_channel_videos/videos/production_detail: tokenize dark-assuming colors and title-link text-white for light-theme readability Co-Authored-By: Claude Opus 4.8 (1M context) --- .../resources/templates/channel_detail.html | 4 +- src/main/resources/templates/dashboard.html | 2 +- src/main/resources/templates/discover.html | 84 ++++++++++++------- .../templates/multi_channel_videos.html | 34 ++++---- .../templates/production_detail.html | 44 +++++----- src/main/resources/templates/rework.html | 50 +++++++++-- src/main/resources/templates/videos.html | 38 ++++----- 7 files changed, 158 insertions(+), 98 deletions(-) diff --git a/src/main/resources/templates/channel_detail.html b/src/main/resources/templates/channel_detail.html index 72a401f..b7224a2 100644 --- a/src/main/resources/templates/channel_detail.html +++ b/src/main/resources/templates/channel_detail.html @@ -239,10 +239,10 @@ if (icon) { const colName = th.getAttribute('onclick').match(/'([^']+)'/)[1]; if (colName === sortState.column) { - th.classList.add('text-white'); + th.style.color = 'var(--accent)'; icon.setAttribute('data-lucide', sortState.direction === 'asc' ? 'chevron-up' : 'chevron-down'); } else { - th.classList.remove('text-white'); + th.style.color = ''; icon.setAttribute('data-lucide', 'arrow-up-down'); } } diff --git a/src/main/resources/templates/dashboard.html b/src/main/resources/templates/dashboard.html index 1a7f1eb..c2035f4 100644 --- a/src/main/resources/templates/dashboard.html +++ b/src/main/resources/templates/dashboard.html @@ -11,7 +11,7 @@
-

Dashboard

+

대시보드

수집 → 큐레이션 → 재가공 → 발행 파이프라인 현황

+
+ - + + + +
-
-
- - Shorts + + +
-
- - -
-
- - -
-
- - -
- - - - + + +
@@ -214,6 +232,10 @@ document.getElementById('videoModal').style.display = 'none'; } + function openHelp(){ document.getElementById('helpModal').classList.add('open'); } + function closeHelp(){ document.getElementById('helpModal').classList.remove('open'); } + document.addEventListener('keydown', e => { if(e.key === 'Escape'){ closeHelp(); closeVideoModal(); } }); + loadVideos(); /*]]>*/ diff --git a/src/main/resources/templates/multi_channel_videos.html b/src/main/resources/templates/multi_channel_videos.html index bde7c7e..02c6ff5 100644 --- a/src/main/resources/templates/multi_channel_videos.html +++ b/src/main/resources/templates/multi_channel_videos.html @@ -19,7 +19,7 @@
Tracking 0 Channels
-
+
Thumbnail Channel Name @@ -36,20 +36,20 @@
-
+
@@ -63,10 +63,10 @@
@@ -95,7 +95,7 @@
- + @@ -130,7 +130,7 @@
Thumbnail ' + '
' + '
' + - '' + video.title + '' + + '' + video.title + '' + '
' + '
@@ -32,7 +32,7 @@
- +
@@ -66,7 +66,7 @@
@@ -207,13 +207,13 @@
+ style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 900px; max-height: 85vh; background-color: #1a1b26; border-radius: 12px; box-shadow: 0 25px 50px rgba(0,0,0,0.5); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--hover-strong);">
+ style="display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background-color: #1a1b26; border-bottom: 1px solid var(--hover-strong);">

+ style="font-size: 18px; font-weight: bold; color: var(--text); margin: 0; display: flex; align-items: center; gap: 8px;"> Transcript

@@ -239,13 +239,13 @@
+ style="padding: 16px 24px; background-color: #1a1b26; border-top: 1px solid var(--hover-strong); display: flex; justify-content: flex-end; gap: 12px;"> + style="padding: 8px 24px; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: var(--text); border: none; border-radius: 8px; cursor: pointer; font-weight: 500;">Close
@@ -261,13 +261,13 @@
+ style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 1200px; max-height: 85vh; background-color: #1a1b26; border-radius: 12px; box-shadow: 0 25px 50px rgba(0,0,0,0.5); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--hover-strong);">
+ style="display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background-color: #1a1b26; border-bottom: 1px solid var(--hover-strong);">

+ style="font-size: 18px; font-weight: bold; color: var(--text); margin: 0; display: flex; align-items: center; gap: 8px;"> Script Summaries

@@ -281,7 +281,7 @@
+ style="flex: 1; padding: 24px; overflow-y: auto; border-right: 1px solid var(--hover-strong); background-color: rgba(22,22,30,0.5);">

old_script_summary

+ style="padding: 16px 24px; background-color: #1a1b26; border-top: 1px solid var(--hover-strong); display: flex; justify-content: flex-end;"> + style="padding: 8px 24px; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: var(--text); border: none; border-radius: 8px; cursor: pointer; font-weight: 500;">Close
@@ -337,13 +337,13 @@
+ style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 95%; max-width: 1600px; height: 90vh; background-color: #1a1b26; border-radius: 12px; box-shadow: 0 25px 50px rgba(0,0,0,0.5); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--hover-strong);">
+ style="display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background-color: #1a1b26; border-bottom: 1px solid var(--hover-strong);">

+ style="font-size: 18px; font-weight: bold; color: var(--text); margin: 0; display: flex; align-items: center; gap: 8px;"> Final Script

@@ -375,17 +375,17 @@
+ style="padding: 16px 24px; background-color: #1a1b26; border-top: 1px solid var(--hover-strong); display: flex; justify-content: flex-end; gap: 12px;"> + style="padding: 8px 24px; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: var(--text); border: none; border-radius: 8px; cursor: pointer; font-weight: 500;">Close
diff --git a/src/main/resources/templates/rework.html b/src/main/resources/templates/rework.html index 404de89..1c3d3bd 100644 --- a/src/main/resources/templates/rework.html +++ b/src/main/resources/templates/rework.html @@ -8,13 +8,47 @@
-
-
- -

재가공 작업공간

+
+
+
+ +

재가공 작업공간

+
+

로딩 중...

-

로딩 중...

-
+
+ +
+
+ + +
@@ -506,6 +540,10 @@ } catch(e){ alert('발행 완료 처리 실패: ' + e.message); } } + function openHelp(){ document.getElementById('helpModal').classList.add('open'); } + function closeHelp(){ document.getElementById('helpModal').classList.remove('open'); } + document.addEventListener('keydown', e => { if(e.key === 'Escape') closeHelp(); }); + (async ()=>{ await load(); await loadPublish(document.getElementById('vTitle').textContent); })(); /*]]>*/ diff --git a/src/main/resources/templates/videos.html b/src/main/resources/templates/videos.html index 15caccf..20e6919 100644 --- a/src/main/resources/templates/videos.html +++ b/src/main/resources/templates/videos.html @@ -18,14 +18,14 @@
-
+
@@ -42,20 +42,20 @@
-
+
@@ -69,10 +69,10 @@
@@ -101,7 +101,7 @@
- + @@ -135,7 +135,7 @@ ' +
Thumbnail ' + '
' + '
' + - '' + video.title + '' + + '' + video.title + '' + '
' + '
' + '
' + '' + video.channelTitle + '' + - '' + + '' + '
' + tagsHtml + '