sales-frontend-components 0.0.69 → 0.0.71

package/dist/index.cjs.js

@@ -9,8 +9,10 @@ var styles = require('./modal/pre-standard/job-search-modal/job-search-modal.mod
 var styles$1 = require('./step-indicator/step-indicator.module.scss');
 var styles$2 = require('./camera/camera.module.scss');
 var styles$3 = require('./modal/standard/address-search/select-address.module.scss');
-var styles$4 = require('./modal/pre-standard/job-vehicle-search-modal/job-vehicle-search-modal.module.scss');
-var styles$5 = require('./modal/pre-standard/vehicle-search-modal/vehicle-search-modal.module.scss');
+var styles$4 = require('./modal/standard/bank-stock-search/bank-stock-search-modal.module.scss');
+var salesFrontendAssets = require('sales-frontend-assets');
+var styles$5 = require('./modal/pre-standard/job-vehicle-search-modal/job-vehicle-search-modal.module.scss');
+var styles$6 = require('./modal/pre-standard/vehicle-search-modal/vehicle-search-modal.module.scss');
 
 const FormCheckboxButton = ({
   name,
@@ -650,7 +652,6 @@ const FormSearchJobField = ({
   name,
   control,
   disabled,
-  rootProps,
   error,
   size = "medium",
   placeholder = "\uC9C1\uC885 \uAC80\uC0C9",
@@ -668,21 +669,16 @@ const FormSearchJobField = ({
   }, [selectedJob]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      salesFrontendDesignSystem.FormField.TextField,
+      salesFrontendDesignSystem.FormField.ComboBox,
       {
         ...props,
         ...field,
         id: field.name,
         error: fieldState.invalid || error,
         value: selected?.occupationIndustryName ?? "",
-        rootProps: {
-          ...rootProps,
-          endElement: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Icon, { name: "sub-ui/search" })
-        },
-        readOnly: true,
+        icon: "search",
         size,
         placeholder,
-        style: { background: "#fff", cursor: "pointer" },
         autoComplete: "off",
         onClick: openJobSearchModal
       }
@@ -1671,7 +1667,111 @@ const useAddressComponent = () => {
   };
 };
 
-const cx$2 = classNames.bind(styles$4);
+const BANK_LIST = [
+  { label: "HSBC", value: "HSBC", Icon: salesFrontendAssets.IconGraphicsBankHsbc },
+  { label: "KEB\uD558\uB098", value: "KEB\uD558\uB098", Icon: salesFrontendAssets.IconGraphicsBankKebHana },
+  { label: "SC\uC81C\uC77C", value: "SC\uC81C\uC77C", Icon: salesFrontendAssets.IconGraphicsBankScJeil },
+  { label: "\uACBD\uB0A8", value: "\uACBD\uB0A8", Icon: salesFrontendAssets.IconGraphicsBankGyeongnam },
+  { label: "\uAD11\uC8FC", value: "\uAD11\uC8FC", Icon: salesFrontendAssets.IconGraphicsBankGwangju },
+  { label: "\uAD6D\uBBFC", value: "\uAD6D\uBBFC", Icon: salesFrontendAssets.IconGraphicsBankKukmin },
+  { label: "\uAE30\uC5C5", value: "\uAE30\uC5C5", Icon: salesFrontendAssets.IconGraphicsBankKiup },
+  { label: "\uC9C0\uC5ED\uB18D\uD611", value: "\uC9C0\uC5ED\uB18D\uD611", Icon: salesFrontendAssets.IconGraphicsBankJiyeokNonghyeop },
+  { label: "NH\uB18D\uD611", value: "NH\uB18D\uD611", Icon: salesFrontendAssets.IconGraphicsBankNhNonghyeop },
+  { label: "\uB300\uAD6C", value: "\uB300\uAD6C", Icon: salesFrontendAssets.IconGraphicsBankDaegu },
+  { label: "\uBD80\uC0B0", value: "\uBD80\uC0B0", Icon: salesFrontendAssets.IconGraphicsBankBusan },
+  { label: "\uC0B0\uB9BC\uC870\uD569", value: "\uC0B0\uB9BC\uC870\uD569", Icon: salesFrontendAssets.IconGraphicsBankSanlim },
+  { label: "\uC0B0\uC5C5", value: "\uC0B0\uC5C5", Icon: salesFrontendAssets.IconGraphicsBankSaneop },
+  { label: "\uC0C8\uB9C8\uC744\uAE08\uACE0", value: "\uC0C8\uB9C8\uC744\uAE08\uACE0", Icon: salesFrontendAssets.IconGraphicsBankSaemaulGeumgo },
+  { label: "\uC218\uD611", value: "\uC218\uD611", Icon: salesFrontendAssets.IconGraphicsBankSuhyeop },
+  { label: "\uC2E0\uD55C", value: "\uC2E0\uD55C", Icon: salesFrontendAssets.IconGraphicsBankSinhan },
+  { label: "\uC2E0\uD611", value: "\uC2E0\uD611", Icon: salesFrontendAssets.IconGraphicsBankSinhyeop },
+  { label: "\uC678\uD658", value: "\uC678\uD658", Icon: salesFrontendAssets.IconGraphicsBankOehwan },
+  { label: "\uC6B0\uB9AC", value: "\uC6B0\uB9AC", Icon: salesFrontendAssets.IconGraphicsBankWoori },
+  { label: "\uC6B0\uCCB4\uAD6D", value: "\uC6B0\uCCB4\uAD6D", Icon: salesFrontendAssets.IconGraphicsBankPost },
+  { label: "\uC800\uCD95", value: "\uC800\uCD95", Icon: salesFrontendAssets.IconGraphicsBankJeochuk },
+  { label: "\uC804\uBD81", value: "\uC804\uBD81", Icon: salesFrontendAssets.IconGraphicsBankJeonbuk },
+  { label: "\uC81C\uC8FC", value: "\uC81C\uC8FC", Icon: salesFrontendAssets.IconGraphicsBankJeju },
+  { label: "\uCE74\uCE74\uC624\uBC45\uD06C", value: "\uCE74\uCE74\uC624\uBC45\uD06C", Icon: salesFrontendAssets.IconGraphicsBankKakaoBank },
+  { label: "\uCF00\uC774\uBC45\uD06C", value: "\uCF00\uC774\uBC45\uD06C", Icon: salesFrontendAssets.IconGraphicsBankKBank },
+  { label: "\uD55C\uAD6D\uC528\uD2F0", value: "\uD55C\uAD6D\uC528\uD2F0", Icon: salesFrontendAssets.IconGraphicsBankHankookCity }
+];
+const STOCK_LIST = [
+  { label: "DB\uAE08\uC735\n\uD22C\uC790\uC99D\uAD8C", value: "DB\uAE08\uC735\uD22C\uC790", Icon: salesFrontendAssets.IconGraphicsStockDbGeumyungTujajeungkwon },
+  { label: "KB\uC99D\uAD8C", value: "KB\uC99D\uAD8C", Icon: salesFrontendAssets.IconGraphicsStockKbJeungkwon },
+  { label: "NH(\uC6B0\uB9AC)\n\uD22C\uC790\uC99D\uAD8C", value: "NH(\uC6B0\uB9AC)\uD22C\uC790\uC99D\uAD8C", Icon: salesFrontendAssets.IconGraphicsStockNhWooriTujajeungkwon },
+  { label: "NH\n\uD22C\uC790\uC99D\uAD8C", value: "NH\uD22C\uC790\uC99D\uAD8C", Icon: salesFrontendAssets.IconGraphicsStockNhTujajeungkwon },
+  { label: "SK\uC99D\uAD8C", value: "SK\uC99D\uAD8C", Icon: salesFrontendAssets.IconGraphicsStockSkJeungkwon },
+  { label: "\uAD50\uBCF4\uC99D\uAD8C", value: "\uAD50\uBCF4\uC99D\uAD8C", Icon: salesFrontendAssets.IconGraphicsStockGyoboJeungkwon },
+  { label: "\uB300\uC2E0\uC99D\uAD8C", value: "\uB300\uC2E0\uC99D\uAD8C", Icon: salesFrontendAssets.IconGraphicsStockDaesinJeungkwon },
+  { label: "\uBA54\uB9AC\uCE20\uC99D\uAD8C", value: "\uBA54\uB9AC\uCE20\uC99D\uAD8C", Icon: salesFrontendAssets.IconGraphicsStockMeritzJeungkwon },
+  { label: "\uBBF8\uB798\uC5D0\uC14B\n\uC99D\uAD8C", value: "\uBBF8\uB798\uC5D0\uC14B\uC99D\uAD8C", Icon: salesFrontendAssets.IconGraphicsStockMiraeAssetJeungkwon },
+  { label: "\uBD80\uAD6D\uC99D\uAD8C", value: "\uBD80\uAD6D\uC99D\uAD8C", Icon: salesFrontendAssets.IconGraphicsStockBugukJeungkwon },
+  { label: "\uC0BC\uC131\uC99D\uAD8C", value: "\uC0BC\uC131\uC99D\uAD8C", Icon: salesFrontendAssets.IconGraphicsStockSamsungJeungkwon },
+  { label: "\uC2E0\uC601\uC99D\uAD8C", value: "\uC2E0\uC601\uC99D\uAD8C", Icon: salesFrontendAssets.IconGraphicsStockSinyeongJeungkwon },
+  { label: "\uC2E0\uD55C\uAE08\uC735\n\uD22C\uC790\uC99D\uAD8C", value: "\uC2E0\uD55C\uAE08\uC735\uD22C\uC790\uC99D\uAD8C", Icon: salesFrontendAssets.IconGraphicsStockSinhanTujajeungkwon },
+  { label: "\uC720\uC548\uD0C0\uC99D\uAD8C", value: "\uC720\uC548\uD0C0\uC99D\uAD8C", Icon: salesFrontendAssets.IconGraphicsStockYuantaJeungkwon },
+  { label: "\uC720\uC9C4\n\uD22C\uC790\uC99D\uAD8C", value: "\uC720\uC9C4\uD22C\uC790\uC99D\uAD8C", Icon: salesFrontendAssets.IconGraphicsStockYujinTujajeungkwon },
+  { label: "\uD0A4\uC6C0\uC99D\uAD8C", value: "\uD0A4\uC6C0\uC99D\uAD8C", Icon: salesFrontendAssets.IconGraphicsStockKiwoomJeungkwon },
+  { label: "\uD558\uB098\uAE08\uC735\n\uD22C\uC790\uC99D\uAD8C", value: "\uD558\uB098\uAE08\uC735\uD22C\uC790\uC99D\uAD8C", Icon: salesFrontendAssets.IconGraphicsStockHanaGeumyungTujajeungkwon },
+  { label: "\uD558\uC774\n\uD22C\uC790\uC99D\uAD8C", value: "\uD558\uC774\uD22C\uC790\uC99D\uAD8C", Icon: salesFrontendAssets.IconGraphicsStockHiTujajeungkwon },
+  { label: "\uD55C\uAD6D\uC99D\uAD8C\n\uAE08\uC735", value: "\uD55C\uAD6D\uC99D\uAD8C\uAE08\uC735", Icon: salesFrontendAssets.IconGraphicsStockHankookJeungkwonGeumyung },
+  { label: "\uD55C\uAD6D\n\uD22C\uC790\uC99D\uAD8C", value: "\uD55C\uAD6D\uD22C\uC790\uC99D\uAD8C", Icon: salesFrontendAssets.IconGraphicsStockHankookTujajeungkwon },
+  { label: "\uD55C\uD654\n\uD22C\uC790\uC99D\uAD8C", value: "\uD55C\uD654\uD22C\uC790\uC99D\uAD8C", Icon: salesFrontendAssets.IconGraphicsStockHanwhaTujajeungkwon },
+  { label: "\uD604\uB300\uCC28\uC99D\uAD8C", value: "\uD604\uB300\uCC28\uC99D\uAD8C", Icon: salesFrontendAssets.IconGraphicsStockHyundaiChaJeungkwon },
+  { label: "\uD638\uCD9C\uC5C6\uC74C", value: "\uD638\uCD9C\uC5C6\uC74C", Icon: salesFrontendAssets.IconGraphicsStockHochulEopsum }
+];
+function useBankStockSearch({ onSelect }) {
+  const [searchKeyword, setSearchKeyword] = React.useState("");
+  const bankList = React.useMemo(() => BANK_LIST.filter((bank) => bank.label.includes(searchKeyword)), [searchKeyword]);
+  const stockList = React.useMemo(() => STOCK_LIST.filter((stock) => stock.label.includes(searchKeyword)), [searchKeyword]);
+  const handleSelect = (item) => {
+    onSelect(item);
+  };
+  return {
+    searchKeyword,
+    setSearchKeyword,
+    bankList,
+    stockList,
+    handleSelect
+  };
+}
+
+function chunk(array, size) {
+  return Array.from({ length: Math.ceil(array.length / size) }, (v, i) => array.slice(i * size, i * size + size));
+}
+function BankStockSearchModal({ open, onClose, onSelect }) {
+  const { bankList, stockList, handleSelect } = useBankStockSearch({
+    onSelect
+  });
+  const renderItems = (list) => {
+    const chunkedList = chunk(list, 5);
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$4["list-container"], children: chunkedList.map((chunk2, chunkIndex) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$4.row, children: [
+      chunk2.map((item) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$4.item, onClick: () => handleSelect(item), children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$4["icon-wrapper"], children: /* @__PURE__ */ jsxRuntime.jsx(item.Icon, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.label })
+      ] }, item.value)),
+      chunk2.length < 5 && Array.from({ length: 5 - chunk2.length }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$4.item, style: { visibility: "hidden" } }, `placeholder-${chunkIndex}-${i}`))
+    ] }, chunkIndex)) });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Root, { isOpen: open, onClose, modalSize: "full-screen", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Overlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Content, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Header, { headerTitle: "\uC740\uD589/\uC99D\uAD8C\uC0AC \uC120\uD0DD", showCloseButton: true }),
+      /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$4.container, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$4.section, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles$4["section-title"], children: "\uC740\uD589\uC0AC" }),
+          renderItems(bankList)
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$4.section, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles$4["section-title"], children: "\uC99D\uAD8C\uC0AC" }),
+          renderItems(stockList)
+        ] })
+      ] }) })
+    ] })
+  ] });
+}
+
+const cx$2 = classNames.bind(styles$5);
 const JobVehicleSearchGrade = ({ riskGrade, hospitalizationGrade }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$2("grade-section"), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$2("icon-title"), children: [
@@ -1692,7 +1792,7 @@ const JobVehicleSearchGrade = ({ riskGrade, hospitalizationGrade }) => {
   ] });
 };
 
