woori-fisa-account-form 1.0.7

package/README.md

@@ -0,0 +1,36 @@
+# 우리 FISA 금융 React 컴포넌트 프로젝트
+
+## 개요
+이 프로젝트는 금융 관련 UI/UX 컴포넌트를 제공하는 리액트 컴포넌트 라이브러리입니다.  
+현재 두 가지 주요 컴포넌트를 포함하고 있으며, 사용자 경험을 높이는 직관적인 UI를 목표로 합니다.  
+
+---
+
+## 주요 컴포넌트
+
+### 1. 카드 혜택 분석 컴포넌트
+<img width="517" height="583" alt="image" src="https://github.com/user-attachments/assets/96f661ae-7a49-4bca-b757-9b34bc939b5e" />
+
+- **기능:** 사용자가 적립받은 금액과 사용한 혜택 금액을 시각적으로 확인할 수 있습니다.  
+- **목적:** 카드 혜택 데이터를 직관적으로 보여주어 사용자 체류 시간을 늘리는 UI 제공  
+- **특징:**  
+  - 카드 사용 내역 기반 적립 및 사용 금액 시각화
+  - 시각화된 데이터로 빠른 이해 가능  
+  - 반응형 UI 지원  
+
+### 2. 계좌 입력 컴포넌트
+<img width="545" height="396" alt="image" src="https://github.com/user-attachments/assets/6ca5c56b-6431-4914-a615-1ac6b18349e8" />
+
+- **기능:** 사용자가 계좌를 입력하면 실시간으로 은행을 분석하여 보여줍니다. 사용자의 클립보드의 정보를 가져와 복사한 계좌 정보를 자동으로 붙여넣기 가능하도록 하였습니다.
+- **지원 은행:** 현재는 카카오뱅크, 토스뱅크, 우리은행만 지원  
+- **목적:** 계좌 입력 과정의 편의성 향상  
+- **특징:**  
+  - 은행 자동 분석 및 선택 UI 제공  
+  - 직관적인 입력 방식
+  - 복사한 계좌 정보 즉시 입력 제공
+
+---
+
+## 설치
+> 현재 NPM 배포는 아직 진행 중입니다.  
+> 추후 NPM 패키지로 설치 가능하도록 업데이트 예정입니다.

package/dist/index.es.js

