woori-product-component 0.1.5 → 0.1.7

package/README.md

@@ -1,22 +1,23 @@
 # woori-product-component
 
-금융 애플리케이션에서 사용할 수 있는 **상품 정보 카드(ProductCard) UI 컴포넌트 라이브러리**입니다.  
-React 기반으로 설계되었으며, **디자인 시스템 토큰(CSS Variables)** 을 활용해  
-다양한 프로젝트 환경에서 재사용할 수 있도록 구현되었습니다.
+A **ProductCard UI component library** for financial applications.
 
-> 본 패키지는 UI 컴포넌트만 제공하며,  
-> 라우팅·데이터 패칭·비즈니스 로직에는 의존하지 않습니다.
+This library is built with React and uses **design system tokens (CSS Variables)**  
+to enable easy reuse across different projects and environments.
+
+> This package provides UI components only.  
+> It does not include routing, data fetching, or business logic.
 
 ---
 
 ## ✨ Features
 
-- 💳 금융 상품 요약 카드 UI (예금/적금/대출 등)
-- 🎨 CSS 변수 기반 디자인 토큰 적용
-- ♻️ props 기반 재사용 가능한 컴포넌트 설계
-- 🧭 페이지 이동은 `href` / `onClick`으로 외부 위임
-- ♿ 접근성 고려 (role, tabIndex, keyboard interaction)
-- 🧩 React 의존 최소화 (`peerDependencies`)
+- 💳 Financial product summary card UI (deposit, savings, loan, etc.)
+- 🎨 CSS Variables–based design tokens
+- ♻️ Reusable component design using props
+- 🧭 Navigation delegated via `href` or `onClick`
+- ♿ Accessibility considerations (role, tabIndex, keyboard interaction)
+- 🧩 Minimal React dependencies (`peerDependencies` only)
 
 ---
 
@@ -28,9 +29,29 @@ npm install woori-product-component
 yarn add woori-product-component
 ```
 
+## Usage
+
+```jsx
+import { ProductCard } from "woori-product-component";
+
+<ProductCard
+  title="우리 첫거래우대 정기예금"
+  description="우리은행 첫거래 고객을 우대하는 비대면 전용 예금"
+  items={[
+    { label: "예상금리", value: "연 X.XX%" },
+    { label: "기간", value: "XX개월" },
+    { label: "금액", value: "X,XXX만원" },
+    { label: "예상이자", value: "최대 XXX만원", highlight: true },
+  ]}
+  tone="recommend"
+  eligible={true}
+  onClick={() => console.log("상품 클릭됨")}
+/>
+
 ## Disclaimer
 
 This project is intended for **educational and demonstration purposes only**.
 
 It is **not affiliated with, endorsed by, or sponsored by Woori Bank**.
 All product names, brands, and trademarks are the property of their respective owners.
