caadiq/maplestory
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

캐릭터 카드 드래그 핸들 영역 제한

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

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
caadiq 2026-04-14 08:06:58 +09:00
parent 0c6ccecc90
commit f27c46f68d
1 changed files with 11 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
frontend/src/features/boss-crystal/user/CharacterPanel.jsx
View file

@ -1,6 +1,6 @@
import { useState } from 'react' import { useState } from 'react'
import { useMutation } from '@tanstack/react-query' import { useMutation } from '@tanstack/react-query'
import { Reorder } from 'framer-motion' import { Reorder, useDragControls } from 'framer-motion'
import { api } from '../../../api/client' import { api } from '../../../api/client'
import ConfirmDialog from '../../../components/ConfirmDialog' import ConfirmDialog from '../../../components/ConfirmDialog'
import Tooltip from '../../../components/Tooltip' import Tooltip from '../../../components/Tooltip'
@ -101,10 +101,13 @@ function CharacterContent({ char, selections, bosses }) {
function CharacterItem({ char, isSelected, selections, bosses, onSelect, onRemove }) { function CharacterItem({ char, isSelected, selections, bosses, onSelect, onRemove }) {
const [dragged, setDragged] = useState(false) const [dragged, setDragged] = useState(false)
const dragControls = useDragControls()
return ( return (
<Reorder.Item <Reorder.Item
value={char} value={char}
dragListener={false}
dragControls={dragControls}
onDragStart={() => setDragged(true)} onDragStart={() => setDragged(true)}
onDragEnd={() => { onDragEnd={() => {
// 다음 click 이벤트 후에 reset // 다음 click 이벤트 후에 reset
@ -115,14 +118,18 @@ function CharacterItem({ char, isSelected, selections, bosses, onSelect, onRemov
if (e.target.closest('button')) return if (e.target.closest('button')) return
onSelect(char.character_name) 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 isSelected
? 'border-emerald-500/40 bg-emerald-500/[0.08]' ? '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' : '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"> <svg width="12" height="16" viewBox="0 0 12 16" fill="currentColor">
<circle cx="3" cy="3" r="1.2" /> <circle cx="3" cy="3" r="1.2" />
<circle cx="9" cy="3" r="1.2" /> <circle cx="9" cy="3" r="1.2" />