📖 코드 컨벤션

📖 컴포넌트 네이밍 및 코드 컨벤션

1️⃣ 디렉토리 생성

components 디렉토리 하위에 분류된 디렉토리 (ex.display) 에 맞춰 컴포넌트 디렉토리를 생성합니다

예) Card 컴포넌트를 만드는 경우 src/components/display/Card 디렉토리 생성

2️⃣ 컴포넌트, 스타일, 스토리북 파일 생성

컴포넌트의 경우 index.tsx 로 생성하고 화살표함수를 사용해 Named Export 로 내보냅니다.

컴포넌트에 사용되는 Props 는 interface 로 선언하며, 컴포넌트명Props 로 통일합니다.

예) src/components/display/Card/index.tsx

export interface CardProps {
   width: SizeProp;
   height: SizeProp;
}

export const Card = ({ width, height } : CardProps) => {
   return <></>
}

스타일의 경우 index.style.ts 로 생성하고 컴포넌트 파일에서 다음과 같이 import 하여 사용합니다.

💡 팁) 컴포넌트에 사용되는 @emotion/styled 에 대한 컴포넌트는 다음과 같이 명시하면 좋습니다

Wrapper > Container > Items > Item 또는
Wrapper > Container > Header | Body | Footer

예) src/components/display/Card/index.style.ts

import * as Style from "@/path/to/style";

스토리북의 경우 index.story.tsx 로 생성합니다.

📖 네이밍 컨벤션

컴포넌트의 경우 PascalCase 네이밍 규칙을 따릅니다.

이외의 함수나 변수는 camelCase 네이밍 규칙을 따릅니다.

단, 스타일 관련 변수 또는 함수의 경우 snake_case 네이밍 규칙을 따릅니다.