From c0ade287c2dbeae8c4eb66d646f7e50ea108b1cb Mon Sep 17 00:00:00 2001
From: "hehihoho3@gmail.com" <hehihoho3@gmail.com>
Date: Tue, 16 Jun 2026 15:18:09 +0900
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=EC=8D=B8=EB=84=A4=EC=9D=BC=20?=
 =?UTF-8?q?=ED=81=B4=EB=A6=AD=20=EB=AF=B8=EB=A6=AC=EB=B3=B4=EA=B8=B0?=
 =?UTF-8?q?=EB=A5=BC=20=EC=B9=B8=EB=B0=98=C2=B7=EC=B1=84=EB=84=90=EC=83=81?=
 =?UTF-8?q?=EC=84=B8=C2=B7=ED=94=84=EB=A1=9C=EB=8D=95=EC=85=98=EC=83=81?=
 =?UTF-8?q?=EC=84=B8=EC=97=90=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

수집함·발굴·대시보드처럼, 썸네일 있는 나머지 화면에서도 썸네일을 클릭하면
YouTube 9:16 미리보기 팝업이 뜨도록 통일.
- 칸반(board): 카드 썸네일 클릭(드래그와 분리 위해 stopPropagation)
- 채널상세(channel_detail): 영상 목록 썸네일(제목 링크는 YouTube 유지)
- 프로덕션상세(production_detail): videoUrl에서 11자리 id 추출해 임베드,
  id 없으면 새 탭 폴백
각 페이지에 동일 모달(배경/ESC 닫힘, 닫을 때 iframe 비워 재생 중지) 추가.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/main/resources/templates/board.html       | 28 ++++++++++++-
 .../resources/templates/channel_detail.html   | 31 ++++++++++++--
 .../templates/production_detail.html          | 40 +++++++++++++++++--
 3 files changed, 90 insertions(+), 9 deletions(-)

diff --git a/src/main/resources/templates/board.html b/src/main/resources/templates/board.html
index c5c4247..8fb5124 100644
--- a/src/main/resources/templates/board.html
+++ b/src/main/resources/templates/board.html
@@ -44,7 +44,19 @@
             <!-- columns injected -->
         </div>
 
+        <!-- 영상 미리보기 모달 -->
+        <div id="videoModal" style="display:none; position:fixed; z-index:1000; inset:0; background:rgba(0,0,0,0.85); align-items:center; justify-content:center; padding:20px;" onclick="if(event.target===this) closeVideoModal()">
+            <div style="background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden;">
+                <div style="display:flex; justify-content:space-between; align-items:center; gap:14px; padding:11px 14px; border-bottom:1px solid var(--border);">
+                    <span id="vmTitle" class="text-sm font-bold truncate" style="max-width:300px;">미리보기</span>
+                    <button onclick="closeVideoModal()" class="text-muted hover:text-white" style="font-size:24px; line-height:1; background:none; border:none; cursor:pointer;">&times;</button>
+                </div>
+                <div id="vmFrame" style="width:min(360px,90vw); aspect-ratio:9/16; max-height:78vh; background:#000;"></div>
+            </div>
+        </div>
+
         <style>
+            #vmFrame iframe { width:100%; height:100%; border:0; display:block; }
             .kb-col { background: var(--surface-2); border:1px solid var(--border); border-radius: var(--r); display:flex; flex-direction:column; min-height:200px; }
             .kb-col-head { padding:12px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:var(--surface-2); border-radius:var(--r) var(--r) 0 0; }
             .kb-body { padding:10px; display:flex; flex-direction:column; gap:8px; min-height:120px; flex:1; transition: background 0.15s; }
