프론트엔드 코드 컨벤션

스타일

🌈 attribute 순서

🌈 z-index

🌈 크기 단위 (%, vh, vw / px / rem)

• %, vh, vw
  • width
  • height
• px
  • border-radius
  • border-width
  • box-shadow
• rem
  • font-size
  • width
  • height
  • padding
  • margin
  • grid-gap

코드

🌈 import 순서

1. 리액트 관련
2. 외부 라이브러리 (@emotion/ …)
3. react hook
4. custom hook
5. types
6. style
7. component
   • atomic
   • middle
   • page
8. constants
9. util
10. api

🌈 function vs 화살표 함수

컴포넌트는 function, 나머지는 화살표 함수

🌈 컴포넌트

• 단위
  • 페이지 (도메인 포함) - 중간 컴포넌트 (도메인 포함) - 아토믹 컴포넌트 (도메인 없음)
• 분리 기준
  • ui의 재사용 + 도메인

폴더 구조

components/

@common

… components ⇒ PascalCase

pages/

• 컴포넌트 이름/
  • 컴포넌트.tsx
  • 컴포넌트.style.ts
  • 컴포넌트.stories.tsx