Cashdoc CMS Design System

📘 CCDS Contribution Guide

Cashdoc CMS용 디자인 시스템 컴포넌트 라이브러리

문서

Storybook과 JSDoc, 둘 중 더 편한 쪽을 보면 됩니다.

Storybook

Storybook

JSDoc(TSDoc)

기술 스택

• React 18 - UI 라이브러리
• TypeScript - 타입 안전성
• TailwindCSS - 스타일링
• Radix UI - 접근성 프리미티브
• Framer Motion - 애니메이션
• Vite - 빌드 도구
• Storybook - 컴포넌트 문서화

설치

pnpm install @cashdoc/cashdoc-cms-design-system

pnpm install cashdoc-cms-design-system은 deprecated 되었습니다.

사용법

프로젝트 최상단에서 cashdoc-cms-design-system의 style.css 파일을 import 후 사용하면 됩니다.

import "@cashdoc/cashdoc-cms-design-system/dist/style.css";

import { Button, Modal, DatePicker } from "@cashdoc/cashdoc-cms-design-system";

function App() {
  return <Button variant="default">버튼</Button>;
}

컴포넌트 리스트

Form

• Button - 기본 버튼
• Checkbox - 체크박스
• RadioButton - 라디오 버튼
• Switch - 토글 스위치 (가변 길이 및 내부 상태 텍스트 지원)
• FilterToggleGroup - 상태 집계 카드 + 단일 선택 필터 토글
• TextInput - 텍스트 입력 필드
• TagInput - 태그 입력 필드

Data Input

• DatePicker - 날짜 선택
• DateRangePicker - 기간 선택
• Dropdown - 드롭다운 메뉴
• Select - 선택 입력
• Combobox - 검색 가능한 선택

Feedback

• Modal - 모달 다이얼로그
  • ConfirmModal - 확인 모달
  • DeleteModal - 삭제 확인 모달
  • ErrorModal - 에러 알림
  • SuccessModal - 성공 알림
  • WarningModal - 경고 알림
• Toast - 토스트 알림
• LoadingCircle - 로딩 인디케이터

Navigation

• SideNavigation - 사이드바 네비게이션
• Popover - 팝오버 메뉴

Display

• Text - 타이포그래피
• Icons - 아이콘 세트

요구사항

• Node.js: 18.0.0 이상
• pnpm: 10.0.0 이상

이 프로젝트는 pnpm v10을 사용합니다. pnpm v10의 주요 변경사항:

• 빌드 스크립트 실행이 기본적으로 제한됨 (보안 강화)
• .npmrc 파일에 only-built-dependencies 설정으로 허용된 패키지만 빌드 스크립트 실행

pnpm 설치:

npm install -g pnpm@latest

로컬 개발 서버

pnpm dev

Storybook 실행

pnpm storybook

빌드

pnpm build

타입 체크

pnpm type-check

린트

pnpm lint

릴리즈 버전 규칙

• 수동 배포: Actions > Release > Run workflow에서 patch/minor/major 선택
• 자동 배포(main push): 기본은 patch
• 커밋 메시지에 chore 또는 doc이 포함되면 자동 배포 스킵
• 커밋 메시지에 토큰을 넣으면 버전 타입 지정 가능
• major: [major]
• minor: [minor]
• patch: [patch] (생략하면 기본 patch)