[Next.js] 예약 창 모달 만들기

캠핑장 디테일 페이지에서 특정 캠핑장 예약하기 버튼을 클릭하면 예약 모달창이 나오도록 구현해보자.

캠핑장 디테일 페이지(/camp/detail/aaa)가 배경이 되고 예약하기 버튼을 클릭하면 위의 사진 처럼 예약 정보 모달이 나오도록 구현하자. 모달 창이 나올 때는 주소가
(/camp/detail/aaa/reservation)로 변경되어야 한다.

디테일 페이지에서 예약하기 버튼을 클릭하면 주소를
/reservation으로 이동하고 모달을 띄워줘야 한다.

패러렐 라우트와 intercept route를 통해 이용할 수 있다.

1. Parallel Routing(병렬 라우팅)

동일한 레이아웃에서 하나 이상의 페이지를 동시에 혹은 조건부로 렌더링을 할 수 있다.

예약 모달을 띄워줄 때 배경은 디테일 페이지이며 그 위에
모달을 띄워주기 위해 page.tsx가 같은 상위 폴더 안에 있어야 한다. 즉 , id 폴더 안에 있어야 한다.
또한 레이아웃 파일도 모달 안에 있는 폴더 위치가 같아야 한다.

예를 들어, 예약 모달은 reservation 폴더 안 @modal 안에 있다면 패러렐 라우트를 하기 위해 페이지와 레이아웃 파일이 예약 모달이 있는 쪽 상위 폴더인 reservation
폴더에 있어야 한다.

📁 camp 👉 📁detail 👉 📁[id] 👉📁@modal 👉📜 page.tsx
📁 camp 👉 📁detail 👉 📁[id] 👉 📜 page.tsx

예약 모달 창을 닫으면 다시 디테일 페이지만 보여주기 위해 이전 페이지였던 디테일 페이지 주소로 돌아가야 한다.

 const router = useRouter();
const onCloseHandler = () => {
    router.back();
  };

이제 달력 버튼을 클릭하면 달력을 나오도록 설정하자.