@pisodev/test-component-library 1.1.0 → 1.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 +12 -110
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -13,124 +13,29 @@ npm install @pisodev/test-component-library
|
|
|
13
13
|
### 기본 사용
|
|
14
14
|
|
|
15
15
|
```tsx
|
|
16
|
-
import {
|
|
16
|
+
import { Anchor, ThemeProvider } from '@pisodev/test-component-library';
|
|
17
17
|
|
|
18
18
|
function App() {
|
|
19
19
|
return (
|
|
20
20
|
<ThemeProvider>
|
|
21
|
-
<
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
title="예시 사이트로 이동"
|
|
30
|
-
>
|
|
31
|
-
더 알아보기
|
|
32
|
-
</Anchor>
|
|
33
|
-
</Card>
|
|
21
|
+
<Anchor
|
|
22
|
+
href="https://example.com"
|
|
23
|
+
rel="noopener noreferrer"
|
|
24
|
+
title="예시 사이트로 이동"
|
|
25
|
+
target="_blank"
|
|
26
|
+
>
|
|
27
|
+
외부 링크
|
|
28
|
+
</Anchor>
|
|
34
29
|
</ThemeProvider>
|
|
35
30
|
);
|
|
36
31
|
}
|
|
37
32
|
```
|
|
38
33
|
|
|
39
|
-
### 테마 커스터마이징
|
|
40
|
-
|
|
41
|
-
컬러 시스템을 커스터마이징하여 브랜드 컬러를 적용할 수 있습니다.
|
|
42
|
-
|
|
43
|
-
```tsx
|
|
44
|
-
import { ThemeProvider } from '@pisodev/test-component-library';
|
|
45
|
-
|
|
46
|
-
function App() {
|
|
47
|
-
return (
|
|
48
|
-
<ThemeProvider
|
|
49
|
-
colors={{
|
|
50
|
-
primary: {
|
|
51
|
-
600: '#ff6b6b', // 버튼, 링크의 기본 색상
|
|
52
|
-
700: '#ee5a52', // hover 상태 색상
|
|
53
|
-
},
|
|
54
|
-
secondary: {
|
|
55
|
-
600: '#4ecdc4',
|
|
56
|
-
700: '#45b8b0',
|
|
57
|
-
},
|
|
58
|
-
// 새로운 컬러 추가
|
|
59
|
-
brand: {
|
|
60
|
-
500: '#ffd93d',
|
|
61
|
-
600: '#f6c441',
|
|
62
|
-
},
|
|
63
|
-
}}
|
|
64
|
-
>
|
|
65
|
-
<YourApp />
|
|
66
|
-
</ThemeProvider>
|
|
67
|
-
);
|
|
68
|
-
}
|
|
69
|
-
```
|
|
70
|
-
|
|
71
|
-
**사용 가능한 컬러 스케일**: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900
|
|
72
|
-
|
|
73
|
-
**기본 제공 컬러**: `primary`, `secondary`, `success`, `warning`, `danger`
|
|
74
|
-
|
|
75
|
-
**컬러 변경 방법**:
|
|
76
|
-
- 일부 스케일만 변경: 필요한 스케일만 지정하면 나머지는 기본값 유지
|
|
77
|
-
- 새 컬러 추가: 원하는 이름으로 새로운 컬러 스케일 추가 가능
|
|
78
|
-
- 완전 덮어쓰기: 모든 스케일을 지정하여 완전히 새로운 컬러로 교체
|
|
79
|
-
|
|
80
|
-
### useTheme 훅으로 컬러 값 가져오기
|
|
81
|
-
|
|
82
|
-
```tsx
|
|
83
|
-
import { useTheme } from '@pisodev/test-component-library';
|
|
84
|
-
|
|
85
|
-
function MyComponent() {
|
|
86
|
-
const { theme } = useTheme();
|
|
87
|
-
|
|
88
|
-
// 컬러 값 사용
|
|
89
|
-
const primaryColor = theme.colors.primary?.[600];
|
|
90
|
-
|
|
91
|
-
return <div style={{ color: primaryColor }}>커스텀 컬러</div>;
|
|
92
|
-
}
|
|
93
|
-
```
|
|
94
|
-
|
|
95
34
|
## 컴포넌트
|
|
96
35
|
|
|
97
|
-
### Button
|
|
98
|
-
|
|
99
|
-
```tsx
|
|
100
|
-
<Button variant="primary" size="medium">Primary</Button>
|
|
101
|
-
<Button variant="secondary" size="large">Secondary</Button>
|
|
102
|
-
<Button variant="outline" size="small" disabled>Disabled</Button>
|
|
103
|
-
```
|
|
104
|
-
|
|
105
|
-
**Props**
|
|
106
|
-
- `variant`: `'primary'` | `'secondary'` | `'outline'` (기본값: `'primary'`)
|
|
107
|
-
- `size`: `'small'` | `'medium'` | `'large'` (기본값: `'medium'`)
|
|
108
|
-
- `disabled`: `boolean`
|
|
109
|
-
- `onClick`: `() => void`
|
|
110
|
-
|
|
111
|
-
### Card
|
|
112
|
-
|
|
113
|
-
```tsx
|
|
114
|
-
<Card
|
|
115
|
-
title="제목"
|
|
116
|
-
subtitle="부제목"
|
|
117
|
-
variant="elevated"
|
|
118
|
-
footer={<button>액션</button>}
|
|
119
|
-
>
|
|
120
|
-
내용
|
|
121
|
-
</Card>
|
|
122
|
-
```
|
|
123
|
-
|
|
124
|
-
**Props**
|
|
125
|
-
- `title`: `string`
|
|
126
|
-
- `subtitle`: `string`
|
|
127
|
-
- `variant`: `'default'` | `'elevated'` | `'outlined'` (기본값: `'default'`)
|
|
128
|
-
- `footer`: `React.ReactNode`
|
|
129
|
-
- `onClick`: `() => void`
|
|
130
|
-
|
|
131
36
|
### Anchor
|
|
132
37
|
|
|
133
|
-
`rel`과 `title` 속성이 **필수**인 링크 컴포넌트입니다.
|
|
38
|
+
`rel`과 `title` 속성이 **필수**인 링크 컴포넌트입니다.
|
|
134
39
|
|
|
135
40
|
```tsx
|
|
136
41
|
<Anchor
|
|
@@ -154,12 +59,9 @@ function MyComponent() {
|
|
|
154
59
|
**Props (필수 항목)**
|
|
155
60
|
- `href`: `string` (필수)
|
|
156
61
|
- `rel`: `string` (필수) - 링크 관계 (예: `"noopener noreferrer"`, `"internal"`)
|
|
157
|
-
- `title`: `string` (필수) - 링크 설명
|
|
62
|
+
- `title`: `string` (필수) - 링크 설명
|
|
158
63
|
- `target`: `'_blank'` | `'_self'` | `'_parent'` | `'_top'` (기본값: `'_self'`)
|
|
159
|
-
- `onClick`: `(e: React.MouseEvent<HTMLAnchorElement>) => void`
|
|
160
64
|
|
|
161
|
-
|
|
65
|
+
## 배포
|
|
162
66
|
|
|
163
|
-
## 라이센스
|
|
164
67
|
|
|
165
|
-
MIT
|