공새로 디자인 시스템 (Gongsaero Design System)

공새로 디자인 시스템은 건설 현장의 자재 조달 프로세스를 디지털화하는 B2B 서비스 플랫폼을 위한 맞춤형 디자인 시스템입니다. antd를 기반으로 구축된 이 디자인 시스템은 일관된 UI 경험을 제공하기 위해 개발되었습니다.

링크

• 스토리북: Storybook 문서
• Figma: 디자인 시스템 Figma

설치

npm install gongsaero-design-system
# 또는
yarn add gongsaero-design-system

사용 방법

import { Button, Input } from 'gongsaero-design-system';
import 'gongsaero-design-system/dist/gongsaero-design-system.css'; // CSS 파일 가져오기

function App() {
  return (
    <div>
      <Button>클릭하세요</Button>
      <Input placeholder="입력하세요" />
    </div>
  );
}

컴포넌트

공새로 디자인 시스템은 다음과 같은 컴포넌트를 제공합니다:

• Badge: 상태나 카테고리를 표시하는 뱃지
• Button: 다양한 크기와 스타일의 버튼
• Checkbox: 체크박스 및 체크박스 그룹
• Drawer: 슬라이드인 패널
• Input: 텍스트, 패스워드, 숫자 입력 필드
• Modal: 모달 대화 상자
• Radio: 라디오 버튼 및 라디오 그룹
• Select: 드롭다운 선택 메뉴
• Table: 데이터 테이블
• Tabs: 탭 내비게이션
• Textarea: 여러 줄 텍스트 입력 영역
• Typography: 텍스트 스타일링 컴포넌트

각 컴포넌트에 대한 자세한 사용 예시는 스토리북 문서를 참조하세요.

라이센스

MIT 라이센스 하에 배포됩니다. 자세한 내용은 LICENSE 파일을 참조하세요.