@gusun/design-system 0.1.1 → 0.1.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 +130 -9
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,16 +1,137 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @gusun/design-system
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
코드↔Figma가 1:1로 동기화된 **ATS 디자인 시스템** — 토큰 기반 React 컴포넌트 라이브러리입니다. 60+ 컴포넌트와 6종 템플릿, 디자인 토큰을 TypeScript(strict)로 제공합니다.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
- **데모·문서 사이트**: https://love9320-glitch.github.io/enterprise-design-system/ — 모든 컴포넌트의 실행 예제·props 표·복사 가능한 코드
|
|
6
|
+
- **처음이라면**: [시작 가이드](https://love9320-glitch.github.io/enterprise-design-system/#getting-started) — 개발 경험이 없어도 0부터 실행까지
|
|
7
|
+
- **고쳐 쓰고 싶다면**: [커스텀 가이드](https://love9320-glitch.github.io/enterprise-design-system/#customization) — 토큰 오버라이드부터 기능 훅 재사용까지 5단계
|
|
6
8
|
|
|
7
|
-
|
|
8
|
-
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
|
|
9
|
+
## 설치
|
|
9
10
|
|
|
10
|
-
|
|
11
|
+
```bash
|
|
12
|
+
npm install @gusun/design-system
|
|
13
|
+
```
|
|
11
14
|
|
|
12
|
-
|
|
15
|
+
React 18/19 프로젝트에서 동작합니다(react·react-dom은 peer — 앱의 것을 사용).
|
|
13
16
|
|
|
14
|
-
##
|
|
17
|
+
## 빠른 시작
|
|
15
18
|
|
|
16
|
-
|
|
19
|
+
**① 스타일 연결** — Tailwind 없이 컴파일된 CSS 한 장으로 시작하는 게 가장 쉽습니다. 앱 진입 파일(`main.jsx` 등) 맨 위에:
|
|
20
|
+
|
|
21
|
+
```js
|
|
22
|
+
import '@gusun/design-system/styles.css';
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
폰트(Pretendard)는 `index.html`의 `<head>`에 한 줄:
|
|
26
|
+
|
|
27
|
+
```html
|
|
28
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css" />
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
**② 컴포넌트 사용**:
|
|
32
|
+
|
|
33
|
+
```jsx
|
|
34
|
+
import { Button, Input, Select, Tag } from '@gusun/design-system';
|
|
35
|
+
|
|
36
|
+
<Button variant="fill" onClick={save}>저장</Button>
|
|
37
|
+
<Button asChild variant="line"><a href="/docs">링크를 버튼처럼</a></Button>
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
**Tailwind 프로젝트라면** CSS 대신 preset으로 토큰을 통합할 수 있습니다:
|
|
41
|
+
|
|
42
|
+
```js
|
|
43
|
+
// tailwind.config.js
|
|
44
|
+
import preset from '@gusun/design-system/preset';
|
|
45
|
+
export default {
|
|
46
|
+
presets: [preset],
|
|
47
|
+
content: ['./src/**/*.{js,jsx,ts,tsx}', './node_modules/@gusun/design-system/dist-lib/*.js'],
|
|
48
|
+
};
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
## 엔트리
|
|
52
|
+
|
|
53
|
+
| import | 내용 | 비고 |
|
|
54
|
+
|---|---|---|
|
|
55
|
+
| `@gusun/design-system` | 컴포넌트 전체 + 기능 훅 + 유틸 + 타입 | |
|
|
56
|
+
| `@gusun/design-system/editor` | Editor·EditorToolbar·공지 작성 템플릿(Tiptap 기반) | `@tiptap/react` `@tiptap/pm` `@tiptap/starter-kit` 등 peer 설치 필요 |
|
|
57
|
+
| `@gusun/design-system/tokens` | 디자인 토큰 값(색·간격·라운드·타이포) | |
|
|
58
|
+
| `@gusun/design-system/preset` | Tailwind preset(토큰 theme + safelist) | |
|
|
59
|
+
| `@gusun/design-system/styles.css` | 컴파일된 전체 스타일 한 장 | Tailwind 불필요 |
|
|
60
|
+
|
|
61
|
+
동작 훅(`usePopoverPosition`·`useOutsideDismiss`·`useFocusTrap`·`usePanelKeyboard` 등)도 메인 엔트리에서 export됩니다 — 디자인은 직접 만들되 동작만 재사용할 수 있습니다(자세한 건 커스텀 가이드 3단계).
|
|
62
|
+
|
|
63
|
+
## 컴포넌트 API
|
|
64
|
+
|
|
65
|
+
각 컴포넌트명을 클릭하면 **실행 예제 + 전체 props 표**가 있는 데모 페이지로 이동합니다. 아래 표는 자주 쓰는 핵심 props 요약이고, **props의 완전한 진실은 데모 페이지의 표와 타입(.d.ts)** 입니다(에디터에서 자동완성으로도 확인 가능).
|
|
66
|
+
|
|
67
|
+
### 액션
|
|
68
|
+
|
|
69
|
+
| 컴포넌트 | 핵심 props |
|
|
70
|
+
|---|---|
|
|
71
|
+
| [Button](https://love9320-glitch.github.io/enterprise-design-system/#button) | `variant`(fill·line·ghost·underline) · `size`(32·24·18) · `leftIcon/rightIcon/icon`(lucide) · `disabled` `loading` · `width`(hug·fill) · `asChild`(링크를 버튼처럼) · underline 전용 `color`(7색)/`weight` |
|
|
72
|
+
| [ButtonGroup](https://love9320-glitch.github.io/enterprise-design-system/#button) | `gap`(간격 토큰 키) — 버튼 나열 래퍼 |
|
|
73
|
+
| [SegmentControl](https://love9320-glitch.github.io/enterprise-design-system/#segment-control) | `items` · `value/onChange` · `size` |
|
|
74
|
+
| [ToolBar](https://love9320-glitch.github.io/enterprise-design-system/#tool-bar) | 플로팅 툴바 셸 — 내부는 Button·Select 조립, `ToolBarDivider` 포함 |
|
|
75
|
+
|
|
76
|
+
### 입력
|
|
77
|
+
|
|
78
|
+
| 컴포넌트 | 핵심 props |
|
|
79
|
+
|---|---|
|
|
80
|
+
| [Input](https://love9320-glitch.github.io/enterprise-design-system/#input) | `value/onChange` · `placeholder` · `size`(32·22) · `width` · `disabled` `readOnly` · `error`+`errorMessage`(툴팁) · `inputProps` |
|
|
81
|
+
| [TextArea](https://love9320-glitch.github.io/enterprise-design-system/#textarea) | Input과 동일 계열 + 자동 높이·오버레이 스크롤바 · `maxLength` 카운터 |
|
|
82
|
+
| [SearchBar](https://love9320-glitch.github.io/enterprise-design-system/#search-bar) | `value/onChange` · `onSubmit(value)` · `placeholder` · `width` |
|
|
83
|
+
| [Select](https://love9320-glitch.github.io/enterprise-design-system/#select) | `options[{value,label,disabled?}]` · `value/onChange({target:{value}})` · `multiple`(+`confirm` 확인 푸터) · `searchable` · `variant`(box·text·chip) · `label`(내부 라벨) · `placement` `menuWidth` |
|
|
84
|
+
| [SelectChip](https://love9320-glitch.github.io/enterprise-design-system/#select) | Select의 칩형 별칭 — `color`(8색) · `weight` 추가 |
|
|
85
|
+
| [Checkbox / CheckboxGroup](https://love9320-glitch.github.io/enterprise-design-system/#checkbox) | `checked/onChange` · `label` / Group: `items` `value(배열)/onChange` `direction` |
|
|
86
|
+
| [Radio / RadioGroup](https://love9320-glitch.github.io/enterprise-design-system/#radio) | Checkbox와 동일 패턴(단일 선택) |
|
|
87
|
+
| [Switch](https://love9320-glitch.github.io/enterprise-design-system/#switch) | `checked/onChange` · `label` · `disabled` |
|
|
88
|
+
| [DatePicker / DateField / TimeField](https://love9320-glitch.github.io/enterprise-design-system/#date-picker) | `mode`(single·range) · `value/onChange` · `disablePast/Future` `minDate/maxDate` / 필드형은 인풋+팝오버 결합 |
|
|
89
|
+
| [SelectOrInput / PhoneField](https://love9320-glitch.github.io/enterprise-design-system/#input) | 셀렉트↔직접입력 겸용 · Phone은 하이픈 자동 |
|
|
90
|
+
| [Editor](https://love9320-glitch.github.io/enterprise-design-system/#editor) | `/editor` 서브패스 — `value/onChange(html)` · `mode`(edit·read·source) · `toolbar`(기능 선택) · `mergeFields` |
|
|
91
|
+
|
|
92
|
+
### 폼 구성 · 내비게이션
|
|
93
|
+
|
|
94
|
+
| 컴포넌트 | 핵심 props |
|
|
95
|
+
|---|---|
|
|
96
|
+
| [Label](https://love9320-glitch.github.io/enterprise-design-system/#label) | `size` · `required` · `disabled` |
|
|
97
|
+
| [Field](https://love9320-glitch.github.io/enterprise-design-system/#field) | `label` · `required` · `description` · `direction`(vertical·horizontal) · `labelWidth` — 라벨+컨트롤 레이아웃 |
|
|
98
|
+
| [Tabs](https://love9320-glitch.github.io/enterprise-design-system/#tabs) | `items[{value,label,icon?,tag?}]` · `value/onChange` · `variant`(hug·fill) · `rightSlot` |
|
|
99
|
+
| [SegmentedTabs](https://love9320-glitch.github.io/enterprise-design-system/#segmented-tabs) | `items` · `value/onChange` · `width` — 슬라이딩 pill |
|
|
100
|
+
| [Pagination](https://love9320-glitch.github.io/enterprise-design-system/#pagination) | `page/onChange` · `totalCount` `pageSize/onPageSizeChange` · `maxButtons` |
|
|
101
|
+
| [SideNavigation](https://love9320-glitch.github.io/enterprise-design-system/#side-navigation) | `width`(180·220·260) · `showAdd/onAdd` · 버튼: `selected` `icon` `showNewTag` |
|
|
102
|
+
|
|
103
|
+
### 데이터 표시 · 오버레이
|
|
104
|
+
|
|
105
|
+
| 컴포넌트 | 핵심 props |
|
|
106
|
+
|---|---|
|
|
107
|
+
| [Table](https://love9320-glitch.github.io/enterprise-design-system/#table) | `columns[{key,label,width?,render?,filter?,headerMenu?}]` · `rows` · `selectable`+`selectedIds/onSelectChange` · `sort/filters`(controlled 가능) · `maxHeight`(sticky 헤더) · `bordered` |
|
|
108
|
+
| [Tag / NewTag](https://love9320-glitch.github.io/enterprise-design-system/#tag) | `color`(blue·red·gray·black) · `width` / NewTag: 원형 N 뱃지 |
|
|
109
|
+
| [Chip](https://love9320-glitch.github.io/enterprise-design-system/#chip) | `color`(8색) · `onRemove`(X 버튼) |
|
|
110
|
+
| [Tooltip / Divider / ScrollArea](https://love9320-glitch.github.io/enterprise-design-system/#tooltip-scrollbar) | Tooltip: `variant` `beak` / Divider: `direction` `color` / ScrollArea: `maxHeight` 오버레이 스크롤 |
|
|
111
|
+
| [Accordion / AccordionItem](https://love9320-glitch.github.io/enterprise-design-system/#accordion) | Item: `title` · `defaultOpen/open` · `nameEditable/onTitleChange` · `deletable/onDelete` |
|
|
112
|
+
| [Modal 계열](https://love9320-glitch.github.io/enterprise-design-system/#modal) | `Modal`(범용)·`FormModal`(취소/저장+form)·`AlertModal`·`ConfirmModal`(재확인 체크) — 공통: `open/onClose` · `title` · `size`(sm~4xl·fill) · `confirmText/onConfirm` · `footerStart`. 포커스 트랩·복원 내장 |
|
|
113
|
+
| [Popover / PopoverMenu / List](https://love9320-glitch.github.io/enterprise-design-system/#option-list) | Popover: `trigger` + children(close 렌더 함수) · PopoverMenu: `footer`(확인/취소·전체선택) `topArea`(검색) · List: `radio/checkbox` `selected` `rightButton` |
|
|
114
|
+
| [FileUpload· / ImageUpload·](https://love9320-glitch.github.io/enterprise-design-system/#upload-menu) | 버튼+메뉴 세트 — `files/onAdd/onDelete` · `maxCount` `accept` |
|
|
115
|
+
|
|
116
|
+
### 템플릿
|
|
117
|
+
|
|
118
|
+
| 컴포넌트 | 용도 |
|
|
119
|
+
|---|---|
|
|
120
|
+
| [TableTemplate](https://love9320-glitch.github.io/enterprise-design-system/#table-template) | 툴바(제목·버튼·셀렉트·검색)+테이블+페이지네이션 일체형 |
|
|
121
|
+
| [FormTemplate](https://love9320-glitch.github.io/enterprise-design-system/#form-template) | Field 배치 규격의 폼 레이아웃 |
|
|
122
|
+
| [SideNavigationTemplate](https://love9320-glitch.github.io/enterprise-design-system/#side-nav-template) | 좌 내비 + 우 콘텐츠 슬롯 |
|
|
123
|
+
| [JobPositionTemplate](https://love9320-glitch.github.io/enterprise-design-system/#job-position-template) | 조건 조합 → 순서 지정 → 표 등록 플로우 |
|
|
124
|
+
| [ScreeningBuilderTemplate](https://love9320-glitch.github.io/enterprise-design-system/#screening-builder-template) | 조건 카드 + 수식/자연어 빌더(함수 그룹핑·복수 조건·개별설정) |
|
|
125
|
+
| [NoticeWritingTemplate](https://love9320-glitch.github.io/enterprise-design-system/#notice-template) | `/editor` 서브패스 — 채널 탭+에디터 안내문 작성 |
|
|
126
|
+
|
|
127
|
+
### 기능 훅·유틸 (커스텀용)
|
|
128
|
+
|
|
129
|
+
`usePopoverPosition` · `useOutsideDismiss` · `useFocusTrap` · `usePanelKeyboard` · `useHoverTooltip` · `popoverLayers` · `Slot` · `applySort/applyColumnFilters/compareValues` · `iconCellWidth` · `formatDate/formatDateTime/formatDateTimeRange` · `formatPhoneNumber` — 용도·조립 예시는 [커스텀 가이드](https://love9320-glitch.github.io/enterprise-design-system/#customization) 3단계 참조.
|
|
130
|
+
|
|
131
|
+
## 규칙·문서
|
|
132
|
+
|
|
133
|
+
컴포넌트 사용 규칙과 설계 원칙(토큰 경유·완전 옵션화 등)은 패키지에 동봉되지 않고 **문서 사이트의 "디자인시스템 규칙" 섹션**에서 항상 최신 버전으로 제공합니다.
|
|
134
|
+
|
|
135
|
+
## License
|
|
136
|
+
|
|
137
|
+
ATS
|