sales-frontend-components 0.0.94 → 0.0.96

package/dist/index.esm.js

@@ -2,21 +2,23 @@ import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useController } from 'react-hook-form';
 import { CheckboxButton, Checkbox, isDate, DatePicker, DateRangePicker, Table, Accordion, Radio, FormField, Select, Tab, useModalState, Modal, Button, ModalUtils, SegmentGroup, FormCore, RadioGroup, useDropDown, List, ListItem, Loading } from 'sales-frontend-design-system';
 import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
-import { useSearchOccupationDetailQuery, useSearchOccupationQuery, useSearchAddressQuery, useSearchPostalCodeQuery, useSearchAddressStandardizationQuery, useSearchCommonCodeQuery, useSearchOrganizationQuery, useSearchEmployeeProfileQuery, useSearchVehicleQuery, useSearchRiskGradeQuery, getDspCustomerListMethod, useSearchCustomerListQuery, getRemoteIdentityVerificationSystemToken } from 'sales-frontend-api/method';
+import { useSearchOccupationDetailQuery, useSearchOccupationQuery, useSearchAddressQuery, useSearchPostalCodeQuery, useSearchAddressStandardizationQuery, useSearchCommonCodeQuery, useSearchCustomerListQuery, useSearchNationalityQuery, useSearchVisaQuery, getDspCustomerListMethod, useSearchEmployeeProfileQuery, useSearchVehicleQuery, useSearchRiskGradeQuery, useSearchOrganizationQuery, getRemoteIdentityVerificationSystemToken } from 'sales-frontend-api/method';
 import { IconMainUiSearch, IconIllustCamera, IconGraphicsBankSaneop, IconGraphicsBankKiup, IconGraphicsBankKukmin, IconGraphicsBankSuhyeop, IconGraphicsBankJangGiSinYong, IconGraphicsBankNhNonghyeop, IconGraphicsBankJiyeokNonghyeop, IconGraphicsBankWoori, IconGraphicsBankScJeil, IconGraphicsBankSinhan, IconGraphicsBankHankookCity, IconGraphicsBankDaegu, IconGraphicsBankBusan, IconGraphicsBankGwangju, IconGraphicsBankJeju, IconGraphicsBankJeonbuk, IconGraphicsBankGyeongnam, IconGraphicsBankSaemaulGeumgo, IconGraphicsBankSinhyeop, IconGraphicsBankJeochuk, IconGraphicsBankHsbc, IconGraphicsBankABNAMRO, IconGraphicsBankSanlim, IconGraphicsBankPost, IconGraphicsBankKebHana, IconGraphicsBankKBank, IconGraphicsBankKakaoBank, IconGraphicsBankTossBank, IconGraphicsStockYuantaJeungkwon, IconGraphicsStockKbJeungkwon, IconGraphicsStockMiraeAssetJeungkwon, IconGraphicsStockSamsungJeungkwon, IconGraphicsStockHankookTujajeungkwon, IconGraphicsStockNhWooriTujajeungkwon, IconGraphicsStockGyoboJeungkwon, IconGraphicsStockHiTujajeungkwon, IconGraphicsStockHyundaiChaJeungkwon, IconGraphicsStockKiwoomJeungkwon, IconGraphicsStockSkJeungkwon, IconGraphicsStockDaesinJeungkwon, IconGraphicsStockHanwhaTujajeungkwon, IconGraphicsStockHanaGeumyungTujajeungkwon, IconGraphicsStockSinhanTujajeungkwon, IconGraphicsStockDbGeumyungTujajeungkwon, IconGraphicsStockYujinTujajeungkwon, IconGraphicsStockMeritzJeungkwon, IconGraphicsStockKakaoPayJeungkwon, IconGraphicsStockNhTujajeungkwon, IconGraphicsStockBugukJeungkwon, IconGraphicsStockSinyeongJeungkwon, IconGraphicsStockHochulEopsum, IconGraphicsFeedbackEmpty, IconIllustGrade, IconIllustJob, IconSubUiArrowRight, IconIllustVehicle } from 'sales-frontend-assets';
 import styles from './modal/pre-standard/job-search-modal/job-search-modal.module.scss';
 import styles$1 from './step-indicator/step-indicator.module.scss';
 import styles$2 from './camera/camera.module.scss';
 import styles$3 from './modal/standard/address-search/select-address.module.scss';
 import styles$4 from './modal/standard/bank-stock-search/bank-stock-search-modal.module.scss';
-import styles$5 from './modal/pre-standard/organization-search-modal/organization-search-modal.module.scss';
-import styles$6 from './modal/pre-standard/employee-search-modal/employee-search-modal.module.scss';
-import styles$7 from './modal/pre-standard/job-vehicle-search-modal/job-vehicle-search-modal.module.scss';
-import styles$8 from './modal/pre-standard/vehicle-search-modal/vehicle-search-modal.module.scss';
+import styles$5 from './modal/standard/customer-search/customer-search.module.scss';
+import styles$6 from './modal/standard/nationality-search/select-nationality.module.scss';
+import { isClient, MessageEventManager } from 'sales-frontend-utils';
+import styles$7 from './modal/standard/visa-search/select-visa.module.scss';
 import { useQuery } from '@tanstack/react-query';
-import styles$9 from './modal/pre-standard/dea-customer-search-modal/dea-customer-search-modal.module.scss';
-import styles$a from './modal/standard/customer-search/customer-search.module.scss';
-import { MessageEventManager } from 'sales-frontend-utils';
+import styles$8 from './modal/pre-standard/dea-customer-search-modal/dea-customer-search-modal.module.scss';
+import styles$9 from './modal/pre-standard/employee-search-modal/employee-search-modal.module.scss';
+import styles$a from './modal/pre-standard/job-vehicle-search-modal/job-vehicle-search-modal.module.scss';
+import styles$b from './modal/pre-standard/vehicle-search-modal/vehicle-search-modal.module.scss';
+import styles$c from './modal/pre-standard/organization-search-modal/organization-search-modal.module.scss';
 
 const FormCheckboxButton = ({
   name,
@@ -304,15 +306,15 @@ function JobSearchDetail({ occupationTypeCode, occupationIndustryCode }) {
   ] }) }) });
 }
 
