@gusun/design-system 0.1.1 → 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 +62 -9
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,16 +1,69 @@
|
|
|
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
|
+
## 규칙·문서
|
|
64
|
+
|
|
65
|
+
컴포넌트 사용 규칙과 설계 원칙(토큰 경유·완전 옵션화 등)은 패키지에 동봉되지 않고 **문서 사이트의 "디자인시스템 규칙" 섹션**에서 항상 최신 버전으로 제공합니다.
|
|
66
|
+
|
|
67
|
+
## License
|
|
68
|
+
|
|
69
|
+
ATS
|