feat(discover): 추천 채널 썸네일 클릭 시 미리보기 모달(다른 페이지와 동일)

YouTube 새 탭 대신 인라인 iframe 모달로 영상 재생.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/main/resources/templates/recommend.html

@@ -17,6 +17,17 @@
         <div id="status" class="text-sm mb-3" style="display:none;"></div>
         <div id="grid" style="display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1rem;"></div>
 
+        <!-- 영상 미리보기 모달 (다른 페이지와 동일 패턴) -->
+        <div id="videoModal" style="display:none; position:fixed; z-index:1000; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.85); align-items:center; justify-content:center;" onclick="if(event.target===this) closeVideoModal()">
+            <div style="position:relative; width:95%; max-width:900px; background:var(--glass-bg,var(--surface)); border-radius:12px; padding:16px; border:1px solid var(--glass-border);">
+                <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;">
+                    <h3 class="text-lg font-bold truncate pr-4" id="modalTitle">Video</h3>
+                    <button onclick="closeVideoModal()" class="text-muted hover:text-white" style="font-size:28px; line-height:1; background:none; border:none; cursor:pointer;">&times;</button>
+                </div>
+                <div id="iframeContainer" style="width:100%; aspect-ratio:9/16; max-height:70vh; border-radius:8px; overflow:hidden; background:#000; margin:0 auto;"></div>
+            </div>
+        </div>
+
         <style>
             .rc-card { background:var(--surface); border:1px solid var(--glass-border); border-radius:var(--radius-lg); overflow:hidden; }
             .rc-thumb { width:100%; aspect-ratio:16/9; object-fit:cover; background:#000; display:block; }
@@ -39,7 +50,7 @@
                     if(!list.length){ grid.innerHTML='<div class="text-muted">아직 발굴된 추천 채널이 없습니다. ‘지금 발굴’을 눌러보세요.</div>'; return; }
                     grid.innerHTML=list.map(c=>
                         '<div class="rc-card" id="rc-'+c.id+'">'
-                        + '<a href="https://www.youtube.com/watch?v='+esc(c.topVideoId)+'" target="_blank"><img class="rc-thumb" src="'+esc(c.thumbnailUrl)+'" loading="lazy"></a>'
+                        + '<img class="rc-thumb" style="cursor:pointer;" src="'+esc(c.thumbnailUrl)+'" loading="lazy" data-vid="'+esc(c.topVideoId)+'" data-title="'+esc(c.topVideoTitle||c.channelTitle||'').replace(/"/g,'&quot;')+'" onclick="openVideoModal(this)">'
                         + '<div class="rc-body">'
                         +   '<div class="font-bold" style="line-height:1.4;">'+esc(c.channelTitle)+'</div>'
                         +   '<div class="text-sm text-muted">👤 '+fmt(c.subscriberCount)+'명 · '+esc(c.region||'')+'</div>'
@@ -55,6 +66,18 @@
             }
             async function register(id){ try{ await api(API+'/'+id+'/register',{method:'POST'}); document.getElementById('rc-'+id)?.remove(); }catch(e){ alert('등록 실패: '+e.message); } }
             async function exclude(id){ try{ await api(API+'/'+id+'/exclude',{method:'POST'}); document.getElementById('rc-'+id)?.remove(); }catch(e){ alert('제외 실패: '+e.message); } }
+            function openVideoModal(el){
+                const vid = el.dataset.vid || '';
+                document.getElementById('modalTitle').textContent = el.dataset.title || '';
+                document.getElementById('iframeContainer').innerHTML = '<iframe width="100%" height="100%" src="https://www.youtube.com/embed/'+vid+'?autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>';
+                document.getElementById('videoModal').style.display = 'flex';
+            }
+            function closeVideoModal(){
+                document.getElementById('iframeContainer').innerHTML = '';
+                document.getElementById('videoModal').style.display = 'none';
+            }
+            document.addEventListener('keydown', e => { if(e.key === 'Escape') closeVideoModal(); });
+
             async function runDiscovery(){
                 const s=document.getElementById('status'); s.style.display='block'; s.style.color='#facc15'; s.textContent='발굴 중… (지역별 Shorts 검색, 잠시 걸립니다)';
                 try{ const r=await api(API+'/run',{method:'POST'}); s.style.color='#4ade80'; s.textContent='발굴 완료 · 신규 '+(r.saved??0)+'개 · 지역 '+((r.regions||[]).join(',')); await load(); }