🗂️ 폴더 구조 및 배치

• src

1. 공통 컴포넌트의 폴더는 src/components/@common에 배치한다.

2. 폴더 네이밍
    - components 폴더 내부에 및 파일은 모두 대문자로 시작
    - 그외 폴더 네이밍은 모두 소문자

3. 파일 네이밍
    - 컴포넌트 관련 파일 네이밍은 모두 대문자
    - 컴포넌트 파일 최상단(index) 관련
		- index 파일 => export 역할만 수행

4. hook 분리
    - 재사용 → 최상단에 있는 hook 폴더
    - 해당 컴포넌트에만 hook이 쓰인다 → 해당 컴포넌트 폴더 안에 hook 폴더를 만들어서 관리
    - 최상단 훅 폴더
        - 라이브러리 성격 (common)
        - 도메인 종속적이지만 재사용 가능한 (폴더 없이)

🧩 코드 컨벤션

1. props 타입
  - 컴포넌트 맨 위에
  - 네이밍
  - Ex) `export type StudyListProps`

2. 타입 정의
  - interface : 평소에
  - type : 유니온과 같은 interface로 정의할 수 없을 시

3. Component 정의
  - function

그 외

1. 절대 경로 설정 (O)
2. 무거운 컴포넌트들은 파일을 분리한다.

• 추상화
• 피그마 → 디자인 → 추상화된 컴포넌트를 찾고 역할 분담
• 스타일 컴포넌트는 내부에 놓는다.
  • 스타일은 내부에(컴포넌트 파일에 스타일과 컴포넌트 코드가 존재)
  • 스타일은 export.default 밑에

// 변수 네이밍에 prefix를 Styled로 하자
const StyledButton = styled.div``

이전 정리 했던 포맷

CSS 컨벤션