Skip to content

Pages Router 디렉토리 컨벤션

  • components는 폴더로 분리합니다.
  • styles, schema는 단일 파일로 분리합니다.
  • hooks, utils, types, constants는 단일 파일을 기본으로 하고, 관심사가 분리될 만큼 규모가 커질 경우 폴더로 분리합니다.
text
📁 pages
├── apply.ts
├── lms.ts
├── my-page.ts
└── ...
📁 src/
├── 📁 components             // 전역적으로 사용되는 공통 컴포넌트(stack.. 등)
├── 📁 hooks                  // 전역 커스텀 훅(useToggle.. 등)
├── 📁 utils                  // 전역 유틸 함수
├── 📁 pages
│   └── 📁 attendance
│       ├── hooks.ts
│       ├── utils.ts
│       ├── types.ts
│       ├── styles.ts
│       ├── constants.ts
│       └── 📁 components
│           ├── index.ts
│           └── 📁 Modal
│               ├── 📁 components
│               ├── index.tsx         // 컴포넌트 파일
│               ├── styles.ts
│               ├── 📁 hooks
│               │   ├── index.ts
│               │   └── useHojun.ts
│               ├── 📁 utils
│               │   ├── index.ts
│               │   └── hojunWithCount.ts
│               ├── types.ts
│               ├── schema.ts         // 폼 관련 로직
│               └── constants.ts      // 상수, 카피 등
└── 📁 apis                   // api+query 코드 폴더
    └── 📁 applicant          // 서버 엔드포인트 그룹 별로 폴더 생성
        ├── queries.ts        // queryOptions, query keys
        ├── mutations.ts      // useMutation 코드
        ├── responses.ts      // response dto
        ├── requests.ts       // request dto
        └── apis.ts           // 저레벨 api 요청들