-const cx$g = classNames.bind(styles);
+const cx$j = classNames.bind(styles);
 function JobSearchCategory({ filteredJobs, onJobSelect, searchTerm }) {
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: cx$g("category-section"), children: [
-    /* @__PURE__ */ jsxs("p", { className: cx$g("result-title"), children: [
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: cx$j("category-section"), children: [
+    /* @__PURE__ */ jsxs("p", { className: cx$j("result-title"), children: [
       "\uCD1D ",
       /* @__PURE__ */ jsx("span", { className: "text-primary", children: filteredJobs.length }),
       "\uAC74\uC758 \uAC80\uC0C9\uACB0\uACFC"
     ] }),
-    /* @__PURE__ */ jsx(Accordion.Root, { children: /* @__PURE__ */ jsx(Radio.Root, { name: "job-selection", size: "small", className: cx$g("job-radio-root"), onToggle: () => {
+    /* @__PURE__ */ jsx(Accordion.Root, { children: /* @__PURE__ */ jsx(Radio.Root, { name: "job-selection", size: "small", className: cx$j("job-radio-root"), onToggle: () => {
     }, children: filteredJobs.map((job, index) => /* @__PURE__ */ jsxs(
       Accordion.Item,
       {
@@ -343,23 +345,23 @@ function JobSearchCategory({ filteredJobs, onJobSelect, searchTerm }) {
   ] }) });
 }
 
-const cx$f = classNames.bind(styles);
+const cx$i = classNames.bind(styles);
 function JobSearchFavorite({ filteredJobs, onJobSelect }) {
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: cx$f("popular-jobs"), children: [
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: cx$i("popular-jobs"), children: [
     /* @__PURE__ */ jsx("p", { children: "\uB9CE\uC774 \uCC3E\uB294 \uC9C1\uC885" }),
-    /* @__PURE__ */ jsx(Accordion.Root, { children: /* @__PURE__ */ jsx(Radio.Root, { name: "job-selection", size: "small", className: cx$f("job-radio-root"), children: filteredJobs.map((job, index) => /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(Accordion.Root, { children: /* @__PURE__ */ jsx(Radio.Root, { name: "job-selection", size: "small", className: cx$i("job-radio-root"), children: filteredJobs.map((job, index) => /* @__PURE__ */ jsxs(
       Accordion.Item,
       {
         id: `item-${job.occupationIndustryCode}-${index}`,
-        className: cx$f("accordion-item"),
+        className: cx$i("accordion-item"),
         children: [
-          /* @__PURE__ */ jsx(Accordion.HeaderDiv, { className: cx$f("accordion-header-item"), children: /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx(Accordion.HeaderDiv, { className: cx$i("accordion-header-item"), children: /* @__PURE__ */ jsxs(
             Radio.Item,
             {
               size: "small",
               value: job.occupationIndustryCode,
               onChange: () => onJobSelect(job),
-              className: cx$f("radio-item"),
+              className: cx$i("radio-item"),
               children: [
                 job.occupationIndustryName,
                 "(",
@@ -382,15 +384,15 @@ function JobSearchFavorite({ filteredJobs, onJobSelect }) {
   ] }) });
 }
 
-const cx$e = classNames.bind(styles);
+const cx$h = classNames.bind(styles);
 function JobSearchResult({ filteredJobs, onJobSelect, searchTerm }) {
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: cx$e("popular-jobs"), children: [
-    /* @__PURE__ */ jsxs("p", { className: cx$e("result-title"), children: [
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: cx$h("popular-jobs"), children: [
+    /* @__PURE__ */ jsxs("p", { className: cx$h("result-title"), children: [
       "\uCD1D ",
       /* @__PURE__ */ jsx("span", { className: "text-primary", children: filteredJobs.length }),
       "\uAC74\uC758 \uAC80\uC0C9\uACB0\uACFC"
     ] }),
-    /* @__PURE__ */ jsx(Accordion.Root, { children: /* @__PURE__ */ jsx(Radio.Root, { name: "job-selection", size: "small", className: cx$e("job-radio-root"), children: filteredJobs.map((job) => /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(Accordion.Root, { children: /* @__PURE__ */ jsx(Radio.Root, { name: "job-selection", size: "small", className: cx$h("job-radio-root"), children: filteredJobs.map((job) => /* @__PURE__ */ jsxs(
       Accordion.Item,
       {
         id: `item-${job.occupationIndustryCode}`,
@@ -427,7 +429,7 @@ function JobSearchResult({ filteredJobs, onJobSelect, searchTerm }) {
 }
 
 const { TextField: TextField$3 } = FormField;
-const cx$d = classNames.bind(styles);
+const cx$g = classNames.bind(styles);
 const { Option } = Select;
 function JobSearch({
   activeTab,
@@ -465,7 +467,7 @@ function JobSearch({
       }
     ),
     /* @__PURE__ */ jsxs("div", { children: [
-      activeTab === "jobName" && /* @__PURE__ */ jsxs("div", { className: cx$d("favorite-jobs-section"), children: [
+      activeTab === "jobName" && /* @__PURE__ */ jsxs("div", { className: cx$g("favorite-jobs-section"), children: [
         /* @__PURE__ */ jsx(
           TextField$3,
           {
@@ -487,8 +489,8 @@ function JobSearch({
         !searchTerm && /* @__PURE__ */ jsx(JobSearchFavorite, { filteredJobs, onJobSelect }),
         searchTerm && !isLoading && /* @__PURE__ */ jsx(JobSearchResult, { filteredJobs, onJobSelect, searchTerm })
       ] }),
-      activeTab === "jobCode" && /* @__PURE__ */ jsxs("div", { className: cx$d("select-jobs-section"), children: [
-        /* @__PURE__ */ jsxs("div", { className: cx$d("category-section"), children: [
+      activeTab === "jobCode" && /* @__PURE__ */ jsxs("div", { className: cx$g("select-jobs-section"), children: [
+        /* @__PURE__ */ jsxs("div", { className: cx$g("category-section"), children: [
           /* @__PURE__ */ jsx(
             Select,
             {
@@ -920,7 +922,7 @@ const FormTextField = ({
   );
 };
 
-const cx$c = classNames.bind(styles$1);
+const cx$f = classNames.bind(styles$1);
 const StepIndicator = ({
   items,
   onClickItem,
@@ -955,26 +957,26 @@ const StepIndicator = ({
       ModalUtils.alert("\uC774\uC804 \uB2E8\uACC4\uB97C \uBAA8\uB450 \uC644\uB8CC\uD574\uC57C \uC120\uD0DD\uD55C \uB2E8\uACC4\uB85C\n\uC774\uB3D9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.", "\uC774\uC804 \uB2E8\uACC4\uB97C \uBA3C\uC800 \uC9C4\uD589\uD574\uC8FC\uC138\uC694");
     }
   };
-  return /* @__PURE__ */ jsxs("div", { className: cx$c("stepper-layout", { loading: isLoading }), children: [
-    /* @__PURE__ */ jsx("div", { className: cx$c("stepper"), children: steps.map((item, idx) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+  return /* @__PURE__ */ jsxs("div", { className: cx$f("stepper-layout", { loading: isLoading }), children: [
+    /* @__PURE__ */ jsx("div", { className: cx$f("stepper"), children: steps.map((item, idx) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: cx$c(
+          className: cx$f(
             "circle",
             { completed: item.isCompleted ?? false },
             { active: defaultValue === item.value || current === idx }
           ),
           onClick: () => handleClickStep?.(item),
-          children: item.isCompleted ? /* @__PURE__ */ jsx("span", { className: cx$c("completed-icon") }) : idx + 1
+          children: item.isCompleted ? /* @__PURE__ */ jsx("span", { className: cx$f("completed-icon") }) : idx + 1
         }
       ),
-      idx < steps.length - 1 && Array.from({ length: dotCount }).map((_, dotIdx) => /* @__PURE__ */ jsx("span", { className: cx$c("dot") }, `dot-${idx}-${dotIdx}`))
+      idx < steps.length - 1 && Array.from({ length: dotCount }).map((_, dotIdx) => /* @__PURE__ */ jsx("span", { className: cx$f("dot") }, `dot-${idx}-${dotIdx}`))
     ] }, `num-${idx}`)) }),
-    /* @__PURE__ */ jsx("ul", { className: cx$c("step-labels"), children: steps.map((item, idx) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("ul", { className: cx$f("step-labels"), children: steps.map((item, idx) => /* @__PURE__ */ jsx(
       "li",
       {
-        className: cx$c(
+        className: cx$f(
           { completed: steps[idx < 1 ? idx : idx - 1]?.isCompleted ?? false },
           { active: defaultValue === item.value || current === idx }
         ),
@@ -986,7 +988,7 @@ const StepIndicator = ({
   ] });
 };
 
-const cx$b = classNames.bind(styles$2);
+const cx$e = classNames.bind(styles$2);
 function Attachment({
   photos,
   onAddPhoto,
@@ -1003,14 +1005,14 @@ function Attachment({
   };
   const renderPhotoSingle = () => {
     if (photos.length === 0) {
-      return /* @__PURE__ */ jsx("div", { className: cx$b("single-photo-item", "add-photo-item"), children: /* @__PURE__ */ jsxs("button", { className: cx$b("add-photo-button-single"), onClick: handleAddPhoto, children: [
+      return /* @__PURE__ */ jsx("div", { className: cx$e("single-photo-item", "add-photo-item"), children: /* @__PURE__ */ jsxs("button", { className: cx$e("add-photo-button-single"), onClick: handleAddPhoto, children: [
         /* @__PURE__ */ jsx(IconIllustCamera, {}),
         /* @__PURE__ */ jsx("span", { children: buttonText || "\uC0AC\uC9C4 \uCCA8\uBD80\uD558\uAE30" })
       ] }) });
     }
-    return photos.map((photo) => /* @__PURE__ */ jsxs("div", { className: cx$b("single-photo-item"), children: [
-      /* @__PURE__ */ jsx("div", { className: cx$b("photo-placeholder"), children: /* @__PURE__ */ jsx("img", { src: photo.src, alt: photo.name, className: cx$b("photo-image") }) }),
-      /* @__PURE__ */ jsx("button", { className: cx$b("remove-button"), onClick: () => handleRemovePhoto(photo.id), "aria-label": "\uC0AC\uC9C4 \uC0AD\uC81C", children: "\xD7" })
+    return photos.map((photo) => /* @__PURE__ */ jsxs("div", { className: cx$e("single-photo-item"), children: [
+      /* @__PURE__ */ jsx("div", { className: cx$e("photo-placeholder"), children: /* @__PURE__ */ jsx("img", { src: photo.src, alt: photo.name, className: cx$e("photo-image") }) }),
+      /* @__PURE__ */ jsx("button", { className: cx$e("remove-button"), onClick: () => handleRemovePhoto(photo.id), "aria-label": "\uC0AC\uC9C4 \uC0AD\uC81C", children: "\xD7" })
     ] }, photo.id));
   };
   const renderPhotoGrid = () => {
@@ -1018,12 +1020,12 @@ function Attachment({
     const gridItems = [];
     if (photos.length < maxPhotos) {
       gridItems.push(
-        /* @__PURE__ */ jsx("div", { className: cx$b("photo-item", "add-photo-item"), children: /* @__PURE__ */ jsxs("button", { className: cx$b("add-photo-button"), onClick: handleAddPhoto, children: [
+        /* @__PURE__ */ jsx("div", { className: cx$e("photo-item", "add-photo-item"), children: /* @__PURE__ */ jsxs("button", { className: cx$e("add-photo-button"), onClick: handleAddPhoto, children: [
           /* @__PURE__ */ jsx(IconIllustCamera, {}),
           /* @__PURE__ */ jsx("span", { children: buttonText || "\uCCA8\uBD80\uD558\uAE30" }),
-          /* @__PURE__ */ jsxs("span", { className: cx$b("photo-count"), children: [
+          /* @__PURE__ */ jsxs("span", { className: cx$e("photo-count"), children: [
             "(",
-            /* @__PURE__ */ jsx("span", { className: cx$b("photo-count-number"), children: photos.length }),
+            /* @__PURE__ */ jsx("span", { className: cx$e("photo-count-number"), children: photos.length }),
             "/",
             maxPhotos,
             ")"
@@ -1033,9 +1035,9 @@ function Attachment({
     }
     photos.forEach((photo) => {
       gridItems.push(
-        /* @__PURE__ */ jsxs("div", { className: cx$b("photo-item"), children: [
-          /* @__PURE__ */ jsx("div", { className: cx$b("photo-placeholder"), children: /* @__PURE__ */ jsx("img", { src: photo.src, alt: photo.name, className: cx$b("photo-image") }) }),
-          /* @__PURE__ */ jsx("button", { className: cx$b("remove-button"), onClick: () => handleRemovePhoto(photo.id), "aria-label": "\uC0AC\uC9C4 \uC0AD\uC81C", children: "\xD7" })
+        /* @__PURE__ */ jsxs("div", { className: cx$e("photo-item"), children: [
+          /* @__PURE__ */ jsx("div", { className: cx$e("photo-placeholder"), children: /* @__PURE__ */ jsx("img", { src: photo.src, alt: photo.name, className: cx$e("photo-image") }) }),
+          /* @__PURE__ */ jsx("button", { className: cx$e("remove-button"), onClick: () => handleRemovePhoto(photo.id), "aria-label": "\uC0AC\uC9C4 \uC0AD\uC81C", children: "\xD7" })
         ] }, photo.id)
       );
     });
@@ -1046,9 +1048,9 @@ function Attachment({
     return null;
   }
   if (type === "single") {
-    return /* @__PURE__ */ jsx("div", { className: cx$b("photo-single"), children: renderPhotoSingle() });
+    return /* @__PURE__ */ jsx("div", { className: cx$e("photo-single"), children: renderPhotoSingle() });
   }
-  return /* @__PURE__ */ jsx("div", { className: cx$b("photo-grid", { linear: type === "linear" }), children: renderPhotoGrid() });
+  return /* @__PURE__ */ jsx("div", { className: cx$e("photo-grid", { linear: type === "linear" }), children: renderPhotoGrid() });
 }
 
 const maxImageSize = 3 * 1024 * 1024;
@@ -1495,12 +1497,12 @@ function useCanvasPaint(paintProps = {}) {
 
 const testSignatureBase64Data = "data:image/png;base64,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";
 
-const cx$a = classNames.bind(styles$3);
-const { InputBox: InputBox$1, Input: Input$1 } = FormCore;
+const cx$d = classNames.bind(styles$3);
+const { InputBox: InputBox$3, Input: Input$3 } = FormCore;
 const AddressSearchInitialText = () => {
-  return /* @__PURE__ */ jsxs("div", { className: cx$a("search-result-list"), children: [
-    /* @__PURE__ */ jsx("p", { className: cx$a("guide-title"), children: "\uC774\uB807\uAC8C \uAC80\uC0C9\uD574 \uBCF4\uC138\uC694." }),
-    /* @__PURE__ */ jsxs("ul", { className: cx$a("guide"), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cx$d("search-result-list"), children: [
+    /* @__PURE__ */ jsx("p", { className: cx$d("guide-title"), children: "\uC774\uB807\uAC8C \uAC80\uC0C9\uD574 \uBCF4\uC138\uC694." }),
+    /* @__PURE__ */ jsxs("ul", { className: cx$d("guide"), children: [
       /* @__PURE__ */ jsx("li", { children: "\uB3C4\uB85C\uBA85/\uC9C0\uBA85\uACFC \uAC74\uBB3C\uBC88\uD638\uB97C \uD568\uAED8 \uC785\uB825\uD574\uC8FC\uC138\uC694" }),
       /* @__PURE__ */ jsx("li", { children: "\uC608) 63\uB85C 50, \uC5EC\uC758\uB3C4\uB3D9 60" }),
       /* @__PURE__ */ jsx("li", { children: "\uC9C0\uBA85\uC740 \uB3D9/\uC74D/\uBA74/\uB9AC\uB85C \uC785\uB825\uD574\uC8FC\uC138\uC694" }),
@@ -1516,8 +1518,8 @@ const AddressSearchResult = ({
   searchKeyword,
   selectedAddress
 }) => {
-  return /* @__PURE__ */ jsxs("div", { className: cx$a("search-result-list"), children: [
-    /* @__PURE__ */ jsxs("p", { className: cx$a("guide-title"), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cx$d("search-result-list"), children: [
+    /* @__PURE__ */ jsxs("p", { className: cx$d("guide-title"), children: [
       "\uCD1D ",
       /* @__PURE__ */ jsx("span", { className: "text-primary", children: addressSearchList.length }),
       "\uAC74\uC758 \uAC80\uC0C9\uACB0\uACFC"
@@ -1529,15 +1531,15 @@ const AddressSearchResult = ({
           return {
             value: JSON.stringify(item),
             select: item.roadNameBaseAddress === selectedAddress?.roadNameBaseAddress && item.roadNameDetailAddress === selectedAddress?.roadNameDetailAddress && item.mainBuildingName === selectedAddress?.mainBuildingName,
-            label: /* @__PURE__ */ jsxs("div", { className: cx$a("search-result"), children: [
-              /* @__PURE__ */ jsx("div", { className: cx$a("zipcode"), children: highlightOnSearchKeyword$1(`${item.firstPostalCode}${item.secondPostalCode}`, searchKeyword) }),
-              /* @__PURE__ */ jsx("div", { className: cx$a("divider") }),
-              /* @__PURE__ */ jsxs("div", { className: cx$a("address-info"), children: [
-                /* @__PURE__ */ jsx("span", { className: cx$a("address"), children: highlightOnSearchKeyword$1(
+            label: /* @__PURE__ */ jsxs("div", { className: cx$d("search-result"), children: [
+              /* @__PURE__ */ jsx("div", { className: cx$d("zipcode"), children: highlightOnSearchKeyword$1(`${item.firstPostalCode}${item.secondPostalCode}`, searchKeyword) }),
+              /* @__PURE__ */ jsx("div", { className: cx$d("divider") }),
+              /* @__PURE__ */ jsxs("div", { className: cx$d("address-info"), children: [
+                /* @__PURE__ */ jsx("span", { className: cx$d("address"), children: highlightOnSearchKeyword$1(
                   `${item.roadNameBaseAddress} ${item.roadNameDetailAddress} ${item.mainBuildingName}`,
                   searchKeyword
                 ) }),
-                /* @__PURE__ */ jsx("span", { className: cx$a("old-address"), children: highlightOnSearchKeyword$1(
+                /* @__PURE__ */ jsx("span", { className: cx$d("old-address"), children: highlightOnSearchKeyword$1(
                   `${item.landNumberBaseAddress} ${item.landNumberDetailAddress}`,
                   searchKeyword
                 ) })
@@ -1546,7 +1548,7 @@ const AddressSearchResult = ({
             id: JSON.stringify(item)
           };
         }),
-        className: cx$a("radio-group"),
+        className: cx$d("radio-group"),
         name: "address-search",
         size: "medium",
         defaultValue: "",
@@ -1568,7 +1570,7 @@ const AddressSearchDetailInput = ({
   detailAddressInput
 }) => {
   const { land, road } = selectedStandardizationAddress;
-  return /* @__PURE__ */ jsxs("div", { className: cx$a("search-result-list"), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cx$d("search-result-list"), children: [
     /* @__PURE__ */ jsx(
       Radio.Root,
       {
@@ -1578,21 +1580,21 @@ const AddressSearchDetailInput = ({
         children: /* @__PURE__ */ jsx(
           Radio.Item,
           {
-            className: cx$a("radio-group"),
+            className: cx$d("radio-group"),
             value: JSON.stringify(selectedStandardizationAddress),
             onChange: onStandardizationChange,
-            children: /* @__PURE__ */ jsxs("div", { className: cx$a("search-result"), children: [
+            children: /* @__PURE__ */ jsxs("div", { className: cx$d("search-result"), children: [
               /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: cx$a("zipcode"),
+                  className: cx$d("zipcode"),
                   children: `${selectedStandardizationAddress.land?.firstPostalCode}${land?.secondPostalCode}`
                 }
               ),
-              /* @__PURE__ */ jsx("div", { className: cx$a("divider") }),
-              /* @__PURE__ */ jsxs("div", { className: cx$a("address-info"), children: [
-                /* @__PURE__ */ jsx("span", { className: cx$a("address"), children: `${road?.baseAddress} ${road?.detailAddress}` }),
-                /* @__PURE__ */ jsx("span", { className: cx$a("old-address"), children: `${land?.baseAddress} ${land?.detailAddress}` })
+              /* @__PURE__ */ jsx("div", { className: cx$d("divider") }),
+              /* @__PURE__ */ jsxs("div", { className: cx$d("address-info"), children: [
+                /* @__PURE__ */ jsx("span", { className: cx$d("address"), children: `${road?.baseAddress} ${road?.detailAddress}` }),
+                /* @__PURE__ */ jsx("span", { className: cx$d("old-address"), children: `${land?.baseAddress} ${land?.detailAddress}` })
               ] })
             ] })
           }
@@ -1649,8 +1651,8 @@ function AddressComponent({ isOpen, onClose, setValue }) {
     /* @__PURE__ */ jsxs(Modal.Content, { children: [
       /* @__PURE__ */ jsx(Modal.Header, { headerTitle: "\uC8FC\uC18C \uAC80\uC0C9", showCloseButton: true }),
       /* @__PURE__ */ jsxs(Modal.Body, { children: [
-        /* @__PURE__ */ jsx(InputBox$1, { clearable: true, endElement: /* @__PURE__ */ jsx(IconMainUiSearch, { onClick: search }), onClear: onAddressSearchClear, children: /* @__PURE__ */ jsx(
-          Input$1,
+        /* @__PURE__ */ jsx(InputBox$3, { clearable: true, endElement: /* @__PURE__ */ jsx(IconMainUiSearch, { onClick: search }), onClear: onAddressSearchClear, children: /* @__PURE__ */ jsx(
+          Input$3,
           {
             ...addressSearchStep !== "detail-input" && { autoFocus: true },
             onChange: onSearch,
@@ -2252,143 +2254,898 @@ function BankStockSearchModal({ open, onClose, onSelect }) {
   ] });
 }
 
-const cx$9 = classNames.bind(styles$5);
-function OrganizationSearchResult({
-  filteredOrganizations,
-  onOrganizationSelect
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: cx$9("result-section"), children: [
-    /* @__PURE__ */ jsxs("p", { className: cx$9("result-title"), children: [
+const useCustomerSearch = (onSelect) => {
+  const { triggerRef, isOpen, setIsOpen, DropDown } = useDropDown();
+  const [searchKeyword, setSearchKeyword] = useState("");
+  const [searchInput, setSearchInput] = useState("");
+  const [customerList, setCustomerList] = useState([]);
+  const [selectedCustomer, setSelectedCustomer] = useState(null);
+  const { data } = useSearchCustomerListQuery({ customerName: searchKeyword });
+  const search = () => {
+    if (searchInput.length >= 2) {
+      setSearchKeyword(searchInput);
+      const filtered = data?.data?.custList?.filter(
+        (c) => c.customerName?.toLowerCase().includes(searchInput.toLowerCase())
+      );
+      setCustomerList(filtered || []);
+      setIsOpen(true);
+    } else {
+      setCustomerList([]);
+      setSearchKeyword("");
+      setIsOpen(false);
+    }
+  };
+  const onKeyUp = (e) => {
+    if (e.key === "Enter") {
+      search();
+    }
+  };
+  const onSearchInputChange = (e) => {
+    setSearchInput(e.target.value);
+    if (e.target.value.length < 2) {
+      setCustomerList([]);
+      setSearchKeyword("");
+      setIsOpen(false);
+    }
+  };
+  const onClear = () => {
+    setSearchInput("");
+    setSearchKeyword("");
+    setCustomerList([]);
+    setSelectedCustomer(null);
+    setIsOpen(false);
+  };
+  const handleSelectItem = (customer) => {
+    setSelectedCustomer(customer);
+    setSearchInput(customer.customerName || "");
+    setCustomerList([]);
+    setIsOpen(false);
+    if (onSelect) {
+      onSelect(customer);
+    }
+  };
+  return {
+    triggerRef,
+    isOpen,
+    DropDown,
+    searchInput,
+    customerList,
+    searchKeyword,
+    onSearchInputChange,
+    onKeyUp,
+    search,
+    onClear,
+    handleSelectItem,
+    selectedCustomer,
+    setSearchInput,
+    setCustomerList,
+    setSearchKeyword,
+    setIsOpen
+  };
+};
+
+const cx$c = classNames.bind(styles$5);
+const highlightOnSearchKeyword = (originalText, targetString) => {
+  if (!targetString || !originalText?.includes(targetString)) {
+    return originalText;
+  }
+  const replacedText = [];
+  const splitText = originalText.split(targetString);
+  for (let i = 0; i < splitText.length; i++) {
+    replacedText.push(splitText[i] || "");
+    if (i < splitText.length - 1) {
+      replacedText.push(
+        /* @__PURE__ */ jsx("span", { className: "text-primary", children: targetString }, i)
+      );
+    }
+  }
+  return replacedText;
+};
+const { InputBox: InputBox$2, Input: Input$2 } = FormCore;
+const CustomerSearch = ({ onSelect }) => {
+  const {
+    triggerRef,
+    isOpen,
+    DropDown,
+    searchInput,
+    customerList,
+    searchKeyword,
+    onSearchInputChange,
+    onKeyUp,
+    search,
+    onClear,
+    handleSelectItem
+  } = useCustomerSearch(onSelect);
+  return /* @__PURE__ */ jsxs("div", { className: cx$c("container"), children: [
+    /* @__PURE__ */ jsx("div", { className: cx$c("search-bar"), children: /* @__PURE__ */ jsx(InputBox$2, { endElement: /* @__PURE__ */ jsx(IconMainUiSearch, { onClick: search }), onClear, clearable: true, children: /* @__PURE__ */ jsx(
+      Input$2,
+      {
+        onChange: onSearchInputChange,
+        onKeyUp,
+        value: searchInput,
+        placeholder: "\uACE0\uAC1D\uBA85\uC744 \uB450 \uAE00\uC790 \uC774\uC0C1 \uC785\uB825\uD574\uC8FC\uC138\uC694.",
+        size: "large",
+        ref: triggerRef
+      }
+    ) }) }),
+    isOpen && customerList.length > 0 && /* @__PURE__ */ jsx(DropDown, { children: /* @__PURE__ */ jsx("div", { className: cx$c("result-container"), children: /* @__PURE__ */ jsx(List, { children: customerList.map((customer) => /* @__PURE__ */ jsx(ListItem, { onClick: () => handleSelectItem(customer), selectable: true, children: /* @__PURE__ */ jsxs("div", { className: cx$c("customer-item"), children: [
+      /* @__PURE__ */ jsx("div", { className: cx$c("name"), children: highlightOnSearchKeyword(customer.customerName || "", searchKeyword) }),
+      /* @__PURE__ */ jsxs("div", { className: cx$c("details"), children: [
+        /* @__PURE__ */ jsx("span", { children: customer.birthDate }),
+        /* @__PURE__ */ jsx("span", { className: cx$c("separator"), children: "|" }),
+        /* @__PURE__ */ jsx("span", { children: customer.genderCode }),
+        customer.baseAddress && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: cx$c("separator"), children: "|" }),
+          /* @__PURE__ */ jsx("span", { children: customer.baseAddress })
+        ] })
+      ] })
+    ] }) }, customer.customerId)) }) }) })
+  ] });
+};
+
+const cx$b = classNames.bind(styles$6);
+const { InputBox: InputBox$1, Input: Input$1 } = FormCore;
+const favoriteList = [
+  {
+    nationalityCode: "KR",
+    nationalityCodeName: "\uB300\uD55C\uBBFC\uAD6D",
+    isoNumberNationalityCode: "410",
+    nationalityEnglishAbbreviationName: "KOR"
+  },
+  {
+    nationalityCode: "CN",
+    nationalityCodeName: "\uC911\uAD6D",
+    isoNumberNationalityCode: "156",
+    nationalityEnglishAbbreviationName: "CHN"
+  },
+  {
+    nationalityCode: "VN",
+    nationalityCodeName: "\uBCA0\uD2B8\uB0A8",
+    isoNumberNationalityCode: "704",
+    nationalityEnglishAbbreviationName: "VNM"
+  },
+  {
+    nationalityCode: "US",
+    nationalityCodeName: "\uBBF8\uAD6D",
+    isoNumberNationalityCode: "840",
+    nationalityEnglishAbbreviationName: "USA"
+  },
+  {
+    nationalityCode: "RU",
+    nationalityCodeName: "\uB7EC\uC2DC\uC544",
+    isoNumberNationalityCode: "643",
+    nationalityEnglishAbbreviationName: "RUS"
+  }
+];
+const NationalitySearchInitialText = ({
+  setSearchInput,
+  setSearchKeyword
+}) => {
+  const set = (keyword) => {
+    setSearchInput(keyword);
+    setSearchKeyword(keyword);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cx$b("favorite-container"), children: [
+    /* @__PURE__ */ jsx("p", { className: cx$b("favorite-title"), children: "\uB9CE\uC774 \uCC3E\uB294 \uAD6D\uC801" }),
+    /* @__PURE__ */ jsx("ul", { className: cx$b("favorite"), children: favoriteList.map((item) => /* @__PURE__ */ jsx("li", { onClick: () => set(item.nationalityCodeName), children: /* @__PURE__ */ jsx("button", { children: item.nationalityCodeName }) }, item.nationalityCode)) })
+  ] });
+};
+const NationalitySearchResult = ({ nationalityList, searchKeyWord, onSelect }) => {
+  const [filterList, setFilterList] = useState([]);
+  useEffect(() => {
+    const filterList2 = nationalityList.filter((item) => item.nationalityCodeName.includes(searchKeyWord)) || [];
+    setFilterList(filterList2);
+  }, [nationalityList, searchKeyWord]);
+  return /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
+    /* @__PURE__ */ jsxs("p", { className: cx$b("favorite-title"), children: [
       "\uCD1D ",
-      /* @__PURE__ */ jsx("span", { className: "text-primary", children: filteredOrganizations.length }),
+      /* @__PURE__ */ jsx("span", { className: "text-primary", children: filterList.length }),
       "\uAC74\uC758 \uAC80\uC0C9\uACB0\uACFC"
     ] }),
-    filteredOrganizations.length > 0 ? /* @__PURE__ */ jsxs(Table, { variant: "horizontal", children: [
-      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-        /* @__PURE__ */ jsx("th", { className: cx$9("th-padding"), children: "\uC120\uD0DD" }),
-        /* @__PURE__ */ jsx("th", { className: cx$9("th-padding"), children: "\uAE30\uAD00\uCF54\uB4DC" }),
-        /* @__PURE__ */ jsx("th", { className: cx$9("th-padding"), children: "\uAE30\uAD00\uBA85" })
-      ] }) }),
-      /* @__PURE__ */ jsx("tbody", { children: filteredOrganizations.map((organization) => {
-        return /* @__PURE__ */ jsxs("tr", { children: [
-          /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "radio",
-              name: "organization",
-              value: organization.organizationCode || "",
-              onChange: () => onOrganizationSelect(organization)
-            }
-          ) }),
-          /* @__PURE__ */ jsx("td", { children: organization.organizationCode }),
-          /* @__PURE__ */ jsx("td", { children: organization.organizationName })
-        ] }, organization.organizationCode);
-      }) })
-    ] }) : /* @__PURE__ */ jsxs(Table, { variant: "horizontal", children: [
-      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-        /* @__PURE__ */ jsx("th", { className: cx$9("th-padding"), children: "\uC120\uD0DD" }),
-        /* @__PURE__ */ jsx("th", { className: cx$9("th-padding"), children: "\uAE30\uAD00\uCF54\uB4DC" }),
-        /* @__PURE__ */ jsx("th", { className: cx$9("th-padding"), children: "\uAE30\uAD00\uBA85" })
-      ] }) }),
-      /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: 3, children: /* @__PURE__ */ jsxs("div", { className: cx$9("no-result"), children: [
-        /* @__PURE__ */ jsx(IconGraphicsFeedbackEmpty, {}),
-        /* @__PURE__ */ jsx("p", { children: "\uC870\uD68C \uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }),
-        /* @__PURE__ */ jsx("p", { children: "\uC785\uB825\uD55C \uC815\uBCF4\uB97C \uB2E4\uC2DC \uD655\uC778\uD574\uC8FC\uC138\uC694." })
-      ] }) }) }) })
+    /* @__PURE__ */ jsx("ul", { className: cx$b("favorite"), children: filterList.length > 0 && filterList.map((item, index) => {
+      return /* @__PURE__ */ jsx("li", { onClick: () => onSelect(item.nationalityCodeName), children: /* @__PURE__ */ jsx("button", { children: highlightOnSearchKeyword$1(item.nationalityCodeName, searchKeyWord) }) }, `${index}-${item.nationalityCode}`);
+    }) }),
+    filterList.length === 0 && /* @__PURE__ */ jsxs("div", { className: cx$b("search-result"), children: [
+      "`",
+      /* @__PURE__ */ jsx("span", { className: "text-primary", children: searchKeyWord }),
+      "`\uC5D0 \uB300\uD55C \uAC80\uC0C9\uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
     ] })
   ] });
-}
-
-const { TextField: TextField$2 } = FormField;
-const cx$8 = classNames.bind(styles$5);
-function OrganizationSearch({
-  searchTerm,
-  setSearchTerm,
-  searchInput,
-  setSearchInput,
-  organizationList,
-  onOrganizationSelect
-}) {
-  const handleSearch = () => {
-    setSearchTerm(searchInput);
-  };
-  const handleReset = () => {
-    setSearchTerm("");
-    setSearchInput("");
-  };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: cx$8("search-section"), children: /* @__PURE__ */ jsxs("div", { className: cx$8("search-filters"), children: [
-      /* @__PURE__ */ jsxs("div", { className: cx$8("search-filter-section"), children: [
-        /* @__PURE__ */ jsx(FormField.Label, { className: "subtitle3 text-body-1", children: "\uAE30\uAD00\uBA85/\uCF54\uB4DC" }),
+};
+function NationalityComponent({ isOpen, onClose, setValue }) {
+  const {
+    search,
+    onClear,
+    searchKeyWord,
+    onKeyUp,
+    onSearch,
+    searchList,
+    searchInput,
+    onSelect,
+    setSearchInput,
+    setSearchKeyword
+  } = useSearchNationality({
+    setValue,
+    onClose,
+    isOpen
+  });
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Modal.Root, { isOpen, onClose, modalSize: "full-screen", children: [
+    /* @__PURE__ */ jsx(Modal.Overlay, {}),
+    /* @__PURE__ */ jsxs(Modal.Content, { children: [
+      /* @__PURE__ */ jsx(Modal.Header, { headerTitle: "\uAD6D\uC801 \uAC80\uC0C9", showCloseButton: true }),
+      /* @__PURE__ */ jsxs(Modal.Body, { children: [
         /* @__PURE__ */ jsx(
-          TextField$2,
+          InputBox$1,
           {
-            value: searchInput,
-            onChange: (e) => setSearchInput(e.target.value),
-            size: "medium",
-            onKeyUp: (e) => e.key === "Enter" && handleSearch(),
-            rootProps: {
-              className: cx$8("search-input"),
-              clearable: true,
-              onClear: handleReset
-            }
+            clearable: true,
+            endElement: /* @__PURE__ */ jsx("button", { children: /* @__PURE__ */ jsx(IconMainUiSearch, { onClick: search }) }),
+            onClear,
+            className: cx$b("search-input"),
+            children: /* @__PURE__ */ jsx(
+              Input$1,
+              {
+                onChange: onSearch,
+                onKeyUp,
+                placeholder: "\uC9C0\uBC88, \uB3C4\uB85C\uBA85, \uAC74\uBB3C\uBA85, \uC6B0\uD3B8\uBC88\uD638 \uC785\uB825",
+                size: "large",
+                value: searchInput
+              }
+            )
           }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: cx$8("search-buttons"), children: [
-        /* @__PURE__ */ jsx(Button, { appearance: "outline", size: "medium", variant: "secondary", onClick: handleReset, children: "\uCD08\uAE30\uD654" }),
-        /* @__PURE__ */ jsx(Button, { appearance: "filled", size: "medium", variant: "primary", onClick: handleSearch, children: "\uC870\uD68C" })
+        ),
+        !searchKeyWord && /* @__PURE__ */ jsx(NationalitySearchInitialText, { setSearchInput, setSearchKeyword }),
+        searchKeyWord && /* @__PURE__ */ jsx(NationalitySearchResult, { nationalityList: searchList, searchKeyWord, onSelect })
       ] })
-    ] }) }),
-    /* @__PURE__ */ jsx("div", { className: cx$8("divider") }),
-    searchTerm && /* @__PURE__ */ jsx(
-      OrganizationSearchResult,
-      {
-        filteredOrganizations: organizationList,
-        onOrganizationSelect,
-        searchTerm
-      }
-    )
-  ] });
+    ] })
+  ] }) });
 }
 
-const OrganizationSearchModal = ({ isOpen, onClose, onSelect }) => {
-  const [selectedOrganization, setSelectedOrganization] = useState(null);
-  const [searchTerm, setSearchTerm] = useState("");
+function useSearchNationality({ setValue, onClose, isOpen }) {
+  const [searchKeyWord, setSearchKeyword] = useState("");
+  const [selectedNationality, setSelectedNationality] = useState();
   const [searchInput, setSearchInput] = useState("");
-  const { data } = useSearchOrganizationQuery({
-    searchWord: searchTerm
-  });
-  const [organizationList, setOrganizationList] = useState([]);
-  useEffect(() => {
-    if (data?.data) {
-      setOrganizationList(data.data);
-    } else {
-      setOrganizationList([]);
+  const { data } = useSearchNationalityQuery({ searchKeyWord });
+  const searchList = data?.data.nationalityList || [];
+  const onSearch = (e) => {
+    const typeStr = e.target.value;
+    setSearchInput(typeStr);
+  };
+  const search = () => {
+    if (searchInput === "") {
+      onClear();
+      return;
+    }
+    if (searchInput && searchInput.length > 0) {
+      setSearchKeyword(searchInput);
+      setSelectedNationality("");
+    }
+  };
+  const onKeyUp = (e) => {
+    const currentValue = e.target.value;
+    if (currentValue.length === 0 || currentValue.slice(-1).normalize("NFD").length > 1) {
+      search();
+    }
+  };
+  const onClear = useCallback(() => {
+    setSearchKeyword("");
+    setSearchInput("");
+    setSelectedNationality("");
+  }, []);
+  const onSelect = (nationality) => {
+    setSelectedNationality(nationality);
+    const value = searchList.find((item) => item.nationalityCodeName === nationality);
+    value && setValue(value);
+    onClose();
+  };
+  useEffect(() => {
+    if (isOpen) {
+      setSelectedNationality("");
+      setSearchKeyword("");
+    }
+  }, [isOpen]);
+  return {
+    onClear,
+    searchKeyWord,
+    searchList,
+    selectedNationality,
+    onSearch,
+    onKeyUp,
+    search,
+    searchInput,
+    onSelect,
+    setSearchKeyword,
+    setSearchInput
+  };
+}
+const useNationalityComponent = () => {
+  const [nationality, setNationality] = useState();
+  const { isOpen, closeModal, openModal } = useModalState();
+  const NationalitySearchComponent = () => /* @__PURE__ */ jsx(NationalityComponent, { isOpen, onClose: closeModal, setValue: setNationality });
+  return {
+    nationality,
+    openModal,
+    NationalitySearchComponent
+  };
+};
+
+const url = (() => {
+  const type = isClient() ? window.location.hostname : "";
+  if (type.includes("localhost")) {
+    return "https://nxl-nlc-stg.hanwhalife.com";
+  }
+  if (type.includes("dev")) {
+    return "https://nxl-nlc-dev.hanwhalife.com";
+  } else if (type.includes("stg")) {
+    return "https://nxl-nlc-stg.hanwhalife.com";
+  } else {
+    return "https://nxl-nlc.hanwhalife.com";
+  }
+})();
+function useNxlOne({ bizCode, tmplCode, ncsrInfoUuid, nlcCtfnId, t }) {
+  const buildUrl = useCallback(() => {
+    const targetUrl = new URL("/auth/v1", url);
+    targetUrl.searchParams.set("bizCode", bizCode);
+    targetUrl.searchParams.set("tmplCode", tmplCode);
+    if (nlcCtfnId) {
+      targetUrl.searchParams.set("nlcCtfnId", nlcCtfnId);
+    }
+    if (t) {
+      targetUrl.searchParams.set("t", t);
+    }
+    if (ncsrInfoUuid) {
+      targetUrl.searchParams.set("ncsrInfoUuid", ncsrInfoUuid);
+    }
+    return targetUrl.toString();
+  }, [bizCode, tmplCode, ncsrInfoUuid, nlcCtfnId, t]);
+  const redirect = () => {
+    const targetUrl = buildUrl();
+    location.href = targetUrl;
+  };
+  const open = async (options) => {
+    return new Promise((resolve, reject) => {
+      const targetUrl = buildUrl();
+      console.log("targetUrl", targetUrl);
+      const width = options && options.popupWidth || 720;
+      const height = options && options.popupHeight || 720;
+      const left = options && options.popupLeft || (window.screen.width - width) / 2;
+      const top = options && options.popupTop || (window.screen.height - height) / 2;
+      const popupFeatures = `width=${width},height=${height},left=${left},top=${top}`;
+      const popup = window.open(targetUrl, options && options.windowName || "_self_cert", popupFeatures);
+      if (!popup) {
+        reject(new Error("\uCC28\uB2E8\uB418\uAC70\uB098 \uC5F4\uB9AC\uC9C0 \uC54A\uC558\uC2B5\uB2C8\uB2E4."));
+        return;
+      }
+      const handleMessage = (event) => {
+        if (event.origin !== new URL(targetUrl).origin) {
+          return;
+        }
+        if (event.data) {
+          resolve(event.data);
+        } else {
+          reject(new Error("\uC778\uC99D\uC774 \uCDE8\uC18C\uB418\uAC70\uB098 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4."));
+        }
+        popup.close();
+        window.removeEventListener("message", handleMessage);
+      };
+      window.addEventListener("message", handleMessage);
+    });
+  };
+  const Iframe = function({
+    height = 720,
+    className,
+    style,
+    allow,
+    sandbox = "allow-scripts allow-forms allow-same-origin",
+    onSuccess,
+    onError,
+    onClose,
+    strictOrigin = true
+  }) {
+    const targetUrl = buildUrl();
+    useEffect(() => {
+      if (!onSuccess && !onError) {
+        return;
+      }
+      const handler = (e) => {
+        console.log("message event", e);
+        const d = e.data;
+        if (d) {
+          if (d.action === "close") {
+            onClose?.(d);
+          } else if (d.action === "error") {
+            onError?.(d);
+          } else if (d.action === "complete") {
+            onSuccess?.(d);
+          }
+        } else {
+          onError?.({
+            action: "error",
+            nlcCtfnId: "",
+            redirectUrl: ""
+          });
+        }
+      };
+      window.addEventListener("message", handler);
+      return () => window.removeEventListener("message", handler);
+    }, [onClose, onError, onSuccess, strictOrigin]);
+    return /* @__PURE__ */ jsx(
+      "iframe",
+      {
+        src: targetUrl,
+        width: "100%",
+        height: typeof height === "number" ? `${height}px` : height,
+        style: { border: 0, ...style },
+        className,
+        sandbox,
+        ...allow ? { allow } : {}
+      }
+    );
+  };
+  return { open, redirect, Iframe };
+}
+
+const CODES = {
+  appInit: {
+    dev: {
+      tmplCode: "HST",
+      bizCode: "DPS"
+    },
+    stg: {
+      tmplCode: "R7Y",
+      bizCode: "DPS"
+    }
+  },
+  tabletEformInit: {
+    dev: {
+      tmplCode: "4X2",
+      bizCode: "DET"
+    },
+    stg: {
+      tmplCode: "NO7",
+      bizCode: "DET"
+    }
+  },
+  tabletEformRe: {
+    dev: {
+      tmplCode: "WJ1",
+      bizCode: "DET"
+    },
+    stg: {
+      tmplCode: "WQF",
+      bizCode: "DET"
+    }
+  },
+  tabletEformSubInfo: {
+    dev: {
+      tmplCode: "GJB",
+      bizCode: "DET"
+    },
+    stg: {
+      tmplCode: "C1D",
+      bizCode: "DET"
+    }
+  },
+  smartphoneEformSubInfo: {
+    dev: {
+      tmplCode: "YOQ",
+      bizCode: "DES"
+    },
+    stg: {
+      tmplCode: "FLL",
+      bizCode: "DES"
+    }
+  },
+  smartphoneEformAlimtalkInit: {
+    dev: {
+      tmplCode: "8YA",
+      bizCode: "DES"
+    },
+    stg: {
+      tmplCode: "T9L",
+      bizCode: "DES"
+    }
+  },
+  smartphoneEformAlimtalkRe: {
+    dev: {
+      tmplCode: "NPK",
+      bizCode: "DES"
+    },
+    stg: {
+      tmplCode: "YMV",
+      bizCode: "DES"
+    }
+  },
+  tabletNewCustomer: {
+    dev: {
+      tmplCode: "948",
+      bizCode: "DIS"
+    },
+    stg: {
+      tmplCode: "YQM",
+      bizCode: "DIS"
+    }
+  },
+  tabletNewCustomerLegalRep: {
+    dev: {
+      tmplCode: "SBI",
+      bizCode: "DIS"
+    },
+    stg: {
+      tmplCode: "FB3",
+      bizCode: "DIS"
+    }
+  },
+  tabletCustomerInfoPlanAgreement: {
+    dev: {
+      tmplCode: "QCA",
+      bizCode: "DIS"
+    },
+    stg: {
+      tmplCode: "AST",
+      bizCode: "DIS"
+    }
+  },
+  tabletCustomerInfoProductAgreement: {
+    dev: {
+      tmplCode: "I7K",
+      bizCode: "DIS"
+    },
+    stg: {
+      tmplCode: "XG6",
+      bizCode: "DIS"
+    }
+  }
+};
+function useNxlOneModal({
+  onSuccess = (result) => {
+    console.log("on success", JSON.stringify(result));
+  },
+  onError = (result) => {
+    console.log("on error", JSON.stringify(result));
+  },
+  onClose = (result) => {
+    console.log("on close", JSON.stringify(result));
+  },
+  modalSize = "medium",
+  step = "appInit",
+  env = "stg"
+}) {
+  const { isOpen, openModal, closeModal } = useModalState();
+  const { bizCode, tmplCode } = CODES[step][env];
+  const { Iframe } = useNxlOne({
+    bizCode,
+    tmplCode
+  });
+  return {
+    openNxlOneModal: openModal,
+    closeNxlOneModal: closeModal,
+    isNxlOneModalOpen: isOpen,
+    NxlModalComponent: /* @__PURE__ */ jsxs(Modal.Root, { isOpen, onClose: closeModal, modalSize, children: [
+      /* @__PURE__ */ jsx(Modal.Overlay, {}),
+      /* @__PURE__ */ jsx(Modal.Content, { children: /* @__PURE__ */ jsx(Modal.Body, { raw: true, children: /* @__PURE__ */ jsx(
+        Iframe,
+        {
+          onSuccess,
+          onError,
+          onClose: (result) => {
+            onClose(result);
+            closeModal();
+          }
+        }
+      ) }) })
+    ] })
+  };
+}
+
+const cx$a = classNames.bind(styles$7);
+const { InputBox, Input } = FormCore;
+const VisaSearchInitialText = ({ visaList, onSelect }) => {
+  return /* @__PURE__ */ jsx("div", { className: cx$a("favorite-container"), children: /* @__PURE__ */ jsx("ul", { className: cx$a("favorite"), children: visaList.map((item, index) => {
+    return /* @__PURE__ */ jsx("li", { onClick: () => onSelect(item), children: /* @__PURE__ */ jsx("button", { children: item.integrationCodeValueName }) }, `${index}-${item.integrationCodeValueName}`);
+  }) }) });
+};
+const VisaSearchResult = ({ visaList, searchKeyword, onSelect }) => {
+  const [filterList, setFilterList] = useState([]);
+  useEffect(() => {
+    const filterList2 = visaList.filter((item) => item.integrationCodeValueName?.includes(searchKeyword)) || [];
+    setFilterList(filterList2);
+  }, [visaList, searchKeyword]);
+  return /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
+    /* @__PURE__ */ jsxs("p", { className: cx$a("favorite-title"), children: [
+      "\uCD1D ",
+      /* @__PURE__ */ jsx("span", { className: "text-primary", children: filterList.length }),
+      "\uAC74\uC758 \uAC80\uC0C9\uACB0\uACFC"
+    ] }),
+    /* @__PURE__ */ jsx("ul", { className: cx$a("favorite"), children: filterList.length > 0 && filterList.map((item, index) => {
+      return /* @__PURE__ */ jsx("li", { onClick: () => onSelect(item), children: /* @__PURE__ */ jsx("button", { children: highlightOnSearchKeyword$1(`${item.integrationCodeValueName}`, searchKeyword) }) }, `${index}-${item.integrationCodeValueName}`);
+    }) }),
+    filterList.length === 0 && /* @__PURE__ */ jsxs("div", { className: cx$a("search-result"), children: [
+      "`",
+      /* @__PURE__ */ jsx("span", { className: "text-primary", children: searchKeyword }),
+      "`\uC5D0 \uB300\uD55C \uAC80\uC0C9\uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
+    ] })
+  ] });
+};
+function VisaComponent({ isOpen, onClose, setValue }) {
+  const { search, onClear, searchKeyword, onKeyUp, onSearch, searchList, searchInput, onSelect } = useSearchVisa({
+    setValue,
+    onClose,
+    isOpen
+  });
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Modal.Root, { isOpen, onClose, modalSize: "full-screen", children: [
+    /* @__PURE__ */ jsx(Modal.Overlay, {}),
+    /* @__PURE__ */ jsxs(Modal.Content, { children: [
+      /* @__PURE__ */ jsx(Modal.Header, { headerTitle: "\uCCB4\uB958\uC790\uACA9 \uAC80\uC0C9", showCloseButton: true }),
+      /* @__PURE__ */ jsxs(Modal.Body, { children: [
+        /* @__PURE__ */ jsx(
+          InputBox,
+          {
+            clearable: true,
+            endElement: /* @__PURE__ */ jsx("button", { children: /* @__PURE__ */ jsx(IconMainUiSearch, { onClick: search }) }),
+            onClear,
+            className: cx$a("search-input"),
+            children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                onChange: onSearch,
+                onKeyUp,
+                placeholder: "\uCF54\uB4DC, \uC790\uACA9\uBA85 \uC785\uB825",
+                size: "large",
+                value: searchInput
+              }
+            )
+          }
+        ),
+        !searchKeyword && /* @__PURE__ */ jsx(VisaSearchInitialText, { visaList: searchList, onSelect }),
+        searchKeyword && /* @__PURE__ */ jsx(VisaSearchResult, { visaList: searchList, searchKeyword, onSelect })
+      ] })
+    ] })
+  ] }) });
+}
+
+function useSearchVisa({ setValue, onClose, isOpen }) {
+  const [searchKeyword, setSearchKeyword] = useState("");
+  const [selectedVisa, setSelectedVisa] = useState();
+  const [searchInput, setSearchInput] = useState("");
+  const { data: visaList } = useSearchVisaQuery();
+  const searchList = visaList?.data?.visaStatusList || [];
+  const onSearch = (e) => {
+    const typeStr = e.target.value;
+    setSearchInput(typeStr);
+  };
+  const search = () => {
+    if (searchInput === "") {
+      onClear();
+      return;
+    }
+    if (searchInput && searchInput.length > 0) {
+      setSearchKeyword(searchInput);
+      setSelectedVisa(void 0);
+    }
+  };
+  const onKeyUp = (e) => {
+    if (e.key === "Enter") {
+      search();
+    }
+  };
+  const onClear = useCallback(() => {
+    setSearchKeyword("");
+    setSearchInput("");
+    setSelectedVisa(void 0);
+  }, []);
+  const onSelect = (visa) => {
+    setSelectedVisa(visa);
+    setValue(visa);
+    onClose();
+  };
+  useEffect(() => {
+    if (isOpen) {
+      setSelectedVisa(void 0);
+      setSearchKeyword("");
+    }
+  }, [isOpen]);
+  return {
+    onClear,
+    searchKeyword,
+    searchList,
+    selectedVisa,
+    onSearch,
+    onKeyUp,
+    search,
+    searchInput,
+    onSelect,
+    setSearchKeyword,
+    setSearchInput
+  };
+}
+const useVisaComponent = () => {
+  const [visa, setVisa] = useState();
+  const { isOpen, closeModal, openModal } = useModalState();
+  const VisaSearchComponent = () => /* @__PURE__ */ jsx(VisaComponent, { isOpen, onClose: closeModal, setValue: setVisa });
+  return {
+    visa,
+    openModal,
+    VisaSearchComponent
+  };
+};
+
+const cx$9 = classNames.bind(styles$8);
+function DeaCustomerSearchResult({
+  customerList,
+  onCustomerSelect,
+  selectedCustomer
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cx$9("result-section"), children: [
+    /* @__PURE__ */ jsxs("p", { className: cx$9("result-title"), children: [
+      "\uCD1D ",
+      /* @__PURE__ */ jsx("span", { className: "text-primary", children: customerList.length }),
+      "\uAC74\uC758 \uAC80\uC0C9\uACB0\uACFC"
+    ] }),
+    /* @__PURE__ */ jsxs(Table, { variant: "horizontal", children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("th", { className: cx$9("th-padding"), children: "\uC120\uD0DD" }),
+        /* @__PURE__ */ jsx("th", { className: cx$9("th-padding"), children: "\uACE0\uAC1DID" }),
+        /* @__PURE__ */ jsx("th", { className: cx$9("th-padding"), children: "\uACE0\uAC1D\uBA85" }),
+        /* @__PURE__ */ jsx("th", { className: cx$9("th-padding"), children: "\uC8FC\uBBFC\uB4F1\uB85D\uBC88\uD638" }),
+        /* @__PURE__ */ jsx("th", { className: cx$9("th-padding"), children: "\uC9C1\uC885\uC5C5\uC885\uBA85" }),
+        /* @__PURE__ */ jsx("th", { className: cx$9("th-padding"), children: "\uC804\uD654\uBC88\uD638" }),
+        /* @__PURE__ */ jsx("th", { className: cx$9("th-padding"), children: "\uC8FC\uC18C" })
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { children: customerList.length > 0 ? customerList.map((customer) => /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "radio",
+            name: "customer",
+            value: customer.customerId || "",
+            checked: selectedCustomer?.customerId === customer.customerId,
+            onChange: () => onCustomerSelect(customer)
+          }
+        ) }),
+        /* @__PURE__ */ jsx("td", { children: customer.customerId }),
+        /* @__PURE__ */ jsx("td", { children: customer.customerName }),
+        /* @__PURE__ */ jsx("td", { children: customer.residentNumber }),
+        /* @__PURE__ */ jsx("td", { children: customer.occupationKindName }),
+        /* @__PURE__ */ jsx("td", { children: customer.mobilePhoneNumber }),
+        /* @__PURE__ */ jsx("td", { children: customer.address })
+      ] }, customer.customerId)) : /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: 7, children: /* @__PURE__ */ jsxs("div", { className: cx$9("no-result"), children: [
+        /* @__PURE__ */ jsx(IconGraphicsFeedbackEmpty, {}),
+        /* @__PURE__ */ jsx("p", { children: "\uC870\uD68C \uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }),
+        /* @__PURE__ */ jsx("p", { children: "\uC785\uB825\uD55C \uC815\uBCF4\uB97C \uB2E4\uC2DC \uD655\uC778\uD574\uC8FC\uC138\uC694." })
+      ] }) }) }) })
+    ] })
+  ] });
+}
+
+const { TextField: TextField$2 } = FormField;
+const cx$8 = classNames.bind(styles$8);
+function DeaCustomerSearch({
+  setSearchParams,
+  customerList,
+  onCustomerSelect,
+  selectedCustomer
+}) {
+  const [residentNumber1, setResidentNumber1] = useState("");
+  const [residentNumber2, setResidentNumber2] = useState("");
+  const handleSearch = () => {
+    setSearchParams({ residentNumber: `${residentNumber1}${residentNumber2}` });
+  };
+  const handleReset = () => {
+    setResidentNumber1("");
+    setResidentNumber2("");
+    setSearchParams({});
+  };
+  const onKeyUp = (e) => {
+    e.key === "Enter" && handleSearch();
+  };
+  const onKeyDown = (e) => {
+    if (!(e.key === "Backspace" || !isNaN(parseInt(e.key)))) {
+      e.preventDefault();
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: cx$8("search-section"), children: /* @__PURE__ */ jsxs("div", { className: cx$8("search-filters"), children: [
+      /* @__PURE__ */ jsxs("div", { className: cx$8("search-filter-section"), children: [
+        /* @__PURE__ */ jsx(FormField.Label, { className: "subtitle3 text-body-1", children: "\uACE0\uAC1D \uAD6C\uBD84" }),
+        /* @__PURE__ */ jsx(Select, { value: "personal", placeholder: "\uAC1C\uC778", disabled: true, style: { width: "100px" }, children: /* @__PURE__ */ jsx(Select.Option, { value: "personal", children: "\uAC1C\uC778" }) }),
+        /* @__PURE__ */ jsx(FormField.Label, { className: "subtitle3 text-body-1", children: "\uC8FC\uBBFC\uB4F1\uB85D\uBC88\uD638" }),
+        /* @__PURE__ */ jsx(
+          TextField$2,
+          {
+            value: residentNumber1,
+            maxLength: 6,
+            placeholder: "\uC55E 6\uC790\uB9AC \uC785\uB825",
+            onChange: (e) => setResidentNumber1(e.target.value),
+            size: "medium",
+            onKeyUp,
+            onKeyDown,
+            rootProps: {
+              className: cx$8("search-input"),
+              onClear: () => {
+                setResidentNumber1("");
+              }
+            }
+          }
+        ),
+        "-",
+        /* @__PURE__ */ jsx(
+          TextField$2,
+          {
+            value: residentNumber2,
+            maxLength: 7,
+            placeholder: "\uB4A4 7\uC790\uB9AC \uC785\uB825",
+            onChange: (e) => setResidentNumber2(e.target.value),
+            size: "medium",
+            onKeyDown,
+            onKeyUp,
+            rootProps: {
+              className: cx$8("search-input"),
+              onClear: () => {
+                setResidentNumber2("");
+              }
+            }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: cx$8("search-buttons"), children: [
+        /* @__PURE__ */ jsx(Button, { appearance: "outline", size: "medium", variant: "secondary", onClick: handleReset, children: "\uCD08\uAE30\uD654" }),
+        /* @__PURE__ */ jsx(Button, { appearance: "filled", size: "medium", variant: "primary", onClick: handleSearch, children: "\uC870\uD68C" })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: cx$8("divider") }),
+    /* @__PURE__ */ jsx(
+      DeaCustomerSearchResult,
+      {
+        customerList,
+        onCustomerSelect,
+        selectedCustomer
+      }
+    )
+  ] });
+}
+
+const DeaCustomerSearchModal = ({ isOpen, onClose, onSave }) => {
+  const [selectedCustomer, setSelectedCustomer] = useState(null);
+  const [searchParams, setSearchParams] = useState({});
+  const canSearch = useMemo(() => !!(searchParams.customerName || searchParams.residentNumber), [searchParams]);
+  const { data, isFetching } = useQuery({
+    queryKey: ["deaCustomerSearch", searchParams],
+    queryFn: () => getDspCustomerListMethod(searchParams),
+    enabled: canSearch,
+    retry: false
+  });
+  const [customerList, setCustomerList] = useState([]);
+  useEffect(() => {
+    if (data?.data) {
+      setCustomerList(data.data);
+    } else {
+      setCustomerList([]);
     }
   }, [data]);
-  const handleOrganizationSelect = (organization) => {
-    setSelectedOrganization(organization);
+  useEffect(() => {
+    setSelectedCustomer(null);
+  }, [customerList]);
+  const handleCustomerSelect = (customer) => {
+    setSelectedCustomer(customer);
   };
-  const handleSelect = () => {
-    if (selectedOrganization) {
-      onSelect(selectedOrganization);
+  const handleSave = () => {
+    if (selectedCustomer) {
+      onSave(selectedCustomer);
       onClose();
     }
   };
   return /* @__PURE__ */ jsxs(Modal.Root, { isOpen, onClose, modalSize: "xlarge", children: [
     /* @__PURE__ */ jsx(Modal.Overlay, {}),
     /* @__PURE__ */ jsxs(Modal.Content, { style: { height: "697px" }, children: [
-      /* @__PURE__ */ jsx(Modal.Header, { headerTitle: "\uAE30\uAD00 \uAC80\uC0C9", showCloseButton: true }),
+      /* @__PURE__ */ jsx(Modal.Header, { headerTitle: "\uACE0\uAC1D \uAC80\uC0C9", showCloseButton: true }),
       /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsx(
-        OrganizationSearch,
+        DeaCustomerSearch,
         {
-          searchTerm,
-          setSearchTerm,
-          searchInput,
-          setSearchInput,
-          organizationList,
-          onOrganizationSelect: handleOrganizationSelect
+          setSearchParams,
+          customerList,
+          onCustomerSelect: handleCustomerSelect,
+          selectedCustomer,
+          isLoading: isFetching
         }
       ) }),
       /* @__PURE__ */ jsx(Modal.Footer, { children: /* @__PURE__ */ jsx(
@@ -2398,8 +3155,8 @@ const OrganizationSearchModal = ({ isOpen, onClose, onSelect }) => {
           size: "medium",
           appearance: "filled",
           width: "full",
-          onClick: handleSelect,
-          disabled: !selectedOrganization,
+          onClick: handleSave,
+          disabled: !selectedCustomer,
           children: "\uC800\uC7A5\uD558\uAE30"
         }
       ) })
@@ -2413,7 +3170,7 @@ const EMPLOYEE_SEARCH_TABS = [
   { value: "WKIS", label: "\uB0B4\uADFC" }
 ];
 
-const cx$7 = classNames.bind(styles$6);
+const cx$7 = classNames.bind(styles$9);
 function EmployeeSearchResult({ filteredEmployees, onEmployeeSelect }) {
   return /* @__PURE__ */ jsxs("div", { className: cx$7("result-section"), children: [
     /* @__PURE__ */ jsxs("p", { className: cx$7("result-title"), children: [
@@ -2466,7 +3223,7 @@ function EmployeeSearchResult({ filteredEmployees, onEmployeeSelect }) {
 }
 
 const { TextField: TextField$1 } = FormField;
-const cx$6 = classNames.bind(styles$6);
+const cx$6 = classNames.bind(styles$9);
 function EmployeeSearch({
   activeTab,
   onTabChange,
@@ -2493,7 +3250,7 @@ function EmployeeSearch({
           {
             value: searchInput,
             onChange: (e) => setSearchInput(e.target.value),
-            className: styles$6.searchInput,
+            className: styles$9.searchInput,
             size: "medium",
             onKeyUp: (e) => e.key === "Enter" && handleSearch(),
             rootProps: {
@@ -2510,7 +3267,7 @@ function EmployeeSearch({
           {
             value: activeTab,
             onChange: (value) => onTabChange(value),
-            className: styles$6.select,
+            className: styles$9.select,
             size: "medium",
             children: EMPLOYEE_SEARCH_TABS.map((option) => /* @__PURE__ */ jsx(Select.Option, { value: option.value, children: option.label }, option.value))
           }
@@ -2597,7 +3354,7 @@ const EmployeeSearchModal = ({ isOpen, onClose, onSelect }) => {
   ] });
 };
 
-const cx$5 = classNames.bind(styles$7);
+const cx$5 = classNames.bind(styles$a);
 const JobVehicleSearchGrade = ({ riskGrade, hospitalizationGrade }) => {
   return /* @__PURE__ */ jsxs("div", { className: cx$5("grade-section"), children: [
     /* @__PURE__ */ jsxs("div", { className: cx$5("icon-title"), children: [
@@ -2618,7 +3375,7 @@ const JobVehicleSearchGrade = ({ riskGrade, hospitalizationGrade }) => {
   ] });
 };
 
-const cx$4 = classNames.bind(styles$8);
+const cx$4 = classNames.bind(styles$b);
 function VehicleSearch({ vehicles, onVehicleSelect, selectedVehicle }) {
   return /* @__PURE__ */ jsxs("div", { className: cx$4("vehicle-search-section"), children: [
     /* @__PURE__ */ jsx("p", { children: "\uC6B4\uC804 \uCC28\uC885" }),
@@ -2719,7 +3476,7 @@ const useJobVehicleSearch = () => {
   };
 };
 
-const cx$3 = classNames.bind(styles$7);
+const cx$3 = classNames.bind(styles$a);
 function useJobVehicleSearchModal() {
   const {
     selectedVehicle,
@@ -2817,46 +3574,45 @@ function useJobVehicleSearchModal() {
   };
 }
 
-const cx$2 = classNames.bind(styles$9);
-function DeaCustomerSearchResult({
-  customerList,
-  onCustomerSelect,
-  selectedCustomer
+const cx$2 = classNames.bind(styles$c);
+function OrganizationSearchResult({
+  filteredOrganizations,
+  onOrganizationSelect
 }) {
   return /* @__PURE__ */ jsxs("div", { className: cx$2("result-section"), children: [
     /* @__PURE__ */ jsxs("p", { className: cx$2("result-title"), children: [
       "\uCD1D ",
-      /* @__PURE__ */ jsx("span", { className: "text-primary", children: customerList.length }),
+      /* @__PURE__ */ jsx("span", { className: "text-primary", children: filteredOrganizations.length }),
       "\uAC74\uC758 \uAC80\uC0C9\uACB0\uACFC"
     ] }),
-    /* @__PURE__ */ jsxs(Table, { variant: "horizontal", children: [
+    filteredOrganizations.length > 0 ? /* @__PURE__ */ jsxs(Table, { variant: "horizontal", children: [
       /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
         /* @__PURE__ */ jsx("th", { className: cx$2("th-padding"), children: "\uC120\uD0DD" }),
-        /* @__PURE__ */ jsx("th", { className: cx$2("th-padding"), children: "\uACE0\uAC1DID" }),
-        /* @__PURE__ */ jsx("th", { className: cx$2("th-padding"), children: "\uACE0\uAC1D\uBA85" }),
-        /* @__PURE__ */ jsx("th", { className: cx$2("th-padding"), children: "\uC8FC\uBBFC\uB4F1\uB85D\uBC88\uD638" }),
-        /* @__PURE__ */ jsx("th", { className: cx$2("th-padding"), children: "\uC9C1\uC885\uC5C5\uC885\uBA85" }),
-        /* @__PURE__ */ jsx("th", { className: cx$2("th-padding"), children: "\uC804\uD654\uBC88\uD638" }),
-        /* @__PURE__ */ jsx("th", { className: cx$2("th-padding"), children: "\uC8FC\uC18C" })
+        /* @__PURE__ */ jsx("th", { className: cx$2("th-padding"), children: "\uAE30\uAD00\uCF54\uB4DC" }),
+        /* @__PURE__ */ jsx("th", { className: cx$2("th-padding"), children: "\uAE30\uAD00\uBA85" })
       ] }) }),
-      /* @__PURE__ */ jsx("tbody", { children: customerList.length > 0 ? customerList.map((customer) => /* @__PURE__ */ jsxs("tr", { children: [
-        /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "radio",
-            name: "customer",
-            value: customer.customerId || "",
-            checked: selectedCustomer?.customerId === customer.customerId,
-            onChange: () => onCustomerSelect(customer)
-          }
-        ) }),
-        /* @__PURE__ */ jsx("td", { children: customer.customerId }),
-        /* @__PURE__ */ jsx("td", { children: customer.customerName }),
-        /* @__PURE__ */ jsx("td", { children: customer.residentNumber }),
-        /* @__PURE__ */ jsx("td", { children: customer.occupationKindName }),
-        /* @__PURE__ */ jsx("td", { children: customer.mobilePhoneNumber }),
-        /* @__PURE__ */ jsx("td", { children: customer.address })
-      ] }, customer.customerId)) : /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: 7, children: /* @__PURE__ */ jsxs("div", { className: cx$2("no-result"), children: [
+      /* @__PURE__ */ jsx("tbody", { children: filteredOrganizations.map((organization) => {
+        return /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "radio",
+              name: "organization",
+              value: organization.organizationCode || "",
+              onChange: () => onOrganizationSelect(organization)
+            }
+          ) }),
+          /* @__PURE__ */ jsx("td", { children: organization.organizationCode }),
+          /* @__PURE__ */ jsx("td", { children: organization.organizationName })
+        ] }, organization.organizationCode);
+      }) })
+    ] }) : /* @__PURE__ */ jsxs(Table, { variant: "horizontal", children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("th", { className: cx$2("th-padding"), children: "\uC120\uD0DD" }),
+        /* @__PURE__ */ jsx("th", { className: cx$2("th-padding"), children: "\uAE30\uAD00\uCF54\uB4DC" }),
+        /* @__PURE__ */ jsx("th", { className: cx$2("th-padding"), children: "\uAE30\uAD00\uBA85" })
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: 3, children: /* @__PURE__ */ jsxs("div", { className: cx$2("no-result"), children: [
         /* @__PURE__ */ jsx(IconGraphicsFeedbackEmpty, {}),
         /* @__PURE__ */ jsx("p", { children: "\uC870\uD68C \uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }),
         /* @__PURE__ */ jsx("p", { children: "\uC785\uB825\uD55C \uC815\uBCF4\uB97C \uB2E4\uC2DC \uD655\uC778\uD574\uC8FC\uC138\uC694." })
@@ -2866,71 +3622,37 @@ function DeaCustomerSearchResult({
 }
 
 const { TextField } = FormField;
-const cx$1 = classNames.bind(styles$9);
-function DeaCustomerSearch({
-  setSearchParams,
-  customerList,
-  onCustomerSelect,
-  selectedCustomer
+const cx$1 = classNames.bind(styles$c);
+function OrganizationSearch({
+  searchTerm,
+  setSearchTerm,
+  searchInput,
+  setSearchInput,
+  organizationList,
+  onOrganizationSelect
 }) {
-  const [residentNumber1, setResidentNumber1] = useState("");
-  const [residentNumber2, setResidentNumber2] = useState("");
   const handleSearch = () => {
-    setSearchParams({ residentNumber: `${residentNumber1}${residentNumber2}` });
+    setSearchTerm(searchInput);
   };
   const handleReset = () => {
-    setResidentNumber1("");
-    setResidentNumber2("");
-    setSearchParams({});
-  };
-  const onKeyUp = (e) => {
-    e.key === "Enter" && handleSearch();
-  };
-  const onKeyDown = (e) => {
-    if (!(e.key === "Backspace" || !isNaN(parseInt(e.key)))) {
-      e.preventDefault();
-    }
+    setSearchTerm("");
+    setSearchInput("");
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("div", { className: cx$1("search-section"), children: /* @__PURE__ */ jsxs("div", { className: cx$1("search-filters"), children: [
       /* @__PURE__ */ jsxs("div", { className: cx$1("search-filter-section"), children: [
-        /* @__PURE__ */ jsx(FormField.Label, { className: "subtitle3 text-body-1", children: "\uACE0\uAC1D \uAD6C\uBD84" }),
-        /* @__PURE__ */ jsx(Select, { value: "personal", placeholder: "\uAC1C\uC778", disabled: true, style: { width: "100px" }, children: /* @__PURE__ */ jsx(Select.Option, { value: "personal", children: "\uAC1C\uC778" }) }),
-        /* @__PURE__ */ jsx(FormField.Label, { className: "subtitle3 text-body-1", children: "\uC8FC\uBBFC\uB4F1\uB85D\uBC88\uD638" }),
-        /* @__PURE__ */ jsx(
-          TextField,
-          {
-            value: residentNumber1,
-            maxLength: 6,
-            placeholder: "\uC55E 6\uC790\uB9AC \uC785\uB825",
-            onChange: (e) => setResidentNumber1(e.target.value),
-            size: "medium",
-            onKeyUp,
-            onKeyDown,
-            rootProps: {
-              className: cx$1("search-input"),
-              onClear: () => {
-                setResidentNumber1("");
-              }
-            }
-          }
-        ),
-        "-",
+        /* @__PURE__ */ jsx(FormField.Label, { className: "subtitle3 text-body-1", children: "\uAE30\uAD00\uBA85/\uCF54\uB4DC" }),
         /* @__PURE__ */ jsx(
           TextField,
           {
-            value: residentNumber2,
-            maxLength: 7,
-            placeholder: "\uB4A4 7\uC790\uB9AC \uC785\uB825",
-            onChange: (e) => setResidentNumber2(e.target.value),
+            value: searchInput,
+            onChange: (e) => setSearchInput(e.target.value),
             size: "medium",
-            onKeyDown,
-            onKeyUp,
+            onKeyUp: (e) => e.key === "Enter" && handleSearch(),
             rootProps: {
               className: cx$1("search-input"),
-              onClear: () => {
-                setResidentNumber2("");
-              }
+              clearable: true,
+              onClear: handleReset
             }
           }
         )
@@ -2941,59 +3663,54 @@ function DeaCustomerSearch({
       ] })
     ] }) }),
     /* @__PURE__ */ jsx("div", { className: cx$1("divider") }),
-    /* @__PURE__ */ jsx(
-      DeaCustomerSearchResult,
+    searchTerm && /* @__PURE__ */ jsx(
+      OrganizationSearchResult,
       {
-        customerList,
-        onCustomerSelect,
-        selectedCustomer
+        filteredOrganizations: organizationList,
+        onOrganizationSelect,
+        searchTerm
       }
     )
   ] });
 }
 
-const DeaCustomerSearchModal = ({ isOpen, onClose, onSave }) => {
-  const [selectedCustomer, setSelectedCustomer] = useState(null);
-  const [searchParams, setSearchParams] = useState({});
-  const canSearch = useMemo(() => !!(searchParams.customerName || searchParams.residentNumber), [searchParams]);
-  const { data, isFetching } = useQuery({
-    queryKey: ["deaCustomerSearch", searchParams],
-    queryFn: () => getDspCustomerListMethod(searchParams),
-    enabled: canSearch,
-    retry: false
+const OrganizationSearchModal = ({ isOpen, onClose, onSelect }) => {
+  const [selectedOrganization, setSelectedOrganization] = useState(null);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [searchInput, setSearchInput] = useState("");
+  const { data } = useSearchOrganizationQuery({
+    searchWord: searchTerm
   });
-  const [customerList, setCustomerList] = useState([]);
+  const [organizationList, setOrganizationList] = useState([]);
   useEffect(() => {
     if (data?.data) {
-      setCustomerList(data.data);
+      setOrganizationList(data.data);
     } else {
-      setCustomerList([]);
+      setOrganizationList([]);
     }
   }, [data]);
-  useEffect(() => {
-    setSelectedCustomer(null);
-  }, [customerList]);
-  const handleCustomerSelect = (customer) => {
-    setSelectedCustomer(customer);
+  const handleOrganizationSelect = (organization) => {
+    setSelectedOrganization(organization);
   };
-  const handleSave = () => {
-    if (selectedCustomer) {
-      onSave(selectedCustomer);
+  const handleSelect = () => {
+    if (selectedOrganization) {
+      onSelect(selectedOrganization);
       onClose();
     }
   };
   return /* @__PURE__ */ jsxs(Modal.Root, { isOpen, onClose, modalSize: "xlarge", children: [
     /* @__PURE__ */ jsx(Modal.Overlay, {}),
     /* @__PURE__ */ jsxs(Modal.Content, { style: { height: "697px" }, children: [
-      /* @__PURE__ */ jsx(Modal.Header, { headerTitle: "\uACE0\uAC1D \uAC80\uC0C9", showCloseButton: true }),
+      /* @__PURE__ */ jsx(Modal.Header, { headerTitle: "\uAE30\uAD00 \uAC80\uC0C9", showCloseButton: true }),
       /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsx(
-        DeaCustomerSearch,
+        OrganizationSearch,
         {
-          setSearchParams,
-          customerList,
-          onCustomerSelect: handleCustomerSelect,
-          selectedCustomer,
-          isLoading: isFetching
+          searchTerm,
+          setSearchTerm,
+          searchInput,
+          setSearchInput,
+          organizationList,
+          onOrganizationSelect: handleOrganizationSelect
         }
       ) }),
       /* @__PURE__ */ jsx(Modal.Footer, { children: /* @__PURE__ */ jsx(
@@ -3003,8 +3720,8 @@ const DeaCustomerSearchModal = ({ isOpen, onClose, onSave }) => {
           size: "medium",
           appearance: "filled",
           width: "full",
-          onClick: handleSave,
-          disabled: !selectedCustomer,
+          onClick: handleSelect,
+          disabled: !selectedOrganization,
           children: "\uC800\uC7A5\uD558\uAE30"
         }
       ) })
@@ -3012,134 +3729,23 @@ const DeaCustomerSearchModal = ({ isOpen, onClose, onSave }) => {
   ] });
 };
 
-const useCustomerSearch = (onSelect) => {
-  const { triggerRef, isOpen, setIsOpen, DropDown } = useDropDown();
-  const [searchKeyword, setSearchKeyword] = useState("");
-  const [searchInput, setSearchInput] = useState("");
-  const [customerList, setCustomerList] = useState([]);
-  const [selectedCustomer, setSelectedCustomer] = useState(null);
-  const { data } = useSearchCustomerListQuery({ customerName: searchKeyword });
-  const search = () => {
-    if (searchInput.length >= 2) {
-      setSearchKeyword(searchInput);
-      const filtered = data?.data?.custList?.filter(
-        (c) => c.customerName?.toLowerCase().includes(searchInput.toLowerCase())
-      );
-      setCustomerList(filtered || []);
-      setIsOpen(true);
-    } else {
-      setCustomerList([]);
-      setSearchKeyword("");
-      setIsOpen(false);
-    }
-  };
-  const onKeyUp = (e) => {
-    if (e.key === "Enter") {
-      search();
-    }
-  };
-  const onSearchInputChange = (e) => {
-    setSearchInput(e.target.value);
-    if (e.target.value.length < 2) {
-      setCustomerList([]);
-      setSearchKeyword("");
-      setIsOpen(false);
-    }
-  };
-  const onClear = () => {
-    setSearchInput("");
-    setSearchKeyword("");
-    setCustomerList([]);
-    setSelectedCustomer(null);
-    setIsOpen(false);
-  };
-  const handleSelectItem = (customer) => {
-    setSelectedCustomer(customer);
-    setSearchInput(customer.customerName || "");
-    setCustomerList([]);
-    setIsOpen(false);
-    if (onSelect) {
-      onSelect(customer);
-    }
-  };
-  return {
-    triggerRef,
-    isOpen,
-    DropDown,
-    searchInput,
-    customerList,
-    searchKeyword,
-    onSearchInputChange,
-    onKeyUp,
-    search,
-    onClear,
-    handleSelectItem,
-    selectedCustomer,
-    setSearchInput,
-    setCustomerList,
-    setSearchKeyword,
-    setIsOpen
-  };
-};
-
-const cx = classNames.bind(styles$a);
-const highlightOnSearchKeyword = (originalText, targetString) => {
-  if (!targetString || !originalText?.includes(targetString)) {
-    return originalText;
-  }
-  const replacedText = [];
-  const splitText = originalText.split(targetString);
-  for (let i = 0; i < splitText.length; i++) {
-    replacedText.push(splitText[i] || "");
-    if (i < splitText.length - 1) {
-      replacedText.push(
-        /* @__PURE__ */ jsx("span", { className: "text-primary", children: targetString }, i)
-      );
-    }
-  }
-  return replacedText;
-};
-const { InputBox, Input } = FormCore;
-const CustomerSearch = ({ onSelect }) => {
-  const {
-    triggerRef,
-    isOpen,
-    DropDown,
-    searchInput,
-    customerList,
-    searchKeyword,
-    onSearchInputChange,
-    onKeyUp,
-    search,
-    onClear,
-    handleSelectItem
-  } = useCustomerSearch(onSelect);
-  return /* @__PURE__ */ jsxs("div", { className: cx("container"), children: [
-    /* @__PURE__ */ jsx("div", { className: cx("search-bar"), children: /* @__PURE__ */ jsx(InputBox, { endElement: /* @__PURE__ */ jsx(IconMainUiSearch, { onClick: search }), onClear, clearable: true, children: /* @__PURE__ */ jsx(
-      Input,
-      {
-        onChange: onSearchInputChange,
-        onKeyUp,
-        value: searchInput,
-        placeholder: "\uACE0\uAC1D\uBA85\uC744 \uB450 \uAE00\uC790 \uC774\uC0C1 \uC785\uB825\uD574\uC8FC\uC138\uC694.",
-        size: "large",
-        ref: triggerRef
-      }
-    ) }) }),
-    isOpen && customerList.length > 0 && /* @__PURE__ */ jsx(DropDown, { children: /* @__PURE__ */ jsx("div", { className: cx("result-container"), children: /* @__PURE__ */ jsx(List, { children: customerList.map((customer) => /* @__PURE__ */ jsx(ListItem, { onClick: () => handleSelectItem(customer), selectable: true, children: /* @__PURE__ */ jsxs("div", { className: cx("customer-item"), children: [
-      /* @__PURE__ */ jsx("div", { className: cx("name"), children: highlightOnSearchKeyword(customer.customerName || "", searchKeyword) }),
-      /* @__PURE__ */ jsxs("div", { className: cx("details"), children: [
-        /* @__PURE__ */ jsx("span", { children: customer.birthDate }),
-        /* @__PURE__ */ jsx("span", { className: cx("separator"), children: "|" }),
-        /* @__PURE__ */ jsx("span", { children: customer.genderCode }),
-        customer.baseAddress && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("span", { className: cx("separator"), children: "|" }),
-          /* @__PURE__ */ jsx("span", { children: customer.baseAddress })
-        ] })
-      ] })
-    ] }) }, customer.customerId)) }) }) })
+const cx = classNames.bind(styles$b);
+function JobVehicleSearchModal({ onClose }) {
+  const { selectedVehicle, VehicleSearchComponent } = useVehicleSearch();
+  return /* @__PURE__ */ jsxs(Modal.Root, { isOpen: true, onClose, modalSize: "xlarge", children: [
+    /* @__PURE__ */ jsx(Modal.Overlay, {}),
+    /* @__PURE__ */ jsxs(Modal.Content, { style: { height: "697px" }, children: [
+      /* @__PURE__ */ jsx(Modal.Header, { headerTitle: "\uC6B4\uC804\uCC28\uC885 \uAC80\uC0C9", showCloseButton: true }),
+      /* @__PURE__ */ jsx(Modal.Body, { className: cx("job-vehicle-search-modal"), raw: true, children: VehicleSearchComponent }),
+      /* @__PURE__ */ jsx(Modal.Footer, { style: { marginTop: 0 }, children: /* @__PURE__ */ jsxs(Button, { variant: "primary", size: "medium", appearance: "filled", width: "full", onClick: onClose, children: [
+        "\uD655\uC778(",
+        selectedVehicle?.integrationCodeValueName || "\uBBF8\uC120\uD0DD",
+        ")-",
+        selectedVehicle?.integrationCodeValue
+      ] }) })
+    ] })
   ] });
-};
+}
 
 const VERIFICATION_CODES = {
   SUCCESS: "0000",
@@ -3358,5 +3964,5 @@ const useRemoteIdentityVerificationPopup = (config) => {
   };
 };
 
-export { Attachment, BankStockSearchModal, CustomerSearch, DeaCustomerSearchModal, EmployeeSearchModal, FormCheckbox, FormCheckboxButton, FormDatePicker, FormDateRangePicker, FormSearchJobField, FormSegmentGroup, FormSelect, FormTextField, OrganizationSearchModal, StepIndicator, resize, testSignatureBase64Data, useAddressComponent, useBankStockSearch, useCamera, useCanvasPaint, useJobSearchModal, useJobVehicleSearchModal, useRemoteIdentityVerification, useRemoteIdentityVerificationIframe, useRemoteIdentityVerificationPopup, useSearchAddress };
+export { Attachment, BankStockSearchModal, CODES, CustomerSearch, DeaCustomerSearchModal, EmployeeSearchModal, FormCheckbox, FormCheckboxButton, FormDatePicker, FormDateRangePicker, FormSearchJobField, FormSegmentGroup, FormSelect, FormTextField, JobVehicleSearchModal, OrganizationSearchModal, StepIndicator, resize, testSignatureBase64Data, useAddressComponent, useBankStockSearch, useCamera, useCanvasPaint, useJobSearchModal, useJobVehicleSearchModal, useNationalityComponent, useNxlOneModal, useRemoteIdentityVerification, useRemoteIdentityVerificationIframe, useRemoteIdentityVerificationPopup, useSearchAddress, useSearchNationality, useSearchVisa, useVisaComponent };
 //# sourceMappingURL=index.esm.js.map