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)

개발 및 배포 절차

locize-cli@12, Vite 8 및 eslint-visitor-keys@5의 실행 요구사항에 맞춰 개발 및 릴리스 작업은 Node 22.13.0 이상(메이저 22)에서 진행합니다. 이 저장소에서 pnpm install 시 Node 호환을 강제하는 것은 pnpm-workspace.yaml:1의 engineStrict이며, 잠긴 의존성 트리에 선언된 engines와 현재 Node 버전을 대조합니다. package.json에는 published 메타데이터로 나가는 engines를 두지 않아, npm에 올라간 @team-monolith/cds를 설치하는 소비자에게는 Node 하한이 노출되지 않습니다.

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

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

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

빌드 시에 번역 관련 환경변수가 필요합니다. (.locize 파일)