Route Example

Route 사용에 대한 내용입니다.

해당 기능은 공통업무 기능입니다. 다음과 같이 미리 준비된 Boilerplate confy-app 형태로 제공됩니다.
Route 기능은 react-router 라이브러리를 사용하여 구현되어 있습니다.

주요 구성 요소

폴더 구조

프로젝트의 명명 규칙에 따라 아래와 같은 규칙을 이용하여 route 요소를 작성합니다.

─ src
  └── shared
      └── router/
          ├── defaultRouter.provider.tsx  - 기본 라우터 설정 및 구성
          ├── protectedRoute.tsx          - 인증 보호 라우트 컴포넌트
          └── routes/                     - 라우트 정의 파일 디렉토리
              ├── member.route.tsx        - 회원 관련 라우트
              ├── menu1.route.tsx         - 메뉴1 라우트 
              ├── menu2.route.tsx         - 메뉴2 라우트
              └── menu3.route.tsx         - 메뉴3 라우트 (인증 보호 라우트 적용)

defaultRouter.provider

애플리케이션의 전체 라우팅 구조를 정의하고 제공하는 라우터 프로바이더 입니다.
주요 기능:
- 메인 레이아웃과 중첩 라우트 구성
- 다양한 메뉴 라우트 통합 (index 역할)
- 기타 페이지(홈, 사이트맵 등 독립된 페이지) 경로 정의

protectedRoute

인증이 필요한 페이지에 접근을 제어하는 컴포넌트입니다.
주요 기능:
- 로컬 스토리지에서 인증 토큰 확인
- 인증되지 않은 사용자를 홈페이지로 리디렉션
- 인증 상태에 따라 적절한 컴포넌트 렌더링

Usage

route 추가 방법

1.routes/ 디렉토리에 새로운 라우트 파일 생성 (예: new-feature.route.tsx)
2.라우트 구조 정의 (레이아웃, 서브페이지 등)
3.defaultRouter.provider.tsx에 새 라우트 모듈 import 및 라우터 설정에 추가

protectedRoute 사용 방법

인증이 필요한 페이지나 섹션을 보호하려면 다음과 같이 ProtectedRoute 컴포넌트로 감싸주세요:

코드 예시 (menu3.route.tsx 참조):

import ProtectedRoute from '@/shared/router/protectedRoute'
import { Suspense } from 'react'

export const routeItem = {
  path: '/secure-path',
  element: (
    <Suspense fallback={<div>Loading...</div>}>
      <ProtectedRoute>
        <YourSecureLayout />
      </ProtectedRoute>
    </Suspense>
  ),
  children: [
    // 하위 라우트 정의
  ]
}

지연 로딩 적용 방법

코드 예시 (menu3.route.tsx 참조):

/src/store/SiteStore.ts 스토어 작성

// 컴포넌트 지연 로딩 정의
const LazyComponent = lazy(() => import('@/path/to/component'))

// 라우트에 적용
{
  path: '/path',
  element: (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  )
}