From f27c46f68d9ae36d4f28807bc0b0139c7dbd1cc0 Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Tue, 14 Apr 2026 08:06:58 +0900
Subject: [PATCH] =?UTF-8?q?=EC=BA=90=EB=A6=AD=ED=84=B0=20=EC=B9=B4?=
 =?UTF-8?q?=EB=93=9C=20=EB=93=9C=EB=9E=98=EA=B7=B8=20=ED=95=B8=EB=93=A4=20?=
 =?UTF-8?q?=EC=98=81=EC=97=AD=20=EC=A0=9C=ED=95=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

카드 전체가 드래그 리스너를 잡고 있어 태블릿에서 세로 스크롤이
불가능했던 문제 해결. useDragControls로 왼쪽 핸들 영역에서만
드래그가 시작되도록 변경.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../features/boss-crystal/user/CharacterPanel.jsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/frontend/src/features/boss-crystal/user/CharacterPanel.jsx b/frontend/src/features/boss-crystal/user/CharacterPanel.jsx
index 4cef210..e46661c 100644
--- a/frontend/src/features/boss-crystal/user/CharacterPanel.jsx
+++ b/frontend/src/features/boss-crystal/user/CharacterPanel.jsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { useMutation } from '@tanstack/react-query'
-import { Reorder } from 'framer-motion'
+import { Reorder, useDragControls } from 'framer-motion'
 import { api } from '../../../api/client'
 import ConfirmDialog from '../../../components/ConfirmDialog'
 import Tooltip from '../../../components/Tooltip'
@@ -101,10 +101,13 @@ function CharacterContent({ char, selections, bosses }) {
 
 function CharacterItem({ char, isSelected, selections, bosses, onSelect, onRemove }) {
   const [dragged, setDragged] = useState(false)
+  const dragControls = useDragControls()
 
   return (
     <Reorder.Item
       value={char}
+      dragListener={false}
+      dragControls={dragControls}
       onDragStart={() => setDragged(true)}
       onDragEnd={() => {
         // 다음 click 이벤트 후에 reset
@@ -115,14 +118,18 @@ function CharacterItem({ char, isSelected, selections, bosses, onSelect, onRemov
         if (e.target.closest('button')) return
         onSelect(char.character_name)
       }}
-      className={`group relative rounded-xl border cursor-grab active:cursor-grabbing select-none ${
+      className={`group relative rounded-xl border cursor-pointer select-none ${
         isSelected
           ? 'border-emerald-500/40 bg-emerald-500/[0.08]'
           : 'border-white/5 hover:border-white/15 bg-gray-950/40 hover:bg-gray-950/60'
       }`}
     >
-      {/* 드래그 핸들 아이콘 (시각적 표시용) */}
-      <div className="absolute left-2 top-1/2 -translate-y-1/2 text-gray-600 pointer-events-none">
+      {/* 드래그 핸들 */}
+      <div
+        onPointerDown={(e) => { e.preventDefault(); dragControls.start(e) }}
+        className="absolute left-0 top-0 bottom-0 w-8 flex items-center justify-center text-gray-600 hover:text-gray-400 cursor-grab active:cursor-grabbing"
+        style={{ touchAction: 'none' }}
+      >
         <svg width="12" height="16" viewBox="0 0 12 16" fill="currentColor">
           <circle cx="3" cy="3" r="1.2" />
           <circle cx="9" cy="3" r="1.2" />