Convention
프로젝트 구조
프로젝트별로 따르고 있는 대략적인 디렉터리 구조에 대해 공유합니다.
프로젝트 구조
올라핀테크 프론트엔드 프로젝트들이 따르는 대략적인 프로젝트 구조는 아래와 같음.
src/
├── app/ # Next.js App Router
│ ├── (routes)/ # 라우트 그룹
│ ├── @auth/ # 병렬 라우트
│ ├── api/ # API 라우트
│ ├── providers/ # 전역 Provider
│ └── styles/ # 전역 스타일
│
├── domain/ # 도메인별 비즈니스 로직
│ ├── {domain}/
│ │ ├── actions/ # Server Actions
│ │ ├── hooks/ # 도메인 특화 훅
│ │ ├── widgets/ # 도메인 특화 위젯
│ │ ├── constant.ts # 도메인 상수
│ │ └── utils.ts # 도메인 유틸리티
│
├── shared/ # 공통 모듈
│ ├── ui/ # 재사용 가능한 UI 컴포넌트
│ ├── hooks/ # 공통 커스텀 훅
│ ├── utils/ # 유틸리티 함수
│ ├── constants/ # 전역 상수
│ ├── schemas/ # Zod 스키마
│ ├── lib/ # 외부 라이브러리 설정
│ └── widgets/ # 공통 복합 컴포넌트
│
├── views/ # 페이지 단위 뷰 컴포넌트
│ └── {page-name}/디렉토리 역할
app/: Next.js 라우팅 및 레이아웃 설정domain/: 비즈니스 로직을 도메인별로 격리shared/: 프로젝트 전반에서 재사용되는 코드views/: 페이지 단위의 뷰 레이어 (비즈니스 로직 제외)widgets/: 여러 도메인에서 사용되는 복합 컴포넌트