Layout 구조 가이드

[sgoldenbird]

Kabana 프로젝트는 각 페이지의 성격에 따라 다음과 같은 세 가지 주요 레이아웃으로 나뉘며,
React Router의 설정에 따라 각 레이아웃이 특정 경로에 적용됩니다.

---

1. LandingLayout.tsx

목적
서비스 소개 및 로그인/회원가입 진입을 위한 랜딩 페이지 전용 레이아웃입니다.

구조

• Header: LandingHeader 컴포넌트를 사용하여 로고 및 로그인/회원가입 링크를 제공합니다.
• Main: 페이지 핵심 콘텐츠를 렌더링하는 영역입니다. (<Outlet />)
• Footer: 저작권 정보 및 GitHub 링크가 포함된 Footer 컴포넌트를 표시합니다.

---

2. AuthLayout.tsx

목적
로그인 및 회원가입 페이지를 위한 인증 전용 레이아웃입니다.

구조

• 전체 화면을 차지하는 단순한 구조로, 화면 중앙에 <Outlet />을 배치합니다.
• LoginForm, SignupForm 등 인증 관련 폼이 화면 정중앙에 오도록 구성되어 있습니다.
• 헤더나 푸터 없이, 인증 과정에만 집중할 수 있도록 설계되었습니다.

---

3. DashboardLayout.tsx

목적
로그인 후 사용하는 모든 대시보드 관련 페이지(내 대시보드, 대시보드 상세, 대시보드 수정, 마이페이지 등)에 적용되는 핵심 레이아웃입니다.

구조

• Header: DashboardHeader를 통해 페이지 제목, 멤버 목록, 사용자 프로필 등을 표시합니다.
• Sidebar: Sidebar 컴포넌트를 통해 내 대시보드 목록을 보여주고, 다른 대시보드로의 내비게이션 기능을 제공합니다.
• Main: <Outlet />을 통해 실제 페이지 콘텐츠를 렌더링하며, 사이드바의 열림/닫힘 상태에 따라 콘텐츠 영역이 동적으로 조정됩니다.

---

레이아웃과 라우터의 연동 구조

src/router/index.tsx 파일은 중첩 라우팅(Nested Routing) 구조를 사용하여 각 레이아웃을 특정 페이지 그룹의 "부모"로 설정합니다.
부모 라우트는 레이아웃 컴포넌트를 렌더링하고, 자식 라우트의 페이지들은 부모 레이아웃의 영역에 표시됩니다.

1. LandingLayout: 비로그인 사용자를 위한 공개 페이지

• 적용 경로: / (루트 경로)
• 목적: 비로그인 사용자를 위한 서비스 소개, 로그인/회원가입 진입점 제공

주요 특징

• authGuardLoader(false)를 통해 이미 로그인한 사용자는 접근할 수 없도록 제어
• 자식 라우트 index: true가 설정된 랜딩 페이지가 <Outlet />에 렌더링됨

라우터 설정 예시

{
  lazy: async () => {
    const { default: LandingLayout } = await import('@/layouts/Landing');
    const { authGuardLoader } = await import('@/loaders/authGuardLoader');
    return { Component: LandingLayout, loader: () => authGuardLoader(false) };
  },
  children: [
    {
      index: true,
      lazy: async () => {
        const { default: Component } = await import('@/pages/landing');
        return { Component };
      },
    },
  ],
}

2. AuthLayout: 인증 관련 페이지

• 적용 경로: /login, /signup
• 목적: 로그인 및 회원가입 페이지를 제공

주요 특징

• authGuardLoader(false)를 사용하여 로그인한 사용자의 접근을 차단
• 자식 라우트로 회원가입(Signup)과 로그인(Signin) 페이지를 포함

라우터 설정 예시

{
  lazy: async () => {
    const { default: AuthLayout } = await import('@/layouts/Auth');
    const { authGuardLoader } = await import('@/loaders/authGuardLoader');
    return { Component: AuthLayout, loader: () => authGuardLoader(false) };
  },
  children: [
    {
      path: SIGNUP,
      lazy: async () => {
        const { default: Component } = await import('@/pages/signup');
        return { Component };
      },
    },
    {
      path: SIGNIN,
      lazy: async () => {
        const { default: Component } = await import('@/pages/signin');
        return { Component };
      },
    },
  ],
}

3. DashboardLayout: 로그인 후 사용되는 핵심 페이지

• 적용 경로

  • /dashboards
  • /dashboard/:dashboardId
  • /dashboard/:dashboardId/edit
  • /mypage

• 목적

  • 로그인한 사용자가 이용하는 주요 기능 페이지(예: 대시보드 목록, 대시보드 상세/수정, 마이페이지 등)에 공통적으로 적용되는 메인 레이아웃입니다.

주요 특징

• authGuardLoader(true)를 통해 로그인한 사용자만 접근 가능하도록 보호
• id: 'dashboard'를 설정하여, 자식 라우트에서 useRouteLoaderData('dashboard')를 통해 부모의 로더 데이터를 공유 가능
• ApiErrorBoundary를 사용해 하위 라우트의 에러를 핸들링

---

라우터 설정 예시

{
  lazy: async () => {
    const { default: DashboardLayout } = await import('@/layouts/Dashboard');
    const { authGuardLoader } = await import('@/loaders/authGuardLoader');
    return { Component: DashboardLayout, loader: () => authGuardLoader(true) };
  },
  id: 'dashboard',
  children: [
    {
      errorElement: <ApiErrorBoundary />,
      children: [
        {
          path: MYPAGE,
          lazy: async () => {
            const { default: Component } = await import('@/pages/mypage');
            return { Component };
          },
        },
        {
          path: DASHBOARD_LIST,
          lazy: async () => {
            const { default: Component } = await import('@/pages/dashboard/list');
            return { Component };
          },
        },
        // ... 기타 대시보드 관련 자식 라우트들
      ],
    },
  ],
}

레이아웃 구성 요약

레이아웃	경로 예시	접근 권한	사용 목적
LandingLayout	/	비로그인 사용자	랜딩 페이지
AuthLayout	/login, /signup	비로그인 사용자	인증 (로그인/회원가입) 페이지
DashboardLayout	/dashboards, /dashboard/:id, /mypage	로그인 사용자	대시보드 및 마이페이지 등 주요 기능 페이지