(이전편 읽고 오세용)
우리가 지금 궁극적으로 해야하는 것은 children은 밖에 있는 루트 페이지를 보여주고, modal은 @modal 안에 있는 /i/flow/login을 보여주어야 한다.
다시 정리하면,
현재 우리 상황은
루트 페이지일 때 -> 밖에 있는 루트 페이지 + default.tsx
/i/flow/login일 때 -> 밖에 있는 /i/flow/login + @modal의 /i/flow/login
궁극적인 목표는
/i/flow/login일 때 -> 밖에 있는 / + @modal의 /i/flow/login
인터셉팅 라우트
공식문서를 살펴보자.
Intercepting routes allows you to load a route from another part of your application within the current layout. This routing paradigm can be useful when you want to display the content of a route without the user switching to a different context.
For example, when clicking on a photo in a feed, you can display the photo in a modal, overlaying the feed. In this case, Next.js intercepts the /photo/123 route, masks the URL, and overlays it over /feed.
intercepting route는 현재 레이아웃 내에서 다른 파트의 route를 로드할 수 있게 해준다. 이 라우팅 패러다임은 다른 컨텍스트로 전환하지 않고 경로의 내용을 표시하려는 경우에 유용하다.
예를 들어 피드내 사진을 클릭했을 때 피드의 사진과 함께 모달이 표시 피드위에 표시되어야 한다면 Next.js는 /feed route를 가로채서 URL을 mask하여 /photo/123을 대신 표시한다.
-> 쉽게 설명하자면 사용자가 feed를 보고 있다가 사진을 클릭했을 때, /feed의 경로가 가로채지면서 /photo/123이 보여지게 된다.
-> 여기서 재밌는 점은 그냥 url을 치고 왔을 때랑, intercept 했을 때의 코드를 다르게 설정할 수 있다는 점이다.
-> 이 사진에서 보면 (..)이 되어 있는 것이 intercept 표시이다 (후에 설명)
-> 여기서는 intercept 된 애는 modal으로 보여주고, 그냥 url을 쳐서 들어온 사람이 있다면 전체화면으로 사진을 보여주게 된다.
코드 컨벤션
-> 기존 폴더 이동과 마찬가지로 사용된다고 생각하면 된다!
- 인터셉트 하고 싶은 애와 같은 부모를 향하면 끝!!
-> 위의 예시와 함께보면, 위의 예시는 (..)이었다.
- @는 원래 경로에 포함되지 않기에 건너뛰고, 부모 하나 나가면 feed, 또 하나 더 나가면 그 상위 부모가 나오기에 photo와 같은 부모를 가지게 된다.
z.com
다시 돌아와보자
우리의 폴더구조이다.
고려해야 할 점
일단 하기에 앞서 고려해야할 점!
1. redirect
/login -> /i/flow/login으로 현재 redirect를 시켜놨다.
redirect는 서버 컴포넌트이므로 intercepting Route가 잘 작동하지 않는다(url을 바꿔주며 일어나는 상황이기 때문)
"use client";
import Main from "@/app/(beforeLogin)/_component/Main";
import {useRouter} from "next/navigation";
export default function Login() {
const router = useRouter();
router.replace('/i/flow/login');
return (
<Main/>
);
}
client 컴포넌트로 변경하기!
2. /login
/login -> /i/flow/login 으로 가는 상황이기에 우리에겐 /login이 배경이 되고, /i/flow/login 모달이 그 위에 parallel 후, 인터셉트하여 뜨게 된다.
따라서 login에 루트페이지와 같은 UI를 구성해주어야 한다.
컴포넌트 만들기
같은 UI를 구성해야 한다하면, 컴포넌트 만드는 것은 당연한 일 !
next.js에서의 private 폴더를 이용하여 만들어보자
이와 같이 앞에 언더바를 붙이면 private 폴더가 만들어진다!
(url에 적용되지 않음)
intercepting route 만들기
-> 위에 설명했던 것과 같이 @는 경로로 쳐주지 않으니 (+beforeLogin도 포함) 한 부모만 거쳐서 (.)를 해준다.
(Register 페이지도 똑같이 만들어줍니당)
Before Login 끝!
(버튼 통해서 온 login) - 오른쪽 위에 난 가로채기지롱 ㅋ 확인
(새로고침 or 링크 입력으로 온 login)
