요약

ESC 키 제어 방식을

useRef + focus 체크에서 window.addEventListener('keydown')로 변경했습니다.

문제 상황

처음에는 useRef를 통해 모달 루트에 포커스를 주고,

onKeyDown 이벤트에서 ESC를 감지하는 방식으로 구현했습니다.

useEffect(() => {
  if (isOpen) {
    ref.current?.focus();
  }
}, [isOpen]);

return (
  <div ref={ref} tabIndex={-1} onKeyDown={handleKeyDown}>
    ...
  </div>
);

하지만 이 방식에는 몇 가지 문제가 있었습니다.

문제점 1. 포커스 의존성

• ESC 감지는 특정 div에 포커스가 잡혀 있어야만 동작합니다.
• 따라서 포커스가 다른 요소로 이동하면 이벤트가 무시됩니다.

문제점 2. UX 경험 저하

• 인풋 요소가 포함된 모달에서는, 인풋창에 포커스가 잡히는 것이 UX 측면에서 자연스럽습니다.
• 하지만 이 경우 모달 루트가 포커스를 잃어버리면 ESC 이벤트가 동작하지 않게 됩니다.

접근 과정