Directory structure

📦
├─ 📂 public - msw 관련 파일 작성
├─ 📂 tests 통합테스트 폴더 (playwright)
├─ 📂 src 
│  ├─ 📂 apis - api 폴더
│  ├─ 📂 assets - 이미지, 아이콘 폴더
│  ├─ 📂 hooks - 커스텀 훅
│  ├─ 📂 components - 공통으로 사용할 컴포넌트
│  ├─ 📂 pages - 각 페이지별 컴포넌트
│  │  └─ 📂 homePage -폴더는 다 카멜케이
│  │  │  └─ index.tsx - 페이지 / 타입도 포함
│  │  │  └─ 📂 components - 페이지에서 사용할 컴포넌트
│  ├─ 📂 routes - 라우터
│  ├─ 📂 types - api / utils 폴더에서 사용하는 타입.
│  └─ 📂 utils - 공통 함수
└─ ©generated by Project Tree Generator

Responsive Design Strategy

<aside> 💡 display: flex; min-width: 360px; max-width: 768px;

</aside>

• 규칙
  1. 컴포넌트들의 width는 가변값(%) 사용을 권장합니다.
  2. 컴포넌트의 height만 고정값(px)를 사용합니다.
  3. 되도록 Layout(Wrapper)가 되는 레이아웃에 min-width/max-width 너비를 설정합니다. (내용이 되는 컴포넌트에 전부 max-width/min-width 설정하지 않고 %만 설정할 수 있도록)
  4. 참고할 수 있는 레퍼런스로는 당근마켓과 야놀자가 있습니다.
     1. 당근: https://www.daangn.com/fleamarket/
     2. 야놀자: https://www.yanolja.com/

코드 리뷰

19시 이전 pr → 21시 전에 코드리뷰 진행

19시 이후 pr → 익일 12시 전에 코드리뷰 진행

코딩 컨벤션

• 폴더명: camelCase

• 컴포넌트/스타일 명: PascalCase

• **index.tsx**는 페이지 컴포넌트 상관없이 모두 사용하지 않기

  (페이지/컴포넌트 이름 통일성을 위함)

• 스타일 파일: xxx.style.ts