@@ -94,7 +106,9 @@
                 ].filter(Boolean).join('&nbsp;&nbsp;·&nbsp;&nbsp;');
                 return `<div class="kb-card" draggable="true" data-id="${v.id}">
                     <div style="display:flex; gap:8px;">
-                        <img src="${esc(v.thumbnailUrl)}" style="width:64px; height:36px; object-fit:cover; border-radius:4px; flex-shrink:0;">
+                        <img src="${esc(v.thumbnailUrl)}" title="미리보기" data-vid="${v.videoId}" data-title="${esc(v.title)}"
+                            onclick="event.stopPropagation(); openVideoModal(this.dataset.vid, this.dataset.title)"
+                            style="width:64px; height:36px; object-fit:cover; border-radius:4px; flex-shrink:0; cursor:pointer;">
                         <div style="min-width:0; flex:1;">
                             <div class="text-sm font-bold" style="display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.3;">${esc(v.title)}</div>
                         </div>
@@ -184,7 +198,17 @@
 
             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(); });
+
+            function openVideoModal(vid, title){
+                document.getElementById('vmTitle').textContent = title || '미리보기';
+                document.getElementById('vmFrame').innerHTML = '<iframe src="https://www.youtube.com/embed/'+vid+'?autoplay=1" allow="autoplay; encrypted-media" allowfullscreen></iframe>';
+                document.getElementById('videoModal').style.display = 'flex';
+            }
+            function closeVideoModal(){
+                document.getElementById('vmFrame').innerHTML = '';
+                document.getElementById('videoModal').style.display = 'none';
+            }
+            document.addEventListener('keydown', e => { if(e.key === 'Escape'){ closeHelp(); closeVideoModal(); } });
 
             loadBoard();
             /*]]>*/
diff --git a/src/main/resources/templates/channel_detail.html b/src/main/resources/templates/channel_detail.html
index b7224a2..a9739cb 100644
--- a/src/main/resources/templates/channel_detail.html
+++ b/src/main/resources/templates/channel_detail.html
@@ -97,11 +97,12 @@
                         style="border-bottom: 1px solid var(--glass-border); transition: background 0.2s;">
                         <td class="p-4">
                             <div class="flex items-center gap-4">
-                                <a th:href="'https://www.youtube.com/watch?v=' + ${video.videoId}" target="_blank"
-                                    class="block relative group">
+                                <div class="block relative group" style="cursor:pointer;" title="미리보기"
+                                    th:attr="data-vid=${video.videoId},data-title=${video.title}"
+                                    onclick="openVideoModal(this.dataset.vid, this.dataset.title)">
                                     <img th:src="${video.thumbnailUrl}" alt="Thumb"
                                         style="width: 120px; height: 68px; object-fit: cover; border-radius: 6px;">
-                                </a>
+                                </div>
                                 <a th:href="'https://www.youtube.com/watch?v=' + ${video.videoId}" target="_blank"
                                     class="font-bold text-sm hover:text-[var(--primary)] transition-colors"
                                     style="max-width: 400px; line-height: 1.4;" th:text="${video.title}">Video Title</a>
@@ -337,8 +338,32 @@
                 finally { btn.disabled = false; btn.innerHTML = orig; if (window.lucide) lucide.createIcons(); }
             }
 
+            // ----- 영상 미리보기 -----
+            function openVideoModal(vid, title){
+                document.getElementById('vmTitle').textContent = title || '미리보기';
+                document.getElementById('vmFrame').innerHTML = '<iframe src="https://www.youtube.com/embed/'+vid+'?autoplay=1" allow="autoplay; encrypted-media" allowfullscreen></iframe>';
+                document.getElementById('videoModal').style.display = 'flex';
+            }
+            function closeVideoModal(){
+                document.getElementById('vmFrame').innerHTML = '';
+                document.getElementById('videoModal').style.display = 'none';
+            }
+            document.addEventListener('keydown', e => { if(e.key === 'Escape') closeVideoModal(); });
+
             loadGrowth();
         </script>
+
+        <!-- 영상 미리보기 모달 -->
+        <div id="videoModal" style="display:none; position:fixed; z-index:1000; inset:0; background:rgba(0,0,0,0.85); align-items:center; justify-content:center; padding:20px;" onclick="if(event.target===this) closeVideoModal()">
+            <div style="background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden;">
+                <div style="display:flex; justify-content:space-between; align-items:center; gap:14px; padding:11px 14px; border-bottom:1px solid var(--border);">
+                    <span id="vmTitle" class="text-sm font-bold truncate" style="max-width:300px;">미리보기</span>
+                    <button onclick="closeVideoModal()" class="text-muted hover:text-white" style="font-size:24px; line-height:1; background:none; border:none; cursor:pointer;">&times;</button>
+                </div>
+                <div id="vmFrame" style="width:min(360px,90vw); aspect-ratio:9/16; max-height:78vh; background:#000;"></div>
+            </div>
+        </div>
+        <style>#vmFrame iframe { width:100%; height:100%; border:0; display:block; }</style>
     </div>
 </body>
 
diff --git a/src/main/resources/templates/production_detail.html b/src/main/resources/templates/production_detail.html
index bc6d3fb..cca8dcc 100644
--- a/src/main/resources/templates/production_detail.html
+++ b/src/main/resources/templates/production_detail.html
@@ -77,15 +77,16 @@
                         <td class="p-4" data-label="Video">
                             <div class="flex items-center gap-4">
                                 <!-- Thumbnail (toggleable) -->
-                                <a th:href="${video.videoUrl}" target="_blank"
-                                    class="block relative group thumbnail-item" style="display: none;">
+                                <div class="block relative group thumbnail-item" style="display: none; cursor:pointer;" title="미리보기"
+                                    th:attr="data-url=${video.videoUrl},data-title=${video.title}"
+                                    onclick="openVideoModalUrl(this.dataset.url, this.dataset.title)">
                                     <img th:src="${video.thumbnailUrl}" alt="Thumb"
                                         style="width: 120px; height: 68px; object-fit: cover; border-radius: 6px;">
                                     <div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
                                         style="border-radius: 6px;">
-                                        <i data-lucide="external-link" class="text-white w-6 h-6"></i>
+                                        <i data-lucide="play" class="text-white w-6 h-6"></i>
                                     </div>
-                                </a>
+                                </div>
                                 <div class="flex flex-col gap-1">
                                     <a th:href="${video.videoUrl}" target="_blank"
                                         class="font-bold text-sm hover:text-[var(--primary)] transition-colors"
@@ -1006,7 +1007,38 @@
                     alert('Error saving script.');
                 }
             }
+
+            // ----- 영상 미리보기 (videoUrl → id 추출) -----
+            function ytId(url){
+                if(!url) return null;
+                const m = String(url).match(/(?:v=|\/embed\/|youtu\.be\/|\/shorts\/)([0-9A-Za-z_-]{11})/);
+                return m ? m[1] : null;
+            }
+            function openVideoModalUrl(url, title){
+                const id = ytId(url);
+                if(!id){ window.open(url, '_blank'); return; }   // id 못찾으면 새 탭으로 폴백
+                document.getElementById('vmTitle').textContent = title || '미리보기';
+                document.getElementById('vmFrame').innerHTML = '<iframe src="https://www.youtube.com/embed/'+id+'?autoplay=1" allow="autoplay; encrypted-media" allowfullscreen></iframe>';
+                document.getElementById('videoModal').style.display = 'flex';
+            }
+            function closeVideoModal(){
+                document.getElementById('vmFrame').innerHTML = '';
+                document.getElementById('videoModal').style.display = 'none';
+            }
+            document.addEventListener('keydown', e => { if(e.key === 'Escape') closeVideoModal(); });
         </script>
+
+        <!-- 영상 미리보기 모달 -->
+        <div id="videoModal" style="display:none; position:fixed; z-index:1000; inset:0; background:rgba(0,0,0,0.85); align-items:center; justify-content:center; padding:20px;" onclick="if(event.target===this) closeVideoModal()">
+            <div style="background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden;">
+                <div style="display:flex; justify-content:space-between; align-items:center; gap:14px; padding:11px 14px; border-bottom:1px solid var(--border);">
+                    <span id="vmTitle" class="text-sm font-bold truncate" style="max-width:300px;">미리보기</span>
+                    <button onclick="closeVideoModal()" class="text-muted hover:text-white" style="font-size:24px; line-height:1; background:none; border:none; cursor:pointer;">&times;</button>
+                </div>
+                <div id="vmFrame" style="width:min(360px,90vw); aspect-ratio:9/16; max-height:78vh; background:#000;"></div>
+            </div>
+        </div>
+        <style>#vmFrame iframe { width:100%; height:100%; border:0; display:block; }</style>
     </div>
 </body>