ex) 예시
/app # Next.js App Router 루트
│
├── /dashboard # 대시보드 페이지 (로그인 후 진입)
│ ├── layout.tsx # 대시보드 공통 레이아웃
│ └── page.tsx # 대시보드 메인 페이지
│
├── /login # 로그인 페이지
│ └── page.tsx # <LoginForm /> 사용
│ └── features/auth/LoginForm.tsx
│ ├── hooks/useAuth.ts # 인증 상태 관리
│ ├── features/auth/authAPI.ts # 로그인 API 호출
│ └── components/Button.tsx # 버튼 UI
│
/components # 공통 UI 컴포넌트
│ ├── Button.tsx # 재사용 버튼 컴포넌트
│ └── Header.tsx # 상단 헤더
│
/__test__ # 테스트 코드
│ └── /dashboard # dashboard 추가
│ └── dashboard.test.js
│
│
│
/hooks # 커스텀 훅 모음
│ └── useAuth.ts # 인증 상태 훅
│
/lib # 외부 라이브러리, 유틸 등
│ └── axios.ts # Axios 인스턴스 설정
│
/types # 공통 타입 정의
│ └── type.ts # 사용자 관련 타입들
│
/public # 정적 파일
│ ├── /images # 이미지 파일
│ └── /fonts # 웹폰트 등 리소스
페이지 네이밍 컨벤션: