@idbrnd/design-system 3.0.1 → 3.0.3
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 +70 -58
- package/dist/icons/generated/LinkIcon.d.ts +3 -0
- package/dist/icons/generated/MapIcon.d.ts +3 -0
- package/dist/icons/generated/UnlinkIcon.d.ts +3 -0
- package/dist/icons/generated/UnplugFillIcon.d.ts +3 -0
- package/dist/icons/generated/index.d.ts +4 -0
- package/dist/icons/iconMap.d.ts +4 -0
- package/dist/index.js +714 -672
- package/package.json +1 -1
- package/dist/dev/App.d.ts +0 -1
- package/dist/dev/pages/BasicIconButtonPage.d.ts +0 -1
- package/dist/dev/pages/IconsPage.d.ts +0 -1
- package/dist/dev/pages/PaginationPage.d.ts +0 -1
- package/dist/dev/pages/SearchBarPage.d.ts +0 -1
- package/dist/dev/pages/SegmentedControlPage.d.ts +0 -1
- package/dist/dev/pages/TablePage.d.ts +0 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @idbrnd/design-system
|
|
2
2
|
|
|
3
|
-
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
@@ -94,12 +94,13 @@ import { FillButton } from "@idbrnd/design-system";
|
|
|
94
94
|
|
|
95
95
|
| Prop | 타입 | 기본값 | 설명 |
|
|
96
96
|
| ------------- | -------------------------------------------------- | ----------- | ------------------ |
|
|
97
|
-
| `variant`
|
|
98
|
-
| `size`
|
|
99
|
-
| `widthType`
|
|
100
|
-
| `loading`
|
|
101
|
-
| `disabled`
|
|
102
|
-
| `
|
|
97
|
+
| `variant` | `"primary"` \| `"assistive"` \| `"error"` | `"primary"` | 색상 변형 |
|
|
98
|
+
| `size` | `"xsmall"` \| `"small"` \| `"medium"` \| `"large"` | `"medium"` | 크기 |
|
|
99
|
+
| `widthType` | `"fixed"` \| `"flexible"` | `"flexible"` | 너비 방식 |
|
|
100
|
+
| `loading` | `boolean` | `false` | 로딩 스피너 표시 |
|
|
101
|
+
| `disabled` | `boolean` | `false` | 비활성화 |
|
|
102
|
+
| `keepFocusOnClick` | `boolean` | `false` | 클릭 후 포커스 유지 |
|
|
103
|
+
| `customStyle` | `CSSProperties` | — | 추가 인라인 스타일 |
|
|
103
104
|
|
|
104
105
|
### OutlineButton
|
|
105
106
|
|
|
@@ -113,12 +114,13 @@ import { OutlineButton } from "@idbrnd/design-system";
|
|
|
113
114
|
|
|
114
115
|
| Prop | 타입 | 기본값 | 설명 |
|
|
115
116
|
| ------------- | ---------------------------------------------------------- | ------------- | ------------------ |
|
|
116
|
-
| `variant`
|
|
117
|
-
| `size`
|
|
118
|
-
| `widthType`
|
|
119
|
-
| `loading`
|
|
120
|
-
| `disabled`
|
|
121
|
-
| `
|
|
117
|
+
| `variant` | `"primary"` \| `"assistive"` \| `"secondary"` | `"primary"` | 색상 변형 |
|
|
118
|
+
| `size` | `"xsmall"` \| `"small"` \| `"medium"` \| `"large"` | `"medium"` | 크기 |
|
|
119
|
+
| `widthType` | `"fixed"` \| `"flexible"` | `"flexible"` | 너비 방식 |
|
|
120
|
+
| `loading` | `boolean` | `false` | 로딩 스피너 표시 |
|
|
121
|
+
| `disabled` | `boolean` | `false` | 비활성화 |
|
|
122
|
+
| `keepFocusOnClick` | `boolean` | `false` | 클릭 후 포커스 유지 |
|
|
123
|
+
| `customStyle` | `CSSProperties` | — | 추가 인라인 스타일 |
|
|
122
124
|
|
|
123
125
|
### TextButton
|
|
124
126
|
|
|
@@ -131,12 +133,13 @@ import { TextButton } from "@idbrnd/design-system";
|
|
|
131
133
|
|
|
132
134
|
| Prop | 타입 | 기본값 | 설명 |
|
|
133
135
|
| ------------- | ----------------------------------------- | ------------- | ------------------ |
|
|
134
|
-
| `variant`
|
|
135
|
-
| `size`
|
|
136
|
-
| `widthType`
|
|
137
|
-
| `loading`
|
|
138
|
-
| `disabled`
|
|
139
|
-
| `
|
|
136
|
+
| `variant` | `"primary"` \| `"assistive"` \| `"secondary"` | `"primary"` | 색상 변형 |
|
|
137
|
+
| `size` | `"xsmall"` \| `"small"` \| `"medium"` \| `"large"` | `"medium"` | 크기 |
|
|
138
|
+
| `widthType` | `"fixed"` \| `"flexible"` | `"flexible"` | 너비 방식 |
|
|
139
|
+
| `loading` | `boolean` | `false` | 로딩 스피너 표시 |
|
|
140
|
+
| `disabled` | `boolean` | `false` | 비활성화 |
|
|
141
|
+
| `keepFocusOnClick` | `boolean` | `false` | 클릭 후 포커스 유지 |
|
|
142
|
+
| `customStyle` | `CSSProperties` | — | 추가 인라인 스타일 |
|
|
140
143
|
|
|
141
144
|
### WeakButton
|
|
142
145
|
|
|
@@ -149,12 +152,13 @@ import { WeakButton } from "@idbrnd/design-system";
|
|
|
149
152
|
|
|
150
153
|
| Prop | 타입 | 기본값 | 설명 |
|
|
151
154
|
| ------------- | -------------------------------------------------- | ------------- | ------------------ |
|
|
152
|
-
| `variant`
|
|
153
|
-
| `size`
|
|
154
|
-
| `widthType`
|
|
155
|
-
| `loading`
|
|
156
|
-
| `disabled`
|
|
157
|
-
| `
|
|
155
|
+
| `variant` | `"primary"` \| `"assistive"` \| `"error"` | `"primary"` | 색상 변형 |
|
|
156
|
+
| `size` | `"xsmall"` \| `"small"` \| `"medium"` \| `"large"` | `"medium"` | 크기 |
|
|
157
|
+
| `widthType` | `"fixed"` \| `"flexible"` | `"flexible"` | 너비 방식 |
|
|
158
|
+
| `loading` | `boolean` | `false` | 로딩 스피너 표시 |
|
|
159
|
+
| `disabled` | `boolean` | `false` | 비활성화 |
|
|
160
|
+
| `keepFocusOnClick` | `boolean` | `false` | 클릭 후 포커스 유지 |
|
|
161
|
+
| `customStyle` | `CSSProperties` | — | 추가 인라인 스타일 |
|
|
158
162
|
|
|
159
163
|
---
|
|
160
164
|
|
|
@@ -175,6 +179,7 @@ import { BasicIconButton } from "@idbrnd/design-system";
|
|
|
175
179
|
| `size` | `"medium"` \| `"large"` | `"medium"` | 아이콘 크기 (large: 24×24, medium: 20×20) |
|
|
176
180
|
| `touchArea` | `"default"` \| `"compact"` | `"default"` | 인터랙션 적용 범위. large는 default(44×44)/compact(36×36) 모두 지원, medium은 default(32×32)만 지원 |
|
|
177
181
|
| `disabled` | `boolean` | `false` | 비활성화 |
|
|
182
|
+
| `keepFocusOnClick` | `boolean` | `false` | 클릭 후 포커스 유지 |
|
|
178
183
|
| `customStyle` | `CSSProperties` | — | 추가 인라인 스타일 |
|
|
179
184
|
|
|
180
185
|
### FillIconButton
|
|
@@ -188,25 +193,27 @@ import { FillIconButton } from "@idbrnd/design-system";
|
|
|
188
193
|
|
|
189
194
|
| Prop | 타입 | 기본값 | 설명 |
|
|
190
195
|
| ------------- | --------------------------------------- | ----------- | ------------------ |
|
|
191
|
-
| `variant`
|
|
192
|
-
| `size`
|
|
193
|
-
| `disabled`
|
|
194
|
-
| `
|
|
196
|
+
| `variant` | `"basic"` \| `"overlay"` \| `"primary"` | `"basic"` | 색상 변형 |
|
|
197
|
+
| `size` | `"medium"` \| `"large"` | `"medium"` | 크기 |
|
|
198
|
+
| `disabled` | `boolean` | `false` | 비활성화 |
|
|
199
|
+
| `keepFocusOnClick` | `boolean` | `false` | 클릭 후 포커스 유지 |
|
|
200
|
+
| `customStyle` | `CSSProperties` | — | 추가 인라인 스타일 |
|
|
195
201
|
|
|
196
202
|
### OutlineIconButton
|
|
197
203
|
|
|
198
204
|
```tsx
|
|
199
205
|
import { OutlineIconButton } from "@idbrnd/design-system";
|
|
200
206
|
|
|
201
|
-
<OutlineIconButton size="large"><
|
|
202
|
-
<OutlineIconButton disabled><
|
|
207
|
+
<OutlineIconButton size="large"><WriteIcon /></OutlineIconButton>
|
|
208
|
+
<OutlineIconButton disabled><WriteIcon /></OutlineIconButton>
|
|
203
209
|
```
|
|
204
210
|
|
|
205
211
|
| Prop | 타입 | 기본값 | 설명 |
|
|
206
212
|
| ------------- | ------------------------------------ | ---------- | ------------------ |
|
|
207
|
-
| `size`
|
|
208
|
-
| `disabled`
|
|
209
|
-
| `
|
|
213
|
+
| `size` | `"medium"` \| `"large"` | `"medium"` | 크기 |
|
|
214
|
+
| `disabled` | `boolean` | `false` | 비활성화 |
|
|
215
|
+
| `keepFocusOnClick` | `boolean` | `false` | 클릭 후 포커스 유지 |
|
|
216
|
+
| `customStyle` | `CSSProperties` | — | 추가 인라인 스타일 |
|
|
210
217
|
|
|
211
218
|
---
|
|
212
219
|
|
|
@@ -326,7 +333,7 @@ function SearchExample() {
|
|
|
326
333
|
| -------------- | ----------------------------------------------------- | ----------- | -------------------------------------------------------------------- |
|
|
327
334
|
| `value` | `string` | — | **(필수)** 입력값 |
|
|
328
335
|
| `onChange` | `ChangeEventHandler` | — | **(필수)** 변경 핸들러 |
|
|
329
|
-
| `onSearch` | `(value: string) => void` | — | 검색 실행 콜백
|
|
336
|
+
| `onSearch` | `(value: string) => void` | — | **(필수)** 검색 실행 콜백 |
|
|
330
337
|
| `onClear` | `() => void` | — | 삭제 버튼 클릭 콜백. 미지정 시 기본 동작 사용 |
|
|
331
338
|
| `size` | `"default"` \| `"small"` | `"default"` | 크기 |
|
|
332
339
|
| `variant` | `"default"` \| `"onTyping"` \| `"typed"` \| `"error"` | — | 상태 변형. `errorMessage`가 있으면 `error`가 우선 적용 |
|
|
@@ -503,11 +510,12 @@ showToast({ variant: "basic", message: "알림 메시지입니다." });
|
|
|
503
510
|
dismissToast();
|
|
504
511
|
```
|
|
505
512
|
|
|
506
|
-
| 옵션
|
|
507
|
-
|
|
|
508
|
-
| `message`
|
|
509
|
-
| `variant`
|
|
510
|
-
| `
|
|
513
|
+
| 옵션 | 타입 | 설명 |
|
|
514
|
+
| ------------- | ----------------------------------------- | ------------------------------- |
|
|
515
|
+
| `message` | `ReactNode` | **(필수)** 표시할 메시지 |
|
|
516
|
+
| `variant` | `"basic"` \| `"positive"` \| `"negative"` | 색상 변형 (기본값 `"basic"`) |
|
|
517
|
+
| `icon` | `ReactNode` | 사용자 지정 아이콘. 미지정 시 variant 기본 아이콘 사용 |
|
|
518
|
+
| `customStyle` | `CSSProperties` | 추가 인라인 스타일 |
|
|
511
519
|
|
|
512
520
|
### Snackbar
|
|
513
521
|
|
|
@@ -530,14 +538,16 @@ showSnackbar({ variant: "loading", heading: "처리 중..." });
|
|
|
530
538
|
dismissSnackbar();
|
|
531
539
|
```
|
|
532
540
|
|
|
533
|
-
| 옵션 | 타입 | 설명
|
|
534
|
-
| --------------- | ------------------------ |
|
|
535
|
-
| `
|
|
536
|
-
| `
|
|
537
|
-
| `description` | `
|
|
538
|
-
| `
|
|
539
|
-
| `
|
|
540
|
-
| `
|
|
541
|
+
| 옵션 | 타입 | 설명 |
|
|
542
|
+
| --------------- | ------------------------ | --------------------------------------------- |
|
|
543
|
+
| `variant` | `"basic"` \| `"loading"` | 색상 변형 (기본값 `"basic"`) |
|
|
544
|
+
| `heading` | `ReactNode` | 제목 텍스트 |
|
|
545
|
+
| `description` | `ReactNode` | 본문 텍스트 |
|
|
546
|
+
| `icon` | `ReactNode` | 사용자 지정 아이콘. 전달 시 loading 스피너보다 우선 |
|
|
547
|
+
| `actionLabel` | `ReactNode` | 액션 버튼 레이블 |
|
|
548
|
+
| `onActionClick` | `() => void` | 액션 버튼 클릭 콜백 |
|
|
549
|
+
| `closeButton` | `boolean` | 닫기 버튼 표시 여부 |
|
|
550
|
+
| `customStyle` | `CSSProperties` | 추가 인라인 스타일 |
|
|
541
551
|
|
|
542
552
|
### PushBadge
|
|
543
553
|
|
|
@@ -551,11 +561,12 @@ import { PushBadge } from "@idbrnd/design-system";
|
|
|
551
561
|
<PushBadge variant="info" />
|
|
552
562
|
```
|
|
553
563
|
|
|
554
|
-
| Prop | 타입 | 기본값
|
|
555
|
-
| ------------- | --------------------------------- |
|
|
556
|
-
| `variant` | `"dot"` \| `"number"` \| `"info"` |
|
|
557
|
-
| `count` | `number` |
|
|
558
|
-
| `
|
|
564
|
+
| Prop | 타입 | 기본값 | 설명 |
|
|
565
|
+
| ------------- | --------------------------------- | ---------- | ------------------------------------------- |
|
|
566
|
+
| `variant` | `"dot"` \| `"number"` \| `"info"` | `"number"` | 표시 형태 |
|
|
567
|
+
| `count` | `number` | `1` | `variant="number"` 시 표시할 숫자 |
|
|
568
|
+
| `maxCount` | `number` | `999` | `count`가 초과하면 `{maxCount}+`로 표시 |
|
|
569
|
+
| `customStyle` | `CSSProperties` | — | 추가 인라인 스타일 |
|
|
559
570
|
|
|
560
571
|
### Tooltip
|
|
561
572
|
|
|
@@ -590,7 +601,7 @@ import { Tooltip } from "@idbrnd/design-system";
|
|
|
590
601
|
|
|
591
602
|
```tsx
|
|
592
603
|
<Tooltip content="필수 입력 항목입니다" trigger="always" position="right">
|
|
593
|
-
<
|
|
604
|
+
<CircleInfoIcon />
|
|
594
605
|
</Tooltip>
|
|
595
606
|
```
|
|
596
607
|
|
|
@@ -676,7 +687,7 @@ function SelectExample() {
|
|
|
676
687
|
content={true}
|
|
677
688
|
align="center"
|
|
678
689
|
options={optionsWithIcons}
|
|
679
|
-
|
|
690
|
+
selectedValue={selected}
|
|
680
691
|
onSelect={setSelected}
|
|
681
692
|
/>
|
|
682
693
|
```
|
|
@@ -689,7 +700,7 @@ function SelectExample() {
|
|
|
689
700
|
variant="error"
|
|
690
701
|
description="항목을 선택해주세요."
|
|
691
702
|
options={options}
|
|
692
|
-
|
|
703
|
+
selectedValue={selected}
|
|
693
704
|
onSelect={setSelected}
|
|
694
705
|
/>
|
|
695
706
|
```
|
|
@@ -751,7 +762,7 @@ import { Dropdown, OutlineButton } from "@idbrnd/design-system";
|
|
|
751
762
|
import type { DropdownOption } from "@idbrnd/design-system";
|
|
752
763
|
|
|
753
764
|
const options: DropdownOption[] = [
|
|
754
|
-
{ label: "수정", value: "edit", icon: <
|
|
765
|
+
{ label: "수정", value: "edit", icon: <WriteIcon /> },
|
|
755
766
|
{ label: "복제", value: "duplicate", icon: <CopyIcon /> },
|
|
756
767
|
{ label: "삭제", value: "delete", icon: <TrashIcon /> },
|
|
757
768
|
];
|
|
@@ -1753,7 +1764,7 @@ import { Spinner, CustomSpinner, Clip, FadeSpinner } from "@idbrnd/design-system
|
|
|
1753
1764
|
|
|
1754
1765
|
## 아이콘
|
|
1755
1766
|
|
|
1756
|
-
피그마에서 추출한 SVG 아이콘이 React 컴포넌트로 제공됩니다. 현재 **
|
|
1767
|
+
피그마에서 추출한 SVG 아이콘이 React 컴포넌트로 제공됩니다. 현재 **194개** 아이콘이 포함되어 있습니다.
|
|
1757
1768
|
|
|
1758
1769
|
### 개별 컴포넌트 import (권장)
|
|
1759
1770
|
|
|
@@ -1826,6 +1837,7 @@ const icon: IconName = "search";
|
|
|
1826
1837
|
| `dashboard-layer` | `DashboardLayerIcon` |
|
|
1827
1838
|
| `dashboard-heart-pulse` | `DashboardHeartPulseIcon` |
|
|
1828
1839
|
| `dashboard-live-monitor` | `DashboardLiveMonitorIcon` |
|
|
1840
|
+
| `dashboard-graph` | `DashboardGraphIcon` |
|
|
1829
1841
|
|
|
1830
1842
|
---
|
|
1831
1843
|
|
|
@@ -130,10 +130,12 @@ export { default as IntervalLeftRightIcon } from "./IntervalLeftRightIcon";
|
|
|
130
130
|
export { default as IntervalUpDownIcon } from "./IntervalUpDownIcon";
|
|
131
131
|
export { default as LineHorizontalIcon } from "./LineHorizontalIcon";
|
|
132
132
|
export { default as LineHorizontalThickIcon } from "./LineHorizontalThickIcon";
|
|
133
|
+
export { default as LinkIcon } from "./LinkIcon";
|
|
133
134
|
export { default as LoadingIcon } from "./LoadingIcon";
|
|
134
135
|
export { default as LockFillIcon } from "./LockFillIcon";
|
|
135
136
|
export { default as LockIcon } from "./LockIcon";
|
|
136
137
|
export { default as LogoutIcon } from "./LogoutIcon";
|
|
138
|
+
export { default as MapIcon } from "./MapIcon";
|
|
137
139
|
export { default as MapPinnedIcon } from "./MapPinnedIcon";
|
|
138
140
|
export { default as MenuIcon } from "./MenuIcon";
|
|
139
141
|
export { default as MenuThickIcon } from "./MenuThickIcon";
|
|
@@ -183,6 +185,8 @@ export { default as TriangleFillIcon } from "./TriangleFillIcon";
|
|
|
183
185
|
export { default as TriangleIcon } from "./TriangleIcon";
|
|
184
186
|
export { default as TuneIcon } from "./TuneIcon";
|
|
185
187
|
export { default as TvMinimalIcon } from "./TvMinimalIcon";
|
|
188
|
+
export { default as UnlinkIcon } from "./UnlinkIcon";
|
|
189
|
+
export { default as UnplugFillIcon } from "./UnplugFillIcon";
|
|
186
190
|
export { default as UnplugIcon } from "./UnplugIcon";
|
|
187
191
|
export { default as UnsmileIcon } from "./UnsmileIcon";
|
|
188
192
|
export { default as VideoIcon } from "./VideoIcon";
|
package/dist/icons/iconMap.d.ts
CHANGED
|
@@ -131,10 +131,12 @@ export declare const iconMap: {
|
|
|
131
131
|
readonly "interval-up-down": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
|
|
132
132
|
readonly "line-horizontal": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
|
|
133
133
|
readonly "line-horizontal-thick": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
|
|
134
|
+
readonly link: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
|
|
134
135
|
readonly loading: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
|
|
135
136
|
readonly "lock-fill": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
|
|
136
137
|
readonly lock: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
|
|
137
138
|
readonly logout: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
|
|
139
|
+
readonly map: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
|
|
138
140
|
readonly "map-pinned": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
|
|
139
141
|
readonly menu: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
|
|
140
142
|
readonly "menu-thick": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -184,6 +186,8 @@ export declare const iconMap: {
|
|
|
184
186
|
readonly triangle: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
|
|
185
187
|
readonly tune: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
|
|
186
188
|
readonly "tv-minimal": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
|
|
189
|
+
readonly unlink: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
|
|
190
|
+
readonly "unplug-fill": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
|
|
187
191
|
readonly unplug: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
|
|
188
192
|
readonly unsmile: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
|
|
189
193
|
readonly video: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
|