코들 디자인 시스템을 구현합니다.
코들 디자인 시스템을 구현합니다.
컴포넌트를 구현합니다.
컴포넌트는 반드시 className과 component 인자를 가집니다.
컴포넌트는 모두 스토리북에 등록해야 합니다.
색상, 그림자 등을 제공합니다.
아이콘을 제공합니다.
아이콘은 피그마>)에 정의된대로 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 build 후 npm publish 를 사용하여 npm 에 배포합니다.
이때 npm team-monolith 에 소속되어 있어야 합니다.
빌드 시에 번역 관련 환경변수가 필요합니다. (.locize 파일)