sellmate-design-system-react 0.3.0 → 0.4.0

package/README.md

@@ -21,8 +21,8 @@ npm install sellmate-design-system-react
 
 ```css
 /* app globals.css */
-@import "tailwindcss";
-@import "sellmate-design-system-react/theme.css";
+@import 'tailwindcss';
+@import 'sellmate-design-system-react/theme.css';
 @source "../node_modules/sellmate-design-system-react/dist";
 ```
 
@@ -34,37 +34,100 @@ npm install sellmate-design-system-react
 Tailwind를 쓰지 않는 앱은 컴파일된 CSS를 직접 import 합니다.
 
 ```ts
-import "sellmate-design-system-react/styles.css";
+import 'sellmate-design-system-react/styles.css';
+```
+
+## Next.js (App Router)
+
+별도 설정 없이 동작합니다. `dist` 가 이미 빌드되어 있으므로 `transpilePackages` 는 필요 없습니다.
+
+전역 CSS 는 위 **방식 1** 과 같습니다. `@source` 는 **CSS 파일 기준 상대경로**이므로 `app/globals.css` 에 둔다면 다음과 같습니다.
+
+```css
+/* app/globals.css */
+@import 'tailwindcss';
+@import 'sellmate-design-system-react/theme.css';
+@source "../node_modules/sellmate-design-system-react/dist";
+```
+
+### 서버 컴포넌트에서 그대로 import 할 수 있습니다
+
+패키지 엔트리가 `"use client"` 로 선언된 클라이언트 경계라, 서버 컴포넌트에서 바로 import 해도 됩니다. 서버에서 렌더(SSR)된 뒤 클라이언트에서 하이드레이션됩니다.
+
+```tsx
+// app/page.tsx — "use client" 없음
+import { SButton } from 'sellmate-design-system-react';
+
+export default function Page() {
+  return <SButton color="primary" size="md" label="확인" />;
+}
+```
+
+### 이벤트 핸들러가 필요하면 소비자 쪽에 `"use client"`
+
+RSC 경계를 넘어 **함수는 전달할 수 없습니다.** 위 페이지에 `onClick` 을 추가하면 빌드가 실패합니다.
+
+```text
+Error: Event handlers cannot be passed to Client Component props.
+```
+
+이는 라이브러리 제약이 아니라 React 서버 컴포넌트의 규칙입니다. 핸들러·상태가 필요한 화면은 그 파일을 클라이언트 컴포넌트로 만드세요.
+
+```tsx
+'use client';
+
+import { useState } from 'react';
+import { SCheckbox } from 'sellmate-design-system-react';
+
+export function AgreeField() {
+  const [value, setValue] = useState(false);
+  return <SCheckbox value={value} onValueChange={setValue} label="동의" />;
+}
+```
+
+동작을 직접 확인하려면 Next playground 를 띄우세요 — 이 패키지를 소비 앱과 동일하게 `dist` 로 소비합니다.
+
+```bash
+npm run playground:next   # http://localhost:3010
 ```
 
 ## 사용법
 
 ```tsx
-import { Button } from "sellmate-design-system-react";
+import { SButton } from 'sellmate-design-system-react';
 
 export function Example() {
-  return (
-    <Button variant="primary" size="md" onClick={() => alert("clicked")}>
-      확인
-    </Button>
-  );
+  return <SButton color="primary" size="md" label="확인" onClick={() => alert('clicked')} />;
 }
 ```
 
+모든 컴포넌트는 **`S` 접두어**를 씁니다(`SButton`, `SInput` …). 공개 타입도 마찬가지입니다(`SButtonProps`).
+
+`SButton` 은 텍스트를 **`label`(문자열)로만** 받습니다 — `children` 은 받지 않으며, 아이콘은 `icon`/`rightIcon` 을 씁니다. 색상 prop 은 `color` 입니다(`variant` 아님).
+
 ## 제공 컴포넌트
 
-| 분류 | 컴포넌트 |
-| --- | --- |
-| 버튼·액션 | `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 합니다.
+분류는 `src/index.ts` 의 export 그룹과 동일합니다.
+
+| 분류        | 컴포넌트                                                                                                                                                                                                                         |
+| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Atoms       | `SIcon` · `SBadge` · `SCard` · `SDivider` · `STag` · `SButton` · `SCallout` · `SLinearProgress` · `SCircleProgress` · `SLoadingContainer`                                                                                        |
+| Control     | `STextLink` · `SDropdownButton` · `SGhostButton` · `SSwitch` · `SToggle`                                                                                                                                                         |
+| Overlays    | `STooltip` · `SPopover` · `SPortal` · `SPopup` · `SGuide`                                                                                                                                                                        |
+| Modals      | `SConfirmModal` · `SActionModal` · `SLoadingModal`                                                                                                                                                                               |
+| Layout      | `SGnb` · `SLayout` · `SPage`                                                                                                                                                                                                     |
+| Navigation  | `STabs` · `SPagination`                                                                                                                                                                                                          |
+| Data        | `STable` · `SKeyValueTable`                                                                                                                                                                                                      |
+| Feedback    | `SToast`                                                                                                                                                                                                                         |
+| SField (폼) | `SForm` · `SField` · `SCheckbox` · `SRadio` · `SRadioButton` · `SInput` · `STextarea` · `SSelect` · `SNumberInput` · `SChip` · `SChipInput` · `SBarcodeInput` · `SCalendar` · `SDatePicker` · `SDateRangePicker` · `SFilePicker` |
+
+`SModalContainer` 는 모달 3종의 내부 공통 컨테이너로 **공개 export 가 아닙니다.** 소비자는 `SConfirmModal`/`SActionModal`/`SLoadingModal` 을 사용하세요.
+
+유틸리티도 함께 export 합니다.
+
+- `cn` — 클래스 병합 헬퍼
+- `resolveColor` · `isColorKey` · `COLOR_KEYS` · `SColor` · `SColorKey` — 색상 토큰 유틸
+- `Rule` — `rules` prop(`SField` · `SChip` · `SBarcodeInput` 등)에 넘기는 검증 함수 타입
 
 ## 특징
 

package/dist/components/STable/STable.cjs

@@ -4678,7 +4678,7 @@ var STable = react.forwardRef(function STable2({
             ref: scrollRef,
             onScroll: handleScroll,
             className: cn(
-              "relative overflow-auto border border-solid border-[color:var(--cmp-table-border-color)]",
+              "bg-white relative overflow-auto border border-solid border-[color:var(--cmp-table-border-color)]",
               radiusClass,
               // 원본 sd-table__scroll-container--loading/--no-data: 로딩·데이터 없음 시 스크롤·인터랙션 차단
               (isLoading || rowCount === 0) && "overflow-hidden pointer-events-none"