src
├─ app
│  ├─ element
│  ├─ main
│  ├─ .
│  ├─ .
│  ├─ .
│  ├─ user
│  │  ├─ forget
│  │  ├─ reset
│  │  ├─ login
│  │  ├─ verified
│  │  └─ signup
│  │     ├─ layout.tsx
│  │     ├─ page.tsx
│  │     ├─ _components
│  │     ├─ _hooks
│  │     └─ _utils
│  ├─ not-found.tsx
│  ├─ page.tsx
│  ├─ global.css
│  └─ layout.tsx
│
├─ assets
│  └─ icons
│     └─ icons.ts
│
├─ components
│  ├─ backdrop
│  ├─ button
│  ├─ .
│  ├─ .
│  ├─ .
│  └─ header
│     ├─ header.tsx
│     └─ use-header.ts
│
├─ fonts
│  └─ fonts.ts
│
├─ providers
│  └─ auth-provider.tsx
│
├─ services
│  ├─ auth-service.ts
│  └─ element-service.ts
│
├─ types
│  ├─ travel.type.ts
│  └─ user.type.ts
│
├─ utils
│  ├─ util-constants.ts
│  ├─ util-convert.ts
│  └─ util-template.ts
│
└─ svg.d.ts

📄 파일명

• 기본적으로 파일명은 케밥 케이스(aaa-bbb-ccc)를 원칙으로 생성합니다.

📂 app

• Next.js App Router 내에서 라우팅이나 클라이언트 API 등을 관리하기 위한 폴더입니다. (필수)

📁 Route Folder

• Next.js에서는 폴더를 기준으로 라우팅이 결정됩니다. 따라서 App 폴더 내에 언더바(’_’)로 시작되지 않는 폴더는 모두 path로 적용됩니다.

📁 _components

• 각 페이지와 연관된 컴포넌트들을 관리합니다.

📁 _utils

• 각 페이지나 컴포넌트와 연관된 유틸들을 관리합니다.

📁 _hooks

• 각 페이지나 컴포넌트와 연관된 커스텀 훅을 관리합니다.

📁 _rules

• 각 페이지나 컴포넌트 내에서 쓰일 순수 함수 등을 관리합니다.

📄 page.tsx / 📄 layout.tsx

• 최상위에 있는 layout은 모든 페이지에 공통적으로 쓰이는 layout을 관리합니다.
• 최상위에 있는 page는 ‘/’, 인덱스 페이지에서의 컴포넌트를 관리합니다.
  • 현재 최상위 page는 ‘/main’과 동일한 page 및 layout을 가집니다.
• 그 외 각 path별 page와 layout은 각 path에 맞는 page와 layout을 가집니다.

📄 not-found.tsx

• 라우팅이 없는 path의 경우 404 페이지의 역할로서 해당 페이지로 접근하게 됩니다.

📄 global.css

• Tailwind CSS의 유틸 등을 관리하기 위한 전역 css 파일입니다.

📂 assets

• 이미지나 아이콘 등을 관리하기 위한 폴더입니다.