Next.js 병렬 라우팅 & 경로 가로채기를 통한 모달 페이지 구현 2

이전에 공부했던 Next.js의 기능인 parallel routes, intercepting routes를 이용한 모달 페이지 구현 하기.

중간에 프로젝트가 흐지부지되어서 그 이상의 진행은 하지 못했는데, 이때 공부했던 것을 바탕으로 다음 프로젝트에 적용해보았다.

 

각 파일별 기능은 위에 첨부한 글에서 모두 설명했기 때문에 이 프로젝트에서 적용한 방법에 대해서만 작성해둔다.

 

페이지의 UI는 다음과 같았다.

 

이런 모달이 신고하기/숨기기/숨김해제 로 3가지가 필요했다

 

병렬 라우팅으로 생성하고 경로 가로채기를 통해 모달을 상위에 띄우는 이 방법은 이동한 페이지 내부에서 모달을 생성해서 렌더하는 것이 아니라, 경로를 가로채서 모달 자체를 띄우는 것이니 사용자 경험이 좋아지게 될 수 있다

 

구현

폴더 구조는 다음과 같이 잡았다.

 

@modal 내 각 (.)[filename] 에 모달로 띄울 내용을 작성했다. 그리고 앞선 글에서 경험했다시피 default와 page 파일도 핵심이었다.

default 내 코드가 return null이고, @modal 폴더 내 파일들과 모달 아래에 있을 기존 페이지만 있으면 새로고침되었을 시에 같은 레벨의 다른 페이지를 보여주게 된다. 내 경우엔 [id]내의 page였다.

 

 

그래서 새로고침시에도 사용자에게 변화 없(어보이)게 페이지를 제공하기 위해 (.)[filename]과 같은 이름의 폴더들과 파일을 생성하고, default에는 모달 아래에 있을 기존 페이지를 렌더하는 페이지를 생성하도록 했다. 이제 url로 모달 페이지를 공유할 수도있고, 불의의 새로고침..으로 인해 페이지가 재랜더되어도 모달이 유지된다. 

 

default 아래의 page는 반드시 있어야 하는 파일이지만 내 경우엔 사용할 필요를 못 느낀 파일이라 <></>로 뒀다. 여기에 코드를 작성하면 모달 아래에 있을 기존 페이지에 같이 렌더된다.