5. 맛집 추천 페이지

메인페이지에서 만들어 놓은 사이드바 UI를 가져와 사용하려고 했으나, 

사이드바의 ✈️(mainModal),❤️(bookmarkModal) 버튼을 누르면 메인페이지의 지도 기반으로 모달이 작동되어야 함.

따라서 기존대로 페이지 이동없이 사이드바 기능을 적용하면 문제가 생김.

또한, 사이드바 코드가 다른 페이지에서도 쓰이려면, toggleMainModal, toggleBookmarkModal 사용 불가능

 

👉 버튼 누를 때 URL을 메인페이지로 이동시키면서, 쿼리나 경로를 통해 어떤 모달 열지 알려주는 방식으로 해결해보기

 

/ → 메인페이지 기본
/?modal=main → 메인페이지 + 장소 검색 모달 열기
/?modal=bookmark → 메인페이지 + 찜 모달 열기
/?modal=notification → 메인페이지 + 알림 모달 열기

 

---

 

✅ 사이드바는 공통 사용을 위해, 컴포넌트로 개별 분리
✅ 버튼 누르면 URL에 쿼리(modal=main or modal=bookmark) 입력
✅ 메인페이지에서 location.search를 읽고 모달창 열림
✅ 사이드바는 navigate("/main?modal=main")

 

 

• 모달을 열 때와 닫을 때 동작을 정확히 구현하려면, 현재 URL을 통해 모달을 열고 닫는 로직을 다루어야 함
• openModal과 closeModal이 제대로 작동하려면, 현재 상태에 따라 URL을 업데이트하고, 버튼을 눌렀을 때 모달을 닫거나 열 수 있어야 함
• 모달을 닫을 때는 navigate를 이용해 URL에서 modal 파라미터를 제거해야 하고, 모달을 열 때는 URL에 해당 모달의 이름을 쿼리로 추가하는 방식

 

-> navigate("/", { replace: true })는 페이지를 리다이렉트하면서 modal 파라미터를 제거하고 메인 페이지로 이동하도록 되어 있어야 하는데, 이게 의도대로 작동하지 않는 경우

replace: true는 URL을 교체하는 방식이지만, 상태 업데이트가 제대로 반영되지 않았을 수도 있음

 

 

 

🔎 해결 시도

 

1️⃣

navigate(/?modal=${modalType}, { replace: true })를 사용하여 모달을 열 때 URL에 modal 쿼리를 추가하고, 페이지를 교체하여 상태를 업데이트

해결 ❌
→ 리렌더링된 후 URL을 제대로 반영하는 부분에서 문제가 발생했을 수 있음.

 

2️⃣

navigate 호출을 useEffect에서 location.search가 변경될 때 처리하도록 할 수 있음.

모달을 다시 누를 때 상태를 반전시키는 방식으로, 이미 열린 모달을 닫는 동작을 구현.

• useEffect: URL의 location.search가 변경될 때마다, URL 쿼리에서 modal 값을 읽어서 currentModal 상태를 업데이트
• openModal 함수: 버튼을 눌렀을 때, 이미 해당 모달이 열려 있으면 모달을 닫는 동작을 실행하도록 수정하여, 다시 눌렀을 때 모달이 토글됨.
• closeModal 함수: 모달을 닫을 때 URL에서 modal 파라미터를 제거하고, replace: true로 페이지를 교체