sales-frontend-components 0.0.86 → 0.0.88

package/dist/index.d.ts

@@ -258,11 +258,17 @@ declare function useJobVehicleSearchModal(): {
     JobVehicleSearchModalComponent: react_jsx_runtime.JSX.Element;
 };
 
-interface JobSearchModalProps {
-    isOpen: boolean;
-    onClose: () => void;
-}
-declare const JobSearchModal: React__default.FC<JobSearchModalProps>;
+declare function useJobSearchModal(): {
+    JobSearchModal: react_jsx_runtime.JSX.Element;
+    JobSearchComponent: react_jsx_runtime.JSX.Element;
+    isJobSearchOpen: boolean;
+    openJobSearchModal: () => void;
+    closeJobSearchModal: () => void;
+    selectedJob: OccupationResponseDto | null;
+    selectedJobDetail: any;
+    resetJobSearch: () => void;
+    setSelectedJob: React$1.Dispatch<React$1.SetStateAction<OccupationResponseDto | null>>;
+};
 
 declare const CustomerSearch: ({ onSelect }: CustomerSearchProps) => react_jsx_runtime.JSX.Element;
 
@@ -339,5 +345,5 @@ declare const useRemoteIdentityVerificationPopup: (config: UseRemoteIdentityVeri
     isCreatingUrl: boolean;
 };
 
-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, EmployeeSearchModal, FormCheckbox, FormCheckboxButton, FormDatePicker, FormDateRangePicker, FormSearchJobField, FormSegmentGroup, FormSelect, FormTextField, OrganizationSearchModal, StepIndicator, resize, testSignatureBase64Data, useAddressComponent, useBankStockSearch, useCamera, useCanvasPaint, useJobSearchModal, useJobVehicleSearchModal, useRemoteIdentityVerification, useRemoteIdentityVerificationIframe, useRemoteIdentityVerificationPopup, useSearchAddress };
 export type { AttachedPhoto, AttachmentProps, BankStockItem, BankStockSearchModalProps, DownloadProps, PaintProps, Pen, RemoteIdentityVerificationSuccess, RivUrlParams, StepIndicatorProps, StepItem, UseRemoteIdentityVerificationProps, VerificationResponse, cameraItemType, cameraOptions };

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, 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';
@@ -61,11 +61,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 +89,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 +236,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,6 +303,45 @@ function JobSearchDetail({ occupationTypeCode, occupationIndustryCode }) {
   ] }) }) });
 }
 
+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(
+            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$d = classNames.bind(styles);
 function JobSearchFavorite({ filteredJobs, onJobSelect }) {
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: cx$d("popular-jobs"), children: [
@@ -449,7 +442,8 @@ function JobSearch({
   secondCategory,
   setSecondCategory,
   firstCategoryList,
-  secondCategoryList
+  secondCategoryList,
+  isLoading
 }) {
   const onKeyUp = (e) => {
     if (e.key === "Enter") {
@@ -490,7 +484,7 @@ 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: [
@@ -531,7 +525,7 @@ function JobSearch({
             }
           )
         ] }),
-        firstCategory && secondCategory && /* @__PURE__ */ jsx(JobSearchCategory, { filteredJobs, onJobSelect, searchTerm })
+        firstCategory && secondCategory && !isLoading && /* @__PURE__ */ jsx(JobSearchCategory, { filteredJobs, onJobSelect, searchTerm })
       ] })
     ] })
   ] });
@@ -582,7 +576,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 +599,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 +621,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 +635,7 @@ const useJobSearch = () => {
     activeTab,
     setActiveTab,
     selectedJob,
+    setSelectedJob,
     searchTerm,
     setSearchTerm,
     handleJobSelect,
@@ -640,7 +647,10 @@ const useJobSearch = () => {
     secondCategory,
     setSecondCategory,
     secondCategoryList,
-    firstCategoryList
+    firstCategoryList,
+    reset,
+    isLoading,
+    selectedJobDetail
   };
 };
 function useJobSearchModal() {
@@ -659,15 +669,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 +707,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 +741,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
   };
 }
 
@@ -2279,33 +2313,41 @@ const JobVehicleSearchGrade = ({ riskGrade, hospitalizationGrade }) => {
 };
 
 const cx$2 = classNames.bind(styles$8);
-function VehicleSearch({ vehicles, onVehicleSelect }) {
+function VehicleSearch({ vehicles, onVehicleSelect, selectedVehicle }) {
   return /* @__PURE__ */ jsxs("div", { className: cx$2("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$2("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$2("item"),
+            children: [
+              vehicle.integrationCodeValueName,
+              "(",
+              vehicle.integrationCodeValue,
+              ")"
+            ]
+          },
+          `item-${vehicle.integrationCodeValue}-${index}`
+        ))
+      }
+    )
   ] });
 }
 
@@ -2313,7 +2355,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 +2373,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,7 +2408,8 @@ const useJobVehicleSearch = () => {
     JobSearch: JobSearchComponent,
     VehicleSearch: VehicleSearchComponent,
     riskGrade,
-    hospitalizationGrade
+    hospitalizationGrade,
+    resetJobVehicleSearch: reset
   };
 };
 
@@ -2354,11 +2423,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,12 +2449,16 @@ 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: [
@@ -2437,18 +2510,6 @@ function useJobVehicleSearchModal() {
   };
 }
 
-const JobSearchModal = ({ onClose }) => {
-  const { JobSearchComponent } = useJobSearchModal();
-  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: "\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" }) })
-    ] })
-  ] });
-};
-
 const useCustomerSearch = (onSelect) => {
   const { triggerRef, isOpen, setIsOpen, DropDown } = useDropDown();
   const [searchKeyword, setSearchKeyword] = useState("");
@@ -2788,5 +2849,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, 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