+```

package/dist/woori-product-component.js

@@ -133,7 +133,7 @@ function te() {
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
       )), e = this.props.ref, e !== void 0 ? e : null;
     }
-    function b(e, r, t, a, h, g) {
+    function b(e, r, t, a, h, y) {
       var n = t.ref;
       return e = {
         $$typeof: S,
@@ -163,10 +163,10 @@ function te() {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: g
+        value: y
       }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
     }
-    function A(e, r, t, a, h, g) {
+    function A(e, r, t, a, h, y) {
       var n = r.children;
       if (n !== void 0)
         if (a)
@@ -211,7 +211,7 @@ React keys must be passed directly to JSX without using spread:
         t,
         s(),
         h,
-        g
+        y
       );
     }
     function N(e) {
@@ -220,7 +220,7 @@ React keys must be passed directly to JSX without using spread:
     function w(e) {
       return typeof e == "object" && e !== null && e.$$typeof === S;
     }
-    var R = ee, S = /* @__PURE__ */ Symbol.for("react.transitional.element"), W = /* @__PURE__ */ Symbol.for("react.portal"), x = /* @__PURE__ */ Symbol.for("react.fragment"), U = /* @__PURE__ */ Symbol.for("react.strict_mode"), q = /* @__PURE__ */ Symbol.for("react.profiler"), J = /* @__PURE__ */ Symbol.for("react.consumer"), V = /* @__PURE__ */ Symbol.for("react.context"), z = /* @__PURE__ */ Symbol.for("react.forward_ref"), G = /* @__PURE__ */ Symbol.for("react.suspense"), X = /* @__PURE__ */ Symbol.for("react.suspense_list"), B = /* @__PURE__ */ Symbol.for("react.memo"), k = /* @__PURE__ */ Symbol.for("react.lazy"), H = /* @__PURE__ */ Symbol.for("react.activity"), Z = /* @__PURE__ */ Symbol.for("react.client.reference"), j = R.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, P = Object.prototype.hasOwnProperty, Q = Array.isArray, y = console.createTask ? console.createTask : function() {
+    var R = ee, S = /* @__PURE__ */ Symbol.for("react.transitional.element"), W = /* @__PURE__ */ Symbol.for("react.portal"), x = /* @__PURE__ */ Symbol.for("react.fragment"), U = /* @__PURE__ */ Symbol.for("react.strict_mode"), q = /* @__PURE__ */ Symbol.for("react.profiler"), J = /* @__PURE__ */ Symbol.for("react.consumer"), V = /* @__PURE__ */ Symbol.for("react.context"), z = /* @__PURE__ */ Symbol.for("react.forward_ref"), G = /* @__PURE__ */ Symbol.for("react.suspense"), X = /* @__PURE__ */ Symbol.for("react.suspense_list"), B = /* @__PURE__ */ Symbol.for("react.memo"), k = /* @__PURE__ */ Symbol.for("react.lazy"), H = /* @__PURE__ */ Symbol.for("react.activity"), Z = /* @__PURE__ */ Symbol.for("react.client.reference"), j = R.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, P = Object.prototype.hasOwnProperty, Q = Array.isArray, g = console.createTask ? console.createTask : function() {
       return null;
     };
     R = {
@@ -231,7 +231,7 @@ React keys must be passed directly to JSX without using spread:
     var C, Y = {}, $ = R.react_stack_bottom_frame.bind(
       R,
       l
-    )(), I = y(_(l)), L = {};
+    )(), I = g(_(l)), L = {};
     v.Fragment = x, v.jsx = function(e, r, t) {
       var a = 1e4 > j.recentlyCreatedOwnerStacks++;
       return A(
@@ -240,7 +240,7 @@ React keys must be passed directly to JSX without using spread:
         t,
         !1,
         a ? Error("react-stack-top-frame") : $,
-        a ? y(_(e)) : I
+        a ? g(_(e)) : I
       );
     }, v.jsxs = function(e, r, t) {
       var a = 1e4 > j.recentlyCreatedOwnerStacks++;
@@ -250,7 +250,7 @@ React keys must be passed directly to JSX without using spread:
         t,
         !0,
         a ? Error("react-stack-top-frame") : $,
-        a ? y(_(e)) : I
+        a ? g(_(e)) : I
       );
     };
   })()), v;
@@ -266,7 +266,7 @@ function se({
   description: f,
   items: d = [],
   tone: _ = "default",
-  eligible: s,
+  eligible: s = !0,
   onClick: l
 }) {
   const i = typeof l == "function", m = new Map(d.map((u) => [u.label, u]));
@@ -277,7 +277,7 @@ function se({
       role: i ? "button" : void 0,
       tabIndex: i ? 0 : void 0,
       onClick: i ? l : void 0,
-      "aria-disabled": !s,
+      "aria-disabled": !1,
       children: [
         /* @__PURE__ */ o.jsxs("header", { className: "pc__header", children: [
           /* @__PURE__ */ o.jsx("h3", { className: "pc__title", children: c }),

package/dist/woori-product-component.umd.cjs

@@ -4,4 +4,4 @@
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,n,a,v,a),U[a+n]=!0)}if(a=null,t!==void 0&&(_(t),a=""+t),i(r)&&(_(r.key),a=""+r.key),"key"in r){t={};for(var S in r)S!=="key"&&(t[S]=r[S])}else t=r;return a&&p(t,typeof e=="function"?e.displayName||e.name||"Unknown":e),T(e,a,t,s(),j,P)}function Y(e){$(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===y&&(e._payload.status==="fulfilled"?$(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function $(e){return typeof e=="object"&&e!==null&&e.$$typeof===I}var x=E,I=Symbol.for("react.transitional.element"),X=Symbol.for("react.portal"),k=Symbol.for("react.fragment"),B=Symbol.for("react.strict_mode"),H=Symbol.for("react.profiler"),Z=Symbol.for("react.consumer"),Q=Symbol.for("react.context"),K=Symbol.for("react.forward_ref"),ee=Symbol.for("react.suspense"),re=Symbol.for("react.suspense_list"),te=Symbol.for("react.memo"),y=Symbol.for("react.lazy"),ne=Symbol.for("react.activity"),ae=Symbol.for("react.client.reference"),g=x.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,L=Object.prototype.hasOwnProperty,oe=Array.isArray,O=console.createTask?console.createTask:function(){return null};x={react_stack_bottom_frame:function(e){return e()}};var F,M={},W=x.react_stack_bottom_frame.bind(x,l)(),D=O(m(l)),U={};R.Fragment=k,R.jsx=function(e,r,t){var n=1e4>g.recentlyCreatedOwnerStacks++;return C(e,r,t,!1,n?Error("react-stack-top-frame"):W,n?O(m(e)):D)},R.jsxs=function(e,r,t){var n=1e4>g.recentlyCreatedOwnerStacks++;return C(e,r,t,!0,n?Error("react-stack-top-frame"):W,n?O(m(e)):D)}})()),R}var w;function V(){return w||(w=1,process.env.NODE_ENV==="production"?h.exports=q():h.exports=J()),h.exports}var o=V();const z=["예상금리","기간","금액","예상이자"];function G({title:c,description:d,items:_=[],tone:m="default",eligible:s,onClick:l}){const i=typeof l=="function",p=new Map(_.map(u=>[u.label,u]));return o.jsxs("div",{className:`pc pc--${m}`,role:i?"button":void 0,tabIndex:i?0:void 0,onClick:i?l:void 0,"aria-disabled":!s,children:[o.jsxs("header",{className:"pc__header",children:[o.jsx("h3",{className:"pc__title",children:c}),d?o.jsx("p",{className:"pc__desc",children:d}):null]}),o.jsx("div",{className:"pc__box",children:o.jsx("ul",{className:"pc__list",children:z.map(u=>{const T=p.get(u);return o.jsxs("li",{className:"pc__row",children:[o.jsx("span",{className:"pc__label",children:u}),o.jsx("span",{className:`pc__value${T?.highlight?" pc__value--highlight":""}`,children:T?.value??"-"})]},u)})})}),!s&&o.jsxs("div",{className:"pc__eligibility",children:[o.jsx("span",{className:"pc__eligibility-icon","aria-hidden":"true",children:o.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",children:[o.jsx("circle",{cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"2"}),o.jsx("path",{d:"M12 7v6",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"}),o.jsx("circle",{cx:"12",cy:"17",r:"1.2",fill:"currentColor"})]})}),o.jsx("span",{className:"pc__eligibility-text",children:"가입 대상이 아니에요"})]})]})}f.ProductCard=G,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})}));
+  <%s key={someKey} {...props} />`,n,a,v,a),U[a+n]=!0)}if(a=null,t!==void 0&&(_(t),a=""+t),i(r)&&(_(r.key),a=""+r.key),"key"in r){t={};for(var S in r)S!=="key"&&(t[S]=r[S])}else t=r;return a&&p(t,typeof e=="function"?e.displayName||e.name||"Unknown":e),T(e,a,t,s(),j,P)}function Y(e){$(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===y&&(e._payload.status==="fulfilled"?$(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function $(e){return typeof e=="object"&&e!==null&&e.$$typeof===I}var x=E,I=Symbol.for("react.transitional.element"),X=Symbol.for("react.portal"),k=Symbol.for("react.fragment"),B=Symbol.for("react.strict_mode"),H=Symbol.for("react.profiler"),Z=Symbol.for("react.consumer"),Q=Symbol.for("react.context"),K=Symbol.for("react.forward_ref"),ee=Symbol.for("react.suspense"),re=Symbol.for("react.suspense_list"),te=Symbol.for("react.memo"),y=Symbol.for("react.lazy"),ne=Symbol.for("react.activity"),ae=Symbol.for("react.client.reference"),g=x.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,L=Object.prototype.hasOwnProperty,oe=Array.isArray,O=console.createTask?console.createTask:function(){return null};x={react_stack_bottom_frame:function(e){return e()}};var F,M={},W=x.react_stack_bottom_frame.bind(x,l)(),D=O(m(l)),U={};R.Fragment=k,R.jsx=function(e,r,t){var n=1e4>g.recentlyCreatedOwnerStacks++;return C(e,r,t,!1,n?Error("react-stack-top-frame"):W,n?O(m(e)):D)},R.jsxs=function(e,r,t){var n=1e4>g.recentlyCreatedOwnerStacks++;return C(e,r,t,!0,n?Error("react-stack-top-frame"):W,n?O(m(e)):D)}})()),R}var w;function V(){return w||(w=1,process.env.NODE_ENV==="production"?h.exports=q():h.exports=J()),h.exports}var o=V();const z=["예상금리","기간","금액","예상이자"];function G({title:c,description:d,items:_=[],tone:m="default",eligible:s=!0,onClick:l}){const i=typeof l=="function",p=new Map(_.map(u=>[u.label,u]));return o.jsxs("div",{className:`pc pc--${m}`,role:i?"button":void 0,tabIndex:i?0:void 0,onClick:i?l:void 0,"aria-disabled":!1,children:[o.jsxs("header",{className:"pc__header",children:[o.jsx("h3",{className:"pc__title",children:c}),d?o.jsx("p",{className:"pc__desc",children:d}):null]}),o.jsx("div",{className:"pc__box",children:o.jsx("ul",{className:"pc__list",children:z.map(u=>{const T=p.get(u);return o.jsxs("li",{className:"pc__row",children:[o.jsx("span",{className:"pc__label",children:u}),o.jsx("span",{className:`pc__value${T?.highlight?" pc__value--highlight":""}`,children:T?.value??"-"})]},u)})})}),!s&&o.jsxs("div",{className:"pc__eligibility",children:[o.jsx("span",{className:"pc__eligibility-icon","aria-hidden":"true",children:o.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",children:[o.jsx("circle",{cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"2"}),o.jsx("path",{d:"M12 7v6",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"}),o.jsx("circle",{cx:"12",cy:"17",r:"1.2",fill:"currentColor"})]})}),o.jsx("span",{className:"pc__eligibility-text",children:"가입 대상이 아니에요"})]})]})}f.ProductCard=G,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,32 @@
 {
   "name": "woori-product-component",
-  "version": "0.1.5",
+  "version": "0.1.7",
+  "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.",
+  "keywords": [
+    "woori",
+    "woori-component",
+    "woori-product-card",
+    "woori-product-component",
+    "woori-fisa"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/woorifisa6-front/tech-seminar-component"
+  },
+  "contributors": [
+    {
+      "name": "Woojae"
+    },
+    {
+      "name": "Jaeha"
+    },
+    {
+      "name": "Hyeyoon"
+    },
+    {
+      "name": "Jimin"
+    }
+  ],
   "private": false,
   "license": "MIT",
   "type": "module",