woori-product-component 0.1.6 → 0.1.7
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 +32 -11
- package/package.json +27 -1
package/README.md
CHANGED
|
@@ -1,22 +1,23 @@
|
|
|
1
1
|
# woori-product-component
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
React 기반으로 설계되었으며, **디자인 시스템 토큰(CSS Variables)** 을 활용해
|
|
5
|
-
다양한 프로젝트 환경에서 재사용할 수 있도록 구현되었습니다.
|
|
3
|
+
A **ProductCard UI component library** for financial applications.
|
|
6
4
|
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
This library is built with React and uses **design system tokens (CSS Variables)**
|
|
6
|
+
to enable easy reuse across different projects and environments.
|
|
7
|
+
|
|
8
|
+
> This package provides UI components only.
|
|
9
|
+
> It does not include routing, data fetching, or business logic.
|
|
9
10
|
|
|
10
11
|
---
|
|
11
12
|
|
|
12
13
|
## ✨ Features
|
|
13
14
|
|
|
14
|
-
- 💳
|
|
15
|
-
- 🎨 CSS
|
|
16
|
-
- ♻️
|
|
17
|
-
- 🧭
|
|
18
|
-
- ♿
|
|
19
|
-
- 🧩 React
|
|
15
|
+
- 💳 Financial product summary card UI (deposit, savings, loan, etc.)
|
|
16
|
+
- 🎨 CSS Variables–based design tokens
|
|
17
|
+
- ♻️ Reusable component design using props
|
|
18
|
+
- 🧭 Navigation delegated via `href` or `onClick`
|
|
19
|
+
- ♿ Accessibility considerations (role, tabIndex, keyboard interaction)
|
|
20
|
+
- 🧩 Minimal React dependencies (`peerDependencies` only)
|
|
20
21
|
|
|
21
22
|
---
|
|
22
23
|
|
|
@@ -28,9 +29,29 @@ npm install woori-product-component
|
|
|
28
29
|
yarn add woori-product-component
|
|
29
30
|
```
|
|
30
31
|
|
|
32
|
+
## Usage
|
|
33
|
+
|
|
34
|
+
```jsx
|
|
35
|
+
import { ProductCard } from "woori-product-component";
|
|
36
|
+
|
|
37
|
+
<ProductCard
|
|
38
|
+
title="우리 첫거래우대 정기예금"
|
|
39
|
+
description="우리은행 첫거래 고객을 우대하는 비대면 전용 예금"
|
|
40
|
+
items={[
|
|
41
|
+
{ label: "예상금리", value: "연 X.XX%" },
|
|
42
|
+
{ label: "기간", value: "XX개월" },
|
|
43
|
+
{ label: "금액", value: "X,XXX만원" },
|
|
44
|
+
{ label: "예상이자", value: "최대 XXX만원", highlight: true },
|
|
45
|
+
]}
|
|
46
|
+
tone="recommend"
|
|
47
|
+
eligible={true}
|
|
48
|
+
onClick={() => console.log("상품 클릭됨")}
|
|
49
|
+
/>
|
|
50
|
+
|
|
31
51
|
## Disclaimer
|
|
32
52
|
|
|
33
53
|
This project is intended for **educational and demonstration purposes only**.
|
|
34
54
|
|
|
35
55
|
It is **not affiliated with, endorsed by, or sponsored by Woori Bank**.
|
|
36
56
|
All product names, brands, and trademarks are the property of their respective owners.
|
|
57
|
+
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,32 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "woori-product-component",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.7",
|
|
4
|
+
"description": "A lightweight React UI component library created as part of an npm module practice project at Woori FISA, designed to demonstrate reusable component design with minimal dependencies.",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"woori",
|
|
7
|
+
"woori-component",
|
|
8
|
+
"woori-product-card",
|
|
9
|
+
"woori-product-component",
|
|
10
|
+
"woori-fisa"
|
|
11
|
+
],
|
|
12
|
+
"repository": {
|
|
13
|
+
"type": "git",
|
|
14
|
+
"url": "https://github.com/woorifisa6-front/tech-seminar-component"
|
|
15
|
+
},
|
|
16
|
+
"contributors": [
|
|
17
|
+
{
|
|
18
|
+
"name": "Woojae"
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
"name": "Jaeha"
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
"name": "Hyeyoon"
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"name": "Jimin"
|
|
28
|
+
}
|
|
29
|
+
],
|
|
4
30
|
"private": false,
|
|
5
31
|
"license": "MIT",
|
|
6
32
|
"type": "module",
|