React 드래그 요소가 선택 취소 후 원래 자리로 돌아가지 않는 문제 해결하기

 

🔍 문제 상황

React에서 사용자가 옵션을 드래그하여 특정 영역(DropZone)에 놓고 선택하는 인터페이스를 만들었다.
하지만 사용자가 "선택 취소" 버튼을 누른 후에도 드래그했던 요소가 원래 자리로 돌아가지 않고 공중에 떠 있는 현상이 발생했다.

📌 발생한 현상

• 선택 취소 버튼을 누르면 선택된 항목(selectedItem)은 초기화됨
• 하지만 드래그 중이던 요소가 리스트로 복귀하지 않고, 여전히 화면 상에 떠 있음
• 아래와 같은 모습이 나타남:

---

🧠 원인 분석

드래그 시 적용되던 스타일:

style={
  isDragging && touchingItem?.id === item.id
    ? {
        position: "absolute",
        left: touchPos.x - 60,
        top: touchPos.y - 30,
        zIndex: 1000,
        pointerEvents: "none",
      }
    : {}
}

문제는 선택 취소 시 selectedItem만 초기화하고,
드래그 상태인 touchingItem과 isDragging은 그대로 유지되어 있었기 때문에,
해당 요소는 여전히 "드래그 상태"로 남아 있었다는 점이다.

---

✅ 해결 방법

선택 취소 시 드래그 상태도 함께 초기화해주면, 박스가 다시 원래 리스트에 자연스럽게 나타난다.

---

🔧 수정된 코드

const handleCancelSelection = () => {
  setFadeOut(true);

  setTimeout(() => {
    setSelectedItem(null);     // 선택된 항목 초기화
    setTouchingItem(null);     // ✅ 드래그 중이던 항목 초기화
    setIsDragging(false);      // ✅ 드래그 상태 종료
    setFadeOut(false);         // fadeOut 애니메이션 초기화
  }, 500); // 애니메이션 시간과 일치
};

---

💡 핵심 포인트 정리

• 드래그 중 적용되는 style은 touchingItem과 isDragging 상태에 의존한다.
• 선택 취소 시에는 selectedItem만 초기화하는 게 아니라, 드래그 상태들도 함께 초기화해야 한다.
• 이로 인해 리스트에서 박스가 다시 보이게 된다.