@designbasekorea/ui 0.1.0 → 0.1.2
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 +477 -0
- package/dist/index.css +1 -391
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +86 -124
- package/dist/index.esm.css +1 -391
- package/dist/index.esm.css.map +1 -1
- package/dist/index.esm.js +320 -273
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +318 -272
- package/dist/index.js.map +1 -1
- package/dist/index.umd.css +1 -391
- package/dist/index.umd.css.map +1 -1
- package/dist/index.umd.js +321 -274
- package/dist/index.umd.js.map +1 -1
- package/package.json +6 -6
package/README.md
ADDED
|
@@ -0,0 +1,477 @@
|
|
|
1
|
+
# @designbasekorea/ui
|
|
2
|
+
|
|
3
|
+
Designbase UI 컴포넌트 라이브러리 - 피그마 플러그인에 최적화된 React 컴포넌트입니다.
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
## 📦 설치
|
|
9
|
+
|
|
10
|
+
### NPM
|
|
11
|
+
```bash
|
|
12
|
+
# UI 컴포넌트 + 필수 의존성
|
|
13
|
+
npm install @designbasekorea/ui @designbasekorea/tokens @designbasekorea/theme
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
### Yarn
|
|
17
|
+
```bash
|
|
18
|
+
yarn add @designbasekorea/ui @designbasekorea/tokens @designbasekorea/theme
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
### pnpm
|
|
22
|
+
```bash
|
|
23
|
+
pnpm add @designbasekorea/ui @designbasekorea/tokens @designbasekorea/theme
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
⚠️ **필수 의존성**:
|
|
27
|
+
- `@designbasekorea/tokens` - 디자인 토큰
|
|
28
|
+
- `@designbasekorea/theme` - 테마 시스템
|
|
29
|
+
|
|
30
|
+
## 🚀 빠른 시작
|
|
31
|
+
|
|
32
|
+
### React/Next.js에서
|
|
33
|
+
|
|
34
|
+
```tsx
|
|
35
|
+
// 1. 토큰 CSS (필수 - 가장 먼저!)
|
|
36
|
+
import '@designbasekorea/tokens/dist/css/tokens.css';
|
|
37
|
+
|
|
38
|
+
// 2. 테마 CSS (필수)
|
|
39
|
+
import '@designbasekorea/theme/dist/css/theme.css';
|
|
40
|
+
|
|
41
|
+
// 3. UI 컴포넌트 import
|
|
42
|
+
import { Button, Card, Input, Accordion } from '@designbasekorea/ui';
|
|
43
|
+
|
|
44
|
+
function App() {
|
|
45
|
+
return (
|
|
46
|
+
<div>
|
|
47
|
+
<Button variant="primary" size="lg">
|
|
48
|
+
클릭하세요
|
|
49
|
+
</Button>
|
|
50
|
+
|
|
51
|
+
<Card>
|
|
52
|
+
<Card.Header>카드 제목</Card.Header>
|
|
53
|
+
<Card.Body>
|
|
54
|
+
<Input placeholder="이름을 입력하세요" />
|
|
55
|
+
</Card.Body>
|
|
56
|
+
</Card>
|
|
57
|
+
|
|
58
|
+
<Accordion>
|
|
59
|
+
<Accordion.Item value="item-1">
|
|
60
|
+
<Accordion.Header>제목 1</Accordion.Header>
|
|
61
|
+
<Accordion.Content>내용 1</Accordion.Content>
|
|
62
|
+
</Accordion.Item>
|
|
63
|
+
</Accordion>
|
|
64
|
+
</div>
|
|
65
|
+
);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
export default App;
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
### CDN 사용
|
|
72
|
+
|
|
73
|
+
```html
|
|
74
|
+
<!DOCTYPE html>
|
|
75
|
+
<html lang="ko">
|
|
76
|
+
<head>
|
|
77
|
+
<meta charset="UTF-8">
|
|
78
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
79
|
+
|
|
80
|
+
<!-- 1. 토큰 CSS (필수 - 가장 먼저!) -->
|
|
81
|
+
<link rel="stylesheet" href="https://unpkg.com/@designbasekorea/tokens@latest/dist/css/tokens.css">
|
|
82
|
+
|
|
83
|
+
<!-- 2. 테마 CSS (필수) -->
|
|
84
|
+
<link rel="stylesheet" href="https://unpkg.com/@designbasekorea/theme@latest/dist/css/theme.css">
|
|
85
|
+
|
|
86
|
+
<title>Designbase UI</title>
|
|
87
|
+
</head>
|
|
88
|
+
<body>
|
|
89
|
+
<div id="root"></div>
|
|
90
|
+
|
|
91
|
+
<!-- React & ReactDOM -->
|
|
92
|
+
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
|
|
93
|
+
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
|
|
94
|
+
|
|
95
|
+
<!-- Designbase UI -->
|
|
96
|
+
<script src="https://unpkg.com/@designbasekorea/ui@latest/dist/index.umd.js"></script>
|
|
97
|
+
|
|
98
|
+
<script>
|
|
99
|
+
const { Button, Card, Input } = DesignbaseUI;
|
|
100
|
+
|
|
101
|
+
const App = () => {
|
|
102
|
+
return React.createElement('div', { style: { padding: '20px' } },
|
|
103
|
+
React.createElement(Button, {
|
|
104
|
+
variant: 'primary',
|
|
105
|
+
onClick: () => alert('클릭!')
|
|
106
|
+
}, '클릭하세요'),
|
|
107
|
+
|
|
108
|
+
React.createElement(Card, null,
|
|
109
|
+
React.createElement('h2', null, '카드 제목'),
|
|
110
|
+
React.createElement(Input, { placeholder: '입력하세요' })
|
|
111
|
+
)
|
|
112
|
+
);
|
|
113
|
+
};
|
|
114
|
+
|
|
115
|
+
ReactDOM.render(React.createElement(App), document.getElementById('root'));
|
|
116
|
+
</script>
|
|
117
|
+
</body>
|
|
118
|
+
</html>
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
## 📚 컴포넌트 목록
|
|
122
|
+
|
|
123
|
+
### Form 컴포넌트
|
|
124
|
+
- **Button** - 버튼
|
|
125
|
+
- **Input** - 텍스트 입력
|
|
126
|
+
- **Textarea** - 여러 줄 텍스트 입력
|
|
127
|
+
- **Checkbox** - 체크박스
|
|
128
|
+
- **Radio** - 라디오 버튼
|
|
129
|
+
- **Toggle** - 토글 스위치
|
|
130
|
+
- **Select** - 선택 박스
|
|
131
|
+
|
|
132
|
+
### Layout 컴포넌트
|
|
133
|
+
- **Card** - 카드
|
|
134
|
+
- **Modal** - 모달
|
|
135
|
+
- **Drawer** - 드로어
|
|
136
|
+
- **Tabs** - 탭
|
|
137
|
+
- **Accordion** - 아코디언
|
|
138
|
+
- **Divider** - 구분선
|
|
139
|
+
|
|
140
|
+
### Feedback 컴포넌트
|
|
141
|
+
- **Alert** - 알림
|
|
142
|
+
- **Toast** - 토스트 알림
|
|
143
|
+
- **Tooltip** - 툴팁
|
|
144
|
+
- **Badge** - 뱃지
|
|
145
|
+
- **Spinner** - 로딩 스피너
|
|
146
|
+
- **Progress** - 진행 표시줄
|
|
147
|
+
- **Skeleton** - 스켈레톤 로더
|
|
148
|
+
|
|
149
|
+
### Navigation 컴포넌트
|
|
150
|
+
- **Breadcrumb** - 브레드크럼
|
|
151
|
+
- **Pagination** - 페이지네이션
|
|
152
|
+
- **Dropdown** - 드롭다운
|
|
153
|
+
|
|
154
|
+
### Data Display 컴포넌트
|
|
155
|
+
- **Table** - 테이블
|
|
156
|
+
- **Chip** - 칩
|
|
157
|
+
- **Avatar** - 아바타
|
|
158
|
+
|
|
159
|
+
### Date & Time 컴포넌트
|
|
160
|
+
- **Calendar** - 캘린더
|
|
161
|
+
- **DatePicker** - 날짜 선택기
|
|
162
|
+
- **TimePicker** - 시간 선택기
|
|
163
|
+
|
|
164
|
+
### 기타
|
|
165
|
+
- **Rating** - 별점
|
|
166
|
+
- **Stepper** - 단계 표시
|
|
167
|
+
- **Popover** - 팝오버
|
|
168
|
+
|
|
169
|
+
## 🎯 컴포넌트 사용 예시
|
|
170
|
+
|
|
171
|
+
### Button
|
|
172
|
+
|
|
173
|
+
```tsx
|
|
174
|
+
import { Button } from '@designbasekorea/ui';
|
|
175
|
+
|
|
176
|
+
<Button variant="primary" size="lg" onClick={() => console.log('클릭!')}>
|
|
177
|
+
Primary 버튼
|
|
178
|
+
</Button>
|
|
179
|
+
|
|
180
|
+
<Button variant="secondary" size="md" disabled>
|
|
181
|
+
비활성 버튼
|
|
182
|
+
</Button>
|
|
183
|
+
|
|
184
|
+
<Button variant="outline" size="sm" fullWidth>
|
|
185
|
+
전체 너비 버튼
|
|
186
|
+
</Button>
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
**Props**:
|
|
190
|
+
- `variant`: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'
|
|
191
|
+
- `size`: 'sm' | 'md' | 'lg'
|
|
192
|
+
- `fullWidth`: boolean
|
|
193
|
+
- `disabled`: boolean
|
|
194
|
+
- `onClick`: () => void
|
|
195
|
+
|
|
196
|
+
### Input
|
|
197
|
+
|
|
198
|
+
```tsx
|
|
199
|
+
import { Input } from '@designbasekorea/ui';
|
|
200
|
+
|
|
201
|
+
<Input
|
|
202
|
+
placeholder="이름을 입력하세요"
|
|
203
|
+
value={name}
|
|
204
|
+
onChange={(e) => setName(e.target.value)}
|
|
205
|
+
/>
|
|
206
|
+
|
|
207
|
+
<Input
|
|
208
|
+
type="email"
|
|
209
|
+
label="이메일"
|
|
210
|
+
error="올바른 이메일을 입력하세요"
|
|
211
|
+
/>
|
|
212
|
+
|
|
213
|
+
<Input
|
|
214
|
+
prefix={<SearchIcon />}
|
|
215
|
+
suffix={<ClearIcon onClick={clearInput} />}
|
|
216
|
+
/>
|
|
217
|
+
```
|
|
218
|
+
|
|
219
|
+
**Props**:
|
|
220
|
+
- `type`: 'text' | 'email' | 'password' | 'number' | ...
|
|
221
|
+
- `label`: string
|
|
222
|
+
- `placeholder`: string
|
|
223
|
+
- `error`: string
|
|
224
|
+
- `disabled`: boolean
|
|
225
|
+
- `prefix`: ReactNode
|
|
226
|
+
- `suffix`: ReactNode
|
|
227
|
+
|
|
228
|
+
### Card
|
|
229
|
+
|
|
230
|
+
```tsx
|
|
231
|
+
import { Card } from '@designbasekorea/ui';
|
|
232
|
+
|
|
233
|
+
<Card>
|
|
234
|
+
<Card.Header>
|
|
235
|
+
<h2>카드 제목</h2>
|
|
236
|
+
</Card.Header>
|
|
237
|
+
<Card.Body>
|
|
238
|
+
<p>카드 내용입니다.</p>
|
|
239
|
+
</Card.Body>
|
|
240
|
+
<Card.Footer>
|
|
241
|
+
<Button>확인</Button>
|
|
242
|
+
</Card.Footer>
|
|
243
|
+
</Card>
|
|
244
|
+
```
|
|
245
|
+
|
|
246
|
+
### Modal
|
|
247
|
+
|
|
248
|
+
```tsx
|
|
249
|
+
import { Modal } from '@designbasekorea/ui';
|
|
250
|
+
|
|
251
|
+
function MyComponent() {
|
|
252
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
253
|
+
|
|
254
|
+
return (
|
|
255
|
+
<>
|
|
256
|
+
<Button onClick={() => setIsOpen(true)}>
|
|
257
|
+
모달 열기
|
|
258
|
+
</Button>
|
|
259
|
+
|
|
260
|
+
<Modal
|
|
261
|
+
isOpen={isOpen}
|
|
262
|
+
onClose={() => setIsOpen(false)}
|
|
263
|
+
title="모달 제목"
|
|
264
|
+
>
|
|
265
|
+
<p>모달 내용입니다.</p>
|
|
266
|
+
|
|
267
|
+
<Modal.Footer>
|
|
268
|
+
<Button onClick={() => setIsOpen(false)}>닫기</Button>
|
|
269
|
+
<Button variant="primary">확인</Button>
|
|
270
|
+
</Modal.Footer>
|
|
271
|
+
</Modal>
|
|
272
|
+
</>
|
|
273
|
+
);
|
|
274
|
+
}
|
|
275
|
+
```
|
|
276
|
+
|
|
277
|
+
### Accordion
|
|
278
|
+
|
|
279
|
+
```tsx
|
|
280
|
+
import { Accordion } from '@designbasekorea/ui';
|
|
281
|
+
|
|
282
|
+
<Accordion>
|
|
283
|
+
<Accordion.Item value="item-1">
|
|
284
|
+
<Accordion.Header>첫 번째 항목</Accordion.Header>
|
|
285
|
+
<Accordion.Content>
|
|
286
|
+
첫 번째 항목의 내용입니다.
|
|
287
|
+
</Accordion.Content>
|
|
288
|
+
</Accordion.Item>
|
|
289
|
+
|
|
290
|
+
<Accordion.Item value="item-2">
|
|
291
|
+
<Accordion.Header>두 번째 항목</Accordion.Header>
|
|
292
|
+
<Accordion.Content>
|
|
293
|
+
두 번째 항목의 내용입니다.
|
|
294
|
+
</Accordion.Content>
|
|
295
|
+
</Accordion.Item>
|
|
296
|
+
</Accordion>
|
|
297
|
+
```
|
|
298
|
+
|
|
299
|
+
### Toast
|
|
300
|
+
|
|
301
|
+
```tsx
|
|
302
|
+
import { toast } from '@designbasekorea/ui';
|
|
303
|
+
|
|
304
|
+
// 성공 토스트
|
|
305
|
+
toast.success('저장되었습니다!');
|
|
306
|
+
|
|
307
|
+
// 에러 토스트
|
|
308
|
+
toast.error('오류가 발생했습니다.');
|
|
309
|
+
|
|
310
|
+
// 경고 토스트
|
|
311
|
+
toast.warning('주의하세요!');
|
|
312
|
+
|
|
313
|
+
// 정보 토스트
|
|
314
|
+
toast.info('새로운 알림이 있습니다.');
|
|
315
|
+
|
|
316
|
+
// 커스텀 토스트
|
|
317
|
+
toast({
|
|
318
|
+
title: '제목',
|
|
319
|
+
description: '설명',
|
|
320
|
+
duration: 5000,
|
|
321
|
+
variant: 'success'
|
|
322
|
+
});
|
|
323
|
+
```
|
|
324
|
+
|
|
325
|
+
## 🎨 테마 커스터마이징
|
|
326
|
+
|
|
327
|
+
### CSS 변수 오버라이드
|
|
328
|
+
|
|
329
|
+
```css
|
|
330
|
+
:root {
|
|
331
|
+
/* 버튼 색상 변경 */
|
|
332
|
+
--db-color-primary: #ff6b6b;
|
|
333
|
+
--db-color-primary-hover: #ff5252;
|
|
334
|
+
|
|
335
|
+
/* 모서리 둥글기 변경 */
|
|
336
|
+
--db-radius-button: 16px;
|
|
337
|
+
--db-radius-card-m: 20px;
|
|
338
|
+
|
|
339
|
+
/* 간격 변경 */
|
|
340
|
+
--db-padding-m: 20px;
|
|
341
|
+
}
|
|
342
|
+
```
|
|
343
|
+
|
|
344
|
+
### 컴포넌트별 스타일 오버라이드
|
|
345
|
+
|
|
346
|
+
```css
|
|
347
|
+
/* Button 커스터마이징 */
|
|
348
|
+
.db-button {
|
|
349
|
+
text-transform: uppercase;
|
|
350
|
+
letter-spacing: 0.5px;
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
/* Card 커스터마이징 */
|
|
354
|
+
.db-card {
|
|
355
|
+
border-width: 2px;
|
|
356
|
+
}
|
|
357
|
+
```
|
|
358
|
+
|
|
359
|
+
## 📦 Export 형식
|
|
360
|
+
|
|
361
|
+
| 형식 | 경로 | 설명 |
|
|
362
|
+
|------|------|------|
|
|
363
|
+
| ESM | `dist/index.esm.js` | ES Module (React) |
|
|
364
|
+
| CJS | `dist/index.js` | CommonJS |
|
|
365
|
+
| UMD | `dist/index.umd.js` | Universal (CDN) |
|
|
366
|
+
| CSS | `dist/index.css` | 컴포넌트 스타일 |
|
|
367
|
+
| Types | `dist/index.d.ts` | TypeScript 타입 |
|
|
368
|
+
|
|
369
|
+
## 🔧 고급 사용법
|
|
370
|
+
|
|
371
|
+
### Tree Shaking
|
|
372
|
+
|
|
373
|
+
```tsx
|
|
374
|
+
// 개별 import로 번들 크기 최적화
|
|
375
|
+
import Button from '@designbasekorea/ui/dist/components/Button';
|
|
376
|
+
import Card from '@designbasekorea/ui/dist/components/Card';
|
|
377
|
+
```
|
|
378
|
+
|
|
379
|
+
### TypeScript
|
|
380
|
+
|
|
381
|
+
```tsx
|
|
382
|
+
import { ButtonProps, CardProps } from '@designbasekorea/ui';
|
|
383
|
+
|
|
384
|
+
const MyButton: React.FC<ButtonProps> = (props) => {
|
|
385
|
+
return <Button {...props} />;
|
|
386
|
+
};
|
|
387
|
+
```
|
|
388
|
+
|
|
389
|
+
### 접근성 (a11y)
|
|
390
|
+
|
|
391
|
+
모든 컴포넌트는 WCAG 2.1 AA 수준을 준수합니다:
|
|
392
|
+
- 키보드 네비게이션 지원
|
|
393
|
+
- ARIA 속성 포함
|
|
394
|
+
- 스크린 리더 호환
|
|
395
|
+
- 포커스 관리
|
|
396
|
+
|
|
397
|
+
```tsx
|
|
398
|
+
<Button aria-label="검색">
|
|
399
|
+
<SearchIcon />
|
|
400
|
+
</Button>
|
|
401
|
+
|
|
402
|
+
<Input
|
|
403
|
+
aria-describedby="email-error"
|
|
404
|
+
aria-invalid={!!error}
|
|
405
|
+
/>
|
|
406
|
+
```
|
|
407
|
+
|
|
408
|
+
## 🔗 관련 패키지
|
|
409
|
+
|
|
410
|
+
- [@designbasekorea/tokens](../tokens) - 디자인 토큰 (필수)
|
|
411
|
+
- [@designbasekorea/theme](../theme) - 테마 시스템 (필수)
|
|
412
|
+
- [@designbasekorea/icons](../icons) - 아이콘 컴포넌트
|
|
413
|
+
- [@designbasekorea/icons-webfont](../icons-webfont) - 아이콘 웹폰트
|
|
414
|
+
|
|
415
|
+
## 📖 문서 및 예제
|
|
416
|
+
|
|
417
|
+
### Storybook
|
|
418
|
+
|
|
419
|
+
모든 컴포넌트의 라이브 예제를 확인하세요:
|
|
420
|
+
|
|
421
|
+
```bash
|
|
422
|
+
npm run storybook
|
|
423
|
+
```
|
|
424
|
+
|
|
425
|
+
브라우저에서 `http://localhost:6006` 접속
|
|
426
|
+
|
|
427
|
+
### 온라인 문서
|
|
428
|
+
|
|
429
|
+
- [Storybook (배포됨)]() - 모든 컴포넌트 예제
|
|
430
|
+
- [GitHub Repository]() - 소스 코드
|
|
431
|
+
|
|
432
|
+
## 🔄 버전 히스토리
|
|
433
|
+
|
|
434
|
+
### 0.1.0 (Latest)
|
|
435
|
+
- ✅ 20+ React 컴포넌트 제공
|
|
436
|
+
- ✅ 테마 시스템 통합
|
|
437
|
+
- ✅ TypeScript 지원
|
|
438
|
+
- ✅ 접근성 준수
|
|
439
|
+
|
|
440
|
+
## ⚠️ 주의사항
|
|
441
|
+
|
|
442
|
+
### 1. CSS 로드 순서
|
|
443
|
+
|
|
444
|
+
반드시 이 순서대로 CSS를 로드하세요:
|
|
445
|
+
|
|
446
|
+
```tsx
|
|
447
|
+
// 1. 토큰 (필수 - 가장 먼저!)
|
|
448
|
+
import '@designbasekorea/tokens/dist/css/tokens.css';
|
|
449
|
+
|
|
450
|
+
// 2. 테마 (필수)
|
|
451
|
+
import '@designbasekorea/theme/dist/css/theme.css';
|
|
452
|
+
|
|
453
|
+
// 3. UI 컴포넌트 (자동으로 테마 CSS 포함)
|
|
454
|
+
import { Button } from '@designbasekorea/ui';
|
|
455
|
+
```
|
|
456
|
+
|
|
457
|
+
### 2. 버전 호환성
|
|
458
|
+
|
|
459
|
+
| UI | Tokens | Theme |
|
|
460
|
+
|----|--------|-------|
|
|
461
|
+
| 0.1.0+ | 0.1.7+ | 0.1.11+ |
|
|
462
|
+
|
|
463
|
+
호환되는 버전을 함께 사용하세요.
|
|
464
|
+
|
|
465
|
+
### 3. React 버전
|
|
466
|
+
|
|
467
|
+
- React `18.0.0+` 필요
|
|
468
|
+
- React DOM `18.0.0+` 필요
|
|
469
|
+
|
|
470
|
+
## 🤝 기여
|
|
471
|
+
|
|
472
|
+
버그 리포트나 기능 제안은 GitHub Issues로 부탁드립니다.
|
|
473
|
+
|
|
474
|
+
## 📄 라이선스
|
|
475
|
+
|
|
476
|
+
MIT
|
|
477
|
+
|