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

컴포넌트를 구현합니다. 컴포넌트는 반드시 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)

현재 CDS에서는 React 17, 18을 동시에 개발하고 관리하고 있습니다.

코들 스튜디오 시스템에서의 JL4 과업이 완료되지 않아, 두가지 버전을 동시에 관리해야합니다. 브랜치 이름은 다음과 같습니다.

• 1.0 : React 18 (최신 브랜치)
• main : React 17

main 브랜치(v0.x)는 jce-codle-jlext의 JL3에서 사용중이고, 1.0 브랜치(v1.x)는 JL4와 jce-codle-react에서 사용중입니다.

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

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

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