Home

Ground Rule

Branch Name

• 메인/개발 브랜치

master, dev

• 기능 구현 브랜치

feature/[기능이름]

Commit Name

[#18] chore: 배고파요 으앙

기능	type	Description	비고
Style / Mark up	style:	퍼블리싱 작업
Bug Fix	fix:	버그, 오류 수정
Build / Package Update	chore:	기능을 추가하지 않고 기존 코드 개선
New Feature	feat:	코드 레벨에서의 새로운 기능 추가
Documentation	docs:	문서 수정
Test	test:	테스트 코드 관련 작업

Variable Naming

• 객체 리터럴 네이밍은

케멀 케이스를 사용합니다.

const realCoding = {
   ...
}

Style Convention

Style Component 컴포넌트 디렉토리 구조

ComponentA
|-- style.tsx
|-- index.ts
|-- ComponentA.tsx

디자인 시스템 반영 방법

색깔같은 경우, styled.ts에 정의해서 공통적으로 사용해주세요. 그리고 타입스크립트에 반영하기 위해서 styled.d.ts에 추가된 property의 타입을 정의해주세요.

• Theme 객체 정의

import { Color } from "./constants/color";
import { FontSize, FontWeight } from "./constants/font";

export const theme = {
  color: Color,
  fontSize: FontSize,
  fontWeight: FontWeight,
};

• Theme 타입 정의

// src/assets/styles/styled.d.ts
import "styled-components";

declare module "styled-components" {
  export interface DefaultTheme {
    color: {
      PVBlue: string;
      PVSkyblue: string;
      PVRed: string;
      PVYellow: string;
      PVGreen: string;
      PVBlack01: string;
      PVBlack02: string;
      PVBlack03: string;
      PVBlack04: string;
      PVBlack05: string;
      PVBlack06: string;
      White: string;
    };
  }
}