From e7418e7c3c634ba9cef9c019b990e0ad07ba50c8 Mon Sep 17 00:00:00 2001
From: "hehihoho3@gmail.com" <hehihoho3@gmail.com>
Date: Fri, 26 Jun 2026 16:03:10 +0900
Subject: [PATCH] =?UTF-8?q?feat(board):=20=EB=AA=A8=EB=B0=94=EC=9D=BC?=
 =?UTF-8?q?=EC=97=90=EC=84=9C=20=EC=B9=B4=EB=93=9C=20=EC=83=81=ED=83=9C=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD=20=EB=93=9C=EB=A1=AD=EB=8B=A4=EC=9A=B4=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80(=ED=84=B0=EC=B9=98=EB=A1=9C=20=EC=B9=B8?=
 =?UTF-8?q?=EB=B0=98=20=EC=9D=B4=EB=8F=99)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

HTML5 드래그가 터치에서 동작 안 하는 문제 — 카드마다 상태 드롭다운을 두어
터치로도 컬럼 이동 가능. 데스크톱은 드래그 유지(드롭다운은 모바일/터치에서만 노출).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/main/resources/templates/board.html | 36 +++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/src/main/resources/templates/board.html b/src/main/resources/templates/board.html
index 8fb5124..4d5726c 100644
--- a/src/main/resources/templates/board.html
+++ b/src/main/resources/templates/board.html
@@ -65,6 +65,14 @@
             .kb-card:hover { border-color: var(--accent); }
             .kb-card.dragging { opacity:0.5; }
             .kb-count { font-size:0.75rem; font-weight:600; background:var(--surface); border:1px solid var(--border); color:var(--text-2); padding:2px 9px; border-radius:999px; }
+            /* 모바일 터치용 상태 변경 드롭다운: 데스크톱에서는 숨기고 드래그 사용 */
+            .kb-status-sel { display:none; width:100%; margin-top:8px; padding:7px 8px; font-size:0.78rem; background:var(--surface-2); border:1px solid var(--border); border-radius:6px; color:var(--text); cursor:pointer; }
+            @media (hover: none), (max-width: 820px) {
+                .kb-status-sel { display:block; }
+                .kb-card { cursor:default; }
+                #board { grid-template-columns: repeat(5, minmax(260px, 80%)); -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
+                #board .kb-col { scroll-snap-align: start; }
+            }
         </style>
 
         <script th:inline="javascript">
@@ -104,6 +112,8 @@
                     v.viewsPerHour!=null ? '⚡ '+fmt(Math.round(v.viewsPerHour))+'/h' : '',
                     db ? '⏱ '+db : ''
                 ].filter(Boolean).join('&nbsp;&nbsp;·&nbsp;&nbsp;');
+                const status = v.interestStatus || 'NEW';
+                const statusOpts = COLS.map(c => `<option value="${c.key}"${c.key===status?' selected':''}>${c.label}</option>`).join('');
                 return `<div class="kb-card" draggable="true" data-id="${v.id}">
                     <div style="display:flex; gap:8px;">
                         <img src="${esc(v.thumbnailUrl)}" title="미리보기" data-vid="${v.videoId}" data-title="${esc(v.title)}"
@@ -121,6 +131,10 @@
                             <a href="/rework/${v.id}" title="재가공" class="text-muted hover:text-white"><i data-lucide="wand-2" style="width:14px;"></i></a>
                         </div>
                     </div>
+                    <select class="kb-status-sel" title="상태 변경(모바일)" onpointerdown="event.stopPropagation()"
+                            onclick="event.stopPropagation()" onchange="changeStatus('${v.id}', this.value, this)">
+                        ${statusOpts}
+                    </select>
                 </div>`;
             }
 
@@ -196,6 +210,28 @@
                 });
             }
 
+            // 드롭다운(모바일 터치)으로 상태 변경 — 드래그와 동일한 API 호출
+            async function changeStatus(id, newStatus, selEl){
+                const card = document.querySelector('.kb-card[data-id="'+id+'"]');
+                const targetBody = document.querySelector('.kb-body[data-status="'+newStatus+'"]');
+                if(!card || !targetBody) return;
+                const fromBody = card.parentElement;
+                if(fromBody === targetBody) return;
+                targetBody.appendChild(card);   // optimistic move
+                updateCounts();
+                try {
+                    await api(API + '/' + id + '/status', {
+                        method:'POST', headers:{'Content-Type':'application/json'},
+                        body: JSON.stringify({ status: newStatus })
+                    });
+                    if(window.lucide) lucide.createIcons();
+                } catch(err){
+                    alert('상태 변경 실패: ' + err.message);
+                    if(fromBody){ fromBody.appendChild(card); if(selEl) selEl.value = fromBody.dataset.status; }
+                    updateCounts();
+                }
+            }
+
             function openHelp(){ document.getElementById('helpModal').classList.add('open'); }
             function closeHelp(){ document.getElementById('helpModal').classList.remove('open'); }