@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.
Files changed (2) hide show
  1. package/README.md +33 -115
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,146 +1,64 @@
1
- # React SASS Component Library
1
+ # @pisodev/test-component-library
2
2
 
3
- SASS로 스타일링된 React 컴포넌트 라이브러리입니다. Next.js 및 React 프로젝트에서 바로 사용할 수 있습니다.
3
+ SASS 기반 React 컴포넌트 라이브러리입니다.
4
4
 
5
5
  ## 설치
6
6
 
7
7
  ```bash
8
- npm install @yourname/react-sass-component-library
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 '@yourname/react-sass-component-library';
14
+ import { Button, Card } from '@pisodev/test-component-library';
23
15
 
24
16
  function App() {
25
17
  return (
26
- <div>
27
- <Button variant="primary" size="medium" onClick={() => alert('클릭!')}>
28
- Primary Button
29
- </Button>
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
- </div>
23
+ </Card>
39
24
  );
40
25
  }
41
26
  ```
42
27
 
43
- #### Button Props
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
- import { Card } from '@yourname/react-sass-component-library';
59
-
60
- function App() {
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
- #### Card Props
90
-
91
- | Prop | Type | Default | Description |
92
- |------|------|---------|-------------|
93
- | `children` | `React.ReactNode` | - | 카드 내용 |
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
- Next.js 프로젝트에서는 별도의 SASS 설정 없이 바로 사용할 수 있습니다. 스타일은 자동으로 번들에 포함됩니다.
42
+ ### Card
104
43
 
105
44
  ```tsx
106
- // app/page.tsx 또는 pages/index.tsx
107
- import { Button, Card } from '@yourname/react-sass-component-library';
108
-
109
- export default function Home() {
110
- return (
111
- <main>
112
- <Card title="환영합니다" variant="elevated">
113
- <p>Next.js에서 컴포넌트 라이브러리를 사용하는 예시입니다.</p>
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
- ```bash
126
- npm run build
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)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pisodev/test-component-library",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "description": "SCSS 기반 React 컴포넌트 라이브러리",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",