Code Convention

• 컴포넌트 파일은 파스칼 케이스로 작성
  **e.g) ComponentsTest.tsx**
• 페이지명은 index**Page**.ts (끝에 Page명 표기)
• 일반 .ts 파일은 케밥 케이스로 작성 (ex. common.ts, date-helper.ts)
• app 폴더 하위 페이지 파일 이름은 케밥 케이스로 작성
• .module.css 파일은 컴포넌트 이름과 동일하게 작성!
  • e.g. Layout.module.css
• 컴포넌트 & 분리

  • **rafce** 스니펫 사용

    const Component () => {
    	return <></>
    }
    
    export default Component;**파일 이름**

• 폴더 트리

  project-root/
  |📂 src/
  |   |📂 assets
  |   |📂 app
  |   |   |📄 layout.tsx
  |   |   |📄 not-found.tsx
  |   |   |📄 page.tsx
  |   |   |📂 login/
  |   |   |   |📄 page.tsx
  |   |📂 components/
  |   |   |📂 layout/
  |   |   |   |📄 Header.tsx
  |   |   |   |📄 Content.tsx
  |   |📂 types/
  |   |   |📄 common.d.ts
  |   |   |📄 supabase.d.ts
  

• 변수명 & 함수명
  • 변수명
    • 예약어는 **const** 로만 필요 시 **let**
    • 상수 (not, const, 하드코딩 값)는 모두 대문자로 작성하되, 단어 구분 필요 시 _로 작성
      **e.g) MAX_COUNT = 20;**
    • Boolean 타입에 관해서는 접두사 **‘is’** 사용
  • 함수명
    • 함수는 단일 책임 원칙 (only 기능 1개)
    • 모든 함수 이름은 동사형으로 작성 (카멜 케이스)
      **e.g) addComment**, **checkIsDone**
    • CRUD
      • create: 접두사 add **e.g) addCart...**
      • read: 접두사 fetch **e.g) fetchData ...**
      • update: 접두사 update e.g) updateCart ...
      • delete: e.g) reomveCart ...
    • Handler
      • e.g) clickCartHandler ...
        - click기능명Handler
    • React Query (Custom Hook) - 튜터님 찬스 필요
      • removeCartMutation = useMutaiton()…
        return { remove: removeCartMutation.mutate }
• Custom Hooks
  • hooks > user(폴더 - 페이지명) > useAuth(회원가입, 로그인 등등), useInput, useVaildate(파일)
    • 폴더 → 페이지명, 파일 → use기능명
    • 더불어, 전역적으로 사용되는 Hook일 경우 **common** 폴더로 분리합니다.