woori-product-component 0.1.0

package/README.md

@@ -0,0 +1,29 @@
+# woori-product-component
+
+금융 애플리케이션에서 사용할 수 있는 **상품 정보 카드(ProductCard) UI 컴포넌트 라이브러리**입니다.  
+React 기반으로 설계되었으며, **디자인 시스템 토큰(CSS Variables)** 을 활용해  
+다양한 프로젝트 환경에서 재사용할 수 있도록 구현되었습니다.
+
+> 본 패키지는 UI 컴포넌트만 제공하며,  
+> 라우팅·데이터 패칭·비즈니스 로직에는 의존하지 않습니다.
+
+---
+
+## ✨ Features
+
+- 💳 금융 상품 요약 카드 UI (예금/적금/대출 등)
+- 🎨 CSS 변수 기반 디자인 토큰 적용
+- ♻️ props 기반 재사용 가능한 컴포넌트 설계
+- 🧭 페이지 이동은 `href` / `onClick`으로 외부 위임
+- ♿ 접근성 고려 (role, tabIndex, keyboard interaction)
+- 🧩 React 의존 최소화 (`peerDependencies`)
+
+---
+
+## 📦 Installation
+
+```bash
+npm install woori-product-component
+# or
+yarn add woori-product-component
+```

package/dist/woori-product-component.css

