sales-frontend-components 0.0.87 → 0.0.89

package/dist/index.esm.js

@@ -1,8 +1,8 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useController } from 'react-hook-form';
-import { CheckboxButton, Checkbox, DatePicker, DateRangePicker, Accordion, Radio, Table, Button, FormField, Select, Tab, useModalState, Modal, SegmentGroup, ModalUtils, FormCore, RadioGroup, useDropDown, List, ListItem, Loading } from 'sales-frontend-design-system';
+import { CheckboxButton, Checkbox, DatePicker, DateRangePicker, Table, Accordion, Radio, FormField, Select, Tab, useModalState, Modal, Button, SegmentGroup, ModalUtils, 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, useSearchOrganizationQuery, useSearchEmployeeProfileQuery, useSearchVehicleQuery, useSearchCustomerListQuery, getRemoteIdentityVerificationSystemToken } from 'sales-frontend-api/method';
+import { useSearchOccupationDetailQuery, useSearchOccupationQuery, useSearchAddressQuery, useSearchPostalCodeQuery, useSearchAddressStandardizationQuery, useSearchOrganizationQuery, useSearchEmployeeProfileQuery, useSearchVehicleQuery, useSearchRiskGradeQuery, getDspCustomerListMethod, useSearchCustomerListQuery, getRemoteIdentityVerificationSystemToken } from 'sales-frontend-api/method';
 import { IconMainUiSearch, IconIllustCamera, IconGraphicsBankHsbc, IconGraphicsBankKebHana, IconGraphicsBankScJeil, IconGraphicsBankGyeongnam, IconGraphicsBankGwangju, IconGraphicsBankKukmin, IconGraphicsBankKiup, IconGraphicsBankJiyeokNonghyeop, IconGraphicsBankNhNonghyeop, IconGraphicsBankDaegu, IconGraphicsBankBusan, IconGraphicsBankSanlim, IconGraphicsBankSaneop, IconGraphicsBankSaemaulGeumgo, IconGraphicsBankSuhyeop, IconGraphicsBankSinhan, IconGraphicsBankSinhyeop, IconGraphicsBankOehwan, IconGraphicsBankWoori, IconGraphicsBankPost, IconGraphicsBankJeochuk, IconGraphicsBankJeonbuk, IconGraphicsBankJeju, IconGraphicsBankKakaoBank, IconGraphicsBankKBank, IconGraphicsBankHankookCity, IconGraphicsStockDbGeumyungTujajeungkwon, IconGraphicsStockKbJeungkwon, IconGraphicsStockNhWooriTujajeungkwon, IconGraphicsStockNhTujajeungkwon, IconGraphicsStockSkJeungkwon, IconGraphicsStockGyoboJeungkwon, IconGraphicsStockDaesinJeungkwon, IconGraphicsStockMeritzJeungkwon, IconGraphicsStockMiraeAssetJeungkwon, IconGraphicsStockBugukJeungkwon, IconGraphicsStockSamsungJeungkwon, IconGraphicsStockSinyeongJeungkwon, IconGraphicsStockSinhanTujajeungkwon, IconGraphicsStockYuantaJeungkwon, IconGraphicsStockYujinTujajeungkwon, IconGraphicsStockKiwoomJeungkwon, IconGraphicsStockHanaGeumyungTujajeungkwon, IconGraphicsStockHiTujajeungkwon, IconGraphicsStockHankookJeungkwonGeumyung, IconGraphicsStockHankookTujajeungkwon, IconGraphicsStockHanwhaTujajeungkwon, IconGraphicsStockHyundaiChaJeungkwon, 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';
@@ -13,7 +13,9 @@ import styles$5 from './modal/pre-standard/organization-search-modal/organizatio
 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$9 from './modal/standard/customer-search/customer-search.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';
 
 const FormCheckboxButton = ({
@@ -61,11 +63,6 @@ const FormDatePicker = ({
 }) => {
   const { field, fieldState } = useController({ name, control, disabled, defaultValue });
   const [selected, setSelected] = React.useState();
-  React.useEffect(() => {
-    if (field.value) {
-      setSelected(field.value);
-    }
-  }, [defaultValue]);
   React.useEffect(() => {
     if (field.value !== selected) {
       setSelected(field.value);
@@ -94,18 +91,25 @@ const FormDateRangePicker = ({
   defaultValue,
   ...props
 }) => {
-  const { field, fieldState } = useController({ name, control, disabled, defaultValue });
+  const { field, fieldState } = useController({
+    name,
+    control,
+    disabled,
+    defaultValue
+  });
   const [selected, setSelected] = React.useState();
   React.useEffect(() => {
-    if (field.value) {
+    if (field.value && !selected) {
       setSelected(field.value);
     }
-  }, [defaultValue]);
-  React.useEffect(() => {
-    if (selected && field.value.startDate.getTime() === selected.startDate?.getTime() && field.value.endDate.getTime() === selected.endDate?.getTime()) {
-      return;
+    try {
+      if (field.value && selected && (field.value.startDate.getTime() !== selected.startDate?.getTime() || field.value.endDate.getTime() !== selected.endDate?.getTime())) {
+        setSelected(field.value);
+        console.warn(field.value, selected);
+      }
+    } catch (e) {
+      console.log(e);
     }
-    setSelected(field.value);
   }, [field.value]);
   return /* @__PURE__ */ jsx(
     DateRangePicker,
@@ -234,58 +238,10 @@ const highlightOnSearchKeyword$1 = (originalText, targetString) => {
   return originalText;
 };
 
-const cx$e = classNames.bind(styles);
-function JobSearchCategory({ filteredJobs, onJobSelect, searchTerm }) {
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: cx$e("category-section"), children: [
-    /* @__PURE__ */ jsxs("p", { className: cx$e("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"), onToggle: () => {
-    }, children: filteredJobs.map((job, index) => /* @__PURE__ */ jsxs(
-      Accordion.Item,
-      {
-        id: `item-${job.occupationIndustryCode}-${index}-accordion`,
-        children: [
-          /* @__PURE__ */ jsx(Accordion.HeaderDiv, { children: /* @__PURE__ */ jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsxs(Radio.Item, { size: "small", value: job.occupationIndustryCode, onChange: () => onJobSelect(job), children: [
-            highlightOnSearchKeyword$1(job.occupationIndustryName, searchTerm),
-            "(",
-            job.occupationIndustryCode,
-            ")"
-          ] }) }) }),
-          /* @__PURE__ */ jsx(Accordion.Content, { variant: "text", children: /* @__PURE__ */ jsx(Table, { variant: "horizontal", children: /* @__PURE__ */ jsxs("tbody", { children: [
-            /* @__PURE__ */ jsxs("tr", { children: [
-              /* @__PURE__ */ jsx("th", { children: "\uD5E4\uB354 1" }),
-              /* @__PURE__ */ jsx("td", { className: "px-24", children: "1\uD589 1\uBC88\uC9F8" }),
-              /* @__PURE__ */ jsx("th", { children: "\uD5E4\uB354 1-2" }),
-              /* @__PURE__ */ jsx("td", { className: "px-24 ", children: "1\uD589 2\uBC88\uC9F8" })
-            ] }),
-            /* @__PURE__ */ jsxs("tr", { children: [
-              /* @__PURE__ */ jsx("th", { children: "\uD5E4\uB354 2" }),
-              /* @__PURE__ */ jsx("td", { className: "pl-24 pr-16", colSpan: 3, children: /* @__PURE__ */ jsxs("p", { className: "d-flex-center-center", children: [
-                "2\uD589 1\uBC88\uC9F8 ",
-                /* @__PURE__ */ jsx("span", { className: "flex-1 pipe-left", children: "\uC11C\uBE0C\uD14D\uC2A4\uD2B8" }),
-                /* @__PURE__ */ jsx(Button, { variant: "neutral", size: "xsmall", appearance: "outline", children: "\uBC84\uD2BC\uBA85" })
-              ] }) })
-            ] })
-          ] }) }) })
-        ]
-      },
-      `item-${job.occupationIndustryCode}-${index}`
-    )) }) }),
-    filteredJobs.length === 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-      "`",
-      /* @__PURE__ */ jsx("span", { className: "text-primary", children: searchTerm }),
-      "`\uC5D0 \uB300\uD55C \uAC80\uC0C9\uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
-    ] })
-  ] }) });
-}
-
 function JobSearchDetail({ occupationTypeCode, occupationIndustryCode }) {
   const { data: detail } = useSearchOccupationDetailQuery({
     occupationIndustryCode,
-    occupationIndustryTypeCode: occupationTypeCode
+    occupationIndustryTypeCode: occupationTypeCode || "1"
   });
   if (!detail || !detail.data) {
     return null;
@@ -349,23 +305,62 @@ function JobSearchDetail({ occupationTypeCode, occupationIndustryCode }) {
   ] }) }) });
 }
 
