@teamsparta/design-system v2.8.0

추가/변경 후 배포 방법

배포는 자동화되어 있습니다.

1. pnpm changeset

• 추가 및 변경한 내용을 토대로 major, minor, patch 버전 업데이트
  • 패치 변경 시: 1.0.0 -> 1.0.1 (ex. components/icon/foundation/font 등 무엇을 수정했을 때)
  • 마이너 변경 시: 1.0.0 -> 1.1.0 (ex. components/icon/foundation/font 등 무엇을 추가 및 삭제 했을 때)
  • 메이저 변경 시: 1.0.0 -> 2.0.0 (ex. 시스템 변경 시)

2. git push
3. pr review -> merge
4. main에 merge된 후 changeset pr 생성
5. 해당 pr 다시 main에 merge 하면 자동으로 배포

사용설명서

Foundation/Color

1. 변수명

• 흑백: neutralDay
• 다크모드 흑백: neutralDark
• 메인: scc
• 창: chang
• 항해99: hanghae
• 인텔리픽: intellipick
• 기타: additional

2. 사용방법 (auto complete)

color: ${scc.red100};

Font

1. 변수명 예시

• Figma Ag: Web/Header1_700 => wHeader1
• Figma Ag: Mobile/Title1_600 => mTitle1

2. 사용방법 (auto complete/import)

import { scc, wTitle1 } from "@teamsparta/design-system";

export const Title = styled.h1`
  ${wTitle1};
  color: ${scc.red100};
`

Icon

1. 변수명 예시

• v1
  • Figma Ag: arrow_drop_down, line, 16: <ArrowDropDownLine size={16} color={"red"}/>
  • Figma Ag: close_circle_fill, 20 => <CloseCircleFill size={20} primaryColor={"red"} secondaryColor={"blue"}/>
• v2
  • Figma 상 명시된 Icon Props들 중 ${Category}${Name}의 조합
  • 
  • 위 이미지에서의 아이콘 이름은 ArrowChevronRightCircle

2. Props

• v1
  • 아이콘 이름에 line이 있는 경우: color
  • 아이콘 이름에 fill이 있는 경우: primaryColor & secondaryColor
  • 색 관련 props 작성 안할 시, 기본색 (neutralDay.gray100) 제공
• v2
  • Figma에서 Style 존재 시, style ('line' | 'fill') & size (16 | 20 | 24) 필수
  • Figma에서 Style 없을 시, size 필수
  • color props 작성 안할 시, 기본색 (neutralDay.gray90) 제공

3. 사용 방법 (auto complete)

export const LoginPage = () => {
  return (
    <S.Wrapper>
      <ArrowChevronRightCircle size={16} style={"line"} color={"red"}/>
    </S.Wrapper>
  )
}