🛠 모달 클릭하면 닫혀버리는 이슈 해결기 (React + Zustand + Portal 기반)

📌 문제 상황

회원탈퇴 버튼을 눌렀을 때, 모달이 열리자마자 곧바로 닫혀버리는 문제가 발생했다.
심지어 Modal 컴포넌트 내부에서 클릭한 건데도 onClose()가 호출되며 사라졌다.

🔍 원인 분석

모달 컴포넌트 내부 코드에서 다음과 같은 로직이 있었다:

document.addEventListener('click', handleClick, true);

handleClick은 이렇게 동작했다:

const handleClick = (e: MouseEvent) => {
  if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
    onClose();
  }
};

즉, 모달 내부가 아니라면 무조건 닫아버리는 구조였는데…

🔻 문제는 여기 있었다:

• 모달 구조가 복잡하거나,
• 내부의 버튼, span, input 등이 modalRef.current 바깥으로 인식되는 경우

→ 내부 클릭이어도 "외부 클릭"으로 오해하고 닫아버림

🧪 시도했던 것들

• console.log(e.target) 찍어서 뭐 눌렀는지 확인
• modalRef.current.contains(e.target)에서 false 나오는 요소들 분석

결국, 버튼이나 텍스트도 ref가 참조한 엘리먼트 안에 없어 보이는 것처럼 작동할 수 있다는 걸 확인함.

✅ 해결 방법

1. 모달 전체 영역을 감싸는 div에 커스텀 속성 부여:

<div ref={modalRef} data-ignore-outside-click className="...">

2. handleClick()에서 이 속성이 있는지 검사:

const handleClick = (e: MouseEvent) => {
  const target = e.target as HTMLElement;

  if (target.closest('[data-ignore-outside-click]')) return;

  if (modalRef.current && !modalRef.current.contains(target)) {
    onClose();
  }
};

🔐 이로써 data-ignore-outside-click 속성이 모달 내부임을 명시하는 방패 역할을 하게 됨.

💡 교훈

• useRef().current.contains(e.target)만으로는 모든 내부 클릭을 안전하게 보장하지 못한다.
• closest('[data-ignore-outside-click]') 같은 커스텀 속성으로 클릭 필터를 명확하게 걸어주는 게 더 안정적.
• 모달 내부가 여러 컴포넌트로 분리되어 있거나, 포탈 구조에서 렌더링 계층이 꼬이면 이런 버그가 자주 생길 수 있다.

🧩 보너스 팁

React에서 document.addEventListener(..., true)처럼 캡처링 단계로 이벤트를 잡는 건 모달 외부 클릭 감지에는 효과적이지만,
우선순위 충돌이나 버블링 방해 문제도 발생할 수 있으므로 신중히 써야 한다.