From 616003479b247c6613a4a5d726fbf8f672b90570 Mon Sep 17 00:00:00 2001
From: "hehihoho3@gmail.com" <hehihoho3@gmail.com>
Date: Fri, 12 Jun 2026 23:12:03 +0900
Subject: [PATCH] =?UTF-8?q?feat(ui):=20collection=20=E2=80=94=20compact=20?=
 =?UTF-8?q?category,=20help=20modal,=20fit-to-width=20table?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Category management collapsed into a slim single-row strip
- "사용법" button opens a reusable help modal (.modal-overlay/.modal-card +
  .help-item) explaining categories, filters, list view, and row actions
- Merge thumbnail+title+channel into one "영상" column and tighten cells so the
  whole table fits the viewport — no horizontal scroll on page or table card
- #mainContent min-width:0 to avoid flex overflow

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/main/resources/static/css/style.css      |  38 ++++-
 src/main/resources/templates/collection.html | 165 ++++++++++++-------
 2 files changed, 141 insertions(+), 62 deletions(-)

diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css
index 4ff7095..8ed4d51 100644
--- a/src/main/resources/static/css/style.css
+++ b/src/main/resources/static/css/style.css
@@ -256,7 +256,7 @@ ul { list-style: none; padding: 0; margin: 0; }
 .nav-icon { margin-right: 0.7rem; color: currentColor; min-width: 18px; width: 18px; height: 18px; }
 
 /* Main content offset */
-#mainContent { transition: margin-left 0.3s ease; margin-left: var(--sidebar-width); }
+#mainContent { transition: margin-left 0.3s ease; margin-left: var(--sidebar-width); min-width: 0; }
 body.sidebar-collapsed #mainContent { margin-left: var(--sidebar-collapsed-width); }
 
 /* ===== Page header (shared) ===== */
@@ -401,3 +401,39 @@ thead th {
 tbody td { padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--border); }
 tbody tr { transition: background 0.15s ease; }
 tbody tr:hover { background: var(--hover); }
+
+/* ===== Modal (reusable) ===== */
+.modal-overlay {
+    display: none; position: fixed; inset: 0; z-index: 1000;
+    background: rgba(10, 14, 22, 0.55);
+    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
+    align-items: center; justify-content: center; padding: 1rem;
+}
+.modal-overlay.open { display: flex; }
+.modal-card {
+    background: var(--surface); border: 1px solid var(--border);
+    border-radius: var(--r); box-shadow: var(--shadow-lg);
+    width: 100%; max-width: 580px; max-height: 86vh; overflow: auto;
+}
+.modal-head {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 1.05rem 1.4rem; border-bottom: 1px solid var(--border);
+    position: sticky; top: 0; background: var(--surface); z-index: 1;
+}
+.modal-head h3 { font-size: 1.05rem; font-weight: 700; }
+.modal-close { background: none; border: none; color: var(--text-3); cursor: pointer; font-size: 1.5rem; line-height: 1; padding: 0 0.2rem; }
+.modal-close:hover { color: var(--text); }
+.modal-body { padding: 0.6rem 1.4rem 1.2rem; }
+
+/* Help guide items */
+.help-item { display: flex; gap: 0.9rem; padding: 0.85rem 0; border-bottom: 1px solid var(--border); }
+.help-item:last-child { border-bottom: none; }
+.help-item .hi-ic {
+    width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
+    background: var(--accent-soft); color: var(--accent);
+    display: flex; align-items: center; justify-content: center;
+}
+.help-item .hi-ic svg { width: 17px; height: 17px; }
+.help-item .hi-t { font-weight: 600; font-size: 0.9rem; margin-bottom: 3px; }
+.help-item .hi-d { font-size: 0.82rem; color: var(--text-2); line-height: 1.6; }
+.help-item .hi-d b { color: var(--text); font-weight: 600; }
diff --git a/src/main/resources/templates/collection.html b/src/main/resources/templates/collection.html
index 468d5b0..f22a1c9 100644
--- a/src/main/resources/templates/collection.html
+++ b/src/main/resources/templates/collection.html
@@ -13,31 +13,28 @@
                 <h1>수집함</h1>
                 <p class="sub">수집한 영상을 분류·발굴하고 재가공 대상을 관리합니다.</p>
             </div>
-        </div>
-
-        <!-- 카테고리 관리 -->
-        <div class="card mb-4">
-            <div class="flex items-center justify-between mb-4">
-                <h3 class="text-lg font-bold">카테고리</h3>
-                <button class="btn btn-secondary p-2" onclick="document.getElementById('catForm').classList.toggle('hidden')">
-                    <i data-lucide="plus" style="width:16px;"></i>
+            <div class="actions">
+                <button class="btn btn-secondary" onclick="openHelp()">
+                    <i data-lucide="help-circle" style="width:15px;"></i> 사용법
                 </button>
             </div>
