Codle Design System

코들 디자인 시스템을 구현합니다.

src/cds/components

컴포넌트를 구현합니다. 컴포넌트는 반드시 className과 component 인자를 가집니다. 컴포넌트는 모두 스토리북에 등록해야 합니다.

src/cds/foundation

색상, 그림자 등을 제공합니다.

src/cds/icons

아이콘을 제공합니다.

아이콘은 피그마에 정의된대로 24px X 24px 크기의 svg로 정의됩니다. 색상이나 크기를 변경하기 위해 Styled Component를 활용할 수 있으므로 className 인자를 받아야합니다.

아이콘은 컴파일 과정에서, remixicon 라이브러리의 svg 파일을 읽어와서 string 형태와 React JSX 형태로 export 되는 코드가 src/cds/icons 폴더 안에 자동 생성됩니다. 생성되는 규칙은 다음과 같습니다.

• 네이밍은 remixicon 라이브러리의 svg 파일 이름에서 다음과 같이 변환됩니다.
• string 형태로 export되는 값은 다음 예시와 같이 camel case로 네이밍됩니다. (예: arrowDownCircleFillSvg)
• React JSX 형태로 export되는 값은 다음 예시와 같이 pascal case로 네이밍됩니다. (예: ArrowDownCircleFillIcon)
• svg 파일 이름이 숫자로 시작하는 경우, 제일 앞에 i를 붙입니다. (예: 4k-fill.svg -> i4KFillSvg, I4KFillIcon)

개발 및 배포 절차

npm run storybook 을 실행하면 스토리북이 실행됩니다. 이곳에서 디버깅을 진행합니다.

패키지 특성상 개발환경이 따로 존재하지 않으며 npm run compile 후 npm publish 를 사용하여 npm 에 배포합니다.

이때 npm team-monolith 에 소속되어 있어야 합니다.