soongle-ui 0.1.4 → 0.1.6
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.ko.md +93 -0
- package/README.md +3 -1
- package/package.json +1 -1
package/README.ko.md
ADDED
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
# soongle-ui
|
|
2
|
+
|
|
3
|
+
**Tailwind CSS v4**를 기반으로 한 React.js 및 Next.js용 프리미엄 현대적 디자인 시스템 라이브러리입니다.
|
|
4
|
+
|
|
5
|
+
다른 언어로 보기: [English](https://github.com/s00ngle/soongle-ui/blob/master/README.md), [한국어](https://github.com/s00ngle/soongle-ui/blob/master/README.ko.md)
|
|
6
|
+
|
|
7
|
+
## ✨ 특징
|
|
8
|
+
|
|
9
|
+
- 🎨 **Utility-First**: Tailwind CSS v4를 활용한 최상의 유연성.
|
|
10
|
+
- 🛠️ **Type-Safe**: TypeScript로 작성되어 완벽한 IntelliSense 지원.
|
|
11
|
+
- 📦 **Tree-Shakable**: 실제로 사용하는 컴포넌트만 번들에 포함.
|
|
12
|
+
- 🚀 **Next.js 최적화**: 서버 컴포넌트 및 SSR을 고려하여 설계됨.
|
|
13
|
+
|
|
14
|
+
## 🚀 설치
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
npm install soongle-ui
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## 🛠️ 설정
|
|
21
|
+
|
|
22
|
+
### 1. 스타일 임포트
|
|
23
|
+
|
|
24
|
+
프로젝트에서 Tailwind CSS를 **사용하지 않는** 경우, 루트 엔트리 파일(예: Next.js의 `app/layout.tsx` 또는 Vite의 `src/main.tsx`)에서 라이브러리의 스타일시트를 임포트해야 합니다.
|
|
25
|
+
|
|
26
|
+
```tsx
|
|
27
|
+
import 'soongle-ui/styles.css';
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
#### 💡 이미 Tailwind CSS를 사용 중인 경우
|
|
31
|
+
|
|
32
|
+
이미 프로젝트에 Tailwind CSS가 설치되어 있다면, `soongle-ui/styles.css`를 **임포트하지 마세요.** 대신, 스타일 중복을 방지하고 번들 크기를 최적화하기 위해 Tailwind 설정에 라이브러리의 컴포넌트 경로를 추가하세요.
|
|
33
|
+
|
|
34
|
+
##### Tailwind CSS v3 (`tailwind.config.ts`) 사용 시
|
|
35
|
+
`content` 배열에 `soongle-ui` 배포 경로를 추가합니다:
|
|
36
|
+
|
|
37
|
+
```ts
|
|
38
|
+
export default {
|
|
39
|
+
content: [
|
|
40
|
+
"./src/**/*.{js,ts,jsx,tsx}",
|
|
41
|
+
"./node_modules/soongle-ui/dist/**/*.{js,ts,jsx,tsx}", // 이 라인 추가
|
|
42
|
+
],
|
|
43
|
+
theme: {
|
|
44
|
+
extend: {},
|
|
45
|
+
},
|
|
46
|
+
plugins: [],
|
|
47
|
+
};
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
##### Tailwind CSS v4 사용 시
|
|
51
|
+
Tailwind v4는 자동으로 `node_modules`를 스캔합니다. 하지만 최상의 경험을 위해 루트 CSS에 다음 내용을 확인하세요:
|
|
52
|
+
|
|
53
|
+
```css
|
|
54
|
+
@import "tailwindcss";
|
|
55
|
+
@source "../node_modules/soongle-ui";
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
## 📖 사용 방법
|
|
59
|
+
|
|
60
|
+
### Text 컴포넌트 사용 예시
|
|
61
|
+
|
|
62
|
+
```tsx
|
|
63
|
+
import { Text } from 'soongle-ui';
|
|
64
|
+
|
|
65
|
+
function App() {
|
|
66
|
+
return (
|
|
67
|
+
<div className="p-8 space-y-4">
|
|
68
|
+
<Text size="5xl" weight="black" color="primary">
|
|
69
|
+
안녕하세요 Soongle!
|
|
70
|
+
</Text>
|
|
71
|
+
<Text size="base" color="muted">
|
|
72
|
+
Tailwind 기본값을 사용하는 미리 스타일링된 텍스트 컴포넌트입니다.
|
|
73
|
+
</Text>
|
|
74
|
+
</div>
|
|
75
|
+
);
|
|
76
|
+
}
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
## 🏗️ 제공되는 컴포넌트
|
|
80
|
+
|
|
81
|
+
| 컴포넌트 | 설명 |
|
|
82
|
+
| :--- | :--- |
|
|
83
|
+
| `Button` | 다양한 배리언트를 지원하는 인터랙티브 버튼 컴포넌트. |
|
|
84
|
+
| `Text` | 모든 Tailwind 폰트 유틸리티를 지원하는 시맨틱 텍스트 컴포넌트. |
|
|
85
|
+
| (추가 예정...) | 더 많은 고품질 컴포넌트가 곧 추가될 예정입니다. |
|
|
86
|
+
|
|
87
|
+
## 🧩 요구 사항
|
|
88
|
+
|
|
89
|
+
- **React**: 18.x 또는 19.x
|
|
90
|
+
- **Tailwind CSS**: v4.x (라이브러리에 스타일이 포함되어 있지만, Tailwind 프로젝트에서 가장 잘 작동합니다)
|
|
91
|
+
|
|
92
|
+
---
|
|
93
|
+
Developed by Soongle.
|
package/README.md
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
A premium, modern design system library for React.js and Next.js, built on top of **Tailwind CSS v4**.
|
|
4
4
|
|
|
5
|
+
Read this in other languages: [English](https://github.com/s00ngle/soongle-ui/blob/master/README.md), [한국어](https://github.com/s00ngle/soongle-ui/blob/master/README.ko.md)
|
|
6
|
+
|
|
5
7
|
## ✨ Features
|
|
6
8
|
|
|
7
9
|
- 🎨 **Utility-First**: Powered by Tailwind CSS v4 for ultimate flexibility.
|
|
@@ -88,4 +90,4 @@ function App() {
|
|
|
88
90
|
- **Tailwind CSS**: v4.x (The library includes styles, but works best in a Tailwind project)
|
|
89
91
|
|
|
90
92
|
---
|
|
91
|
-
Developed
|
|
93
|
+
Developed by Soongle.
|