Next.js App Router 심화: 병렬 라우트 + 인터셉팅

app/
├── (auth)/
│   ├── login/page.tsx
│   └── signup/page.tsx
├── (dashboard)/
│   ├── layout.tsx
│   ├── overview/page.tsx
│   └── settings/page.tsx
└── (marketing)/
    ├── about/page.tsx
    └── pricing/page.tsx

(auth), (dashboard) 등은 URL에 안 나타남
→ 다른 layout 적용 가능

app/
├── layout.tsx
├── page.tsx          # 메인
├── @analytics/       # 병렬 슬롯
│   ├── default.tsx
│   ├── revenue/page.tsx
│   └── users/page.tsx
└── @notifications/
    ├── default.tsx
    └── unread/page.tsx

// app/layout.tsx
export default function Layout({
  children,
  analytics,
  notifications,
}: {
  children: React.ReactNode;
  analytics: React.ReactNode;
  notifications: React.ReactNode;
}) {
  return (
    <div className="dashboard">
      <main>{children}</main>
      <aside>{analytics}</aside>
      <aside>{notifications}</aside>
    </div>
  );
}

app/
├── feed/
│   ├── page.tsx
│   └── photo/[id]/page.tsx       # 직접 URL
└── @modal/
    └── (.)photo/[id]/page.tsx    # 인터셉트 (모달)


(.) — 같은 레벨
(..) — 상위 레벨
(..)(..) — 두 단계 위
(...) — 루트

// app/@modal/(.)photo/[id]/page.tsx
import { Modal } from '@/components/Modal';

export default function PhotoModal({ params }: { params: { id: string } }) {
  return (
    <Modal>
      <PhotoView id={params.id} />
    </Modal>
  );
}