03_Architecture

📁 Architecture

├── @types
├── apis
│   └── domain name (ex. mypage)
│         ├── types.ts
│         ├── api.ts
│         └── query.ts
├── pages
│   ├── HomePage.tsx
│   ├── NotFoundPage.tsx
│   └── PostDetailPage.tsx
├── components
│    └── common
│    │    └── component name (ex. Button)
│    │    │    ├── styled.ts
│    │    │    ├── stories.tsx
│    │    │    ├── types.ts
│    │    │    └── index.tsx
│    └── domain name (ex. mypage)
│         └── component name
│              ├── styled.ts
│              ├── types.ts
│              └── index.ts
├── constants
└── types

• @types: 패키지 및 전역에서 사용되는 declare 타입
  • declare npm package types
  • declare global types
• apis: api 및 query dto(서버 타입), query 훅, fetch 함수
  • types.ts
    • api 및 query 훅 dto
  • api.ts
    • api fetch 함수
  • query.ts
    • jotai-tanstack-query
• constants: 타입을 제외한 정적인 상수 (types 디렉토리와 구조 1:1 매칭)
  • app.ts
    • 상품 상태
    • 거래 방식
    • ...
• types: constants를 기반으로 한 정적인 클라이언트 타입 (constants 디렉토리와 구조 1:1 매칭)
  • app.ts

🧪 Test

• components
  • storybook v6
• utils/hooks
  • React Testing Library
  • Jest
• pages
  • E2E

📁 Directory

• 디렉토리명은 Camel Case로 생성한다.

구분	컨벤션	예시
Components	camelCase	- components
Storybook	camelCase	- components

📄 Files

• 파일명은 Pascal Case로 생성한다.
• Page외 Component는 디렉토리 & index.tsx로 생성한다. (이 경우, 디렉토리가 파일 생성 규칙에 따름)
• 컴포넌트와 스토리 파일은 반드시 1:1 구조를 가져야한다.

구분	컨벤션	예시
Components	PascalCase	- Button/index.tsx
Stories	PascalCase	- Button/Button.stories.tsx

⚙️ Extension

• e2e : .spec.ts
• unit : .test.ts