-const cx$1 = classNames.bind(styles$5);
+const cx$1 = classNames.bind(styles$6);
 function VehicleSearch({ vehicles, onVehicleSelect }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$1("vehicle-search-section"), children: [
     /* @__PURE__ */ jsxRuntime.jsx("p", { children: "\uC6B4\uC804 \uCC28\uC885" }),
@@ -1758,7 +1858,7 @@ const useJobVehicleSearch = () => {
   };
 };
 
-const cx = classNames.bind(styles$4);
+const cx = classNames.bind(styles$5);
 function useJobVehicleSearchModal() {
   const {
     selectedVehicle,
@@ -1864,6 +1964,7 @@ const JobSearchModal = ({ onClose }) => {
 };
 
 exports.Attachment = Attachment;
+exports.BankStockSearchModal = BankStockSearchModal;
 exports.FormCheckbox = FormCheckbox;
 exports.FormCheckboxButton = FormCheckboxButton;
 exports.FormDatePicker = FormDatePicker;
@@ -1877,6 +1978,7 @@ exports.StepIndicator = StepIndicator;
 exports.resize = resize;
 exports.testSignatureBase64Data = testSignatureBase64Data;
 exports.useAddressComponent = useAddressComponent;
+exports.useBankStockSearch = useBankStockSearch;
 exports.useCamera = useCamera;
 exports.useCanvasPaint = useCanvasPaint;
 exports.useJobVehicleSearchModal = useJobVehicleSearchModal;