From e9d3f9a9f4a268e781303af58ca45b8fd2cd1dc8 Mon Sep 17 00:00:00 2001
From: "hehihoho3@gmail.com" <hehihoho3@gmail.com>
Date: Tue, 4 Aug 2026 09:13:51 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=86=8C=EC=9E=AC=20=ED=94=BC=EB=93=9C?=
 =?UTF-8?q?=EC=97=90=EC=84=9C=20=EC=88=8F=ED=8F=BC=20=ED=81=90=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B0=94=EB=A1=9C=20=EB=B3=B4=EB=82=B4=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

발굴한 롱폼을 숏폼 큐로 넘기는 동선이 없어 URL을 손으로 옮겨야 했다.
채널 등록·롱폼 수집·정보 표시는 이미 소재 피드에 있으므로 페이지를 새로
만들지 않고 카드에 버튼만 붙였다.

- 소재 원본/인물 탭 카드의 주 버튼을 '숏폼 큐로'로 바꿨다. 경쟁 쇼츠는 이미
  잘린 결과물이라 큐 대상이 아니라 원본 보기만 남긴다.
- 피드를 열 때 큐 목록을 함께 받아 이미 담긴 영상은 '큐에 있음'으로 표시하고
  숏폼 큐로 링크한다. 등록 API가 videoId 기준 멱등이라 중복 클릭도 안전하다.
- 기존 재가공 스튜디오 진입은 아이콘 버튼으로 남겼다.
- 큐 목록 조회가 실패해도 피드 자체는 정상 동작한다.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 src/main/resources/templates/feed.html | 55 +++++++++++++++++++++++---
 1 file changed, 50 insertions(+), 5 deletions(-)

diff --git a/src/main/resources/templates/feed.html b/src/main/resources/templates/feed.html
index 7d91931..f8d44aa 100644
--- a/src/main/resources/templates/feed.html
+++ b/src/main/resources/templates/feed.html
@@ -308,9 +308,12 @@
             /*<![CDATA[*/
             const API = '/api/feed';
             const CV_API = '/api/v1/channel-videos';
+            const SF_API = '/api/shortform';
 
             let currentTab = 'SOURCE';
             let items = [];
+            /** 숏폼 큐에 이미 담긴 videoId — 중복 등록을 막고 카드에 표시한다. */
+            let queued = new Set();
 
             // ---------- 공통 ----------
             function esc(s){ return (s==null?'':String(s)).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }
@@ -526,13 +529,18 @@
                 const vph = (currentTab === 'RIVAL' && it.viewsPerHour != null)
                     ? `<span>·</span><span class="num">${fmtNum(Math.round(it.viewsPerHour))}/h</span>` : '';
 
-                // 롱폼 소재(소스·인물)는 재가공 스튜디오로, 경쟁 쇼츠는 원본 보기로
-                // (남의 쇼츠는 재가공 대상이 아님)
+                // 롱폼 소재(소스·인물)는 숏폼 큐로 넘기는 게 주 동선이다.
+                // 경쟁 쇼츠는 이미 잘린 결과물이라 큐 대상이 아니고 원본 보기만 준다.
+                const inQueue = queued.has(it.videoId);
                 const primary = currentTab === 'RIVAL'
                     ? `<a class="btn btn-secondary grow" href="${url}" target="_blank" rel="noopener">
                            <i data-lucide="external-link" style="width:14px;"></i> 원본 보기</a>`
-                    : `<a class="btn btn-primary grow" href="/rework/${it.id}">
-                           <i data-lucide="wand-2" style="width:14px;"></i> 작업 시작</a>`;
+                    : (inQueue
+                        ? `<a class="btn btn-secondary grow" href="/shortform">
+                               <i data-lucide="check" style="width:14px;"></i> 큐에 있음</a>`
+                        : `<button class="btn btn-primary grow" id="sfBtn-${it.id}"
+                                   onclick="sendToQueue(${it.id})">
+                               <i data-lucide="clapperboard" style="width:14px;"></i> 숏폼 큐로</button>`);
 
                 return `<article class="fcard${it.worked ? ' is-worked' : ''}" data-id="${it.id}">
                     <a class="fthumb" href="${url}" target="_blank" rel="noopener"
@@ -555,6 +563,11 @@
                     </div>
                     <div class="factions">
                         ${primary}
+                        ${currentTab === 'RIVAL' ? '' : `
+                        <a class="icon-btn" href="/rework/${it.id}" title="재가공 스튜디오"
+                           aria-label="재가공 스튜디오에서 열기">
+                            <i data-lucide="wand-2" style="width:16px;"></i>
+                        </a>`}
                         <button class="icon-btn${it.bookmarked ? ' on' : ''}" title="북마크"
                                 aria-label="북마크" aria-pressed="${it.bookmarked}"
                                 onclick="toggleBookmark(${it.id}, ${!!it.bookmarked})">
@@ -593,6 +606,38 @@
                 if(window.lucide) lucide.createIcons();
             }
 
+            // ---------- 숏폼 큐 ----------
+            /** 큐에 이미 담긴 videoId 를 받아둔다. 실패해도 피드 자체는 보여야 하므로 조용히 넘긴다. */
+            async function loadQueued(){
+                try {
+                    const jobs = await api(SF_API + '/jobs') || [];
+                    queued = new Set(jobs.map(j => j.videoId).filter(Boolean));
+                } catch(e){ /* 큐를 못 읽어도 피드는 정상 동작 */ }
+            }
+
+            async function sendToQueue(id){
+                const it = items.find(v => v.id === id);
+                if(!it) return;
+                const btn = document.getElementById('sfBtn-' + id);
+                if(btn){
+                    btn.disabled = true;
+                    btn.innerHTML = '<i data-lucide="loader-2" style="width:14px;" class="animate-spin"></i> 보내는 중...';
+                    if(window.lucide) lucide.createIcons();
+                }
+                try {
+                    await api(SF_API + '/jobs', {
+                        method:'POST', headers:{'Content-Type':'application/json'},
+                        body: JSON.stringify({ youtubeUrl: 'https://www.youtube.com/watch?v=' + it.videoId })
+                    });
+                    queued.add(it.videoId);
+                    render();
+                    toast('숏폼 큐에 담았습니다 — 숏폼 큐에서 Opal 실행하세요');
+                } catch(e){
+                    toast('숏폼 큐 등록 실패: ' + e.message, true);
+                    render();
+                }
+            }
+
             // ---------- 카드 액션 ----------
             async function toggleBookmark(id, current){
                 try {
@@ -868,7 +913,7 @@
             // ---------- init ----------
             (async () => {
                 const preselect = restoreFilters();
-                await loadFilterOptions(preselect);
+                await Promise.all([loadFilterOptions(preselect), loadQueued()]);
                 await loadFeed();
             })();
             /*]]>*/