[Next.js] parallel + intercepting Routes 활용한 모달 닫기

Next.js App router에서는 parallel Routes와 intercepting Routes를 활용해 모달 띄울 수 있다.

이렇게 만든 모달을 어떻게 닫을 수 있을까?

1. 이런 고민을 하게 된 이유

parallel + intercepting routes를 통해 모달을 구현 했다.

모달의 어떤 부분을 클릭하면 다른 웹페이지로 이동하길 원했다.

때문에 특정 컴포넌트를 Link로 구성에 페이지 이동을 하고자했다.

웹 페이지 URL이 바뀜과 동시에 화면에 떠 있던 모달 뒷배경은 의도한 페이지로 이동했지만, 모달이 사라지지 않았다.

모달이 필요없는 페이지로 이동했을 때 모달을 어떻게 닫을 수 있을까?

2. 공식문서를 다시 읽어보자.

모달 닫기 관련 공식문서 바로가기

두가지 방법을 소개하고 있다.
1. router.back()을 사용하는 방법.
2. catch-all segment를 사용하는 방법.

router.back()을 사용하는 방법은 닫기 버튼을 눌렀을 때 이전 페이지로 돌아가며 모달이 닫히는 방식이기 때문에 나의 고민에는 도움이 되지 못한다.

catch-all route를 사용하는 방법으로 고민을 해결할 수 있었다.

3. catch-all route로 해결

공식문서에서는 다음과 같이 소개한다.

모달 slot을 띄울 필요가 없는 페이지로 이동했을 때 catch-all route를 활용해서 null을 반환하라.

때문에 아래와 같이 catch-all route를 하나 만들어서 @modal 슬롯에 매칭되지 않는 페이지들에 대해서 null을 반환하도록 했다.

// @modal/[...catchAll]/page.tsx
export default function catchAll() {
  return null;
}

catch-all segment의 등장과 함께 생긴 궁금증..

catch-all segment(route)를 사용한 위와 같은 상황에서 catch-all segment가 default.tsx의 역할을 할 수 있다고 생각했고 이 부분이 마냥 틀린 것만은 아니었다.

내가 경험한 soft navigation의 상황에서는 default.tsx가 아닌, catch-all segment가 반응했다.
-> 이건 당연하다고 생각. default.tsx는 애초에 hard navigation에서 active slot을 찾지 못하는 상황을 대비하기 위한 것이니까.

근데 대부분의 hard navigation의 상황에서도 default.tsx가 아닌, catch-all segment가 반응했다.

catch-all segment가 아닌, default.tsx가 반응한 경우 다음과 같다.
layout이 중첩되고, 중첩된 layout에서도 parallel route를 사용한 경우.
-> 이 경우에는 왜 hard navigation 상황에서 default.tsx가 반응하는지 공식문서를 뚫어져라 봐도 모르겠다... ㅠ