📝 복잡한 모달 처리를 위한 구조

폴더 구조 예시

app/
└── (routes)/
    ├── products/
    │   ├── page.tsx            # 상품 목록 페이지
    │   └── [id]/
    │       └── page.tsx        # 상품 상세 페이지
    ├── @modal/.                # 페러럴 라우팅
    │   ├── default.tsx         # 모달이 닫혔을 때 표시될 컴포넌트
    │   └── (.)products/        # 인터셉팅 라우트
    │       └── [id]/
    │           └── page.tsx    # 모달용 상품 상세 페이지
    └── layout.tsx              # 메인 레이아웃

💡 주요 개념

레이아웃 설정

// app/(routes)/layout.tsx
export default function RootLayout({
  children,
  modal
}: {
  children: React.ReactNode
  modal: React.ReactNode
}) {
  return (
    <>
      {children}
      {modal}
    </>
  )
}

모달 페이지 구현

// app/(routes)/@modal/(.)products/[id]/page.tsx
export default function ProductModal({
  params
}: {
  params: { id: string }
}) {
  return (
    <div className="modal">
      <h1>Product {params.id} Modal</h1>
      {/* 복잡한 모달 내용 */}
    </div>
  )
}

✅ 동작 방식

  1. /products 접속 시 기본 페이지 표시
  2. 특정 상품 클릭 시 /products/[id] URL로 이동
  3. 인터셉팅 라우트가 이를 감지하여 모달로 표시
  4. 모달 닫을 시 이전 URL로 복귀

🎯 적용 케이스 예시

⚠️ 주의사항