[Trouble Shooting] 모달 드래그 시 꺼지지 않도록 처리

[sgoldenbird]

🐞 문제 상황 (Problem Description)

모달 내부를 드래그하는 중에 마우스가 바깥으로 벗어나면
의도하지 않았음에도 모달 외부 클릭으로 인식되어 모달이 닫히는 문제가 발생했다.
특히 모바일이나 터치 기반 환경에서 실수로 닫히는 사례가 잦았고, UX를 해치는 요소로 작용했다.

---

💻 환경 정보 (Environment)

• 브라우저: Chrome 123
• 프론트엔드 프레임워크: React 19, Vite 사용
• 배포 환경: 배포 전
• API 서버: fandom-k-api.vercel.app(외부 REST API, 수정 불가)

---

🔍 발생 원인 분석 (Investigation)

• onMouseUp 이벤트 시점에서 e.target === e.currentTarget 조건으로 backdrop 클릭 여부를 판단하고 있었음
• 하지만 사용자가 모달 내부에서 드래그하다가 mouseup을 backdrop에서 놓는 경우에도 닫힘이 발생함
• 즉, 드래그와 클릭을 구분하지 못하고 모든 mouseup을 외부 클릭으로 잘못 판단한 것이 원인이었음

---

🛠 시도해본 해결 방법 (Attempts)

시도 내용	결과
❌ onMouseDown 시 드래그 시작 구분 없이 클릭만으로 닫기 처리	드래그 중 실수로 모달 닫힘 문제 발생
✅ MouseDown 시 드래그 시작 여부 초기화 (isDragging = false)	드래그 여부 추적 준비 완료
✅ MouseMove 이벤트 발생 시 드래그 상태로 전환 (isDragging = true)	실제 드래그 동작을 감지 가능
✅ MouseUp 시 드래그가 아니고, 배경 클릭일 경우에만 onClose 실행	드래그 중 모달 닫힘 방지 성공

---

✅ 최종 해결 방법 (Final Solution)

useState로 isDragging 상태를 관리하여

• mouse down → isDragging을 false로 초기화
• mouse move → true로 설정
• mouse up → 드래그가 아니면서 e.target === e.currentTarget인 경우만 onClose() 호출
  

---

💡 알게 된 점 (Lessons Learned)

• 드래그와 클릭은 마우스 이벤트 흐름상 다른 동작이지만, 처리 로직에선 이를 명확히 구분하지 않으면 UX 문제가 발생할 수 있다.
• 클릭 이벤트 하나로 단순하게 처리하기보다는, 실제 사용자 동작을 감지하고 분기 처리하는 것이 안정적인 UX를 만든다.