-            <div id="categoryChips" class="flex flex-wrap gap-2 mb-2">
-                <span class="text-muted text-sm">로딩...</span>
+        </div>
+
+        <!-- 카테고리 관리 (컴팩트) -->
+        <div class="card mb-4" style="padding:0.75rem 1.1rem;">
+            <div class="flex items-center gap-3" style="flex-wrap:wrap;">
+                <span class="text-sm font-semibold" style="color:var(--text-2);">카테고리</span>
+                <div id="categoryChips" class="flex flex-wrap gap-2" style="flex:1; min-width:120px;">
+                    <span class="text-muted text-sm">로딩...</span>
+                </div>
+                <button class="btn btn-secondary" style="padding:0.4rem 0.7rem;" onclick="document.getElementById('catForm').classList.toggle('hidden')">
+                    <i data-lucide="plus" style="width:15px;"></i> 추가
+                </button>
             </div>
-            <div id="catForm" class="hidden flex gap-2 mt-4" style="flex-wrap: wrap; align-items:flex-end;">
-                <div style="display:flex; flex-direction:column; gap:4px;">
-                    <label class="text-sm text-muted">이름</label>
-                    <input id="catName" type="text" placeholder="예: 동물 썰"
-                        style="padding:8px; background:var(--surface-2); border:1px solid var(--glass-border); border-radius:var(--radius-md); color:var(--text); outline:none;">
-                </div>
-                <div style="display:flex; flex-direction:column; gap:4px;">
-                    <label class="text-sm text-muted">색상</label>
-                    <input id="catColor" type="color" value="#7C3AED"
-                        style="padding:2px; height:42px; width:56px; background:var(--surface-2); border:1px solid var(--glass-border); border-radius:var(--radius-md);">
-                </div>
-                <button class="btn btn-primary px-4 py-2" onclick="addCategory()">추가</button>
+            <div id="catForm" class="hidden" style="display:flex; gap:0.6rem; flex-wrap:wrap; align-items:center; margin-top:0.7rem; padding-top:0.7rem; border-top:1px solid var(--border);">
+                <input id="catName" type="text" placeholder="이름 (예: 동물 썰)" style="flex:1; min-width:140px;">
+                <input id="catColor" type="color" value="#7C3AED" title="색상" style="padding:2px; height:38px; width:48px;">
+                <button class="btn btn-primary" onclick="addCategory()">추가</button>
             </div>
         </div>
 
@@ -89,27 +86,65 @@
 
         <!-- 결과 테이블 -->
         <div class="card p-0" style="overflow-x:auto;">
-            <table class="w-full" style="border-collapse:collapse; text-align:left;">
-                <thead style="background:var(--surface-2); border-bottom:1px solid var(--glass-border);">
+            <table class="w-full coll-table" style="border-collapse:collapse; text-align:left;">
+                <thead>
                     <tr>
-                        <th class="p-3 text-sm font-bold text-muted">썸네일</th>
-                        <th class="p-3 text-sm font-bold text-muted">제목</th>
-                        <th class="p-3 text-sm font-bold text-muted">채널</th>
-                        <th class="p-3 text-sm font-bold text-muted">구독자</th>
-                        <th class="p-3 text-sm font-bold text-muted">조회수</th>
-                        <th class="p-3 text-sm font-bold text-muted">시간당</th>
-                        <th class="p-3 text-sm font-bold text-muted">배율</th>
-                        <th class="p-3 text-sm font-bold text-muted">상태</th>
-                        <th class="p-3 text-sm font-bold text-muted">카테고리</th>
-                        <th class="p-3 text-sm font-bold text-muted">관리</th>
+                        <th>영상</th>
+                        <th>구독자</th>
+                        <th>조회수</th>
+                        <th>시간당</th>
+                        <th>배율</th>
+                        <th>상태</th>
+                        <th>카테고리</th>
+                        <th style="text-align:right;">관리</th>
                     </tr>
                 </thead>
                 <tbody id="resultBody">
-                    <tr><td colspan="10" class="p-8 text-center text-muted">로딩 중...</td></tr>
+                    <tr><td colspan="8" class="p-8 text-center text-muted">로딩 중...</td></tr>
                 </tbody>
             </table>
         </div>
 