@@ -0,0 +1,606 @@
+(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode(":root{--color-primary-pink: #FF9E9E;--color-primary-mint: #4CD9C0;--color-bg-gray: #F5F6F8;--color-text-main: #333333;--color-text-sub: #888888;--color-white: #FFFFFF;--app-max-width: 420px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Noto Sans KR,sans-serif;background-color:#e0e0e0;display:flex;justify-content:center;min-height:100vh}#root{width:100%;max-width:var(--app-max-width);background-color:var(--color-white);min-height:100vh;box-shadow:0 0 20px #0000001a;position:relative;overflow-x:hidden}.flex-center{display:flex;justify-content:center;align-items:center}button{cursor:pointer;border:none;background:none;font-family:inherit}")),document.head.appendChild(o)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+import te, { useState as v, useRef as ne, useEffect as N } from "react";
+var E = { exports: {} }, x = {};
+var D;
+function se() {
+  if (D) return x;
+  D = 1;
+  var r = /* @__PURE__ */ Symbol.for("react.transitional.element"), s = /* @__PURE__ */ Symbol.for("react.fragment");
+  function a(t, n, l) {
+    var m = null;
+    if (l !== void 0 && (m = "" + l), n.key !== void 0 && (m = "" + n.key), "key" in n) {
+      l = {};
+      for (var u in n)
+        u !== "key" && (l[u] = n[u]);
+    } else l = n;
+    return n = l.ref, {
+      $$typeof: r,
+      type: t,
+      key: m,
+      ref: n !== void 0 ? n : null,
+      props: l
+    };
+  }
+  return x.Fragment = s, x.jsx = a, x.jsxs = a, x;
+}
+var h = {};
+var W;
+function oe() {
+  return W || (W = 1, process.env.NODE_ENV !== "production" && (function() {
+    function r(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === K ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case R:
+          return "Fragment";
+        case V:
+          return "Profiler";
+        case z:
+          return "StrictMode";
+        case H:
+          return "Suspense";
+        case X:
+          return "SuspenseList";
+        case Q:
+          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 U:
+            return "Portal";
+          case J:
+            return e.displayName || "Context";
+          case q:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case G:
+            var o = e.render;
+            return e = e.displayName, e || (e = o.displayName || o.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case Z:
+            return o = e.displayName || null, o !== null ? o : r(e.type) || "Memo";
+          case k:
+            o = e._payload, e = e._init;
+            try {
+              return r(e(o));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function s(e) {
+      return "" + e;
+    }
+    function a(e) {
+      try {
+        s(e);
+        var o = !1;
+      } catch {
+        o = !0;
+      }
+      if (o) {
+        o = console;
+        var i = o.error, d = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return i.call(
+          o,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          d
+        ), s(e);
+      }
+    }
+    function t(e) {
+      if (e === R) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === k)
+        return "<...>";
+      try {
+        var o = r(e);
+        return o ? "<" + o + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function n() {
+      var e = _.A;
+      return e === null ? null : e.getOwner();
+    }
+    function l() {
+      return Error("react-stack-top-frame");
+    }
+    function m(e) {
+      if (C.call(e, "key")) {
+        var o = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (o && o.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function u(e, o) {
+      function i() {
+        $ || ($ = !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)",
+          o
+        ));
+      }
+      i.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: i,
+        configurable: !0
+      });
+    }
+    function p() {
+      var e = r(this.type);
+      return F[e] || (F[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, o, i, d, y, w) {
+      var f = i.ref;
+      return e = {
+        $$typeof: P,
+        type: e,
+        key: o,
+        props: i,
+        _owner: d
+      }, (f !== void 0 ? f : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: p
+      }) : 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: y
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: w
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function A(e, o, i, d, y, w) {
+      var f = o.children;
+      if (f !== void 0)
+        if (d)
+          if (ee(f)) {
+            for (d = 0; d < f.length; d++)
+              O(f[d]);
+            Object.freeze && Object.freeze(f);
+          } 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 O(f);
+      if (C.call(o, "key")) {
+        f = r(e);
+        var b = Object.keys(o).filter(function(re) {
+          return re !== "key";
+        });
+        d = 0 < b.length ? "{key: someKey, " + b.join(": ..., ") + ": ...}" : "{key: someKey}", L[f + d] || (b = 0 < b.length ? "{" + b.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} />`,
+          d,
+          f,
+          b,
+          f
+        ), L[f + d] = !0);
+      }
+      if (f = null, i !== void 0 && (a(i), f = "" + i), m(o) && (a(o.key), f = "" + o.key), "key" in o) {
+        i = {};
+        for (var T in o)
+          T !== "key" && (i[T] = o[T]);
+      } else i = o;
+      return f && u(
+        i,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), M(
+        e,
+        f,
+        i,
+        n(),
+        y,
+        w
+      );
+    }
+    function O(e) {
+      S(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === k && (e._payload.status === "fulfilled" ? S(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    }
+    function S(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === P;
+    }
+    var g = te, P = /* @__PURE__ */ Symbol.for("react.transitional.element"), U = /* @__PURE__ */ Symbol.for("react.portal"), R = /* @__PURE__ */ Symbol.for("react.fragment"), z = /* @__PURE__ */ Symbol.for("react.strict_mode"), V = /* @__PURE__ */ Symbol.for("react.profiler"), q = /* @__PURE__ */ Symbol.for("react.consumer"), J = /* @__PURE__ */ Symbol.for("react.context"), G = /* @__PURE__ */ Symbol.for("react.forward_ref"), H = /* @__PURE__ */ Symbol.for("react.suspense"), X = /* @__PURE__ */ Symbol.for("react.suspense_list"), Z = /* @__PURE__ */ Symbol.for("react.memo"), k = /* @__PURE__ */ Symbol.for("react.lazy"), Q = /* @__PURE__ */ Symbol.for("react.activity"), K = /* @__PURE__ */ Symbol.for("react.client.reference"), _ = g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, C = Object.prototype.hasOwnProperty, ee = Array.isArray, j = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    g = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var $, F = {}, I = g.react_stack_bottom_frame.bind(
+      g,
+      l
+    )(), Y = j(t(l)), L = {};
+    h.Fragment = R, h.jsx = function(e, o, i) {
+      var d = 1e4 > _.recentlyCreatedOwnerStacks++;
+      return A(
+        e,
+        o,
+        i,
+        !1,
+        d ? Error("react-stack-top-frame") : I,
+        d ? j(t(e)) : Y
+      );
+    }, h.jsxs = function(e, o, i) {
+      var d = 1e4 > _.recentlyCreatedOwnerStacks++;
+      return A(
+        e,
+        o,
+        i,
+        !0,
+        d ? Error("react-stack-top-frame") : I,
+        d ? j(t(e)) : Y
+      );
+    };
+  })()), h;
+}
+var B;
+function ae() {
+  return B || (B = 1, process.env.NODE_ENV === "production" ? E.exports = se() : E.exports = oe()), E.exports;
+}
+var c = ae();
+const ce = /^[0-9-]*$/, le = ({ accountNumber: r, setAccountNumber: s, className: a }) => {
+  const t = (n) => {
+    const l = n.target.value;
+    if (l == "") {
+      s("");
+      return;
+    }
+    if (l.startsWith("-")) {
+      alert("계좌번호는 숫자로 시작해야 합니다.");
+      return;
+    }
+    ce.test(l) ? s(l) : alert("계좌번호는 숫자와 -로만 입력 가능합니다.");
+  };
+  return /* @__PURE__ */ c.jsx(c.Fragment, { children: /* @__PURE__ */ c.jsx("input", { type: "text", inputMode: "tel", placeholder: "계좌번호", value: r, onChange: t, className: `rounded-sm border border-black w-full max-w-xl p-3 my-3 block justify-self-center ${a}` }) });
+}, ie = ({ children: r, className: s }) => /* @__PURE__ */ c.jsx("div", { className: `bg-white flex justify-center ${s}`, children: /* @__PURE__ */ c.jsx(
+  "div",
+  {
+    className: `\r
+          w-full max-w-[430px]\r
+          px-4\r
+        `,
+    children: r
+  }
+) }), ue = ({ className: r, accountBank: s, setAccountBank: a, bankList: t }) => {
+  const [n, l] = v(!1), m = ne(null);
+  return N(() => {
+    const u = (p) => {
+      m.current && !m.current.contains(p.target) && l(!1);
+    };
+    return document.addEventListener("mousedown", u), document.addEventListener("touchstart", u), () => {
+      document.removeEventListener("mousedown", u), document.removeEventListener("touchstart", u);
+    };
+  }, []), /* @__PURE__ */ c.jsxs("div", { ref: m, className: `relative w-full max-w-xl my-3 block justify-self-center ${r}`, children: [
+    /* @__PURE__ */ c.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => l(!n),
+        className: `flex items-center justify-between w-full p-3 border border-black ${n ? "rounded-t-sm" : "rounded-sm"} bg-white text-left`,
+        children: [
+          /* @__PURE__ */ c.jsx("span", { className: s === "" ? "text-gray-400" : "text-black", children: s ? t.find((u) => u.id === s)?.label : "은행" }),
+          /* @__PURE__ */ c.jsx("span", { className: `transition-transform duration-300 inline-block ${n ? "rotate-180" : ""}`, children: "▼" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ c.jsx("ul", { className: `absolute z-10 w-full border-t-0 bg-white border border-black rounded-b-sm shadow-lg overflow-hidden transition-all duration-300 ease-in-out ${n ? "max-h-60 opacity-100 visible" : "max-h-0 opacity-0 invisible pointer-events-none"}`, children: t.map((u) => /* @__PURE__ */ c.jsx(
+      "li",
+      {
+        onClick: () => {
+          a(u.id), l(!1);
+        },
+        className: "p-3 hover:bg-gray-100 cursor-pointer text-black border-b last:border-b-0",
+        children: u.label
+      },
+      u.id
+    )) })
+  ] });
+}, de = ({ label: r, code: s, color: a, setAccountBank: t, bankId: n }) => {
+  const l = () => {
+    t(n);
+  };
+  return /* @__PURE__ */ c.jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: l,
+      className: `\r
+        rounded-xl px-3 py-2\r
+        flex items-center gap-2 text-left\r
+        bg-gray-100\r
+        transition-all duration-150 ease-out\r
+        hover:bg-gray-200 hover:-translate-y-[1px] hover:shadow-sm\r
+        focus-visible:ring-2 focus-visible:rnoneing-gray-400\r
+        active:scale-[0.98]\r
+      `,
+      children: [
+        /* @__PURE__ */ c.jsx(
+          "span",
+          {
+            className: "flex h-8 w-8 items-center justify-center rounded-lg text-white font-bold text-sm",
+            style: { backgroundColor: a },
+            children: s
+          }
+        ),
+        /* @__PURE__ */ c.jsx("span", { className: "text-sm font-medium", children: r })
+      ]
+    }
+  );
+}, fe = ({ banks: r, setAccountBank: s, className: a }) => {
+  const t = r.map(
+    (n) => /* @__PURE__ */ c.jsx(de, { label: n.label, code: n.code, color: n.color, setAccountBank: s, bankId: n.id }, n.id)
+  );
+  return /* @__PURE__ */ c.jsx("div", { className: `flex gap-2 mt-3 justify-self-center max-w-xl ${a}`, children: t });
+}, me = ({ bank: r, account: s, onClick: a }) => /* @__PURE__ */ c.jsxs(
+  "button",
+  {
+    type: "button",
+    className: `\r
+                flex w-full items-center justify-between\r
+                rounded-xl bg-gray-100 px-4 py-3\r
+                text-left text-sm\r
+                transition\r
+                hover:bg-gray-200\r
+                active:scale-[0.98]\r
+            `,
+    onClick: () => a(),
+    children: [
+      /* @__PURE__ */ c.jsxs("div", { className: "flex items-center gap-3", children: [
+        r && /* @__PURE__ */ c.jsx(
+          "div",
+          {
+            className: "flex h-8 w-8 items-center justify-center rounded-lg text-xs font-bold text-white",
+            style: { backgroundColor: r.color },
+            children: r.code
+          }
+        ),
+        /* @__PURE__ */ c.jsxs("div", { children: [
+          r && /* @__PURE__ */ c.jsx("div", { className: "text-sm font-medium text-gray-900", children: r.label }),
+          /* @__PURE__ */ c.jsx(
+            "div",
+            {
+              className: "text-sm 'text-gray-500",
+              children: s
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ c.jsx("span", { className: "text-xs text-gray-400", children: "입력" })
+    ]
+  }
+), pe = (r, s) => {
+  if (!r) return null;
+  const a = r.match(/[\d-]{8,}/);
+  if (!a) return null;
+  const t = a[0], n = s.find(
+    (l) => r.includes(l.label) || r.includes(l.code)
+  );
+  return n ? { account: t, bank: n } : { account: t };
+}, be = [
+  {
+    id: "woori",
+    label: "우리",
+    code: "WR",
+    color: "#003a8f",
+    scoreRules: [
+      {
+        type: "length",
+        value: [11, 12, 13, 14],
+        score: 20,
+        reason: "통합 역사로 인해 다양한 계좌 길이"
+      },
+      {
+        type: "prefix",
+        match: [
+          "006",
+          "007",
+          "002",
+          "004",
+          "003",
+          "005",
+          "05",
+          "06",
+          "07",
+          "08",
+          "02",
+          "01",
+          "04",
+          "15",
+          "12",
+          "13",
+          "21",
+          "24",
+          "25",
+          "09"
+        ],
+        position: "start-2-or-3",
+        score: 25,
+        reason: "우리은행 및 구계좌 과목코드"
+      },
+      {
+        type: "virtualAccountHint",
+        length: 14,
+        score: 10,
+        reason: "가상계좌 비중"
+      }
+    ]
+  },
+  {
+    id: "toss",
+    label: "토스뱅크",
+    code: "TB",
+    color: "#2254F6",
+    scoreRules: [
+      {
+        type: "length",
+        value: 12,
+        score: 35,
+        reason: "토스 일반계좌는 12자리"
+      },
+      {
+        type: "length",
+        value: 14,
+        score: 25,
+        reason: "토스 가상계좌는 14자리"
+      },
+      {
+        type: "prefix",
+        match: ["100", "106", "200", "300", "150", "700", "190"],
+        position: "start-3",
+        score: 40,
+        reason: "토스 과목코드"
+      }
+    ]
+  },
+  {
+    id: "kakao",
+    label: "카카오뱅크",
+    code: "B",
+    color: "#FFE401",
+    scoreRules: [
+      {
+        type: "length",
+        value: 13,
+        score: 40,
+        reason: "카카오뱅크는 현행 계좌가 항상 13자리"
+      },
+      {
+        type: "prefix",
+        match: ["333", "388", "355", "310"],
+        position: "start-3",
+        score: 25,
+        reason: "일반계좌 과목코드"
+      },
+      {
+        type: "prefix",
+        match: ["777", "979"],
+        position: "start-3",
+        score: 20,
+        reason: "가상계좌 과목코드"
+      },
+      {
+        type: "firstDigit",
+        match: ["3", "7"],
+        score: 10,
+        reason: "업무구분은 3(일반) 또는 7(가상)"
+      }
+    ]
+  }
+], xe = ({ setAccountNumber: r, setAccountBank: s, className: a }) => {
+  const [t, n] = v(null);
+  N(() => {
+    const m = async () => {
+      try {
+        const u = await navigator.clipboard.readText(), p = pe(u, be);
+        p && n(p);
+      } catch {
+        console.log("Clipboard access failed");
+      }
+    };
+    m(), window.addEventListener("focus", m);
+  }, []);
+  const l = () => {
+    if (t)
+      "bank" in t ? (r(t.account), s(t.bank.id)) : r(t.account);
+    else return;
+  };
+  return t != null && /* @__PURE__ */ c.jsxs("section", { className: `justify-self-center mt-6 w-full max-w-xl ${a}`, children: [
+    /* @__PURE__ */ c.jsx("h3", { className: "mb-2 text-sm font-semibold text-gray-700", children: "복사한 계좌로 송금" }),
+    /* @__PURE__ */ c.jsx(
+      me,
+      {
+        bank: t.bank,
+        account: t.account,
+        onClick: l
+      }
+    )
+  ] });
+}, he = (r, s) => {
+  switch (r.type) {
+    case "length":
+      return Array.isArray(r.value) ? r.value.includes(s.length) ? r.score : 0 : s.length === r.value ? r.score : 0;
+    case "prefix": {
+      const a = r.match || [];
+      return r.position === "start-3" ? a.some((t) => s.startsWith(t)) ? r.score : 0 : r.position === "start-2-or-3" && a.some(
+        (t) => s.startsWith(t) || s.startsWith(t.slice(0, 2))
+      ) ? r.score : 0;
+    }
+    case "firstDigit":
+      return r.match.includes(s[0]) ? r.score : 0;
+    case "virtualAccountHint":
+      return s.length === r.length ? r.score : 0;
+    default:
+      return 0;
+  }
+}, ve = (r, s) => {
+  const a = r.replace(/-/g, "");
+  return s.map((t) => {
+    let n = 0;
+    return t.scoreRules.forEach((l) => {
+      n += he(l, a);
+    }), {
+      ...t,
+      score: n
+    };
+  }).filter((t) => t.score > 0).sort((t, n) => n.score - t.score);
+}, ge = (r, s) => {
+  const [a, t] = v([]);
+  return N(() => {
+    if (r.length < 10) {
+      t([]);
+      return;
+    }
+    const n = ve(r, s);
+    t(n.slice(0, 3));
+  }, [r, s]), a;
+}, Ee = ({ accountState: r, banks: s, className: a }) => {
+  const {
+    accountNumber: t,
+    setAccountNumber: n,
+    accountBank: l,
+    setAccountBank: m,
+    numericAccountNumber: u
+  } = r, p = ge(u, s);
+  return /* @__PURE__ */ c.jsxs(ie, { className: `${a}`, children: [
+    /* @__PURE__ */ c.jsx(le, { accountNumber: t, setAccountNumber: n }),
+    /* @__PURE__ */ c.jsx(ue, { accountBank: l, setAccountBank: m, bankList: s }),
+    p.length > 0 && /* @__PURE__ */ c.jsx(fe, { banks: p, setAccountBank: m }),
+    /* @__PURE__ */ c.jsx(xe, { setAccountNumber: n, setAccountBank: m })
+  ] });
+}, Re = () => {
+  const [r, s] = v(""), [a, t] = v(""), n = r.replace(/-/g, "");
+  return {
+    accountNumber: r,
+    setAccountNumber: s,
+    accountBank: a,
+    setAccountBank: t,
+    numericAccountNumber: n
+  };
+};
+export {
+  Ee as AccountForm,
+  be as banks,
+  Re as useAccountFormState
+};

package/dist/index.umd.js

@@ -0,0 +1,25 @@
+(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode(":root{--color-primary-pink: #FF9E9E;--color-primary-mint: #4CD9C0;--color-bg-gray: #F5F6F8;--color-text-main: #333333;--color-text-sub: #888888;--color-white: #FFFFFF;--app-max-width: 420px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Noto Sans KR,sans-serif;background-color:#e0e0e0;display:flex;justify-content:center;min-height:100vh}#root{width:100%;max-width:var(--app-max-width);background-color:var(--color-white);min-height:100vh;box-shadow:0 0 20px #0000001a;position:relative;overflow-x:hidden}.flex-center{display:flex;justify-content:center;align-items:center}button{cursor:pointer;border:none;background:none;font-family:inherit}")),document.head.appendChild(o)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+(function(b,p){typeof exports=="object"&&typeof module<"u"?p(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],p):(b=typeof globalThis<"u"?globalThis:b||self,p(b["@woori-fisa/acccount-form"]={},b.React))})(this,(function(b,p){"use strict";var g={exports:{}},v={};var N;function z(){if(N)return v;N=1;var t=Symbol.for("react.transitional.element"),s=Symbol.for("react.fragment");function c(r,n,l){var m=null;if(l!==void 0&&(m=""+l),n.key!==void 0&&(m=""+n.key),"key"in n){l={};for(var u in n)u!=="key"&&(l[u]=n[u])}else l=n;return n=l.ref,{$$typeof:t,type:r,key:m,ref:n!==void 0?n:null,props:l}}return v.Fragment=s,v.jsx=c,v.jsxs=c,v}var y={};var S;function V(){return S||(S=1,process.env.NODE_ENV!=="production"&&(function(){function t(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===he?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case k:return"Fragment";case ie:return"Profiler";case le:return"StrictMode";case me:return"Suspense";case pe:return"SuspenseList";case xe: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 ce:return"Portal";case fe:return e.displayName||"Context";case ue:return(e._context.displayName||"Context")+".Consumer";case de:var o=e.render;return e=e.displayName,e||(e=o.displayName||o.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case be:return o=e.displayName||null,o!==null?o:t(e.type)||"Memo";case _:o=e._payload,e=e._init;try{return t(e(o))}catch{}}return null}function s(e){return""+e}function c(e){try{s(e);var o=!1}catch{o=!0}if(o){o=console;var i=o.error,f=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return i.call(o,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",f),s(e)}}function r(e){if(e===k)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===_)return"<...>";try{var o=t(e);return o?"<"+o+">":"<...>"}catch{return"<...>"}}function n(){var e=j.A;return e===null?null:e.getOwner()}function l(){return Error("react-stack-top-frame")}function m(e){if(L.call(e,"key")){var o=Object.getOwnPropertyDescriptor(e,"key").get;if(o&&o.isReactWarning)return!1}return e.key!==void 0}function u(e,o){function i(){D||(D=!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)",o))}i.isReactWarning=!0,Object.defineProperty(e,"key",{get:i,configurable:!0})}function x(){var e=t(this.type);return W[e]||(W[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 ae(e,o,i,f,R,T){var d=i.ref;return e={$$typeof:Y,type:e,key:o,props:i,_owner:f},(d!==void 0?d:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:x}):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:T}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function C(e,o,i,f,R,T){var d=o.children;if(d!==void 0)if(f)if(ve(d)){for(f=0;f<d.length;f++)F(d[f]);Object.freeze&&Object.freeze(d)}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 F(d);if(L.call(o,"key")){d=t(e);var h=Object.keys(o).filter(function(ye){return ye!=="key"});f=0<h.length?"{key: someKey, "+h.join(": ..., ")+": ...}":"{key: someKey}",U[d+f]||(h=0<h.length?"{"+h.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} />`,f,d,h,d),U[d+f]=!0)}if(d=null,i!==void 0&&(c(i),d=""+i),m(o)&&(c(o.key),d=""+o.key),"key"in o){i={};for(var A in o)A!=="key"&&(i[A]=o[A])}else i=o;return d&&u(i,typeof e=="function"?e.displayName||e.name||"Unknown":e),ae(e,d,i,n(),R,T)}function F(e){I(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===_&&(e._payload.status==="fulfilled"?I(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function I(e){return typeof e=="object"&&e!==null&&e.$$typeof===Y}var E=p,Y=Symbol.for("react.transitional.element"),ce=Symbol.for("react.portal"),k=Symbol.for("react.fragment"),le=Symbol.for("react.strict_mode"),ie=Symbol.for("react.profiler"),ue=Symbol.for("react.consumer"),fe=Symbol.for("react.context"),de=Symbol.for("react.forward_ref"),me=Symbol.for("react.suspense"),pe=Symbol.for("react.suspense_list"),be=Symbol.for("react.memo"),_=Symbol.for("react.lazy"),xe=Symbol.for("react.activity"),he=Symbol.for("react.client.reference"),j=E.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,L=Object.prototype.hasOwnProperty,ve=Array.isArray,w=console.createTask?console.createTask:function(){return null};E={react_stack_bottom_frame:function(e){return e()}};var D,W={},B=E.react_stack_bottom_frame.bind(E,l)(),M=w(r(l)),U={};y.Fragment=k,y.jsx=function(e,o,i){var f=1e4>j.recentlyCreatedOwnerStacks++;return C(e,o,i,!1,f?Error("react-stack-top-frame"):B,f?w(r(e)):M)},y.jsxs=function(e,o,i){var f=1e4>j.recentlyCreatedOwnerStacks++;return C(e,o,i,!0,f?Error("react-stack-top-frame"):B,f?w(r(e)):M)}})()),y}var O;function J(){return O||(O=1,process.env.NODE_ENV==="production"?g.exports=z():g.exports=V()),g.exports}var a=J();const $=/^[0-9-]*$/,G=({accountNumber:t,setAccountNumber:s,className:c})=>{const r=n=>{const l=n.target.value;if(l==""){s("");return}if(l.startsWith("-")){alert("계좌번호는 숫자로 시작해야 합니다.");return}$.test(l)?s(l):alert("계좌번호는 숫자와 -로만 입력 가능합니다.")};return a.jsx(a.Fragment,{children:a.jsx("input",{type:"text",inputMode:"tel",placeholder:"계좌번호",value:t,onChange:r,className:`rounded-sm border border-black w-full max-w-xl p-3 my-3 block justify-self-center ${c}`})})},H=({children:t,className:s})=>a.jsx("div",{className:`bg-white flex justify-center ${s}`,children:a.jsx("div",{className:`\r
+          w-full max-w-[430px]\r
+          px-4\r
+        `,children:t})}),X=({className:t,accountBank:s,setAccountBank:c,bankList:r})=>{const[n,l]=p.useState(!1),m=p.useRef(null);return p.useEffect(()=>{const u=x=>{m.current&&!m.current.contains(x.target)&&l(!1)};return document.addEventListener("mousedown",u),document.addEventListener("touchstart",u),()=>{document.removeEventListener("mousedown",u),document.removeEventListener("touchstart",u)}},[]),a.jsxs("div",{ref:m,className:`relative w-full max-w-xl my-3 block justify-self-center ${t}`,children:[a.jsxs("button",{type:"button",onClick:()=>l(!n),className:`flex items-center justify-between w-full p-3 border border-black ${n?"rounded-t-sm":"rounded-sm"} bg-white text-left`,children:[a.jsx("span",{className:s===""?"text-gray-400":"text-black",children:s?r.find(u=>u.id===s)?.label:"은행"}),a.jsx("span",{className:`transition-transform duration-300 inline-block ${n?"rotate-180":""}`,children:"▼"})]}),a.jsx("ul",{className:`absolute z-10 w-full border-t-0 bg-white border border-black rounded-b-sm shadow-lg overflow-hidden transition-all duration-300 ease-in-out ${n?"max-h-60 opacity-100 visible":"max-h-0 opacity-0 invisible pointer-events-none"}`,children:r.map(u=>a.jsx("li",{onClick:()=>{c(u.id),l(!1)},className:"p-3 hover:bg-gray-100 cursor-pointer text-black border-b last:border-b-0",children:u.label},u.id))})]})},Z=({label:t,code:s,color:c,setAccountBank:r,bankId:n})=>{const l=()=>{r(n)};return a.jsxs("button",{type:"button",onClick:l,className:`\r
+        rounded-xl px-3 py-2\r
+        flex items-center gap-2 text-left\r
+        bg-gray-100\r
+        transition-all duration-150 ease-out\r
+        hover:bg-gray-200 hover:-translate-y-[1px] hover:shadow-sm\r
+        focus-visible:ring-2 focus-visible:rnoneing-gray-400\r
+        active:scale-[0.98]\r
+      `,children:[a.jsx("span",{className:"flex h-8 w-8 items-center justify-center rounded-lg text-white font-bold text-sm",style:{backgroundColor:c},children:s}),a.jsx("span",{className:"text-sm font-medium",children:t})]})},Q=({banks:t,setAccountBank:s,className:c})=>{const r=t.map(n=>a.jsx(Z,{label:n.label,code:n.code,color:n.color,setAccountBank:s,bankId:n.id},n.id));return a.jsx("div",{className:`flex gap-2 mt-3 justify-self-center max-w-xl ${c}`,children:r})},q=({bank:t,account:s,onClick:c})=>a.jsxs("button",{type:"button",className:`\r
+                flex w-full items-center justify-between\r
+                rounded-xl bg-gray-100 px-4 py-3\r
+                text-left text-sm\r
+                transition\r
+                hover:bg-gray-200\r
+                active:scale-[0.98]\r
+            `,onClick:()=>c(),children:[a.jsxs("div",{className:"flex items-center gap-3",children:[t&&a.jsx("div",{className:"flex h-8 w-8 items-center justify-center rounded-lg text-xs font-bold text-white",style:{backgroundColor:t.color},children:t.code}),a.jsxs("div",{children:[t&&a.jsx("div",{className:"text-sm font-medium text-gray-900",children:t.label}),a.jsx("div",{className:"text-sm 'text-gray-500",children:s})]})]}),a.jsx("span",{className:"text-xs text-gray-400",children:"입력"})]}),K=(t,s)=>{if(!t)return null;const c=t.match(/[\d-]{8,}/);if(!c)return null;const r=c[0],n=s.find(l=>t.includes(l.label)||t.includes(l.code));return n?{account:r,bank:n}:{account:r}},P=[{id:"woori",label:"우리",code:"WR",color:"#003a8f",scoreRules:[{type:"length",value:[11,12,13,14],score:20,reason:"통합 역사로 인해 다양한 계좌 길이"},{type:"prefix",match:["006","007","002","004","003","005","05","06","07","08","02","01","04","15","12","13","21","24","25","09"],position:"start-2-or-3",score:25,reason:"우리은행 및 구계좌 과목코드"},{type:"virtualAccountHint",length:14,score:10,reason:"가상계좌 비중"}]},{id:"toss",label:"토스뱅크",code:"TB",color:"#2254F6",scoreRules:[{type:"length",value:12,score:35,reason:"토스 일반계좌는 12자리"},{type:"length",value:14,score:25,reason:"토스 가상계좌는 14자리"},{type:"prefix",match:["100","106","200","300","150","700","190"],position:"start-3",score:40,reason:"토스 과목코드"}]},{id:"kakao",label:"카카오뱅크",code:"B",color:"#FFE401",scoreRules:[{type:"length",value:13,score:40,reason:"카카오뱅크는 현행 계좌가 항상 13자리"},{type:"prefix",match:["333","388","355","310"],position:"start-3",score:25,reason:"일반계좌 과목코드"},{type:"prefix",match:["777","979"],position:"start-3",score:20,reason:"가상계좌 과목코드"},{type:"firstDigit",match:["3","7"],score:10,reason:"업무구분은 3(일반) 또는 7(가상)"}]}],ee=({setAccountNumber:t,setAccountBank:s,className:c})=>{const[r,n]=p.useState(null);p.useEffect(()=>{const m=async()=>{try{const u=await navigator.clipboard.readText(),x=K(u,P);x&&n(x)}catch{console.log("Clipboard access failed")}};m(),window.addEventListener("focus",m)},[]);const l=()=>{if(r)"bank"in r?(t(r.account),s(r.bank.id)):t(r.account);else return};return r!=null&&a.jsxs("section",{className:`justify-self-center mt-6 w-full max-w-xl ${c}`,children:[a.jsx("h3",{className:"mb-2 text-sm font-semibold text-gray-700",children:"복사한 계좌로 송금"}),a.jsx(q,{bank:r.bank,account:r.account,onClick:l})]})},te=(t,s)=>{switch(t.type){case"length":return Array.isArray(t.value)?t.value.includes(s.length)?t.score:0:s.length===t.value?t.score:0;case"prefix":{const c=t.match||[];return t.position==="start-3"?c.some(r=>s.startsWith(r))?t.score:0:t.position==="start-2-or-3"&&c.some(r=>s.startsWith(r)||s.startsWith(r.slice(0,2)))?t.score:0}case"firstDigit":return t.match.includes(s[0])?t.score:0;case"virtualAccountHint":return s.length===t.length?t.score:0;default:return 0}},re=(t,s)=>{const c=t.replace(/-/g,"");return s.map(r=>{let n=0;return r.scoreRules.forEach(l=>{n+=te(l,c)}),{...r,score:n}}).filter(r=>r.score>0).sort((r,n)=>n.score-r.score)},ne=(t,s)=>{const[c,r]=p.useState([]);return p.useEffect(()=>{if(t.length<10){r([]);return}const n=re(t,s);r(n.slice(0,3))},[t,s]),c},se=({accountState:t,banks:s,className:c})=>{const{accountNumber:r,setAccountNumber:n,accountBank:l,setAccountBank:m,numericAccountNumber:u}=t,x=ne(u,s);return a.jsxs(H,{className:`${c}`,children:[a.jsx(G,{accountNumber:r,setAccountNumber:n}),a.jsx(X,{accountBank:l,setAccountBank:m,bankList:s}),x.length>0&&a.jsx(Q,{banks:x,setAccountBank:m}),a.jsx(ee,{setAccountNumber:n,setAccountBank:m})]})},oe=()=>{const[t,s]=p.useState(""),[c,r]=p.useState(""),n=t.replace(/-/g,"");return{accountNumber:t,setAccountNumber:s,accountBank:c,setAccountBank:r,numericAccountNumber:n}};b.AccountForm=se,b.banks=P,b.useAccountFormState=oe,Object.defineProperty(b,Symbol.toStringTag,{value:"Module"})}));

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "woori-fisa-account-form",
+  "private": false,
+  "version": "1.0.7",
+  "type": "module",
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.1.18",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tailwindcss": "^4.1.18"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@tailwindcss/postcss": "^4.1.18",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@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",
+    "vite-plugin-css-injected-by-js": "^3.5.2"
+  }
+}