패러랠 라우트 질문(로그인 모달 관련)

로그인모달을 패러랠 라우트 방식으로 구현하는 과정에서

1. default.tsx 강의 타임라인 0:34에서

app/(beforeLogin)/@modal 폴더에 있던 page.tsx와 login.module.css파일을 복사해서

app/(beforeLogin)/i/flow/login로 디렉터리를 만들어서 거기에다가 page.tsx와 login.module.css파일로 넣으셨는데요.

URL이 http://localhost:3000/i/flow/login이면

@modal 하위에도 그 url 경로대로 폴더 구조를 맞춰서 넣어줘야 하는 것이죠?

2. 패러랠방식에 대해서 아직 감이 안잡힙니다. (beforeLogin)폴더 자식으로 @modal폴더와 layout.tsx에 가 있고 laytout.tsx에서 modal을 props로 가져옵니다.

   
   그럼 그 modal이라고 이름지은 것은 같은 뎁스에 있는 "@자기이름"인 @modal을 탐색해서 가져오는건가요?

    

import { ReactNode } from "react";
import styles from "@/app/page.module.css";

type Props = {
  children: ReactNode;
  modal: ReactNode;
};

export default async function BeforeLoginLayout({ children, modal }: Props) {
  return (
    <div>
      <div className={styles.container}>
        {children}
        {modal}
      </div>
    </div>
  );
}