@pisodev/test-component-library 1.1.0 → 1.1.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 +10 -74
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -13,24 +13,19 @@ 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
|
}
|
|
@@ -48,18 +43,9 @@ function App() {
|
|
|
48
43
|
<ThemeProvider
|
|
49
44
|
colors={{
|
|
50
45
|
primary: {
|
|
51
|
-
600: '#ff6b6b', //
|
|
46
|
+
600: '#ff6b6b', // 링크의 기본 색상
|
|
52
47
|
700: '#ee5a52', // hover 상태 색상
|
|
53
48
|
},
|
|
54
|
-
secondary: {
|
|
55
|
-
600: '#4ecdc4',
|
|
56
|
-
700: '#45b8b0',
|
|
57
|
-
},
|
|
58
|
-
// 새로운 컬러 추가
|
|
59
|
-
brand: {
|
|
60
|
-
500: '#ffd93d',
|
|
61
|
-
600: '#f6c441',
|
|
62
|
-
},
|
|
63
49
|
}}
|
|
64
50
|
>
|
|
65
51
|
<YourApp />
|
|
@@ -75,59 +61,9 @@ function App() {
|
|
|
75
61
|
**컬러 변경 방법**:
|
|
76
62
|
- 일부 스케일만 변경: 필요한 스케일만 지정하면 나머지는 기본값 유지
|
|
77
63
|
- 새 컬러 추가: 원하는 이름으로 새로운 컬러 스케일 추가 가능
|
|
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
64
|
|
|
95
65
|
## 컴포넌트
|
|
96
66
|
|
|
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
67
|
### Anchor
|
|
132
68
|
|
|
133
69
|
`rel`과 `title` 속성이 **필수**인 링크 컴포넌트입니다. 접근성과 SEO를 위해 항상 이 속성들을 제공해야 합니다.
|