+        <!-- 사용법 모달 -->
+        <div id="helpModal" class="modal-overlay" onclick="if(event.target===this) closeHelp()">
+            <div class="modal-card">
+                <div class="modal-head">
+                    <h3>📖 수집함 사용법</h3>
+                    <button class="modal-close" onclick="closeHelp()">&times;</button>
+                </div>
+                <div class="modal-body">
+                    <div class="help-item">
+                        <div class="hi-ic"><i data-lucide="tag"></i></div>
+                        <div>
+                            <div class="hi-t">카테고리</div>
+                            <div class="hi-d">영상을 주제별로 분류하는 라벨입니다. 우측 <b>[+ 추가]</b>로 이름·색을 정해 만들고, 칩의 <b>×</b>로 삭제합니다. 표의 <b>‘카테고리’ 드롭다운</b>으로 각 영상에 지정하세요.</div>
+                        </div>
+                    </div>
+                    <div class="help-item">
+                        <div class="hi-ic"><i data-lucide="filter"></i></div>
+                        <div>
+                            <div class="hi-t">필터 · 정렬</div>
+                            <div class="hi-d"><b>칩</b>(🚀 떡상 후보 · Shorts · ⭐ 북마크)을 눌러 켜고 끕니다. 드롭다운으로 <b>상태·카테고리·출처</b>를 좁히고 <b>정렬</b>(배율/시간당/조회수/최신순)을 바꿉니다. 우측 배지에 결과 수가 표시됩니다.</div>
+                        </div>
+                    </div>
+                    <div class="help-item">
+                        <div class="hi-ic"><i data-lucide="table-2"></i></div>
+                        <div>
+                            <div class="hi-t">목록 보기</div>
+                            <div class="hi-d"><b>썸네일 클릭</b> = 팝업 미리보기, <b>제목 클릭</b> = YouTube 새 탭. <b>배율</b>은 조회수÷구독자로, 높을수록 ‘떡상’(10x↑ 빨강, 2x↑ 주황). 상태·카테고리 드롭다운은 바꾸면 <b>즉시 저장</b>됩니다.</div>
+                        </div>
+                    </div>
+                    <div class="help-item">
+                        <div class="hi-ic"><i data-lucide="mouse-pointer-click"></i></div>
+                        <div>
+                            <div class="hi-t">행 버튼 (관리)</div>
+                            <div class="hi-d"><b>🪄 재가공</b> = 자막 추출·재작성 에디터로 이동 · <b>⭐ 북마크</b> = 즐겨찾기 토글 · <b>🗑 삭제</b> = 수집함에서 제거(스크립트도 함께 삭제).</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </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);">
@@ -123,9 +158,13 @@
 
         <style>
             .hidden { display:none !important; }
-            .row-sel { padding:4px 6px; background:var(--surface-2); border:1px solid var(--glass-border); border-radius:6px; color:var(--text); font-size:0.8rem; outline:none; }
+            .row-sel { padding:4px 6px; background:var(--surface-2); border:1px solid var(--border-strong); border-radius:6px; color:var(--text); font-size:0.78rem; outline:none; max-width:110px; }
             .row-sel option { background:var(--surface); color:var(--text); }
             .cat-chip { padding:4px 10px; border-radius:999px; font-size:0.8rem; display:inline-flex; align-items:center; gap:6px; }
+            /* 컴팩트 표: 숫자/상태 칸은 줄바꿈 없이, 영상 칸만 넓게 */
+            .coll-table th, .coll-table td { white-space:nowrap; vertical-align:middle; }
+            .coll-table td:first-child, .coll-table th:first-child { white-space:normal; width:42%; min-width:300px; }
+            .coll-table th { background:var(--surface-2); }
         </style>
 
         <script th:inline="javascript">
