인터셉트 + 패러렐 라우트 catch-all route 모달 닫힘 경로 문제

Question

안녕하세요 제로초님! 제로초님 강의 보면서 개인 프로젝트 해보고 있는 수강생입니다. 현재 로그인과 회원가입 페이지를 인터셉트와 패러렐 라우트를 이용했는데, (저의 현재 폴더 구조입니다.) app/ ├── layout.tsx ├── page.tsx // 메인 페이지 ├── @modal/ │ ├── (.)login/ │ │ │ └── page.tsx // 로그인 모달 페이지 │ ├── (.)signup/ │ │ │ └── page.tsx // 회원가입 모달 페이지 // 프로필 수정 모달 페이지 │ ├── [...catchAll]/ │ │ └── page.tsx // 모달을 닫기 위한 catch-all 라우트 ├── (auth)/ │ ├── login/ │ │ └── page.tsx // 로그인 페이지 │ ├── signup/ │ │ └── page.tsx // 회원가입 페이지 └── 기타 페이지들...   회원가입이 되면 메인 페이지('/')로 이동하게 했는데 router.push, replace로는 경로는 이동이 되나 모달이 닫히지 않는 문제가 있었습니다. 그래서 catch-all route를 이용해서 특정 경로에 매칭되지 않으면 모달이 닫히도록 null을 반환하였습니다. // catch-all route export default function ModalCatchAll() { console.log('CatchAll triggered'); return null; } 그런데 router.push('/') 메인 홈페이지인 '/' 경로로 이동을 해도 catch-all route가 실행되지 않았는데, 메인 경로 외에 게시글 라우트로 router.push('/foster') 경로를 변경했더니 catch-all route가 실행이 되었습니다.   router.back 말고도 push나 replace를 사용하고 싶어서 catch-all route를 사용했는데 메인 홈 경로는 안되고 다른 경로로 이동시킬 때는 catch-all route가 왜 적용되는지 모르겠어서 질문 남깁니다..

제로초(조현영) · Answer

이게 next.js 버그일 수도 있어서 기본적으로는 .next 캐시 지우고 다시 빌드해서 실행해보셔야 합니다. layout에서는 {modal}과 {children} 둘 다 사용하는 상황인 것이죠? https://github.com/vercel/next.js/discussions/50284 이 이슈같은데요. layout과 page가 같이 있으면 발생할 수 있다고 하네요 https://github.com/vercel/next.js/discussions/50284#discussioncomment-10098569

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. kyung3098님, 패러랠 라우트와 인터셉터 라우트를 사용하여 모달을 제어하고 계신데, 문제는 홈 경로(&lsquo;/&rsquo;)로 이동 시 모달이 닫히지 않는 부분인 것 같습니다. 그리고 &lsquo;/foster&rsquo; 같은 다른 경로로 이동시에는 정상적으로 동작하는 상황이 궁금하신 것 같습니다. 문제에 대한 분석과 제안: URL과 Router의 동작 : router.push 를 통해 / 경로로 이동할 때, 인터셉터 라우트가 해당 경로에서도 활성화되지 않는 이유는 아마도 / 경로가 이미 모달을 닫은 후의 경로일 가능성이 있습니다. 다른 경로로 변경될 때는 새로운 경로 감지로 인해 catch-all이 트리거될 수 있습니다. 모달과 라우팅 문제 해결 방안 : useEffect를 활용 : 모달이 열려 있는 상태를 감지하고 특정 조건(예: 홈 페이지로 라우팅)에서 모달을 닫는 로직을 useEffect 로 추가하는 방법을 고려해보세요. 라우터 모듈로의 모달 상태 전환 : 라우터를 통한 모달 상태 초기화나 특정 URL에서 모달을 강제로 닫도록 설정하는 것도 방법일 수 있습니다. Catch-All 라우트 작동 분석 : catch-all 라우트가 특정 라우트에서 동작하지 않는 문제는, 라우터의 주문형 설정, 상태관리, 또는 페이지 초기화 순서와 관련이 있을 수 있습니다. Modal 또는 라우터의 히스토리 상태를 초기화하는 코드 및 작동 순서를 점검해 보세요. 관련 참고 링크로 해당 문제를 겪은 다른 수강생들의 질문들을 살펴보시면 도움이 될 수 있습니다: - 모달 사용 시 Catch-All 라우팅에 대한 문제 해결 이러한 문제는 종종 코드의 작은 실수나 구성에 기인할 수 있습니다. 보다 명확한 해결을 위해 전체 코드를 검토하거나, 강의 내 유사한 예제를 참고하시기 바랍니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.