next.js 모달 기능 관련 질문드립니다

Question

A 컴포넌트 const [modal, setModal] = useState({ show: false, ref: useRef(null), }); useEffect(() => { const handleRouteChange = () => { setModal((prev) => ({ ...prev, show: false })); }; const handleClickOutside = (e: MouseEvent) => { if ( modal.show && modal.ref.current !== e.target as Node && !modal.ref.current?.contains(e.target as Node) ) { setModal((prev) => ({ ...prev, show: false })); }; }; router.events.on("routeChangeComplete", handleRouteChange); window.addEventListener("mousedown", handleClickOutside); return () => { router.events.off("routeChangeComplete", handleRouteChange); window.removeEventListener("mousedown", handleClickOutside); }; }, [modal.show]);B 컴포넌트 const [modal, setModal] = useState({ show: false, ref: useRef(null), }); useEffect(() => { const handleRouteChange = () => { setModal((prev) => ({ ...prev, show: false })); }; const handleClickOutside = (e: MouseEvent) => { if ( modal.show && modal.ref.current !== e.target as Node && !modal.ref.current?.contains(e.target as Node) ) { setModal((prev) => ({ ...prev, show: false })); }; }; router.events.on("routeChangeComplete", handleRouteChange); window.addEventListener("mousedown", handleClickOutside); return () => { router.events.off("routeChangeComplete", handleRouteChange); window.removeEventListener("mousedown", handleClickOutside); }; }, [modal.show]);2개의 컴포넌트에서 각각 useEffect로 window에 이벤트를 등록했습니다.A 컴포넌트의 모달이 열린 상태에서 B 컴포넌트의 모달을 열면 A 모달이 닫히지 않고 두 모달이 같이 떠있는 상황이 생깁니다.하나의 모달만 연 상태에서 다른 곳을 클릭하면 잘 닫히는데 어떻게 접근해야 할까요..?이렇게 해결했습니다. useEffect(() => { const handleRouteChange = () => { setShowModal(false); }; const handleClickOutside = (e: MouseEvent) => { const targetNode = e.target as Node; const notificationIcon = document.getElementById("profileIcon"); if ( !notificationIcon?.contains(targetNode) ) { setShowModal(false); }; }; router.events.on("routeChangeComplete", handleRouteChange); window.addEventListener("mousedown", handleClickOutside); return () => { router.events.off("routeChangeComplete", handleRouteChange); window.removeEventListener("mousedown", handleClickOutside); }; }, []);요소를 참조할 때, ref말고 document.getElementId로 안전하게 가져온 후, 비교하였습니다!

몰랑토끼 · Answer

모달이 열릴때 어차피 dim을써야 하니 dim을 하나 까시고, (평소에는 투명상태로 해서) dim클릭시 모달 닫히게 하고, 디자인에서 dim에 색상이 있으시면 주시고.. 이렇게 하면 outside클릭만들필요없어요. outside클릭은 드롭다운에서 선택하지 않고 닫을때

짬굉이 · Answer

모달이 열릴때 다른모달을 닫히게 해야겠네요윈도우 쓰셧으면 윈도우의 dispatchEvent를 사용해서 custom event로 처리할수있습니다.아니면 store를 사용할수도있죠

짬굉이 · Answer

참고로 dim이라고 하면 width, height:100%인상태로 반투명한 영역을 의미합니다.그안에 position:fixed로 탑 레프트 50%씩주고 transform -50%씩주고 z-index를 줘서정중앙에 위치시키는 기법입니다.dim이 전영역에 퍼져있으므로 어딜 클릭하던 팝업이 닫히게 할수있습니다.라이브러리를 쓰지않고도 가능합니다.const Dim = styled.div`position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);z-index: 999;display: flex;justify-content: center;align-items: center;overflow: hidden;`;<> 이런식으로

next.js 모달 기능 관련 질문드립니다

3개의 답변

#window 목록