@@ -0,0 +1 @@
+:root{--pc-width: 100%;--pc-max-width: 360px;--pc-min-height: 200px;--color-surface: #ffffff;--color-surface-muted: #f8f9f9;--color-border: #dee2e6;--color-text: #3d4248;--color-text-muted: #80888e;--color-accent: #0b71fe;--color-accent-soft-border: #dee2e6;--radius-card: 20px;--radius-inner: 16px;--space-card-padding: 24px;--space-header-gap: 5px;--space-box-padding: 16px;--space-row-padding-y: 9px;--font-title-size: 17px;--font-title-weight: 600;--font-desc-size: 14px;--font-desc-weight: 400;--font-label-size: 15px;--font-label-weight: 500;--font-value-size: 15px;--font-value-weight: 500;--letter-tight: -.2px;--line-height-desc: 1.4}.pc{display:block;box-sizing:border-box;width:var(--pc-width);max-width:var(--pc-max-width);min-height:var(--pc-min-height);padding:var(--space-card-padding);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card)}.pc--recommend{border-color:var(--color-accent-soft-border)}.pc[role=button]{cursor:pointer}.pc__header{margin-bottom:var(--space-box-padding)}.pc__title{margin:0;font-size:var(--font-title-size);font-weight:var(--font-title-weight);color:var(--color-text);letter-spacing:var(--letter-tight)}.pc__desc,.pc__label{font-size:var(--font-desc-size);color:var(--color-text-muted)}.pc__desc{margin-top:var(--space-header-gap);line-height:var(--line-height-desc)}.pc__box{padding:var(--space-box-padding);background:var(--color-surface-muted);border-radius:var(--radius-inner)}.pc__list{margin:0;padding:0;list-style:none}.pc__row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-row-padding-y);padding:var(--space-row-padding-y) 0}.pc__value{font-size:var(--font-value-size);font-weight:var(--font-value-weight);color:var(--color-text);letter-spacing:var(--letter-tight);text-align:right}.pc__value--highlight{color:var(--color-accent)}

package/dist/woori-product-component.js

@@ -0,0 +1,302 @@
+import ee from "react";
+var T = { exports: {} }, p = {};
+var F;
+function re() {
+  if (F) return p;
+  F = 1;
+  var c = /* @__PURE__ */ Symbol.for("react.transitional.element"), i = /* @__PURE__ */ Symbol.for("react.fragment");
+  function f(d, o, s) {
+    var _ = null;
+    if (s !== void 0 && (_ = "" + s), o.key !== void 0 && (_ = "" + o.key), "key" in o) {
+      s = {};
+      for (var l in o)
+        l !== "key" && (s[l] = o[l]);
+    } else s = o;
+    return o = s.ref, {
+      $$typeof: c,
+      type: d,
+      key: _,
+      ref: o !== void 0 ? o : null,
+      props: s
+    };
+  }
+  return p.Fragment = i, p.jsx = f, p.jsxs = f, p;
+}
+var E = {};
+var L;
+function te() {
+  return L || (L = 1, process.env.NODE_ENV !== "production" && (function() {
+    function c(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === Z ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case h:
+          return "Fragment";
+        case q:
+          return "Profiler";
+        case U:
+          return "StrictMode";
+        case G:
+          return "Suspense";
+        case X:
+          return "SuspenseList";
+        case H:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case W:
+            return "Portal";
+          case V:
+            return e.displayName || "Context";
+          case J:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case z:
+            var r = e.render;
+            return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case B:
+            return r = e.displayName || null, r !== null ? r : c(e.type) || "Memo";
+          case k:
+            r = e._payload, e = e._init;
+            try {
+              return c(e(r));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function i(e) {
+      return "" + e;
+    }
+    function f(e) {
+      try {
+        i(e);
+        var r = !1;
+      } catch {
+        r = !0;
+      }
+      if (r) {
+        r = console;
+        var t = r.error, a = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return t.call(
+          r,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          a
+        ), i(e);
+      }
+    }
+    function d(e) {
+      if (e === h) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === k)
+        return "<...>";
+      try {
+        var r = c(e);
+        return r ? "<" + r + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function o() {
+      var e = x.A;
+      return e === null ? null : e.getOwner();
+    }
+    function s() {
+      return Error("react-stack-top-frame");
+    }
+    function _(e) {
+      if (y.call(e, "key")) {
+        var r = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (r && r.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function l(e, r) {
+      function t() {
+        N || (N = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          r
+        ));
+      }
+      t.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: t,
+        configurable: !0
+      });
+    }
+    function v() {
+      var e = c(this.type);
+      return C[e] || (C[e] = !0, console.error(
+        "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 M(e, r, t, a, R, O) {
+      var n = t.ref;
+      return e = {
+        $$typeof: w,
+        type: e,
+        key: r,
+        props: t,
+        _owner: a
+      }, (n !== void 0 ? n : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: v
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: R
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: O
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function S(e, r, t, a, R, O) {
+      var n = r.children;
+      if (n !== void 0)
+        if (a)
+          if (Q(n)) {
+            for (a = 0; a < n.length; a++)
+              P(n[a]);
+            Object.freeze && Object.freeze(n);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else P(n);
+      if (y.call(r, "key")) {
+        n = c(e);
+        var m = Object.keys(r).filter(function(K) {
+          return K !== "key";
+        });
+        a = 0 < m.length ? "{key: someKey, " + m.join(": ..., ") + ": ...}" : "{key: someKey}", I[n + a] || (m = 0 < m.length ? "{" + m.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          a,
+          n,
+          m,
+          n
+        ), I[n + a] = !0);
+      }
+      if (n = null, t !== void 0 && (f(t), n = "" + t), _(r) && (f(r.key), n = "" + r.key), "key" in r) {
+        t = {};
+        for (var A in r)
+          A !== "key" && (t[A] = r[A]);
+      } else t = r;
+      return n && l(
+        t,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), M(
+        e,
+        n,
+        t,
+        o(),
+        R,
+        O
+      );
+    }
+    function P(e) {
+      g(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === k && (e._payload.status === "fulfilled" ? g(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    }
+    function g(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === w;
+    }
+    var b = ee, w = /* @__PURE__ */ Symbol.for("react.transitional.element"), W = /* @__PURE__ */ Symbol.for("react.portal"), h = /* @__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"), x = b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, y = Object.prototype.hasOwnProperty, Q = Array.isArray, j = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    b = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var N, C = {}, Y = b.react_stack_bottom_frame.bind(
+      b,
+      s
+    )(), $ = j(d(s)), I = {};
+    E.Fragment = h, E.jsx = function(e, r, t) {
+      var a = 1e4 > x.recentlyCreatedOwnerStacks++;
+      return S(
+        e,
+        r,
+        t,
+        !1,
+        a ? Error("react-stack-top-frame") : Y,
+        a ? j(d(e)) : $
+      );
+    }, E.jsxs = function(e, r, t) {
+      var a = 1e4 > x.recentlyCreatedOwnerStacks++;
+      return S(
+        e,
+        r,
+        t,
+        !0,
+        a ? Error("react-stack-top-frame") : Y,
+        a ? j(d(e)) : $
+      );
+    };
+  })()), E;
+}
+var D;
+function ae() {
+  return D || (D = 1, process.env.NODE_ENV === "production" ? T.exports = re() : T.exports = te()), T.exports;
+}
+var u = ae();
+const ne = ["예상금리", "기간", "금액", "예상이자"];
+function se({
+  title: c,
+  description: i,
+  items: f = [],
+  tone: d = "default",
+  onClick: o
+}) {
+  const s = typeof o == "function", _ = new Map(f.map((l) => [l.label, l]));
+  return /* @__PURE__ */ u.jsxs(
+    "div",
+    {
+      className: `pc pc--${d}`,
+      role: s ? "button" : void 0,
+      tabIndex: s ? 0 : void 0,
+      onClick: o,
+      children: [
+        /* @__PURE__ */ u.jsxs("header", { className: "pc__header", children: [
+          /* @__PURE__ */ u.jsx("h3", { className: "pc__title", children: c }),
+          i ? /* @__PURE__ */ u.jsx("p", { className: "pc__desc", children: i }) : null
+        ] }),
+        /* @__PURE__ */ u.jsx("div", { className: "pc__box", children: /* @__PURE__ */ u.jsx("ul", { className: "pc__list", children: ne.map((l) => {
+          const v = _.get(l);
+          return /* @__PURE__ */ u.jsxs("li", { className: "pc__row", children: [
+            /* @__PURE__ */ u.jsx("span", { className: "pc__label", children: l }),
+            /* @__PURE__ */ u.jsx(
+              "span",
+              {
+                className: `pc__value${v?.highlight ? " pc__value--highlight" : ""}`,
+                children: v?.value ?? "-"
+              }
+            )
+          ] }, l);
+        }) }) })
+      ]
+    }
+  );
+}
+export {
+  se as ProductCard
+};

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

@@ -0,0 +1,6 @@
+(function(i,E){typeof exports=="object"&&typeof module<"u"?E(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],E):(i=typeof globalThis<"u"?globalThis:i||self,E(i.WooriProductComponent={},i.React))})(this,(function(i,E){"use strict";var R={exports:{}},b={};var A;function U(){if(A)return b;A=1;var u=Symbol.for("react.transitional.element"),f=Symbol.for("react.fragment");function d(_,o,s){var m=null;if(s!==void 0&&(m=""+s),o.key!==void 0&&(m=""+o.key),"key"in o){s={};for(var l in o)l!=="key"&&(s[l]=o[l])}else s=o;return o=s.ref,{$$typeof:u,type:_,key:m,ref:o!==void 0?o:null,props:s}}return b.Fragment=f,b.jsx=d,b.jsxs=d,b}var v={};var g;function q(){return g||(g=1,process.env.NODE_ENV!=="production"&&(function(){function u(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===ae?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case k:return"Fragment";case H:return"Profiler";case B:return"StrictMode";case ee:return"Suspense";case re:return"SuspenseList";case ne:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case X:return"Portal";case Q:return e.displayName||"Context";case Z:return(e._context.displayName||"Context")+".Consumer";case K:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case te:return r=e.displayName||null,r!==null?r:u(e.type)||"Memo";case j:r=e._payload,e=e._init;try{return u(e(r))}catch{}}return null}function f(e){return""+e}function d(e){try{f(e);var r=!1}catch{r=!0}if(r){r=console;var t=r.error,n=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",n),f(e)}}function _(e){if(e===k)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===j)return"<...>";try{var r=u(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function o(){var e=O.A;return e===null?null:e.getOwner()}function s(){return Error("react-stack-top-frame")}function m(e){if(I.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function l(e,r){function t(){F||(F=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}function T(){var e=u(this.type);return L[e]||(L[e]=!0,console.error("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 G(e,r,t,n,x,P){var a=t.ref;return e={$$typeof:$,type:e,key:r,props:t,_owner:n},(a!==void 0?a:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:T}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:x}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:P}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function N(e,r,t,n,x,P){var a=r.children;if(a!==void 0)if(n)if(oe(a)){for(n=0;n<a.length;n++)C(a[n]);Object.freeze&&Object.freeze(a)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else C(a);if(I.call(r,"key")){a=u(e);var p=Object.keys(r).filter(function(se){return se!=="key"});n=0<p.length?"{key: someKey, "+p.join(": ..., ")+": ...}":"{key: someKey}",W[a+n]||(p=0<p.length?"{"+p.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,n,a,p,a),W[a+n]=!0)}if(a=null,t!==void 0&&(d(t),a=""+t),m(r)&&(d(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&&l(t,typeof e=="function"?e.displayName||e.name||"Unknown":e),G(e,a,t,o(),x,P)}function C(e){Y(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===j&&(e._payload.status==="fulfilled"?Y(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function Y(e){return typeof e=="object"&&e!==null&&e.$$typeof===$}var h=E,$=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"),j=Symbol.for("react.lazy"),ne=Symbol.for("react.activity"),ae=Symbol.for("react.client.reference"),O=h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,I=Object.prototype.hasOwnProperty,oe=Array.isArray,y=console.createTask?console.createTask:function(){return null};h={react_stack_bottom_frame:function(e){return e()}};var F,L={},D=h.react_stack_bottom_frame.bind(h,s)(),M=y(_(s)),W={};v.Fragment=k,v.jsx=function(e,r,t){var n=1e4>O.recentlyCreatedOwnerStacks++;return N(e,r,t,!1,n?Error("react-stack-top-frame"):D,n?y(_(e)):M)},v.jsxs=function(e,r,t){var n=1e4>O.recentlyCreatedOwnerStacks++;return N(e,r,t,!0,n?Error("react-stack-top-frame"):D,n?y(_(e)):M)}})()),v}var w;function J(){return w||(w=1,process.env.NODE_ENV==="production"?R.exports=U():R.exports=q()),R.exports}var c=J();const V=["예상금리","기간","금액","예상이자"];function z({title:u,description:f,items:d=[],tone:_="default",onClick:o}){const s=typeof o=="function",m=new Map(d.map(l=>[l.label,l]));return c.jsxs("div",{className:`pc pc--${_}`,role:s?"button":void 0,tabIndex:s?0:void 0,onClick:o,children:[c.jsxs("header",{className:"pc__header",children:[c.jsx("h3",{className:"pc__title",children:u}),f?c.jsx("p",{className:"pc__desc",children:f}):null]}),c.jsx("div",{className:"pc__box",children:c.jsx("ul",{className:"pc__list",children:V.map(l=>{const T=m.get(l);return c.jsxs("li",{className:"pc__row",children:[c.jsx("span",{className:"pc__label",children:l}),c.jsx("span",{className:`pc__value${T?.highlight?" pc__value--highlight":""}`,children:T?.value??"-"})]},l)})})})]})}i.ProductCard=z,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "woori-product-component",
+  "version": "0.1.0",
+  "private": false,
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/woori-product-component.umd.cjs",
+  "module": "dist/woori-product-component.js",
+  "exports": {
+    ".": {
+      "import": "./dist/woori-product-component.js",
+      "require": "./dist/woori-product-component.umd.cjs"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "vite": "^7.2.4"
+  }
+}