@@ -233,7 +272,7 @@
                 const body = document.getElementById('resultBody');
                 document.getElementById('resultCount').textContent = list.length + '건';
                 if(list.length===0){
-                    body.innerHTML = '<tr><td colspan="10" class="p-8 text-center text-muted">조건에 맞는 영상이 없습니다.</td></tr>';
+                    body.innerHTML = '<tr><td colspan="8" class="p-8 text-center text-muted">조건에 맞는 영상이 없습니다.</td></tr>';
                     return;
                 }
                 body.innerHTML = list.map(v=>{
@@ -242,32 +281,31 @@
                     const statusOpts = STATUS_KEYS.map(k=>
                         `<option value="${k}" ${v.interestStatus===k?'selected':''}>${STATUS_LABEL[k]}</option>`).join('');
                     const star = v.bookmarked ? '#f59e0b' : 'var(--text-muted)';
-                    const shortsBadge = v.isShorts ? '<span style="font-size:0.65rem; background:#7C3AED33; color:#a78bfa; padding:1px 5px; border-radius:4px; margin-left:4px;">Shorts</span>' : '';
-                    return `<tr style="border-bottom:1px solid var(--glass-border);">
-                        <td class="p-3">
-                            <div style="position:relative; cursor:pointer; width:96px;" data-vid="${v.videoId}" data-title="${esc(v.title)}" onclick="openVideoModal(this.dataset.vid, this.dataset.title)">
-                                <img src="${esc(v.thumbnailUrl)}" style="width:96px; height:54px; object-fit:cover; border-radius:6px;">
+                    const shortsBadge = v.isShorts ? '<span class="badge badge-primary" style="margin-left:5px;">Shorts</span>' : '';
+                    return `<tr>
+                        <td>
+                            <div class="flex items-center gap-3" style="min-width:0;">
+                                <img src="${esc(v.thumbnailUrl)}" data-vid="${v.videoId}" data-title="${esc(v.title)}" onclick="openVideoModal(this.dataset.vid, this.dataset.title)"
+                                    style="width:84px; height:47px; object-fit:cover; border-radius:6px; cursor:pointer; flex-shrink:0;">
+                                <div style="min-width:0;">
+                                    <div class="font-semibold text-sm" style="display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.35;">
+                                        <a href="https://www.youtube.com/watch?v=${v.videoId}" target="_blank" class="hover:underline">${esc(v.title)}</a>${shortsBadge}
+                                    </div>
+                                    <a href="${v.ytChannelId?('https://www.youtube.com/channel/'+v.ytChannelId):'#'}" target="_blank" class="hover:underline truncate" style="color:var(--text-3); font-size:0.72rem; display:block; margin-top:2px;">${esc(v.channelTitle||'-')}</a>
+                                </div>
                             </div>
                         </td>
-                        <td class="p-3" style="max-width:280px;">
-                            <div class="font-bold text-sm" style="display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;">
-                                <a href="https://www.youtube.com/watch?v=${v.videoId}" target="_blank" class="hover:underline">${esc(v.title)}</a>${shortsBadge}
-                            </div>
-                        </td>
-                        <td class="p-3 text-sm text-muted" style="max-width:130px;">
-                            <a href="${v.ytChannelId?('https://www.youtube.com/channel/'+v.ytChannelId):'#'}" target="_blank" class="hover:underline truncate" style="color:var(--text-2);">${esc(v.channelTitle||'-')}</a>
-                        </td>
-                        <td class="p-3 text-sm">${fmt(v.subscriberCount)}</td>
-                        <td class="p-3 text-sm">${fmt(v.viewCount)}</td>
-                        <td class="p-3 text-sm">${fmt(v.viewsPerHour)}</td>
-                        <td class="p-3 text-sm">${ratioBadge(v.viewsPerSubRatio)}</td>
-                        <td class="p-3"><select class="row-sel" onchange="setStatus(${v.id}, this.value)">${statusOpts}</select></td>
-                        <td class="p-3"><select class="row-sel" onchange="setCategory(${v.id}, this.value)">${catOpts}</select></td>
-                        <td class="p-3">
-                            <div class="flex items-center gap-1">
-                                <a class="btn btn-primary p-2" title="재가공" href="/rework/${v.id}"><i data-lucide="wand-2" style="width:15px;"></i></a>
-                                <button class="btn btn-secondary p-2" title="북마크" onclick="toggleBookmark(${v.id}, ${!!v.bookmarked})"><i data-lucide="star" style="width:15px; color:${star};"></i></button>
-                                <button class="btn btn-secondary p-2" title="삭제" onclick="deleteVideo(${v.id})"><i data-lucide="trash-2" style="width:15px;"></i></button>
+                        <td class="text-sm">${fmt(v.subscriberCount)}</td>
+                        <td class="text-sm">${fmt(v.viewCount)}</td>
+                        <td class="text-sm">${fmt(v.viewsPerHour)}</td>
+                        <td class="text-sm">${ratioBadge(v.viewsPerSubRatio)}</td>
+                        <td><select class="row-sel" onchange="setStatus(${v.id}, this.value)">${statusOpts}</select></td>
+                        <td><select class="row-sel" onchange="setCategory(${v.id}, this.value)">${catOpts}</select></td>
+                        <td>
+                            <div class="flex items-center gap-1 justify-end">
+                                <a class="btn btn-primary" style="padding:0.4rem;" title="재가공" href="/rework/${v.id}"><i data-lucide="wand-2" style="width:15px;"></i></a>
+                                <button class="btn btn-secondary" style="padding:0.4rem;" title="북마크" onclick="toggleBookmark(${v.id}, ${!!v.bookmarked})"><i data-lucide="star" style="width:15px; color:${star};"></i></button>
+                                <button class="btn btn-secondary" style="padding:0.4rem;" title="삭제" onclick="deleteVideo(${v.id})"><i data-lucide="trash-2" style="width:15px;"></i></button>
                             </div>
                         </td>
                     </tr>`;
@@ -306,6 +344,11 @@
                 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(); } });
+
             // ----- URL 파라미터 필터 적용 -----
             function applyUrlFilters(){
                 const q = new URLSearchParams(window.location.search);