-const cx$d = classNames.bind(styles);
+const cx$g = 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: [
+      "\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: () => {
+    }, children: filteredJobs.map((job, index) => /* @__PURE__ */ jsxs(
+      Accordion.Item,
+      {
+        id: `item-${job.occupationIndustryCode}-${index}-accordion`,
+        children: [
+          /* @__PURE__ */ jsx(Accordion.HeaderDiv, { children: /* @__PURE__ */ jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsxs(Radio.Item, { size: "small", value: job.occupationIndustryCode, onChange: () => onJobSelect(job), children: [
+            highlightOnSearchKeyword$1(job.occupationIndustryName, searchTerm),
+            "(",
+            job.occupationIndustryCode,
+            ")"
+          ] }) }) }),
+          /* @__PURE__ */ jsx(Accordion.Content, { variant: "text", children: /* @__PURE__ */ jsx(
+            JobSearchDetail,
+            {
+              occupationTypeCode: job.occupationTypeCode || "",
+              occupationIndustryCode: job.occupationIndustryCode
+            }
+          ) })
+        ]
+      },
+      `item-${job.occupationIndustryCode}-${index}`
+    )) }) }),
+    filteredJobs.length === 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      "`",
+      /* @__PURE__ */ jsx("span", { className: "text-primary", children: searchTerm }),
+      "`\uC5D0 \uB300\uD55C \uAC80\uC0C9\uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
+    ] })
+  ] }) });
+}
+
+const cx$f = classNames.bind(styles);
 function JobSearchFavorite({ filteredJobs, onJobSelect }) {
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: cx$d("popular-jobs"), children: [
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: cx$f("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$d("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$f("job-radio-root"), children: filteredJobs.map((job, index) => /* @__PURE__ */ jsxs(
       Accordion.Item,
       {
         id: `item-${job.occupationIndustryCode}-${index}`,
-        className: cx$d("accordion-item"),
+        className: cx$f("accordion-item"),
         children: [
-          /* @__PURE__ */ jsx(Accordion.HeaderDiv, { className: cx$d("accordion-header-item"), children: /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx(Accordion.HeaderDiv, { className: cx$f("accordion-header-item"), children: /* @__PURE__ */ jsxs(
             Radio.Item,
             {
               size: "small",
               value: job.occupationIndustryCode,
               onChange: () => onJobSelect(job),
-              className: cx$d("radio-item"),
+              className: cx$f("radio-item"),
               children: [
                 job.occupationIndustryName,
                 "(",
@@ -388,15 +383,15 @@ function JobSearchFavorite({ filteredJobs, onJobSelect }) {
   ] }) });
 }
 
-const cx$c = classNames.bind(styles);
+const cx$e = classNames.bind(styles);
 function JobSearchResult({ filteredJobs, onJobSelect, searchTerm }) {
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: cx$c("popular-jobs"), children: [
-    /* @__PURE__ */ jsxs("p", { className: cx$c("result-title"), children: [
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: cx$e("popular-jobs"), children: [
+    /* @__PURE__ */ jsxs("p", { className: cx$e("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$c("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$e("job-radio-root"), children: filteredJobs.map((job) => /* @__PURE__ */ jsxs(
       Accordion.Item,
       {
         id: `item-${job.occupationIndustryCode}`,
@@ -432,8 +427,8 @@ function JobSearchResult({ filteredJobs, onJobSelect, searchTerm }) {
   ] }) });
 }
 
-const { TextField: TextField$2 } = FormField;
-const cx$b = classNames.bind(styles);
+const { TextField: TextField$3 } = FormField;
+const cx$d = classNames.bind(styles);
 const { Option } = Select;
 function JobSearch({
   activeTab,
@@ -449,7 +444,8 @@ function JobSearch({
   secondCategory,
   setSecondCategory,
   firstCategoryList,
-  secondCategoryList
+  secondCategoryList,
+  isLoading
 }) {
   const onKeyUp = (e) => {
     if (e.key === "Enter") {
@@ -470,9 +466,9 @@ function JobSearch({
       }
     ),
     /* @__PURE__ */ jsxs("div", { children: [
-      activeTab === "jobName" && /* @__PURE__ */ jsxs("div", { className: cx$b("favorite-jobs-section"), children: [
+      activeTab === "jobName" && /* @__PURE__ */ jsxs("div", { className: cx$d("favorite-jobs-section"), children: [
         /* @__PURE__ */ jsx(
-          TextField$2,
+          TextField$3,
           {
             placeholder: "\uC9C1\uC885\uBA85 \uAC80\uC0C9",
             value: searchInput,
@@ -490,10 +486,10 @@ function JobSearch({
           }
         ),
         !searchTerm && /* @__PURE__ */ jsx(JobSearchFavorite, { filteredJobs, onJobSelect }),
-        searchTerm && /* @__PURE__ */ jsx(JobSearchResult, { filteredJobs, onJobSelect, searchTerm })
+        searchTerm && !isLoading && /* @__PURE__ */ jsx(JobSearchResult, { filteredJobs, onJobSelect, searchTerm })
       ] }),
-      activeTab === "jobCode" && /* @__PURE__ */ jsxs("div", { className: cx$b("select-jobs-section"), children: [
-        /* @__PURE__ */ jsxs("div", { className: cx$b("category-section"), children: [
+      activeTab === "jobCode" && /* @__PURE__ */ jsxs("div", { className: cx$d("select-jobs-section"), children: [
+        /* @__PURE__ */ jsxs("div", { className: cx$d("category-section"), children: [
           /* @__PURE__ */ jsx(
             Select,
             {
@@ -531,7 +527,7 @@ function JobSearch({
             }
           )
         ] }),
-        firstCategory && secondCategory && /* @__PURE__ */ jsx(JobSearchCategory, { filteredJobs, onJobSelect, searchTerm })
+        firstCategory && secondCategory && !isLoading && /* @__PURE__ */ jsx(JobSearchCategory, { filteredJobs, onJobSelect, searchTerm })
       ] })
     ] })
   ] });
@@ -582,7 +578,12 @@ const useJobSearch = () => {
   const [jobList, setJobList] = useState(initData);
   const [firstCategoryList, setFirstCategoryList] = useState([]);
   const [secondCategoryList, setSecondCategoryList] = useState([]);
-  const { data } = useSearchOccupationQuery({
+  const { data: detail } = useSearchOccupationDetailQuery({
+    occupationIndustryCode: selectedJob?.occupationIndustryCode || "",
+    occupationIndustryTypeCode: "1"
+  });
+  const selectedJobDetail = detail?.data;
+  const { data, isLoading } = useSearchOccupationQuery({
     occupationMajorCategoryCode: firstCategory,
     occupationSearchTypeCode: searchTerm ? "4" : "3",
     occupationSubCategoryCode: secondCategory,
@@ -600,7 +601,17 @@ const useJobSearch = () => {
     occupationSubCategoryCode: "",
     searchOccupationIndustryName: ""
   });
+  const reset = () => {
+    setSearchInput("");
+    setSearchTerm("");
+    setFirstCategory("");
+    setSecondCategory("");
+  };
   useEffect(() => {
+    reset();
+  }, [activeTab]);
+  useEffect(() => {
+    setSelectedJob(null);
     if (data && searchTerm && activeTab === "jobName") {
       const filteredJobs = data.data.occupationList.filter((job) => job.occupationIndustryName.includes(searchTerm));
       setJobList(filteredJobs);
@@ -612,9 +623,6 @@ const useJobSearch = () => {
       setJobList(data?.data.occupationList || []);
     }
   }, [searchTerm, data, firstCategory, secondCategory, secondCategoryData, activeTab]);
-  useEffect(() => {
-    console.log("jobList", jobList);
-  }, [jobList]);
   useEffect(() => {
     if (firstCategoryData) {
       setFirstCategoryList(firstCategoryData.data.occupationList);
@@ -629,6 +637,7 @@ const useJobSearch = () => {
     activeTab,
     setActiveTab,
     selectedJob,
+    setSelectedJob,
     searchTerm,
     setSearchTerm,
     handleJobSelect,
@@ -640,7 +649,10 @@ const useJobSearch = () => {
     secondCategory,
     setSecondCategory,
     secondCategoryList,
-    firstCategoryList
+    firstCategoryList,
+    reset,
+    isLoading,
+    selectedJobDetail
   };
 };
 function useJobSearchModal() {
@@ -659,15 +671,23 @@ function useJobSearchModal() {
     secondCategory,
     setSecondCategory,
     firstCategoryList,
-    secondCategoryList
+    secondCategoryList,
+    setSelectedJob,
+    selectedJobDetail,
+    reset,
+    isLoading
   } = useJobSearch();
   const { isOpen, openModal, closeModal } = useModalState();
   const onTabChange = (value) => {
-    setSearchTerm("");
-    setFirstCategory("");
-    setSecondCategory("");
+    reset();
     setActiveTab(value);
   };
+  const openInitModal = () => {
+    reset();
+    setSelectedJob(null);
+    setActiveTab("jobName");
+    openModal();
+  };
   return {
     JobSearchModal: /* @__PURE__ */ jsxs(Modal.Root, { isOpen, onClose: closeModal, modalSize: "xlarge", children: [
       /* @__PURE__ */ jsx(Modal.Overlay, {}),
@@ -689,10 +709,22 @@ function useJobSearchModal() {
             onJobSelect: handleJobSelect,
             searchInput,
             setSearchTerm,
-            setSecondCategory
+            setSecondCategory,
+            isLoading
           }
         ) }),
-        /* @__PURE__ */ jsx(Modal.Footer, { children: /* @__PURE__ */ jsx(Button, { variant: "primary", size: "medium", appearance: "filled", width: "full", onClick: closeModal, children: "\uD655\uC778" }) })
+        /* @__PURE__ */ jsx(Modal.Footer, { children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "primary",
+            size: "medium",
+            appearance: "filled",
+            width: "full",
+            onClick: closeModal,
+            disabled: !selectedJob,
+            children: "\uD655\uC778"
+          }
+        ) })
       ] })
     ] }),
     JobSearchComponent: /* @__PURE__ */ jsx(
@@ -711,13 +743,17 @@ function useJobSearchModal() {
         filteredJobs: filteredJobs || [],
         onJobSelect: handleJobSelect,
         searchInput,
-        setSearchTerm
+        setSearchTerm,
+        isLoading
       }
     ),
     isJobSearchOpen: isOpen,
-    openJobSearchModal: openModal,
+    openJobSearchModal: openInitModal,
     closeJobSearchModal: closeModal,
-    selectedJob
+    selectedJob,
+    selectedJobDetail,
+    resetJobSearch: reset,
+    setSelectedJob
   };
 }
 
@@ -875,7 +911,7 @@ const FormTextField = ({
   );
 };
 
-const cx$a = classNames.bind(styles$1);
+const cx$c = classNames.bind(styles$1);
 const StepIndicator = ({
   items,
   onClickItem,
@@ -910,26 +946,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$a("stepper-layout", { loading: isLoading }), children: [
-    /* @__PURE__ */ jsx("div", { className: cx$a("stepper"), children: steps.map((item, idx) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+  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: [
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: cx$a(
+          className: cx$c(
             "circle",
             { completed: item.isCompleted ?? false },
             { active: defaultValue === item.value || current === idx }
           ),
           onClick: () => handleClickStep?.(item),
-          children: item.isCompleted ? /* @__PURE__ */ jsx("span", { className: cx$a("completed-icon") }) : idx + 1
+          children: item.isCompleted ? /* @__PURE__ */ jsx("span", { className: cx$c("completed-icon") }) : idx + 1
         }
       ),
-      idx < steps.length - 1 && Array.from({ length: dotCount }).map((_, dotIdx) => /* @__PURE__ */ jsx("span", { className: cx$a("dot") }, `dot-${idx}-${dotIdx}`))
+      idx < steps.length - 1 && Array.from({ length: dotCount }).map((_, dotIdx) => /* @__PURE__ */ jsx("span", { className: cx$c("dot") }, `dot-${idx}-${dotIdx}`))
     ] }, `num-${idx}`)) }),
-    /* @__PURE__ */ jsx("ul", { className: cx$a("step-labels"), children: steps.map((item, idx) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("ul", { className: cx$c("step-labels"), children: steps.map((item, idx) => /* @__PURE__ */ jsx(
       "li",
       {
-        className: cx$a(
+        className: cx$c(
           { completed: steps[idx < 1 ? idx : idx - 1]?.isCompleted ?? false },
           { active: defaultValue === item.value || current === idx }
         ),
@@ -941,7 +977,7 @@ const StepIndicator = ({
   ] });
 };
 
-const cx$9 = classNames.bind(styles$2);
+const cx$b = classNames.bind(styles$2);
 function Attachment({
   photos,
   onAddPhoto,
@@ -958,14 +994,14 @@ function Attachment({
   };
   const renderPhotoSingle = () => {
     if (photos.length === 0) {
-      return /* @__PURE__ */ jsx("div", { className: cx$9("single-photo-item", "add-photo-item"), children: /* @__PURE__ */ jsxs("button", { className: cx$9("add-photo-button-single"), onClick: handleAddPhoto, children: [
+      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: [
         /* @__PURE__ */ jsx(IconIllustCamera, {}),
         /* @__PURE__ */ jsx("span", { children: buttonText || "\uC0AC\uC9C4 \uCCA8\uBD80\uD558\uAE30" })
       ] }) });
     }
-    return photos.map((photo) => /* @__PURE__ */ jsxs("div", { className: cx$9("single-photo-item"), children: [
-      /* @__PURE__ */ jsx("div", { className: cx$9("photo-placeholder"), children: /* @__PURE__ */ jsx("img", { src: photo.src, alt: photo.name, className: cx$9("photo-image") }) }),
-      /* @__PURE__ */ jsx("button", { className: cx$9("remove-button"), onClick: () => handleRemovePhoto(photo.id), "aria-label": "\uC0AC\uC9C4 \uC0AD\uC81C", children: "\xD7" })
+    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" })
     ] }, photo.id));
   };
   const renderPhotoGrid = () => {
@@ -973,12 +1009,12 @@ function Attachment({
     const gridItems = [];
     if (photos.length < maxPhotos) {
       gridItems.push(
-        /* @__PURE__ */ jsx("div", { className: cx$9("photo-item", "add-photo-item"), children: /* @__PURE__ */ jsxs("button", { className: cx$9("add-photo-button"), onClick: handleAddPhoto, children: [
+        /* @__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(IconIllustCamera, {}),
           /* @__PURE__ */ jsx("span", { children: buttonText || "\uCCA8\uBD80\uD558\uAE30" }),
-          /* @__PURE__ */ jsxs("span", { className: cx$9("photo-count"), children: [
+          /* @__PURE__ */ jsxs("span", { className: cx$b("photo-count"), children: [
             "(",
-            /* @__PURE__ */ jsx("span", { className: cx$9("photo-count-number"), children: photos.length }),
+            /* @__PURE__ */ jsx("span", { className: cx$b("photo-count-number"), children: photos.length }),
             "/",
             maxPhotos,
             ")"
@@ -988,9 +1024,9 @@ function Attachment({
     }
     photos.forEach((photo) => {
       gridItems.push(
-        /* @__PURE__ */ jsxs("div", { className: cx$9("photo-item"), children: [
-          /* @__PURE__ */ jsx("div", { className: cx$9("photo-placeholder"), children: /* @__PURE__ */ jsx("img", { src: photo.src, alt: photo.name, className: cx$9("photo-image") }) }),
-          /* @__PURE__ */ jsx("button", { className: cx$9("remove-button"), onClick: () => handleRemovePhoto(photo.id), "aria-label": "\uC0AC\uC9C4 \uC0AD\uC81C", children: "\xD7" })
+        /* @__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" })
         ] }, photo.id)
       );
     });
@@ -1001,9 +1037,9 @@ function Attachment({
     return null;
   }
   if (type === "single") {
-    return /* @__PURE__ */ jsx("div", { className: cx$9("photo-single"), children: renderPhotoSingle() });
+    return /* @__PURE__ */ jsx("div", { className: cx$b("photo-single"), children: renderPhotoSingle() });
   }
-  return /* @__PURE__ */ jsx("div", { className: cx$9("photo-grid", { linear: type === "linear" }), children: renderPhotoGrid() });
+  return /* @__PURE__ */ jsx("div", { className: cx$b("photo-grid", { linear: type === "linear" }), children: renderPhotoGrid() });
 }
 
 const maxImageSize = 3 * 1024 * 1024;
@@ -1450,12 +1486,12 @@ function useCanvasPaint(paintProps = {}) {
 
 const testSignatureBase64Data = "data:image/png;base64,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";
 
-const cx$8 = classNames.bind(styles$3);
+const cx$a = classNames.bind(styles$3);
 const { InputBox: InputBox$1, Input: Input$1 } = FormCore;
 const AddressSearchInitialText = () => {
-  return /* @__PURE__ */ jsxs("div", { className: cx$8("search-result-list"), children: [
-    /* @__PURE__ */ jsx("p", { className: cx$8("guide-title"), children: "\uC774\uB807\uAC8C \uAC80\uC0C9\uD574 \uBCF4\uC138\uC694." }),
-    /* @__PURE__ */ jsxs("ul", { className: cx$8("guide"), children: [
+  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: [
       /* @__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" }),
@@ -1471,8 +1507,8 @@ const AddressSearchResult = ({
   searchKeyword,
   selectedAddress
 }) => {
-  return /* @__PURE__ */ jsxs("div", { className: cx$8("search-result-list"), children: [
-    /* @__PURE__ */ jsxs("p", { className: cx$8("guide-title"), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cx$a("search-result-list"), children: [
+    /* @__PURE__ */ jsxs("p", { className: cx$a("guide-title"), children: [
       "\uCD1D ",
       /* @__PURE__ */ jsx("span", { className: "text-primary", children: addressSearchList.length }),
       "\uAC74\uC758 \uAC80\uC0C9\uACB0\uACFC"
@@ -1484,15 +1520,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$8("search-result"), children: [
-              /* @__PURE__ */ jsx("div", { className: cx$8("zipcode"), children: highlightOnSearchKeyword$1(`${item.firstPostalCode}${item.secondPostalCode}`, searchKeyword) }),
-              /* @__PURE__ */ jsx("div", { className: cx$8("divider") }),
-              /* @__PURE__ */ jsxs("div", { className: cx$8("address-info"), children: [
-                /* @__PURE__ */ jsx("span", { className: cx$8("address"), children: highlightOnSearchKeyword$1(
+            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(
                   `${item.roadNameBaseAddress} ${item.roadNameDetailAddress} ${item.mainBuildingName}`,
                   searchKeyword
                 ) }),
-                /* @__PURE__ */ jsx("span", { className: cx$8("old-address"), children: highlightOnSearchKeyword$1(
+                /* @__PURE__ */ jsx("span", { className: cx$a("old-address"), children: highlightOnSearchKeyword$1(
                   `${item.landNumberBaseAddress} ${item.landNumberDetailAddress}`,
                   searchKeyword
                 ) })
@@ -1501,7 +1537,7 @@ const AddressSearchResult = ({
             id: JSON.stringify(item)
           };
         }),
-        className: cx$8("radio-group"),
+        className: cx$a("radio-group"),
         name: "address-search",
         size: "medium",
         defaultValue: "",
@@ -1516,36 +1552,42 @@ const AddressSearchResult = ({
   ] });
 };
 const AddressSearchDetailInput = ({
-  addressStandardizationList,
+  selectedStandardizationAddress,
   onDetailChange,
-  onStandardizationChange,
   step,
+  onStandardizationChange,
   detailAddressInput
 }) => {
-  return /* @__PURE__ */ jsxs("div", { className: cx$8("search-result-list"), children: [
+  const { land, road } = selectedStandardizationAddress;
+  return /* @__PURE__ */ jsxs("div", { className: cx$a("search-result-list"), children: [
     /* @__PURE__ */ jsx(
-      RadioGroup,
+      Radio.Root,
       {
-        items: addressStandardizationList.map((item) => {
-          return {
-            value: JSON.stringify(item),
-            select: true,
-            label: /* @__PURE__ */ jsxs("div", { className: cx$8("search-result"), children: [
-              /* @__PURE__ */ jsx("div", { className: cx$8("zipcode"), children: `${item.firstPostalCode}${item.secondPostalCode}` }),
-              /* @__PURE__ */ jsx("div", { className: cx$8("divider") }),
-              /* @__PURE__ */ jsxs("div", { className: cx$8("address-info"), children: [
-                /* @__PURE__ */ jsx("span", { className: cx$8("address"), children: `${item.baseAddress} ${item.detailAddress}` }),
-                /* @__PURE__ */ jsx("span", { className: cx$8("old-address"), children: `${item.baseAddress} ${item.detailAddress}` })
-              ] })
-            ] }),
-            id: JSON.stringify(item)
-          };
-        }),
-        className: cx$8("radio-group"),
         name: "address-search-standardization",
         size: "medium",
-        defaultValue: "",
-        onChange: onStandardizationChange
+        defaultValue: JSON.stringify(selectedStandardizationAddress),
+        children: /* @__PURE__ */ jsx(
+          Radio.Item,
+          {
+            className: cx$a("radio-group"),
+            value: JSON.stringify(selectedStandardizationAddress),
+            onChange: onStandardizationChange,
+            children: /* @__PURE__ */ jsxs("div", { className: cx$a("search-result"), children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cx$a("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__ */ jsxs("div", { className: "d-flex gap-medium items-center", children: [
@@ -1586,7 +1628,8 @@ function AddressComponent({ isOpen, onClose, setValue }) {
     searchInput,
     selectedAddress,
     onStandardizationChange,
-    addressStandardizationList
+    selectedStandardizationAddress,
+    isLoading
   } = useSearchAddress({
     setValue,
     onClose,
@@ -1609,7 +1652,7 @@ function AddressComponent({ isOpen, onClose, setValue }) {
           }
         ) }),
         addressSearchStep === "initial" && /* @__PURE__ */ jsx(AddressSearchInitialText, {}),
-        addressSearchStep === "search-result" && /* @__PURE__ */ jsx(
+        !isLoading && addressSearchStep === "search-result" && /* @__PURE__ */ jsx(
           AddressSearchResult,
           {
             onChange: onSelectChange,
@@ -1618,10 +1661,10 @@ function AddressComponent({ isOpen, onClose, setValue }) {
             selectedAddress
           }
         ),
-        addressSearchStep === "detail-input" && selectedAddress && /* @__PURE__ */ jsx(
+        !isLoading && addressSearchStep === "detail-input" && selectedAddress && selectedStandardizationAddress && /* @__PURE__ */ jsx(
           AddressSearchDetailInput,
           {
-            addressStandardizationList,
+            selectedStandardizationAddress,
             onStandardizationChange,
             onDetailChange: setDetail,
             step: addressSearchStep,
@@ -1664,11 +1707,11 @@ function useSearchAddress({ setValue, onClose, isOpen }) {
     detailAddress: "",
     roadNameYn: "Y"
   });
-  const { data: addressData } = useSearchAddressQuery(
+  const { data: addressData, isLoading: isLoadingAddress } = useSearchAddressQuery(
     { searchKeyWord: searchKeyword },
     { enabled: !!searchKeyword && searchType === "address" }
   );
-  const { data: postalData } = useSearchPostalCodeQuery(
+  const { data: postalData, isLoading: isLoadingPostalCode } = useSearchPostalCodeQuery(
     { searchWordName: searchKeyword },
     { enabled: !!searchKeyword && searchType === "postalcode" }
   );
@@ -1776,8 +1819,17 @@ function useSearchAddress({ setValue, onClose, isOpen }) {
       setSearchKeyword("");
     }
   }, [isOpen]);
+  useEffect(() => {
+    const road = standardizedData?.data?.addressStandardizationList[1];
+    const land = standardizedData?.data?.addressStandardizationList[2];
+    if (road && land) {
+      setSelectedStandardizationAddress({
+        land,
+        road
+      });
+    }
+  }, [standardizedData]);
   return {
-    addressStandardizationList: standardizedData?.data?.addressStandardizationList || [],
     selectedStandardizationAddress,
     onStandardizationChange,
     onAddressSearchClear: onClear,
@@ -1794,7 +1846,8 @@ function useSearchAddress({ setValue, onClose, isOpen }) {
     onSelectChange,
     setDetail,
     search,
-    searchInput
+    searchInput,
+    isLoading: isLoadingAddress || isLoadingPostalCode
   };
 }
 const useAddressComponent = () => {
@@ -1912,22 +1965,22 @@ function BankStockSearchModal({ open, onClose, onSelect }) {
   ] });
 }
 
-const cx$7 = classNames.bind(styles$5);
+const cx$9 = classNames.bind(styles$5);
 function OrganizationSearchResult({
   filteredOrganizations,
   onOrganizationSelect
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: cx$7("result-section"), children: [
-    /* @__PURE__ */ jsxs("p", { className: cx$7("result-title"), children: [
+  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: filteredOrganizations.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$7("th-padding"), children: "\uC120\uD0DD" }),
-        /* @__PURE__ */ jsx("th", { className: cx$7("th-padding"), children: "\uAE30\uAD00\uCF54\uB4DC" }),
-        /* @__PURE__ */ jsx("th", { className: cx$7("th-padding"), children: "\uAE30\uAD00\uBA85" })
+        /* @__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: [
@@ -1946,11 +1999,11 @@ function OrganizationSearchResult({
       }) })
     ] }) : /* @__PURE__ */ jsxs(Table, { variant: "horizontal", children: [
       /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-        /* @__PURE__ */ jsx("th", { className: cx$7("th-padding"), children: "\uC120\uD0DD" }),
-        /* @__PURE__ */ jsx("th", { className: cx$7("th-padding"), children: "\uAE30\uAD00\uCF54\uB4DC" }),
-        /* @__PURE__ */ jsx("th", { className: cx$7("th-padding"), children: "\uAE30\uAD00\uBA85" })
+        /* @__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$7("no-result"), children: [
+      /* @__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." })
@@ -1959,8 +2012,8 @@ function OrganizationSearchResult({
   ] });
 }
 
-const { TextField: TextField$1 } = FormField;
-const cx$6 = classNames.bind(styles$5);
+const { TextField: TextField$2 } = FormField;
+const cx$8 = classNames.bind(styles$5);
 function OrganizationSearch({
   searchTerm,
   setSearchTerm,
@@ -1977,30 +2030,30 @@ function OrganizationSearch({
     setSearchInput("");
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: cx$6("search-section"), children: /* @__PURE__ */ jsxs("div", { className: cx$6("search-filters"), children: [
-      /* @__PURE__ */ jsxs("div", { className: cx$6("search-filter-section"), 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" }),
         /* @__PURE__ */ jsx(
-          TextField$1,
+          TextField$2,
           {
             value: searchInput,
             onChange: (e) => setSearchInput(e.target.value),
             size: "medium",
             onKeyUp: (e) => e.key === "Enter" && handleSearch(),
             rootProps: {
-              className: cx$6("search-input"),
+              className: cx$8("search-input"),
               clearable: true,
               onClear: handleReset
             }
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: cx$6("search-buttons"), children: [
+      /* @__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$6("divider") }),
+    /* @__PURE__ */ jsx("div", { className: cx$8("divider") }),
     searchTerm && /* @__PURE__ */ jsx(
       OrganizationSearchResult,
       {
@@ -2073,21 +2126,21 @@ const EMPLOYEE_SEARCH_TABS = [
   { value: "WKIS", label: "\uB0B4\uADFC" }
 ];
 
-const cx$5 = classNames.bind(styles$6);
+const cx$7 = classNames.bind(styles$6);
 function EmployeeSearchResult({ filteredEmployees, onEmployeeSelect }) {
-  return /* @__PURE__ */ jsxs("div", { className: cx$5("result-section"), children: [
-    /* @__PURE__ */ jsxs("p", { className: cx$5("result-title"), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cx$7("result-section"), children: [
+    /* @__PURE__ */ jsxs("p", { className: cx$7("result-title"), children: [
       "\uCD1D ",
       /* @__PURE__ */ jsx("span", { className: "text-primary", children: filteredEmployees.length }),
       "\uAC74\uC758 \uAC80\uC0C9\uACB0\uACFC"
     ] }),
     filteredEmployees.length > 0 ? /* @__PURE__ */ jsxs(Table, { variant: "horizontal", children: [
       /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-        /* @__PURE__ */ jsx("th", { className: cx$5("th-padding"), children: "\uC120\uD0DD" }),
-        /* @__PURE__ */ jsx("th", { className: cx$5("th-padding"), children: "\uC0AC\uC6D0\uBC88\uD638" }),
-        /* @__PURE__ */ jsx("th", { className: cx$5("th-padding"), children: "\uC0AC\uC6D0\uBA85" }),
-        /* @__PURE__ */ jsx("th", { className: cx$5("th-padding"), children: "\uC18C\uC18D\uAE30\uAD00\uBA85" }),
-        /* @__PURE__ */ jsx("th", { className: cx$5("th-padding"), children: "\uC0AC\uC6D0\uAD6C\uBD84" })
+        /* @__PURE__ */ jsx("th", { className: cx$7("th-padding"), children: "\uC120\uD0DD" }),
+        /* @__PURE__ */ jsx("th", { className: cx$7("th-padding"), children: "\uC0AC\uC6D0\uBC88\uD638" }),
+        /* @__PURE__ */ jsx("th", { className: cx$7("th-padding"), children: "\uC0AC\uC6D0\uBA85" }),
+        /* @__PURE__ */ jsx("th", { className: cx$7("th-padding"), children: "\uC18C\uC18D\uAE30\uAD00\uBA85" }),
+        /* @__PURE__ */ jsx("th", { className: cx$7("th-padding"), children: "\uC0AC\uC6D0\uAD6C\uBD84" })
       ] }) }),
       /* @__PURE__ */ jsx("tbody", { children: filteredEmployees.map((employee) => {
         return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("tr", { children: [
@@ -2110,13 +2163,13 @@ function EmployeeSearchResult({ filteredEmployees, onEmployeeSelect }) {
       }) })
     ] }) : /* @__PURE__ */ jsxs(Table, { variant: "horizontal", children: [
       /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-        /* @__PURE__ */ jsx("th", { className: cx$5("th-padding"), children: "\uC120\uD0DD" }),
-        /* @__PURE__ */ jsx("th", { className: cx$5("th-padding"), children: "\uC0AC\uC6D0\uBC88\uD638" }),
-        /* @__PURE__ */ jsx("th", { className: cx$5("th-padding"), children: "\uC0AC\uC6D0\uBA85" }),
-        /* @__PURE__ */ jsx("th", { className: cx$5("th-padding"), children: "\uC18C\uC18D\uAE30\uAD00\uBA85" }),
-        /* @__PURE__ */ jsx("th", { className: cx$5("th-padding"), children: "\uC0AC\uC6D0\uAD6C\uBD84" })
+        /* @__PURE__ */ jsx("th", { className: cx$7("th-padding"), children: "\uC120\uD0DD" }),
+        /* @__PURE__ */ jsx("th", { className: cx$7("th-padding"), children: "\uC0AC\uC6D0\uBC88\uD638" }),
+        /* @__PURE__ */ jsx("th", { className: cx$7("th-padding"), children: "\uC0AC\uC6D0\uBA85" }),
+        /* @__PURE__ */ jsx("th", { className: cx$7("th-padding"), children: "\uC18C\uC18D\uAE30\uAD00\uBA85" }),
+        /* @__PURE__ */ jsx("th", { className: cx$7("th-padding"), children: "\uC0AC\uC6D0\uAD6C\uBD84" })
       ] }) }),
-      /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: 5, children: /* @__PURE__ */ jsxs("div", { className: cx$5("no-result"), children: [
+      /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: 5, children: /* @__PURE__ */ jsxs("div", { className: cx$7("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." })
@@ -2125,8 +2178,8 @@ function EmployeeSearchResult({ filteredEmployees, onEmployeeSelect }) {
   ] });
 }
 
-const { TextField } = FormField;
-const cx$4 = classNames.bind(styles$6);
+const { TextField: TextField$1 } = FormField;
+const cx$6 = classNames.bind(styles$6);
 function EmployeeSearch({
   activeTab,
   onTabChange,
@@ -2145,11 +2198,11 @@ function EmployeeSearch({
     setSearchInput("");
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: cx$4("search-section"), children: /* @__PURE__ */ jsxs("div", { className: cx$4("search-filters"), children: [
-      /* @__PURE__ */ jsxs("div", { className: cx$4("search-filter-section"), children: [
+    /* @__PURE__ */ jsx("div", { className: cx$6("search-section"), children: /* @__PURE__ */ jsxs("div", { className: cx$6("search-filters"), children: [
+      /* @__PURE__ */ jsxs("div", { className: cx$6("search-filter-section"), children: [
         /* @__PURE__ */ jsx(FormField.Label, { className: "subtitle3 text-body-1", children: "\uC131\uBA85/\uC0AC\uBC88" }),
         /* @__PURE__ */ jsx(
-          TextField,
+          TextField$1,
           {
             value: searchInput,
             onChange: (e) => setSearchInput(e.target.value),
@@ -2163,7 +2216,7 @@ function EmployeeSearch({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: cx$4("search-filter-section"), children: [
+      /* @__PURE__ */ jsxs("div", { className: cx$6("search-filter-section"), children: [
         /* @__PURE__ */ jsx(FormField.Label, { className: "subtitle3 text-body-1", children: "\uC0AC\uC6D0 \uAD6C\uBD84" }),
         /* @__PURE__ */ jsx(
           Select,
@@ -2176,12 +2229,12 @@ function EmployeeSearch({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: cx$4("search-buttons"), children: [
+      /* @__PURE__ */ jsxs("div", { className: cx$6("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$4("divider") }),
+    /* @__PURE__ */ jsx("div", { className: cx$6("divider") }),
     searchTerm && /* @__PURE__ */ jsx(
       EmployeeSearchResult,
       {
@@ -2257,20 +2310,20 @@ const EmployeeSearchModal = ({ isOpen, onClose, onSelect }) => {
   ] });
 };
 
-const cx$3 = classNames.bind(styles$7);
+const cx$5 = classNames.bind(styles$7);
 const JobVehicleSearchGrade = ({ riskGrade, hospitalizationGrade }) => {
-  return /* @__PURE__ */ jsxs("div", { className: cx$3("grade-section"), children: [
-    /* @__PURE__ */ jsxs("div", { className: cx$3("icon-title"), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cx$5("grade-section"), children: [
+    /* @__PURE__ */ jsxs("div", { className: cx$5("icon-title"), children: [
       /* @__PURE__ */ jsx(IconIllustGrade, {}),
       /* @__PURE__ */ jsx("span", { className: "typo-title5 text-body", children: "\uB4F1\uAE09" })
     ] }),
     /* @__PURE__ */ jsx("p", { className: "typo-body2 text-body_3", children: "\uC9C1\uC885, \uC6B4\uC804 \uC5EC\uBD80 \uC120\uD0DD\uC2DC \uC790\uB3D9\uC73C\uB85C \uC0B0\uC815\uB429\uB2C8\uB2E4." }),
-    /* @__PURE__ */ jsxs("div", { className: cx$3("grade-list"), children: [
-      /* @__PURE__ */ jsxs("div", { className: cx$3("grade"), children: [
+    /* @__PURE__ */ jsxs("div", { className: cx$5("grade-list"), children: [
+      /* @__PURE__ */ jsxs("div", { className: cx$5("grade"), children: [
         /* @__PURE__ */ jsx("span", { children: "\uC704\uD5D8\uB4F1\uAE09" }),
         /* @__PURE__ */ jsx("span", { className: "text-primary typo-subtitle3", children: riskGrade || "-" })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: cx$3("grade"), children: [
+      /* @__PURE__ */ jsxs("div", { className: cx$5("grade"), children: [
         /* @__PURE__ */ jsx("span", { children: "\uC785\uC6D0\uB4F1\uAE09" }),
         /* @__PURE__ */ jsx("span", { className: "text-primary typo-subtitle3", children: hospitalizationGrade || "-" })
       ] })
@@ -2278,34 +2331,42 @@ const JobVehicleSearchGrade = ({ riskGrade, hospitalizationGrade }) => {
   ] });
 };
 
-const cx$2 = classNames.bind(styles$8);
-function VehicleSearch({ vehicles, onVehicleSelect }) {
-  return /* @__PURE__ */ jsxs("div", { className: cx$2("vehicle-search-section"), children: [
+const cx$4 = classNames.bind(styles$8);
+function VehicleSearch({ vehicles, onVehicleSelect, selectedVehicle }) {
+  return /* @__PURE__ */ jsxs("div", { className: cx$4("vehicle-search-section"), children: [
     /* @__PURE__ */ jsx("p", { children: "\uC6B4\uC804 \uCC28\uC885" }),
-    /* @__PURE__ */ jsx(Radio.Root, { name: "vehicle-selection", size: "small", className: cx$2("vehicle-radio-root"), children: vehicles.map((vehicle, index) => /* @__PURE__ */ jsxs(
-      Radio.Item,
+    /* @__PURE__ */ jsx(
+      Radio.Root,
       {
-        id: `item-${vehicle.integrationCodeValue}`,
+        name: "vehicle-selection",
         size: "small",
-        value: vehicle.integrationCodeValue || "",
-        onChange: (e) => {
-          const { value } = e.target;
-          console.log(e.target.value);
-          const selected = vehicles.find((v) => v.integrationCodeValue === value);
-          if (selected) {
-            onVehicleSelect(selected);
-          }
-        },
-        className: cx$2("item"),
-        children: [
-          vehicle.integrationCodeValueName,
-          "(",
-          vehicle.integrationCodeValue,
-          ")"
-        ]
-      },
-      `item-${vehicle.integrationCodeValue}-${index}`
-    )) })
+        className: cx$4("vehicle-radio-root"),
+        defaultValue: selectedVehicle?.integrationCodeValue || "",
+        children: vehicles.map((vehicle, index) => /* @__PURE__ */ jsxs(
+          Radio.Item,
+          {
+            id: `item-${vehicle.integrationCodeValue}`,
+            size: "small",
+            value: vehicle.integrationCodeValue || "",
+            onChange: (e) => {
+              const { value } = e.target;
+              const selected = vehicles.find((v) => v.integrationCodeValue === value);
+              if (selected) {
+                onVehicleSelect(selected);
+              }
+            },
+            className: cx$4("item"),
+            children: [
+              vehicle.integrationCodeValueName,
+              "(",
+              vehicle.integrationCodeValue,
+              ")"
+            ]
+          },
+          `item-${vehicle.integrationCodeValue}-${index}`
+        ))
+      }
+    )
   ] });
 }
 
@@ -2313,7 +2374,14 @@ const useVehicleSearch = () => {
   const [selectedVehicle, setSelectedVehicle] = useState();
   const { data } = useSearchVehicleQuery();
   return {
-    VehicleSearchComponent: /* @__PURE__ */ jsx(VehicleSearch, { vehicles: data?.data?.vehicleTypeList || [], onVehicleSelect: setSelectedVehicle }),
+    VehicleSearchComponent: /* @__PURE__ */ jsx(
+      VehicleSearch,
+      {
+        vehicles: data?.data?.vehicleTypeList || [],
+        onVehicleSelect: setSelectedVehicle,
+        selectedVehicle
+      }
+    ),
     selectedVehicle,
     setSelectedVehicle,
     vehicleList: data
@@ -2324,14 +2392,33 @@ const useJobVehicleSearch = () => {
   const [rightPanelView, setRightPanelView] = useState("jobSearch");
   const [riskGrade, setRiskGrade] = useState("");
   const [hospitalizationGrade, setHospitalizationGrade] = useState("");
-  const { selectedJob, JobSearchComponent } = useJobSearchModal();
-  const { selectedVehicle, VehicleSearchComponent } = useVehicleSearch();
+  const { selectedJob, JobSearchComponent, selectedJobDetail, resetJobSearch, setSelectedJob } = useJobSearchModal();
+  const { selectedVehicle, VehicleSearchComponent, setSelectedVehicle } = useVehicleSearch();
+  const { data: riskGradeData } = useSearchRiskGradeQuery(
+    {
+      occupationIndustryCode: selectedJob?.occupationIndustryCode || "",
+      vehicleTypeCode: selectedVehicle?.integrationCodeValue || ""
+    },
+    {
+      enabled: !!selectedJob && !!selectedVehicle
+    }
+  );
+  const reset = () => {
+    setSelectedJob(null);
+    resetJobSearch();
+    setSelectedVehicle(void 0);
+    setRiskGrade("");
+    setHospitalizationGrade("");
+  };
   useEffect(() => {
-    if (selectedJob && selectedVehicle) {
-      setRiskGrade("\uC77C\uBC18(\uBE44\uC704\uD5D8\uC9C1)(0)");
-      setHospitalizationGrade("\uC77C\uBC18\uC785\uC6D0(\uBE44\uC704\uD5D8\uC9C1)(0)");
+    if (selectedJob && selectedVehicle && riskGradeData) {
+      const { riskGradeCode, riskGradeName } = riskGradeData.data;
+      setRiskGrade(`${riskGradeName}(${riskGradeCode})`);
+      setHospitalizationGrade(
+        `${selectedJobDetail?.hospitalizationGradeCodeName}(${selectedJobDetail?.hospitalizationGradeCode})`
+      );
     }
-  }, [selectedJob, selectedVehicle]);
+  }, [selectedJob, selectedVehicle, riskGradeData, selectedJobDetail]);
   return {
     selectedVehicle,
     rightPanelView,
@@ -2340,11 +2427,12 @@ const useJobVehicleSearch = () => {
     JobSearch: JobSearchComponent,
     VehicleSearch: VehicleSearchComponent,
     riskGrade,
-    hospitalizationGrade
+    hospitalizationGrade,
+    resetJobVehicleSearch: reset
   };
 };
 
-const cx$1 = classNames.bind(styles$7);
+const cx$3 = classNames.bind(styles$7);
 function useJobVehicleSearchModal() {
   const {
     selectedVehicle,
@@ -2354,11 +2442,11 @@ function useJobVehicleSearchModal() {
     JobSearch,
     VehicleSearch,
     riskGrade,
-    hospitalizationGrade
+    hospitalizationGrade,
+    resetJobVehicleSearch
   } = useJobVehicleSearch();
   const { isOpen, openModal, closeModal } = useModalState({ initialValue: true });
   const validate = () => {
-    console.log({ selectedJob, selectedVehicle });
     if (!selectedJob && !selectedVehicle) {
       return ModalUtils.alert(
         "\uC9C1\uC885\uACFC \uC6B4\uC804 \uC5EC\uBD80\xB7\uCC28\uC885\uC744 \uBAA8\uB450 \uC120\uD0DD\uD574\uC57C \uB4F1\uAE09 \uC0B0\uC815\uC774 \uAC00\uB2A5\uD569\uB2C8\uB2E4.",
@@ -2380,28 +2468,32 @@ function useJobVehicleSearchModal() {
     }
     closeModal();
   };
+  const openInitModal = () => {
+    resetJobVehicleSearch();
+    openModal();
+  };
   return {
     selectedJob,
     selectedVehicle,
     riskGrade,
     hospitalizationGrade,
-    openJobVehicleModal: openModal,
+    openJobVehicleModal: openInitModal,
     JobVehicleSearchModalComponent: /* @__PURE__ */ jsxs(Modal.Root, { isOpen, onClose: closeModal, modalSize: "xlarge", children: [
       /* @__PURE__ */ jsx(Modal.Overlay, {}),
       /* @__PURE__ */ jsxs(Modal.Content, { style: { height: "697px" }, children: [
         /* @__PURE__ */ jsx(Modal.Header, { headerTitle: "\uC9C1\uC885\xB7\uC6B4\uC804\uCC28\uC885 \uAC80\uC0C9", showCloseButton: true }),
-        /* @__PURE__ */ jsx(Modal.Body, { className: cx$1("job-vehicle-search-modal"), raw: true, children: /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs("div", { className: cx$1("left-panel"), children: [
-            /* @__PURE__ */ jsxs("div", { className: cx$1("card-section"), children: [
+        /* @__PURE__ */ jsx(Modal.Body, { className: cx$3("job-vehicle-search-modal"), raw: true, children: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: cx$3("left-panel"), children: [
+            /* @__PURE__ */ jsxs("div", { className: cx$3("card-section"), children: [
               /* @__PURE__ */ jsxs(
                 "div",
                 {
-                  className: cx$1("card-menu", { "card-selected": rightPanelView === "jobSearch" }),
+                  className: cx$3("card-menu", { "card-selected": rightPanelView === "jobSearch" }),
                   onClick: () => setRightPanelView("jobSearch"),
                   children: [
-                    /* @__PURE__ */ jsxs("div", { className: cx$1("card-title"), children: [
-                      /* @__PURE__ */ jsx(IconIllustJob, { className: cx$1("card-icon") }),
-                      /* @__PURE__ */ jsx("span", { className: cx$1("card-text", "typo-title5", "text-body"), children: "\uC9C1\uC885" }),
+                    /* @__PURE__ */ jsxs("div", { className: cx$3("card-title"), children: [
+                      /* @__PURE__ */ jsx(IconIllustJob, { className: cx$3("card-icon") }),
+                      /* @__PURE__ */ jsx("span", { className: cx$3("card-text", "typo-title5", "text-body"), children: "\uC9C1\uC885" }),
                       /* @__PURE__ */ jsx(IconSubUiArrowRight, {})
                     ] }),
                     /* @__PURE__ */ jsx("div", { className: "typo-body2 text-body_2", children: selectedJob ? selectedJob.occupationIndustryName : "\uBBF8\uC120\uD0DD" })
@@ -2411,12 +2503,12 @@ function useJobVehicleSearchModal() {
               /* @__PURE__ */ jsxs(
                 "div",
                 {
-                  className: cx$1("card-menu", { "card-selected": rightPanelView === "vehicleSelection" }),
+                  className: cx$3("card-menu", { "card-selected": rightPanelView === "vehicleSelection" }),
                   onClick: () => setRightPanelView("vehicleSelection"),
                   children: [
-                    /* @__PURE__ */ jsxs("div", { className: cx$1("card-title"), children: [
-                      /* @__PURE__ */ jsx(IconIllustVehicle, { className: cx$1("card-icon") }),
-                      /* @__PURE__ */ jsx("span", { className: cx$1("card-text", "typo-title5", "text-body"), children: "\uC6B4\uC804 \uC5EC\uBD80\xB7\uCC28\uC885" }),
+                    /* @__PURE__ */ jsxs("div", { className: cx$3("card-title"), children: [
+                      /* @__PURE__ */ jsx(IconIllustVehicle, { className: cx$3("card-icon") }),
+                      /* @__PURE__ */ jsx("span", { className: cx$3("card-text", "typo-title5", "text-body"), children: "\uC6B4\uC804 \uC5EC\uBD80\xB7\uCC28\uC885" }),
                       /* @__PURE__ */ jsx(IconSubUiArrowRight, {})
                     ] }),
                     /* @__PURE__ */ jsxs("div", { className: "typo-body2 text-body_2", children: [
@@ -2429,7 +2521,7 @@ function useJobVehicleSearchModal() {
             ] }),
             /* @__PURE__ */ jsx(JobVehicleSearchGrade, { riskGrade, hospitalizationGrade })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: cx$1("right-panel"), children: rightPanelView === "jobSearch" ? JobSearch : VehicleSearch })
+          /* @__PURE__ */ jsx("div", { className: cx$3("right-panel"), children: rightPanelView === "jobSearch" ? JobSearch : VehicleSearch })
         ] }) }),
         /* @__PURE__ */ jsx(Modal.Footer, { style: { marginTop: 0 }, children: /* @__PURE__ */ jsx(Button, { variant: "primary", size: "medium", appearance: "filled", width: "full", onClick: validate, children: "\uD655\uC778" }) })
       ] })
@@ -2437,14 +2529,197 @@ function useJobVehicleSearchModal() {
   };
 }
 
-const JobSearchModal = ({ onClose }) => {
-  const { JobSearchComponent } = useJobSearchModal();
-  return /* @__PURE__ */ jsxs(Modal.Root, { isOpen: true, onClose, modalSize: "xlarge", children: [
+const cx$2 = classNames.bind(styles$9);
+function DeaCustomerSearchResult({
+  customerList,
+  onCustomerSelect,
+  selectedCustomer
+}) {
+  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 }),
+      "\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$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("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(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 } = FormField;
+const cx$1 = classNames.bind(styles$9);
+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$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(
+          TextField,
+          {
+            value: residentNumber2,
+            maxLength: 7,
+            placeholder: "\uB4A4 7\uC790\uB9AC \uC785\uB825",
+            onChange: (e) => setResidentNumber2(e.target.value),
+            size: "medium",
+            onKeyDown,
+            onKeyUp,
+            rootProps: {
+              className: cx$1("search-input"),
+              onClear: () => {
+                setResidentNumber2("");
+              }
+            }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: cx$1("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$1("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]);
+  useEffect(() => {
+    setSelectedCustomer(null);
+  }, [customerList]);
+  const handleCustomerSelect = (customer) => {
+    setSelectedCustomer(customer);
+  };
+  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: "\uC9C1\uC885 \uAC80\uC0C9", showCloseButton: true }),
-      /* @__PURE__ */ jsx(Modal.Body, { raw: true, children: JobSearchComponent }),
-      /* @__PURE__ */ jsx(Modal.Footer, { children: /* @__PURE__ */ jsx(Button, { variant: "primary", size: "medium", appearance: "filled", width: "full", onClick: onClose, children: "\uD655\uC778" }) })
+      /* @__PURE__ */ jsx(Modal.Header, { headerTitle: "\uACE0\uAC1D \uAC80\uC0C9", showCloseButton: true }),
+      /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsx(
+        DeaCustomerSearch,
+        {
+          setSearchParams,
+          customerList,
+          onCustomerSelect: handleCustomerSelect,
+          selectedCustomer,
+          isLoading: isFetching
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Modal.Footer, { children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "primary",
+          size: "medium",
+          appearance: "filled",
+          width: "full",
+          onClick: handleSave,
+          disabled: !selectedCustomer,
+          children: "\uC800\uC7A5\uD558\uAE30"
+        }
+      ) })
     ] })
   ] });
 };
@@ -2519,7 +2794,7 @@ const useCustomerSearch = (onSelect) => {
   };
 };
 
-const cx = classNames.bind(styles$9);
+const cx = classNames.bind(styles$a);
 const highlightOnSearchKeyword = (originalText, targetString) => {
   if (!targetString || !originalText?.includes(targetString)) {
     return originalText;
@@ -2788,5 +3063,5 @@ const useRemoteIdentityVerificationPopup = (config) => {
   };
 };
 
-export { Attachment, BankStockSearchModal, CustomerSearch, EmployeeSearchModal, FormCheckbox, FormCheckboxButton, FormDatePicker, FormDateRangePicker, FormSearchJobField, FormSegmentGroup, FormSelect, FormTextField, JobSearchModal, OrganizationSearchModal, StepIndicator, resize, testSignatureBase64Data, useAddressComponent, useBankStockSearch, useCamera, useCanvasPaint, useJobVehicleSearchModal, useRemoteIdentityVerification, useRemoteIdentityVerificationIframe, useRemoteIdentityVerificationPopup, useSearchAddress };
+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 };
 //# sourceMappingURL=index.esm.js.map