[TIL] 2023.10.27 - 외부 영역 클릭시 Modal 닫기

 외부 영역 클릭시 Modal 닫기 

  // 케밥 모달
  const [openModal, setOpenModal] = useState(false);
  const [modalPostId, setModalPostId] = useState("");
  const onClickThreeDotsHandler = (e, postId) => {
    e.stopPropagation();
    if (modalPostId === postId && openModal) {
      // 모달이 이미 열려 있을 때 누르면 모달 닫기
      setOpenModal(false);
    } else {
      setModalPostId(postId);
      setOpenModal(true);
    }
  };

  const closeAllModals = () => {
    setModalPostId(""); // 모달 상태 초기화
    setOpenModal(false); // 모달 닫기
  };

  useEffect(() => {
    // 모달이 열려 있을 때, 외부 영역 클릭 시 모달 닫기
    window.addEventListener("click", closeAllModals); 🚨

    return () => {
      // 컴포넌트 언마운트 시에 리스너 제거
      window.removeEventListener("click", closeAllModals);
    };
  }, []);