[Feature/#24] Skeleton UI 적용 및 Router 구조 정리

[Seojegyeong]

🚨 관련 이슈

#24

✨ 변경사항

• 🐞 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. 라우터 아키텍쳐 최적화

(1) Route 분리

• 성격에 따라 AuthRoutes(인증 전)/MainRoutes(인증 후)로 라우트 분리

(2) Code Splitting적용

• React.lazy와 Suspense를 활용해 페이지 단위로 코드 분할
• loadable: 유틸리티 함수를 구현, 컴포넌트 로딩과 Fallback UI(스켈레톤) 연결 표준화

2. 레이아웃 시스템: 계층적 레이아웃 적용

• GlobalLayout: 최상위에서 ModalProvider, Toaster 등 전역 컨텍스트를 관리
• AuthLayout: 로그인/회원가입 페이지 전용
• MainLayout: 메인 서비스 페이지 전용

3. 스켈레톤 UI 구현

• 기본 컴포넌트: animate-shimmer 효과가 적용된 공용 Skeleton 구현
• 페이지별 맞춤 적용
• 적용 대상: Login, AuthForm, Signup, SignupStep01 등

 src
├── components
│   ├── auth
│   │   ├── skeleton          # 인증 관련 스켈레톤 UI 컴포넌트들
│   │   │   ├── AuthFormSkeleton.tsx
│   │   │   ├── LoginSkeleton.tsx
│   │   │   ├── SignupSkeleton.tsx
│   │   │   └── SignupStep01Skeleton.tsx
│   └── common
│       └── skeleton          # 기본 스켈레톤 베이스 컴포넌트
│           └── Skeleton.tsx 
├── layout
│   ├── auth
│   │   └── AuthLayout.tsx    # 로그인/회원가입 페이지용 레이아웃
│   ├── main
│   │   └── MainLayout.tsx    # 메인 서비스 페이지용 레이아웃
│   └── GlobalLayout.tsx      # 최상위 레이아웃 (Modal, Toaster 포함하고 있음)
├── routes
│   ├── AuthRoutes.tsx        # 인증 관련 라우트 정의 - Lazy Load 
│   ├── MainRoutes.tsx        # 메인 서비스 라우트 정의 - Lazy Load
│   └── Router.tsx            # 라우터 메인 설정
└── utils
    └── loadable.tsx          # Lazy Loading을 위한 HOC 유틸리티

라우터 등록 가이드

페이지 컴포넌트는 lazy와 loadable 유틸리티를 사용하여 등록해야 합니다!
라우트 파일(AuthRoutes.tsx / MainRoutes.tsx)을 참고해 작성해주세요

(1) 스켈레톤 UI가 있는 경우

• loadable의 두번째 인자로 스켈레톤 컴포넌트를 넘겨줍니다.
  const Login = loadable( lazy(() => import("@/pages/auth/Login")), <LoginSkeleton />, );

(2) 스켈레톤 UI가 없는 경우

• 두번째 인자 생략하면 자동으로 기본 Loading...이 보임!
  const Timeline = loadable( lazy(() => import("@/pages/dashboard/timeline/Timeline")), );

😅 미완성 작업

N/A

📢 논의 사항 및 참고 사항

N/A

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

[jjjsun]

P4: 스켈레톤 추가함으로써 움직임이 추가되어 훨씬 효과적으로 잘 보이는것같습니다! 고생하셨습니다!

[YermIm]

P4: 화면이 로드되기 전에 그 부분을 미리 보여주는 게 훨씬 좋은 것 같습니다! 수고하셨습니다:D