sellmate-design-system-react

Sellmate 디자인 시스템의 React 컴포넌트 라이브러리 (React + TypeScript + Tailwind CSS v4).

⚠️ 소비 앱은 Tailwind CSS v4가 필요합니다. (v3에서는 클래스가 purge되어 스타일이 적용되지 않습니다.)

요구 사항

• React 18 이상 (react, react-dom)
• 방식 1 사용 시 Tailwind CSS v4

설치

npm install sellmate-design-system-react

설정 (방식 1 — 권장, Tailwind v4)

소비 앱의 전역 CSS에 다음을 추가합니다.

/* app globals.css */
@import "tailwindcss";
@import "sellmate-design-system-react/theme.css";
@source "../node_modules/sellmate-design-system-react/dist";

• theme.css — 디자인 토큰(@theme). 라이브러리와 앱이 같은 토큰을 공유합니다.
• @source — 라이브러리 dist를 Tailwind 스캔 대상에 포함시켜 컴포넌트 클래스가 생성되게 합니다. 경로는 여러분의 CSS 파일 위치 기준 상대경로이며, node_modules 전체가 아니라 반드시 이 패키지 dist만 지정하세요.

설정 (방식 2 — 폴백, Tailwind 미사용)

Tailwind를 쓰지 않는 앱은 컴파일된 CSS를 직접 import 합니다.

import "sellmate-design-system-react/styles.css";

사용법

import { Button } from "sellmate-design-system-react";

export function Example() {
  return (
    <Button variant="primary" size="md" onClick={() => alert("clicked")}>
      확인
    </Button>
  );
}

제공 컴포넌트

| 분류 | 컴포넌트 | | --- | --- | | 버튼·액션 | Button · GhostButton · DropdownButton · TextLink · Toggle · Switch | | 폼 입력 | Input · Textarea · NumberInput · BarcodeInput · Select · Checkbox · Radio · RadioButton · Chip · ChipInput · Field · FilePicker | | 날짜 | Calendar · DatePicker · DateRangePicker | | 표시·피드백 | Badge · Tag · Card · Callout · Divider · Tooltip · Popover · Popup · Guide · Toast | | 진행 상태 | LinearProgress · CircleProgress · LoadingContainer · LoadingModal | | 모달 | ModalContainer · ConfirmModal · ActionModal | | 데이터 표시 | Table · KeyValueTable · Tabs · Pagination | | 아이콘 | Icon |

유틸리티로 클래스 병합 헬퍼 cn도 export 합니다.

특징

• 폼 컴포넌트는 form-agnostic — forwardRef + 표준 value/onChange를 사용하며 특정 폼 라이브러리에 의존하지 않습니다. react-hook-form 등과 자유롭게 조합할 수 있습니다.
• 단일 라이트 테마 — 다크모드는 지원하지 않습니다.
• 타입 포함 — 모든 컴포넌트에 TypeScript 타입 정의(.d.ts)가 함께 제공됩니다.

라이선스

UNLICENSED — Sellmate 내부용 독점 패키지입니다. 무단 사용·복제·재배포를 금합니다.