@pisodev/test-component-library 1.0.0 → 1.0.1
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 +33 -115
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,146 +1,64 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @pisodev/test-component-library
|
|
2
2
|
|
|
3
|
-
SASS
|
|
3
|
+
SASS 기반 React 컴포넌트 라이브러리입니다.
|
|
4
4
|
|
|
5
5
|
## 설치
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
-
npm install @
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
또는
|
|
12
|
-
|
|
13
|
-
```bash
|
|
14
|
-
yarn add @yourname/react-sass-component-library
|
|
8
|
+
npm install @pisodev/test-component-library
|
|
15
9
|
```
|
|
16
10
|
|
|
17
11
|
## 사용법
|
|
18
12
|
|
|
19
|
-
### Button 컴포넌트
|
|
20
|
-
|
|
21
13
|
```tsx
|
|
22
|
-
import { Button } from '@
|
|
14
|
+
import { Button, Card } from '@pisodev/test-component-library';
|
|
23
15
|
|
|
24
16
|
function App() {
|
|
25
17
|
return (
|
|
26
|
-
<
|
|
27
|
-
<
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
<Button variant="secondary" size="large">
|
|
32
|
-
Secondary Button
|
|
33
|
-
</Button>
|
|
34
|
-
|
|
35
|
-
<Button variant="outline" size="small" disabled>
|
|
36
|
-
Disabled Button
|
|
18
|
+
<Card title="환영합니다" variant="elevated">
|
|
19
|
+
<p>컴포넌트 라이브러리 예시입니다.</p>
|
|
20
|
+
<Button variant="primary" onClick={() => alert('클릭!')}>
|
|
21
|
+
시작하기
|
|
37
22
|
</Button>
|
|
38
|
-
</
|
|
23
|
+
</Card>
|
|
39
24
|
);
|
|
40
25
|
}
|
|
41
26
|
```
|
|
42
27
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
| Prop | Type | Default | Description |
|
|
46
|
-
|------|------|---------|-------------|
|
|
47
|
-
| `children` | `React.ReactNode` | - | 버튼 내용 |
|
|
48
|
-
| `variant` | `'primary' \| 'secondary' \| 'outline'` | `'primary'` | 버튼 스타일 |
|
|
49
|
-
| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | 버튼 크기 |
|
|
50
|
-
| `onClick` | `() => void` | - | 클릭 이벤트 핸들러 |
|
|
51
|
-
| `disabled` | `boolean` | `false` | 비활성화 여부 |
|
|
52
|
-
| `type` | `'button' \| 'submit' \| 'reset'` | `'button'` | 버튼 타입 |
|
|
53
|
-
| `className` | `string` | `''` | 추가 CSS 클래스 |
|
|
54
|
-
|
|
55
|
-
### Card 컴포넌트
|
|
28
|
+
### Button
|
|
56
29
|
|
|
57
30
|
```tsx
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
return (
|
|
62
|
-
<div>
|
|
63
|
-
<Card
|
|
64
|
-
title="카드 제목"
|
|
65
|
-
subtitle="카드 부제목"
|
|
66
|
-
variant="elevated"
|
|
67
|
-
>
|
|
68
|
-
<p>카드 내용이 여기에 들어갑니다.</p>
|
|
69
|
-
</Card>
|
|
70
|
-
|
|
71
|
-
<Card
|
|
72
|
-
variant="outlined"
|
|
73
|
-
footer={<button>액션 버튼</button>}
|
|
74
|
-
>
|
|
75
|
-
<p>Footer가 있는 카드입니다.</p>
|
|
76
|
-
</Card>
|
|
77
|
-
|
|
78
|
-
<Card
|
|
79
|
-
variant="default"
|
|
80
|
-
onClick={() => console.log('카드 클릭됨')}
|
|
81
|
-
>
|
|
82
|
-
<p>클릭 가능한 카드입니다.</p>
|
|
83
|
-
</Card>
|
|
84
|
-
</div>
|
|
85
|
-
);
|
|
86
|
-
}
|
|
31
|
+
<Button variant="primary" size="medium">Primary</Button>
|
|
32
|
+
<Button variant="secondary" size="large">Secondary</Button>
|
|
33
|
+
<Button variant="outline" size="small" disabled>Disabled</Button>
|
|
87
34
|
```
|
|
88
35
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
| `title` | `string` | - | 카드 제목 |
|
|
95
|
-
| `subtitle` | `string` | - | 카드 부제목 |
|
|
96
|
-
| `footer` | `React.ReactNode` | - | 카드 푸터 |
|
|
97
|
-
| `variant` | `'default' \| 'elevated' \| 'outlined'` | `'default'` | 카드 스타일 |
|
|
98
|
-
| `className` | `string` | `''` | 추가 CSS 클래스 |
|
|
99
|
-
| `onClick` | `() => void` | - | 클릭 이벤트 핸들러 |
|
|
100
|
-
|
|
101
|
-
## Next.js에서 사용하기
|
|
36
|
+
**Props**
|
|
37
|
+
- `variant`: `'primary'` | `'secondary'` | `'outline'` (기본값: `'primary'`)
|
|
38
|
+
- `size`: `'small'` | `'medium'` | `'large'` (기본값: `'medium'`)
|
|
39
|
+
- `disabled`: `boolean`
|
|
40
|
+
- `onClick`: `() => void`
|
|
102
41
|
|
|
103
|
-
|
|
42
|
+
### Card
|
|
104
43
|
|
|
105
44
|
```tsx
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
<Button variant="primary">시작하기</Button>
|
|
115
|
-
</Card>
|
|
116
|
-
</main>
|
|
117
|
-
);
|
|
118
|
-
}
|
|
45
|
+
<Card
|
|
46
|
+
title="제목"
|
|
47
|
+
subtitle="부제목"
|
|
48
|
+
variant="elevated"
|
|
49
|
+
footer={<button>액션</button>}
|
|
50
|
+
>
|
|
51
|
+
내용
|
|
52
|
+
</Card>
|
|
119
53
|
```
|
|
120
54
|
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
```
|
|
128
|
-
|
|
129
|
-
### 배포
|
|
130
|
-
|
|
131
|
-
```bash
|
|
132
|
-
npm publish --access public
|
|
133
|
-
```
|
|
55
|
+
**Props**
|
|
56
|
+
- `title`: `string`
|
|
57
|
+
- `subtitle`: `string`
|
|
58
|
+
- `variant`: `'default'` | `'elevated'` | `'outlined'` (기본값: `'default'`)
|
|
59
|
+
- `footer`: `React.ReactNode`
|
|
60
|
+
- `onClick`: `() => void`
|
|
134
61
|
|
|
135
62
|
## 라이센스
|
|
136
63
|
|
|
137
64
|
MIT
|
|
138
|
-
|
|
139
|
-
## 특징
|
|
140
|
-
|
|
141
|
-
- TypeScript 지원
|
|
142
|
-
- SASS 기반 스타일링
|
|
143
|
-
- CSS Modules를 통한 스타일 캡슐화
|
|
144
|
-
- React 17, 18, 19 지원
|
|
145
|
-
- Next.js 완벽 호환
|
|
146
|
-
- Tree-shaking 지원 (ESM)
|