도입 스택

Package Manager: npm

Build tool: Vite

Code Convension: ESLint, Prettier, Husky, lint-staged

Language: TypeScript

Library: React

Style: Emotion

Global state: zustand

Server state: Tanstack Query

Mocking: MSW

Component Documentation: Storybook

Test: Vitest, React Testing Library

협업 전략

Git Flow

• main
• feature
  • feature/#이슈번호
  • bug/#이슈번호
  • refactor/#이슈번호
• develop
• release
• hotfix

커밋 컨벤션

Angular Commit Convension을 준수하여 커밋 메시지를 작성해주세요.

<type>[optional scope]: <description>

[optional body]

[optional footer]

Issues / PR Template

Issues, PR 템플릿을 미리 설정해놨어요.

아키텍처 구조

**src**
├── **apis**
├── **assets**
├── **components**
│   ├── common
│   └── providers
├── **store**
├── **features**
├── **hooks**
├── **mocks**
│   ├── browser.ts
│   └── server.ts
├── **pages**
├── **routes**
│   ├── path.ts
│   └── router.tsx
├── **utils**
├── **__test__**
├── App.tsx
├── index.tsx
├── react-app-env.d.ts
└── setupTests.ts

Colocation을 준수하여 프로젝트를 구성해주세요.

• apis: 외부 API 통신을 담당하는 파일들을 위치시켜주세요.
• assets: 정적 파일들을 위치시켜주세요.
• components: 재사용 가능한 React 컴포넌트들을 위치시켜주세요.
• store: 상태 관리와 관련한 파일들을 위치시켜주세요.
• features: 주요 기능별로 파일들을 위치시켜주세요.
• hooks: 커스텀 React 훅을 위치시켜주세요.
• mocks: 모킹 데이터를 위치시켜주세요.
  • browser.ts: 브라우저 환경에서 사용하는 모킹 데이터를 관리해요.
  • server.ts: 서버와의 통신을 모킹하기 위한 데이터를 관리해요.
• pages: 라우팅을 통해 접근 가능한 페이지들을 위치시켜주세요.
• routes: 라우팅과 관련한 파일들을 위치시켜주세요.
• utils: 공통으로 사용되는 유틸리티 함수와 상수들을 위치시켜주세요.
• types: 타입스크립트 타입 정의 파일들을 위치시켜주세요.
• __test__: 테스트 설정 및 테스트 코드와 관련한 파일들을 위치시켜주세요.

Storybook

• 공통 컴포넌트를 문서화해주세요.