@sellmate/design-system-react 1.0.78 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +50 -60
- package/dist/components/components.d.ts +120 -112
- package/dist/components/components.js +27 -12
- package/dist/components/components.server.d.ts +121 -113
- package/dist/components/components.server.js +102 -95
- package/dist/index.d.ts +1 -1
- package/lib/components/components.server.ts +280 -268
- package/lib/components/components.ts +149 -134
- package/lib/index.ts +2 -3
- package/package.json +68 -67
package/README.md
CHANGED
|
@@ -19,7 +19,7 @@ npm install @sellmate/design-system-react
|
|
|
19
19
|
**1. CSS 전역 import** — `src/main.tsx`
|
|
20
20
|
|
|
21
21
|
```tsx
|
|
22
|
-
import
|
|
22
|
+
import "@sellmate/design-system/styles.css";
|
|
23
23
|
```
|
|
24
24
|
|
|
25
25
|
**2. SdModalContainer 최상단 배치** — `src/App.tsx`
|
|
@@ -27,7 +27,7 @@ import '@sellmate/design-system/styles.css';
|
|
|
27
27
|
`sdModal`은 `sd-modal-container`를 자동으로 생성하지만, z-index 제어 및 렌더 위치를 명시적으로 지정하려면 루트에 배치합니다.
|
|
28
28
|
|
|
29
29
|
```tsx
|
|
30
|
-
import { SdModalContainer } from
|
|
30
|
+
import { SdModalContainer } from "@sellmate/design-system-react";
|
|
31
31
|
|
|
32
32
|
export default function App() {
|
|
33
33
|
return (
|
|
@@ -46,15 +46,15 @@ export default function App() {
|
|
|
46
46
|
**1. CSS 전역 import** — `app/layout.tsx`
|
|
47
47
|
|
|
48
48
|
```tsx
|
|
49
|
-
import
|
|
49
|
+
import "@sellmate/design-system/styles.css";
|
|
50
50
|
```
|
|
51
51
|
|
|
52
52
|
**2. `'use client'` 필수** — 컴포넌트를 사용하는 모든 파일에 선언 필요
|
|
53
53
|
|
|
54
54
|
```tsx
|
|
55
|
-
|
|
55
|
+
"use client";
|
|
56
56
|
|
|
57
|
-
import { SdButton } from
|
|
57
|
+
import { SdButton } from "@sellmate/design-system-react/next";
|
|
58
58
|
```
|
|
59
59
|
|
|
60
60
|
**3. SdModalContainer 루트 배치** — `app/layout.tsx`
|
|
@@ -63,9 +63,9 @@ import { SdButton } from '@sellmate/design-system-react/next';
|
|
|
63
63
|
|
|
64
64
|
```tsx
|
|
65
65
|
// app/providers.tsx
|
|
66
|
-
|
|
66
|
+
"use client";
|
|
67
67
|
|
|
68
|
-
import { SdModalContainer } from
|
|
68
|
+
import { SdModalContainer } from "@sellmate/design-system-react/next";
|
|
69
69
|
|
|
70
70
|
export default function Providers({ children }: { children: React.ReactNode }) {
|
|
71
71
|
return (
|
|
@@ -79,8 +79,8 @@ export default function Providers({ children }: { children: React.ReactNode }) {
|
|
|
79
79
|
|
|
80
80
|
```tsx
|
|
81
81
|
// app/layout.tsx
|
|
82
|
-
import
|
|
83
|
-
import Providers from
|
|
82
|
+
import "@sellmate/design-system/styles.css";
|
|
83
|
+
import Providers from "./providers";
|
|
84
84
|
|
|
85
85
|
export default function RootLayout({
|
|
86
86
|
children,
|
|
@@ -88,7 +88,7 @@ export default function RootLayout({
|
|
|
88
88
|
children: React.ReactNode;
|
|
89
89
|
}) {
|
|
90
90
|
return (
|
|
91
|
-
<html lang=
|
|
91
|
+
<html lang="ko">
|
|
92
92
|
<body>
|
|
93
93
|
<Providers>{children}</Providers>
|
|
94
94
|
</body>
|
|
@@ -100,13 +100,13 @@ export default function RootLayout({
|
|
|
100
100
|
**4. 컴포넌트 import** — `dynamic({ ssr: false })` 패턴
|
|
101
101
|
|
|
102
102
|
```tsx
|
|
103
|
-
|
|
103
|
+
"use client";
|
|
104
104
|
|
|
105
|
-
import dynamic from
|
|
105
|
+
import dynamic from "next/dynamic";
|
|
106
106
|
|
|
107
107
|
const SdButton = dynamic(
|
|
108
108
|
() =>
|
|
109
|
-
import(
|
|
109
|
+
import("@sellmate/design-system-react").then((mod) => ({
|
|
110
110
|
default: mod.SdButton,
|
|
111
111
|
})),
|
|
112
112
|
{ ssr: false, loading: () => <></> },
|
|
@@ -122,16 +122,16 @@ const SdButton = dynamic(
|
|
|
122
122
|
React 컴포넌트를 모달로 열 수 있는 React-aware 버전입니다.
|
|
123
123
|
|
|
124
124
|
```ts
|
|
125
|
-
import { sdModal } from
|
|
125
|
+
import { sdModal } from "@sellmate/design-system-react";
|
|
126
126
|
|
|
127
127
|
// Confirm 모달
|
|
128
128
|
sdModal
|
|
129
129
|
.confirm({
|
|
130
|
-
type:
|
|
131
|
-
title:
|
|
132
|
-
topMessage: [
|
|
133
|
-
mainButtonLabel:
|
|
134
|
-
subButtonLabel:
|
|
130
|
+
type: "positive" | "negative" | "default",
|
|
131
|
+
title: "제목",
|
|
132
|
+
topMessage: ["메시지"],
|
|
133
|
+
mainButtonLabel: "확인",
|
|
134
|
+
subButtonLabel: "취소",
|
|
135
135
|
persistent: false, // true 시 ESC/백드롭으로 닫기 불가
|
|
136
136
|
})
|
|
137
137
|
.onOk(() => {})
|
|
@@ -141,13 +141,13 @@ sdModal
|
|
|
141
141
|
// React 컴포넌트를 모달로 열기
|
|
142
142
|
sdModal.create({
|
|
143
143
|
component: MyModalComponent,
|
|
144
|
-
componentProps: { title:
|
|
144
|
+
componentProps: { title: "제목" }, // 컴포넌트에 전달할 props
|
|
145
145
|
persistent: true,
|
|
146
146
|
});
|
|
147
147
|
|
|
148
148
|
// Loading 모달
|
|
149
|
-
const dialog = sdModal.loading({ state:
|
|
150
|
-
dialog.update({ state:
|
|
149
|
+
const dialog = sdModal.loading({ state: "loading" });
|
|
150
|
+
dialog.update({ state: "error", message: "오류 발생" });
|
|
151
151
|
dialog.close();
|
|
152
152
|
|
|
153
153
|
// 전역 설정
|
|
@@ -158,13 +158,13 @@ sdModal.configure({ zIndex: 1000 });
|
|
|
158
158
|
|
|
159
159
|
---
|
|
160
160
|
|
|
161
|
-
### `sdToast` — `@sellmate/design-system`
|
|
161
|
+
### `sdToast` — `@sellmate/design-system/utils`
|
|
162
162
|
|
|
163
163
|
```ts
|
|
164
|
-
import { sdToast } from
|
|
164
|
+
import { sdToast } from "@sellmate/design-system/utils";
|
|
165
165
|
|
|
166
166
|
// 토스트 생성
|
|
167
|
-
await sdToast.create(
|
|
167
|
+
await sdToast.create("메시지", "success" | "error" | "warning" | "info");
|
|
168
168
|
|
|
169
169
|
// 개별/전체 닫기
|
|
170
170
|
await sdToast.dismiss(id);
|
|
@@ -172,7 +172,7 @@ await sdToast.dismissAll();
|
|
|
172
172
|
|
|
173
173
|
// 전역 설정
|
|
174
174
|
sdToast.configure({
|
|
175
|
-
position:
|
|
175
|
+
position: "top-right",
|
|
176
176
|
maxVisible: 5,
|
|
177
177
|
defaultDuration: 3000,
|
|
178
178
|
zIndex: 9999,
|
|
@@ -183,15 +183,15 @@ sdToast.configure({
|
|
|
183
183
|
|
|
184
184
|
---
|
|
185
185
|
|
|
186
|
-
### `sdLoading` — `@sellmate/design-system`
|
|
186
|
+
### `sdLoading` — `@sellmate/design-system-react`
|
|
187
187
|
|
|
188
188
|
```ts
|
|
189
|
-
import { sdLoading } from
|
|
189
|
+
import { sdLoading } from "@sellmate/design-system-react";
|
|
190
190
|
|
|
191
191
|
const hide = sdLoading.show(); // 전체화면 로딩 표시
|
|
192
192
|
hide(); // 로딩 숨김
|
|
193
193
|
|
|
194
|
-
sdLoading.show({ message:
|
|
194
|
+
sdLoading.show({ message: "처리 중..." });
|
|
195
195
|
```
|
|
196
196
|
|
|
197
197
|
---
|
|
@@ -200,33 +200,28 @@ sdLoading.show({ message: '처리 중...' });
|
|
|
200
200
|
|
|
201
201
|
### 입력
|
|
202
202
|
|
|
203
|
-
| 컴포넌트
|
|
204
|
-
|
|
|
205
|
-
| `SdInput`
|
|
206
|
-
| `SdNumberInput`
|
|
207
|
-
| `SdTextarea`
|
|
208
|
-
| `SdBarcodeInput`
|
|
209
|
-
| `SdCheckbox`
|
|
210
|
-
| `SdRadio`
|
|
211
|
-
| `SdRadioGroup`
|
|
212
|
-
| `SdRadioButton`
|
|
213
|
-
| `SdSwitch`
|
|
214
|
-
| `SdToggle`
|
|
215
|
-
| `SdSelect`
|
|
216
|
-
| `
|
|
217
|
-
| `
|
|
218
|
-
| `
|
|
219
|
-
| `SdSelectV2` | 단일/다중 선택 V2 |
|
|
220
|
-
| `SdDatePicker` | 날짜 선택 |
|
|
221
|
-
| `SdDateRangePicker` | 날짜 범위 선택 |
|
|
222
|
-
| `SdFilePicker` | 파일 선택 |
|
|
203
|
+
| 컴포넌트 | 설명 |
|
|
204
|
+
| ------------------- | -------------------------- |
|
|
205
|
+
| `SdInput` | 텍스트 입력 |
|
|
206
|
+
| `SdNumberInput` | 숫자 입력 |
|
|
207
|
+
| `SdTextarea` | 멀티라인 텍스트 입력 |
|
|
208
|
+
| `SdBarcodeInput` | 바코드 스캐너 입력 |
|
|
209
|
+
| `SdCheckbox` | 체크박스 |
|
|
210
|
+
| `SdRadio` | 라디오 버튼 |
|
|
211
|
+
| `SdRadioGroup` | 라디오 그룹 |
|
|
212
|
+
| `SdRadioButton` | 버튼형 라디오 |
|
|
213
|
+
| `SdSwitch` | 스위치 토글 |
|
|
214
|
+
| `SdToggle` | 토글 |
|
|
215
|
+
| `SdSelect` | 단일/다중 선택 (그룹 지원) |
|
|
216
|
+
| `SdDatePicker` | 날짜 선택 |
|
|
217
|
+
| `SdDateRangePicker` | 날짜 범위 선택 |
|
|
218
|
+
| `SdFilePicker` | 파일 선택 |
|
|
223
219
|
|
|
224
220
|
### 버튼
|
|
225
221
|
|
|
226
222
|
| 컴포넌트 | 설명 |
|
|
227
223
|
| ------------------ | ---------------- |
|
|
228
|
-
| `SdButton`
|
|
229
|
-
| `SdButtonV2` | 버튼 V2 |
|
|
224
|
+
| `SdButton` | 기본 버튼 |
|
|
230
225
|
| `SdGhostButton` | 고스트 버튼 |
|
|
231
226
|
| `SdDropdownButton` | 드롭다운 버튼 |
|
|
232
227
|
| `SdTextLink` | 텍스트 링크 버튼 |
|
|
@@ -240,7 +235,7 @@ sdLoading.show({ message: '처리 중...' });
|
|
|
240
235
|
| `SdIcon` | 아이콘 |
|
|
241
236
|
| `SdTooltip` | 툴팁 |
|
|
242
237
|
| `SdPopover` | 팝오버 |
|
|
243
|
-
| `
|
|
238
|
+
| `SdLinearProgress` | 선형 진행 바 |
|
|
244
239
|
| `SdCircleProgress` | 원형 진행 바 |
|
|
245
240
|
| `SdLoadingContainer` | 로딩 오버레이 컨테이너 |
|
|
246
241
|
| `SdGuide` | 가이드 텍스트 |
|
|
@@ -279,16 +274,11 @@ import type {
|
|
|
279
274
|
SdTableRow,
|
|
280
275
|
// Select
|
|
281
276
|
SelectOption,
|
|
282
|
-
SelectOptionGroup,
|
|
283
|
-
SelectV2Option,
|
|
284
|
-
SelectV2Value,
|
|
285
277
|
// Radio
|
|
286
278
|
RadioValue,
|
|
287
279
|
RadioOption,
|
|
288
280
|
// Button
|
|
289
|
-
|
|
290
|
-
ButtonSize,
|
|
291
|
-
ButtonV2Name,
|
|
281
|
+
ButtonName,
|
|
292
282
|
DropdownButtonItem,
|
|
293
283
|
// Form
|
|
294
284
|
Rule,
|
|
@@ -305,7 +295,7 @@ import type {
|
|
|
305
295
|
TabOption,
|
|
306
296
|
// sdModal
|
|
307
297
|
SdModalCreateOption,
|
|
308
|
-
} from
|
|
298
|
+
} from "@sellmate/design-system-react";
|
|
309
299
|
```
|
|
310
300
|
|
|
311
301
|
---
|
|
@@ -315,7 +305,7 @@ import type {
|
|
|
315
305
|
### `useSdTableVirtualScroll`
|
|
316
306
|
|
|
317
307
|
```ts
|
|
318
|
-
import { useSdTableVirtualScroll } from
|
|
308
|
+
import { useSdTableVirtualScroll } from "@sellmate/design-system-react";
|
|
319
309
|
|
|
320
310
|
const { virtualRows, totalHeight, scrollToIndex } = useSdTableVirtualScroll({
|
|
321
311
|
rowCount: data.length,
|