[Refactor/#20] 라우터 구조 리팩토링 및 lazy loading 적용

[Seojegyeong]

🚨 관련 이슈

#20

✨ 변경사항

• 🐞 BugFix Something isn't working
• 💻 CrossBrowsing Browser compatibility
• 🌏 Deploy Deploy
• 🎨 Design Markup & styling
• 📃 Docs Documentation writing and editing (README.md, etc.)
• ✨ Feature Feature
• 🔨 Refactor Code refactoring
• ⚙️ Setting Development environment setup
• ✅ Test Test related (storybook, jest, etc.)

✏️ 작업 내용

1. 라우터 폴더 구조 리팩토링

단일 파일에 집중되어 있던 라우팅 로직을 유지보수를 고려하여 모듈 단위로 분리함

• Router.tsx : 라우팅 진입점, 분리된 하위 라우트 통합
• AuthRoutes.tsx : 로그인, 회원가입 등 인증 관련 라우트
• MainRoutes.tsx : 대시보드, 광고 관리 등 메인 서비스 관련 라우트
• UserRoutes.tsx: 마이페이지 등 유저 관련 라우트

2. Code Splitting 적용

• lazy 사용: MainRoutes.tsx, AuthRoutes.tsx 등에서 각 페이지 컴포넌트를 동적으로 로드하도록 변경
• Suspense 적용: lazy로 로드되는 컴포넌트가 로딩되는 동안 보여줄 UI 처리를 위해 레이아웃 컴포넌트에 Suspense를 적용
• MainLayout.tsx, AuthLayout.tsx: Outlet을 Suspense로 감싸고, 로딩 중에는 fallback UI(임시!)가 표시

3. 인증 가드

• Router.tsx 내에 인증 여부를 체크하는 AuthGuard 컴포넌트를 추가
  비로그인 유저가 메인 서비스 접근 시 /signup으로 리다이렉트 처리

4. Layout 구조화

• DefaultLayout: 전역 모달 등 앱 전체에 필요한 Provider를 감싸는 용도
• AuthLayout, MainLayout: 각 섹션별 UI 구조 및 Suspense 처리 담당

폴더 구조

src
├── layout
│   ├── auth
│   │   └── AuthLayout.tsx
│   ├── default
│   │   └── DefaultLayout.tsx
│   └── main
│       └── MainLayout.tsx
└── routes
    ├── AuthRoutes.tsx
    ├── MainRoutes.tsx
    ├── UserRoutes.tsx 
    └── Router.tsx

리팩토링 효과

Before

After

• index 번들 상태: 591 KB → 481 KB로 감소
• Vite의 500 KB chunk warning ❌ 발생하지 않음
• 각 라우트가 별도 JS chunk로 분리됨. 해당 URL 접근 시에만 네트워크 요청

😅 미완성 작업

1. Skeleton UI 적용 예정 : 현재 Suspense의 fallback으로 Loading... 를 사용 중.

• 추후 각 페이지 레이아웃에 맞는 스켈레톤 UI로 교체할 예정

2. AuthGuard API 연결 시 구체화 예정

📢 논의 사항 및 참고 사항

N/A

💬 리뷰어 가이드 (P-Rules)
P1: 필수 반영 (Critical) - 버그 가능성, 컨벤션 위반. 해결 전 머지 불가.
P2: 적극 권장 (Recommended) - 더 나은 대안 제시. 가급적 반영 권장.
P3: 제안 (Suggestion) - 아이디어 공유. 반영 여부는 드라이버 자율.
P4: 단순 확인/칭찬 (Nit) - 사소한 오타, 칭찬 등 피드백.

[jjjsun]

P4: pages/auth/Sigup.tsx 에서 로그인하기 버튼 링크이동이 잘 안되는데 혹시 테스트용으로 해두신걸까요?

[jjjsun]

P4: 로그인 버튼이동 원활히 잘 됩니다!

[YermIm]

P4: 확인했습니다! 수고하셨어요 :)