이벤트 전파로 인해 외부영역이 아닌 팝업창을 클릭해도 팝업창이 닫히는 문제가 발생했다. stopPropagation() 을 사용하려고 했지만 각 자식엘리먼트에서 따로 막아줘야 하는 것 같아 다른 방법을 사용했다.

  const togglePop: MouseEventHandler<HTMLElement> = (e): void => {
    const target = e.target as HTMLElement
    if (target !== e.currentTarget) {
      return
    }
    setOpen(!open)
  }

target 과 currentTarget 은 조금 차이가 있는데 currentTarget 은 이벤트가 처음 발생하는 곳, 즉 이벤트를 설정해놓은 곳을 반환하고, target 은 이벤트가 위임되어 발생하는 위치, 내가 클릭한 요소를 반환한다.