@bigtablet/design-system 1.5.0 → 1.6.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 +258 -166
- package/dist/index.css +2 -4
- package/dist/next.css +6 -6
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,239 +1,331 @@
|
|
|
1
1
|
# Bigtablet Design System
|
|
2
2
|
|
|
3
|
-
Bigtablet의 공통 UI 컴포넌트
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
3
|
+
Bigtablet의 공통 UI 컴포넌트 및 디자인 시스템입니다.
|
|
4
|
+
Foundation(디자인 토큰)과 Components(UI 컴포넌트)를 분리하여 관리하며,
|
|
5
|
+
Storybook 기반 문서화와 Chromatic을 통한 시각적 테스트를 제공합니다.
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## Features
|
|
10
|
+
|
|
11
|
+
- Foundation / Components 구조 분리
|
|
12
|
+
- Storybook 8 기반 문서화
|
|
13
|
+
- Chromatic 시각적 회귀 테스트
|
|
14
|
+
- Pure React / Next.js 분리 번들
|
|
15
|
+
- SCSS 기반 Design Token 관리
|
|
16
|
+
- pnpm + GitHub Actions 자동 배포
|
|
7
17
|
|
|
8
18
|
---
|
|
9
19
|
|
|
10
20
|
## Tech Stack
|
|
11
21
|
|
|
12
|
-
|
|
|
13
|
-
|
|
14
|
-
| Framework
|
|
15
|
-
| Styling
|
|
16
|
-
| Documentation
|
|
17
|
-
|
|
|
18
|
-
| Build
|
|
19
|
-
| Package Manager | pnpm
|
|
20
|
-
| CI/CD
|
|
22
|
+
| Category | Technology |
|
|
23
|
+
|--------|-----------|
|
|
24
|
+
| Framework | React 19 |
|
|
25
|
+
| Styling | SCSS |
|
|
26
|
+
| Documentation | Storybook 8 |
|
|
27
|
+
| Visual Test | Chromatic |
|
|
28
|
+
| Build | tsup |
|
|
29
|
+
| Package Manager | pnpm |
|
|
30
|
+
| CI / CD | GitHub Actions |
|
|
21
31
|
|
|
22
32
|
---
|
|
23
33
|
|
|
24
|
-
##
|
|
34
|
+
## Project Structure
|
|
35
|
+
|
|
25
36
|
```bash
|
|
26
37
|
src/
|
|
38
|
+
├── styles/
|
|
39
|
+
│ ├── ts/ # Foundation Tokens (TypeScript)
|
|
40
|
+
│ │ ├── colors.ts
|
|
41
|
+
│ │ ├── spacing.ts
|
|
42
|
+
│ │ ├── typography.ts
|
|
43
|
+
│ │ ├── radius.ts
|
|
44
|
+
│ │ ├── shadows.ts
|
|
45
|
+
│ │ ├── motion.ts
|
|
46
|
+
│ │ ├── z-index.ts
|
|
47
|
+
│ │ ├── breakpoints.ts
|
|
48
|
+
│ │ └── a11y.ts
|
|
49
|
+
│ └── scss/ # SCSS Token & Mixins
|
|
50
|
+
│
|
|
27
51
|
├── ui/
|
|
28
|
-
│ ├── form/
|
|
29
|
-
│ ├── feedback/
|
|
30
|
-
│ ├── navigation/
|
|
31
|
-
│ ├── overlay/
|
|
32
|
-
│ ├── display/
|
|
33
|
-
│ ├── general/
|
|
34
|
-
│ ├── skeleton/
|
|
35
|
-
│ └── styles/
|
|
36
|
-
|
|
37
|
-
|
|
52
|
+
│ ├── form/ # TextField, Checkbox, Radio, Switch, FileInput
|
|
53
|
+
│ ├── feedback/ # Alert, Toast, Loading
|
|
54
|
+
│ ├── navigation/ # Pagination, Sidebar
|
|
55
|
+
│ ├── overlay/ # Modal
|
|
56
|
+
│ ├── display/ # Card
|
|
57
|
+
│ ├── general/ # Button, Select
|
|
58
|
+
│ ├── skeleton/ # SkeletonCard, SkeletonList
|
|
59
|
+
│ └── styles/ # Shared component styles
|
|
60
|
+
│
|
|
61
|
+
├── index.ts # Pure React exports
|
|
62
|
+
└── next.ts # Next.js specific exports
|
|
38
63
|
```
|
|
39
64
|
|
|
65
|
+
## Design System Structure
|
|
66
|
+
|
|
67
|
+
Bigtablet Design System은 **Foundation**과 **Components** 두 레이어로 구성됩니다.
|
|
68
|
+
Foundation은 디자인의 기준과 규칙을 정의하고,
|
|
69
|
+
Components는 이 기준을 사용해 실제 UI를 구성합니다.
|
|
70
|
+
|
|
40
71
|
---
|
|
41
72
|
|
|
42
|
-
##
|
|
73
|
+
## Foundation
|
|
43
74
|
|
|
75
|
+
Storybook 경로:
|
|
44
76
|
```bash
|
|
45
|
-
|
|
46
|
-
pnpm storybook
|
|
77
|
+
src/styles/ts/colors.ts
|
|
47
78
|
```
|
|
48
|
-
|
|
79
|
+
Foundation은 **모든 컴포넌트에서 공통으로 사용하는 디자인 기준**입니다.
|
|
80
|
+
컴포넌트 구현 시, 임의의 값 사용을 금지하고 반드시 Foundation 토큰을 사용해야 합니다.
|
|
49
81
|
|
|
82
|
+
### Colors
|
|
83
|
+
- 브랜드, 배경, 텍스트, 상태(success / error / warning) 색상
|
|
84
|
+
- 직접 색상 값 사용 금지
|
|
85
|
+
|
|
86
|
+
파일:
|
|
87
|
+
```bash
|
|
88
|
+
src/styles/ts/colors.ts
|
|
89
|
+
```
|
|
50
90
|
---
|
|
51
91
|
|
|
52
|
-
|
|
92
|
+
### Spacing
|
|
93
|
+
- margin, padding, gap 기준 스케일
|
|
94
|
+
- 레이아웃 일관성 유지 목적
|
|
53
95
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
예시: https://bigtablet-design-system-abcdef.chromatic.com
|
|
96
|
+
파일:
|
|
97
|
+
```bash
|
|
98
|
+
src/styles/ts/spacing.ts
|
|
99
|
+
```
|
|
59
100
|
|
|
60
|
-
|
|
61
|
-
- **main** 브랜치에 push하면 자동으로 Chromatic이 Storybook을 빌드 후 배포.
|
|
62
|
-
- GitHub Actions 워크플로우 파일: **.github/workflows/stotybook.yml** 참고
|
|
101
|
+
---
|
|
63
102
|
|
|
64
|
-
|
|
65
|
-
|
|
103
|
+
### Typography
|
|
104
|
+
- 폰트 패밀리
|
|
105
|
+
- 폰트 크기, 굵기, 줄 간격
|
|
106
|
+
- Heading / Body / Caption 기준
|
|
66
107
|
|
|
67
|
-
|
|
108
|
+
파일:
|
|
109
|
+
```bash
|
|
110
|
+
src/styles/ts/typography.ts
|
|
111
|
+
```
|
|
68
112
|
|
|
69
|
-
|
|
113
|
+
---
|
|
70
114
|
|
|
71
|
-
|
|
72
|
-
|
|
115
|
+
### Radius
|
|
116
|
+
- 컴포넌트 모서리 둥글기 기준
|
|
117
|
+
- 카드, 버튼, 입력 필드 등 공통 사용
|
|
73
118
|
|
|
119
|
+
파일:
|
|
74
120
|
```bash
|
|
75
|
-
|
|
76
|
-
git push --follow-tags
|
|
121
|
+
src/styles/ts/radius.ts
|
|
77
122
|
```
|
|
78
123
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
PNPM_TOKEN은 npm Access Token을 GitHub Secrets에 등록해야 합니다.
|
|
124
|
+
---
|
|
82
125
|
|
|
83
|
-
|
|
126
|
+
### Shadows
|
|
127
|
+
- elevation 레벨 정의
|
|
128
|
+
- 카드, 모달, 드롭다운 등 깊이 표현
|
|
84
129
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
130
|
+
파일:
|
|
131
|
+
```bash
|
|
132
|
+
src/styles/ts/shadows.ts
|
|
133
|
+
```
|
|
89
134
|
|
|
90
|
-
|
|
91
|
-
• title 경로 구조: Components/<Category>/<Component>
|
|
92
|
-
• 기본 args, variant, docs description 포함 권장
|
|
135
|
+
---
|
|
93
136
|
|
|
94
|
-
|
|
137
|
+
### Motion
|
|
138
|
+
- transition duration
|
|
139
|
+
- easing curve 기준
|
|
95
140
|
|
|
96
|
-
|
|
141
|
+
파일:
|
|
97
142
|
```bash
|
|
98
|
-
|
|
143
|
+
src/styles/ts/motion.ts
|
|
99
144
|
```
|
|
100
145
|
|
|
101
|
-
|
|
102
|
-
|
|
146
|
+
---
|
|
147
|
+
|
|
148
|
+
### Z-Index
|
|
149
|
+
- 레이어 우선순위 정의
|
|
150
|
+
- modal, toast, dropdown 등
|
|
151
|
+
|
|
152
|
+
파일:
|
|
153
|
+
```bash
|
|
154
|
+
src/styles/ts/z-index.ts
|
|
155
|
+
```
|
|
103
156
|
|
|
104
157
|
---
|
|
105
158
|
|
|
106
|
-
|
|
159
|
+
### Breakpoints
|
|
160
|
+
- 반응형 기준 해상도
|
|
107
161
|
|
|
108
|
-
|
|
162
|
+
권장 구분:
|
|
163
|
+
- mobile
|
|
164
|
+
- tablet
|
|
165
|
+
- laptop
|
|
166
|
+
- desktop
|
|
109
167
|
|
|
168
|
+
파일:
|
|
110
169
|
```bash
|
|
111
|
-
|
|
112
|
-
# or
|
|
113
|
-
pnpm add @bigtablet/design-system
|
|
114
|
-
# or
|
|
115
|
-
yarn add @bigtablet/design-system
|
|
170
|
+
src/styles/ts/breakpoints.ts
|
|
116
171
|
```
|
|
172
|
+
---
|
|
117
173
|
|
|
118
|
-
###
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
// 컴포넌트 import
|
|
127
|
-
import {
|
|
128
|
-
Button,
|
|
129
|
-
Card,
|
|
130
|
-
Alert,
|
|
131
|
-
Loading,
|
|
132
|
-
Modal,
|
|
133
|
-
TextField,
|
|
134
|
-
Checkbox,
|
|
135
|
-
Radio,
|
|
136
|
-
Switch,
|
|
137
|
-
Select,
|
|
138
|
-
Pagination,
|
|
139
|
-
ToastProvider,
|
|
140
|
-
useToast
|
|
141
|
-
} from "@bigtablet/design-system";
|
|
142
|
-
|
|
143
|
-
function App() {
|
|
144
|
-
const toast = useToast();
|
|
145
|
-
|
|
146
|
-
return (
|
|
147
|
-
<>
|
|
148
|
-
<Button onClick={() => toast.success("Success!")}>
|
|
149
|
-
Click me
|
|
150
|
-
</Button>
|
|
151
|
-
<ToastProvider />
|
|
152
|
-
</>
|
|
153
|
-
);
|
|
154
|
-
}
|
|
174
|
+
### Accessibility (A11y)
|
|
175
|
+
- 포커스 링 스타일
|
|
176
|
+
- 최소 터치 영역 크기
|
|
177
|
+
- 접근성 기준 토큰
|
|
178
|
+
|
|
179
|
+
파일:
|
|
180
|
+
```bash
|
|
181
|
+
src/styles/ts/a11y.ts
|
|
155
182
|
```
|
|
183
|
+
예시:
|
|
184
|
+
```ts
|
|
185
|
+
focusRing
|
|
186
|
+
focusRingError
|
|
187
|
+
tapMinSize
|
|
188
|
+
```
|
|
189
|
+
---
|
|
156
190
|
|
|
157
|
-
|
|
191
|
+
## Components
|
|
158
192
|
|
|
159
|
-
|
|
193
|
+
Storybook 경로 규칙:
|
|
194
|
+
```bash
|
|
195
|
+
src/stories/components/name.stoires.tsx
|
|
196
|
+
```
|
|
197
|
+
Components는 Foundation 토큰을 기반으로 구현된 **실제 UI 컴포넌트 레이어**입니다.
|
|
198
|
+
모든 컴포넌트는 다음 원칙을 따릅니다.
|
|
160
199
|
|
|
161
|
-
|
|
200
|
+
- Foundation 토큰(colors, spacing, typography 등)만 사용
|
|
201
|
+
- 상태(hover, active, disabled, error 등) 명확히 정의
|
|
202
|
+
- 접근성(a11y) 기본 고려
|
|
203
|
+
- Storybook 문서 필수 제공
|
|
162
204
|
|
|
163
|
-
|
|
164
|
-
**⚡ Client Component 필요**: Alert, Checkbox, FileInput, MarkdownEditor, Modal, Pagination, Select, Switch, TextField, ToastProvider, Sidebar
|
|
205
|
+
---
|
|
165
206
|
|
|
166
|
-
|
|
207
|
+
### Form
|
|
167
208
|
|
|
168
|
-
|
|
169
|
-
// Pure React 컴포넌트
|
|
170
|
-
import { Button, Card, Alert } from "@bigtablet/design-system";
|
|
171
|
-
import "@bigtablet/design-system/styles.css";
|
|
209
|
+
사용자 입력을 담당하는 컴포넌트들입니다.
|
|
172
210
|
|
|
173
|
-
|
|
174
|
-
|
|
211
|
+
#### Button
|
|
212
|
+
- 기본 액션 버튼
|
|
213
|
+
- variant: primary / secondary / ghost / danger
|
|
214
|
+
- size: sm / md / lg
|
|
175
215
|
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
{ href: "/dashboard", label: "Dashboard", icon: HomeIcon },
|
|
182
|
-
{ href: "/settings", label: "Settings", icon: SettingsIcon }
|
|
183
|
-
]}
|
|
184
|
-
activePath="/dashboard"
|
|
185
|
-
/>
|
|
186
|
-
<main>{children}</main>
|
|
187
|
-
</div>
|
|
188
|
-
);
|
|
189
|
-
}
|
|
190
|
-
```
|
|
216
|
+
#### TextField
|
|
217
|
+
- 텍스트 입력 필드
|
|
218
|
+
- label, helperText 지원
|
|
219
|
+
- error / success 상태 지원
|
|
220
|
+
- leftIcon / rightIcon 지원
|
|
191
221
|
|
|
192
|
-
|
|
222
|
+
#### Checkbox
|
|
223
|
+
- 다중 선택 입력
|
|
224
|
+
- indeterminate 상태 지원
|
|
193
225
|
|
|
194
|
-
####
|
|
195
|
-
|
|
226
|
+
#### Radio
|
|
227
|
+
- 단일 선택 입력
|
|
228
|
+
- 동일한 name으로 그룹 구성
|
|
196
229
|
|
|
197
|
-
|
|
198
|
-
-
|
|
199
|
-
-
|
|
200
|
-
- **Navigation**: Pagination
|
|
201
|
-
- **Overlay**: Modal
|
|
202
|
-
- **Skeleton**: SkeletonCard, SkeletonList
|
|
230
|
+
#### Switch
|
|
231
|
+
- ON / OFF 토글 입력
|
|
232
|
+
- controlled / uncontrolled 모두 지원
|
|
203
233
|
|
|
204
|
-
####
|
|
205
|
-
|
|
234
|
+
#### Select
|
|
235
|
+
- 드롭다운 선택 컴포넌트
|
|
236
|
+
- 키보드 및 마우스 인터랙션 지원
|
|
237
|
+
- controlled / uncontrolled 모두 지원
|
|
206
238
|
|
|
207
|
-
|
|
239
|
+
#### FileInput
|
|
240
|
+
- 파일 선택 입력
|
|
241
|
+
- 커스텀 UI 제공
|
|
208
242
|
|
|
209
243
|
---
|
|
210
244
|
|
|
211
|
-
|
|
245
|
+
### Feedback
|
|
212
246
|
|
|
213
|
-
|
|
214
|
-
프로젝트에 반드시 설치되어 있어야 합니다:
|
|
247
|
+
사용자에게 상태 및 피드백을 전달하는 컴포넌트들입니다.
|
|
215
248
|
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
249
|
+
#### Alert
|
|
250
|
+
- 모달 형태의 알림
|
|
251
|
+
- info / success / warning / error variant
|
|
252
|
+
- confirm / cancel 액션 지원
|
|
253
|
+
- useAlert 훅 기반
|
|
254
|
+
|
|
255
|
+
#### Loading
|
|
256
|
+
- 인라인 로딩 스피너
|
|
257
|
+
- 크기 조절 가능
|
|
258
|
+
|
|
259
|
+
#### ToastProvider / useToast
|
|
260
|
+
- 전역 토스트 메시지
|
|
261
|
+
- success / error / warning / info / message 타입 제공
|
|
262
|
+
- 내부적으로 react-toastify 사용
|
|
263
|
+
|
|
264
|
+
---
|
|
265
|
+
|
|
266
|
+
### Navigation
|
|
267
|
+
|
|
268
|
+
페이지 이동 및 흐름 제어 컴포넌트입니다.
|
|
269
|
+
|
|
270
|
+
#### Pagination
|
|
271
|
+
- Prev / Next 기반 페이지네이션
|
|
272
|
+
- controlled 방식으로 상태 관리
|
|
273
|
+
|
|
274
|
+
#### Sidebar
|
|
275
|
+
- 좌측 네비게이션 메뉴
|
|
276
|
+
- 활성 경로 표시
|
|
277
|
+
- match 모드 지원 (startsWith / exact)
|
|
278
|
+
- Next.js 전용 컴포넌트
|
|
279
|
+
|
|
280
|
+
---
|
|
281
|
+
|
|
282
|
+
### Overlay
|
|
283
|
+
|
|
284
|
+
콘텐츠 위에 표시되는 레이어 컴포넌트입니다.
|
|
285
|
+
|
|
286
|
+
#### Modal
|
|
287
|
+
- 중앙 정렬 오버레이
|
|
288
|
+
- ESC / 오버레이 클릭 닫기 지원
|
|
289
|
+
- 제목 영역 optional
|
|
224
290
|
|
|
225
|
-
|
|
226
|
-
|
|
291
|
+
---
|
|
292
|
+
|
|
293
|
+
### Display
|
|
294
|
+
|
|
295
|
+
정보를 시각적으로 표현하는 컴포넌트입니다.
|
|
296
|
+
|
|
297
|
+
#### Card
|
|
298
|
+
- 콘텐츠 그룹화용 컨테이너
|
|
299
|
+
- elevation 및 padding 포함
|
|
300
|
+
|
|
301
|
+
---
|
|
302
|
+
|
|
303
|
+
### Skeleton
|
|
304
|
+
|
|
305
|
+
로딩 중 UI를 표현하는 컴포넌트입니다.
|
|
227
306
|
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
307
|
+
#### SkeletonCard
|
|
308
|
+
- 카드 형태 스켈레톤
|
|
309
|
+
|
|
310
|
+
#### SkeletonList
|
|
311
|
+
- 리스트 형태 스켈레톤
|
|
312
|
+
|
|
313
|
+
---
|
|
314
|
+
|
|
315
|
+
## Storybook Guidelines
|
|
316
|
+
|
|
317
|
+
### Title 규칙
|
|
318
|
+
```bash
|
|
319
|
+
foundation/
|
|
320
|
+
components/
|
|
232
321
|
```
|
|
233
322
|
|
|
234
|
-
|
|
323
|
+
---
|
|
324
|
+
|
|
325
|
+
### Story 작성 원칙
|
|
235
326
|
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
327
|
+
- 기본 상태(Default) 반드시 포함
|
|
328
|
+
- size / variant / state 예제 포함
|
|
329
|
+
- 디자이너가 봐도 이해 가능한 설명 작성
|
|
330
|
+
- 실제 사용 예제 위주 구성
|
|
331
|
+
- 불필요한 control 노출 지양
|
package/dist/index.css
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
@charset "UTF-8";
|
|
2
|
-
|
|
3
1
|
/* src/ui/display/card/style.scss */
|
|
4
2
|
.card {
|
|
5
3
|
background: #ffffff;
|
|
@@ -43,7 +41,7 @@
|
|
|
43
41
|
font-weight: 600;
|
|
44
42
|
line-height: 1.3;
|
|
45
43
|
margin-bottom: 0.75rem;
|
|
46
|
-
color: #
|
|
44
|
+
color: #1f2937;
|
|
47
45
|
}
|
|
48
46
|
.card {
|
|
49
47
|
}
|
|
@@ -120,7 +118,7 @@
|
|
|
120
118
|
background: #fafafa;
|
|
121
119
|
}
|
|
122
120
|
.alert_modal_button_confirm {
|
|
123
|
-
color: #
|
|
121
|
+
color: #ffffff;
|
|
124
122
|
}
|
|
125
123
|
.alert_modal {
|
|
126
124
|
}
|
package/dist/next.css
CHANGED
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
gap: 0.5rem;
|
|
37
37
|
padding: 0.5rem 0.75rem;
|
|
38
38
|
border-radius: 8px;
|
|
39
|
-
color: #
|
|
39
|
+
color: #3b3b3b;
|
|
40
40
|
background: transparent;
|
|
41
41
|
border: 1px solid transparent;
|
|
42
42
|
cursor: pointer;
|
|
@@ -49,16 +49,16 @@
|
|
|
49
49
|
}
|
|
50
50
|
.sidebar_item:hover {
|
|
51
51
|
background: #fafafa;
|
|
52
|
-
color: #
|
|
52
|
+
color: #1f2937;
|
|
53
53
|
}
|
|
54
54
|
.sidebar_item:hover .sidebar_icon {
|
|
55
|
-
color: #
|
|
55
|
+
color: #1f2937;
|
|
56
56
|
}
|
|
57
57
|
.sidebar_item.is_active {
|
|
58
58
|
position: relative;
|
|
59
59
|
background: #ffffff;
|
|
60
60
|
border-color: #e5e5e5;
|
|
61
|
-
color: #
|
|
61
|
+
color: #1f2937;
|
|
62
62
|
box-shadow: inset 0 0 0 1px #e5e5e5;
|
|
63
63
|
}
|
|
64
64
|
.sidebar_item.is_active::before {
|
|
@@ -72,12 +72,12 @@
|
|
|
72
72
|
background: #000000;
|
|
73
73
|
}
|
|
74
74
|
.sidebar_item.is_active .sidebar_icon {
|
|
75
|
-
color: #
|
|
75
|
+
color: #1f2937;
|
|
76
76
|
}
|
|
77
77
|
.sidebar_icon {
|
|
78
78
|
display: inline-grid;
|
|
79
79
|
place-items: center;
|
|
80
|
-
color: #
|
|
80
|
+
color: #6b7280;
|
|
81
81
|
transition: color 0.2s ease-out;
|
|
82
82
|
}
|
|
83
83
|
.sidebar_label {
|