증상

마우스 환경에서 드래그 중 항목이 중간에 멈추거나 위치 계산이 튀는 문제가 반복되었습니다.

터치 중심 구현을 데스크톱 입력에 그대로 적용한 것이 핵심 원인이었습니다.

개선 포인트

드래그 시작 지점을 핸들로 제한하고, 항목 본문과 드래그 제스처를 분리해 오작동을 줄였습니다.

  • 핸들 영역에서만 drag start 허용
  • 플로팅 프리뷰로 시각 피드백 고정
  • 드롭 인디케이터를 neutral 톤으로 통일
  • 자동 스크롤 임계값 재조정

구현 예시

이벤트 충돌을 줄이기 위해 포인터 캡처 시점을 명확히 분리했습니다.

TS
const onHandlePointerDown = (id: string) => {
  activeDragId.current = id;
  setDragState({ mode: 'preview', id });
};

const onItemPointerDown = () => {
  // 본문 클릭은 선택/편집만 처리
};

결과

드래그 실패율과 시각적 깜빡임이 크게 줄었고, 데스크톱 사용자의 정렬 작업 시간이 단축됐습니다.