sales-frontend-components 0.0.87 → 0.0.88

package/dist/index.cjs.js

@@ -63,11 +63,6 @@ const FormDatePicker = ({
 }) => {
   const { field, fieldState } = reactHookForm.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);
@@ -96,18 +91,25 @@ const FormDateRangePicker = ({
   defaultValue,
   ...props
 }) => {
-  const { field, fieldState } = reactHookForm.useController({ name, control, disabled, defaultValue });
+  const { field, fieldState } = reactHookForm.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__ */ jsxRuntime.jsx(
     salesFrontendDesignSystem.DateRangePicker,
@@ -236,58 +238,10 @@ const highlightOnSearchKeyword$1 = (originalText, targetString) => {
   return originalText;
 };
 
-const cx$e = classNames.bind(styles);
-function JobSearchCategory({ filteredJobs, onJobSelect, searchTerm }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$e("category-section"), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cx$e("result-title"), children: [
-      "\uCD1D ",
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: filteredJobs.length }),
-      "\uAC74\uC758 \uAC80\uC0C9\uACB0\uACFC"
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.Root, { children: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Radio.Root, { name: "job-selection", size: "small", className: cx$e("job-radio-root"), onToggle: () => {
-    }, children: filteredJobs.map((job, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-      salesFrontendDesignSystem.Accordion.Item,
-      {
-        id: `item-${job.occupationIndustryCode}-${index}-accordion`,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.HeaderDiv, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Radio.Item, { size: "small", value: job.occupationIndustryCode, onChange: () => onJobSelect(job), children: [
-            highlightOnSearchKeyword$1(job.occupationIndustryName, searchTerm),
-            "(",
-            job.occupationIndustryCode,
-            ")"
-          ] }) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.Content, { variant: "text", children: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Table, { variant: "horizontal", children: /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("th", { children: "\uD5E4\uB354 1" }),
-              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-24", children: "1\uD589 1\uBC88\uC9F8" }),
-              /* @__PURE__ */ jsxRuntime.jsx("th", { children: "\uD5E4\uB354 1-2" }),
-              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-24 ", children: "1\uD589 2\uBC88\uC9F8" })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("th", { children: "\uD5E4\uB354 2" }),
-              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "pl-24 pr-16", colSpan: 3, children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "d-flex-center-center", children: [
-                "2\uD589 1\uBC88\uC9F8 ",
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 pipe-left", children: "\uC11C\uBE0C\uD14D\uC2A4\uD2B8" }),
-                /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { variant: "neutral", size: "xsmall", appearance: "outline", children: "\uBC84\uD2BC\uBA85" })
-              ] }) })
-            ] })
-          ] }) }) })
-        ]
-      },
-      `item-${job.occupationIndustryCode}-${index}`
-    )) }) }),
-    filteredJobs.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      "`",
-      /* @__PURE__ */ jsxRuntime.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 } = method.useSearchOccupationDetailQuery({
     occupationIndustryCode,
-    occupationIndustryTypeCode: occupationTypeCode
+    occupationIndustryTypeCode: occupationTypeCode || "1"
   });
   if (!detail || !detail.data) {
     return null;
@@ -351,6 +305,45 @@ function JobSearchDetail({ occupationTypeCode, occupationIndustryCode }) {
   ] }) }) });
 }
 
+const cx$e = classNames.bind(styles);
+function JobSearchCategory({ filteredJobs, onJobSelect, searchTerm }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$e("category-section"), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cx$e("result-title"), children: [
+      "\uCD1D ",
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: filteredJobs.length }),
+      "\uAC74\uC758 \uAC80\uC0C9\uACB0\uACFC"
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.Root, { children: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Radio.Root, { name: "job-selection", size: "small", className: cx$e("job-radio-root"), onToggle: () => {
+    }, children: filteredJobs.map((job, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+      salesFrontendDesignSystem.Accordion.Item,
+      {
+        id: `item-${job.occupationIndustryCode}-${index}-accordion`,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.HeaderDiv, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Radio.Item, { size: "small", value: job.occupationIndustryCode, onChange: () => onJobSelect(job), children: [
+            highlightOnSearchKeyword$1(job.occupationIndustryName, searchTerm),
+            "(",
+            job.occupationIndustryCode,
+            ")"
+          ] }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.Content, { variant: "text", children: /* @__PURE__ */ jsxRuntime.jsx(
+            JobSearchDetail,
+            {
+              occupationTypeCode: job.occupationTypeCode || "",
+              occupationIndustryCode: job.occupationIndustryCode
+            }
+          ) })
+        ]
+      },
+      `item-${job.occupationIndustryCode}-${index}`
+    )) }) }),
+    filteredJobs.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      "`",
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$d("popular-jobs"), children: [
@@ -451,7 +444,8 @@ function JobSearch({
   secondCategory,
   setSecondCategory,
   firstCategoryList,
-  secondCategoryList
+  secondCategoryList,
+  isLoading
 }) {
   const onKeyUp = (e) => {
     if (e.key === "Enter") {
@@ -492,7 +486,7 @@ function JobSearch({
           }
         ),
         !searchTerm && /* @__PURE__ */ jsxRuntime.jsx(JobSearchFavorite, { filteredJobs, onJobSelect }),
-        searchTerm && /* @__PURE__ */ jsxRuntime.jsx(JobSearchResult, { filteredJobs, onJobSelect, searchTerm })
+        searchTerm && !isLoading && /* @__PURE__ */ jsxRuntime.jsx(JobSearchResult, { filteredJobs, onJobSelect, searchTerm })
       ] }),
       activeTab === "jobCode" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$b("select-jobs-section"), children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$b("category-section"), children: [
@@ -533,7 +527,7 @@ function JobSearch({
             }
           )
         ] }),
-        firstCategory && secondCategory && /* @__PURE__ */ jsxRuntime.jsx(JobSearchCategory, { filteredJobs, onJobSelect, searchTerm })
+        firstCategory && secondCategory && !isLoading && /* @__PURE__ */ jsxRuntime.jsx(JobSearchCategory, { filteredJobs, onJobSelect, searchTerm })
       ] })
     ] })
   ] });
@@ -584,7 +578,12 @@ const useJobSearch = () => {
   const [jobList, setJobList] = React.useState(initData);
   const [firstCategoryList, setFirstCategoryList] = React.useState([]);
   const [secondCategoryList, setSecondCategoryList] = React.useState([]);
-  const { data } = method.useSearchOccupationQuery({
+  const { data: detail } = method.useSearchOccupationDetailQuery({
+    occupationIndustryCode: selectedJob?.occupationIndustryCode || "",
+    occupationIndustryTypeCode: "1"
+  });
+  const selectedJobDetail = detail?.data;
+  const { data, isLoading } = method.useSearchOccupationQuery({
     occupationMajorCategoryCode: firstCategory,
     occupationSearchTypeCode: searchTerm ? "4" : "3",
     occupationSubCategoryCode: secondCategory,
@@ -602,7 +601,17 @@ const useJobSearch = () => {
     occupationSubCategoryCode: "",
     searchOccupationIndustryName: ""
   });
+  const reset = () => {
+    setSearchInput("");
+    setSearchTerm("");
+    setFirstCategory("");
+    setSecondCategory("");
+  };
   React.useEffect(() => {
+    reset();
+  }, [activeTab]);
+  React.useEffect(() => {
+    setSelectedJob(null);
     if (data && searchTerm && activeTab === "jobName") {
       const filteredJobs = data.data.occupationList.filter((job) => job.occupationIndustryName.includes(searchTerm));
       setJobList(filteredJobs);
@@ -614,9 +623,6 @@ const useJobSearch = () => {
       setJobList(data?.data.occupationList || []);
     }
   }, [searchTerm, data, firstCategory, secondCategory, secondCategoryData, activeTab]);
-  React.useEffect(() => {
-    console.log("jobList", jobList);
-  }, [jobList]);
   React.useEffect(() => {
     if (firstCategoryData) {
       setFirstCategoryList(firstCategoryData.data.occupationList);
@@ -631,6 +637,7 @@ const useJobSearch = () => {
     activeTab,
     setActiveTab,
     selectedJob,
+    setSelectedJob,
     searchTerm,
     setSearchTerm,
     handleJobSelect,
@@ -642,7 +649,10 @@ const useJobSearch = () => {
     secondCategory,
     setSecondCategory,
     secondCategoryList,
-    firstCategoryList
+    firstCategoryList,
+    reset,
+    isLoading,
+    selectedJobDetail
   };
 };
 function useJobSearchModal() {
@@ -661,15 +671,23 @@ function useJobSearchModal() {
     secondCategory,
     setSecondCategory,
     firstCategoryList,
-    secondCategoryList
+    secondCategoryList,
+    setSelectedJob,
+    selectedJobDetail,
+    reset,
+    isLoading
   } = useJobSearch();
   const { isOpen, openModal, closeModal } = salesFrontendDesignSystem.useModalState();
   const onTabChange = (value) => {
-    setSearchTerm("");
-    setFirstCategory("");
-    setSecondCategory("");
+    reset();
     setActiveTab(value);
   };
+  const openInitModal = () => {
+    reset();
+    setSelectedJob(null);
+    setActiveTab("jobName");
+    openModal();
+  };
   return {
     JobSearchModal: /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Root, { isOpen, onClose: closeModal, modalSize: "xlarge", children: [
       /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Overlay, {}),
@@ -691,10 +709,22 @@ function useJobSearchModal() {
             onJobSelect: handleJobSelect,
             searchInput,
             setSearchTerm,
-            setSecondCategory
+            setSecondCategory,
+            isLoading
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { variant: "primary", size: "medium", appearance: "filled", width: "full", onClick: closeModal, children: "\uD655\uC778" }) })
+        /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          salesFrontendDesignSystem.Button,
+          {
+            variant: "primary",
+            size: "medium",
+            appearance: "filled",
+            width: "full",
+            onClick: closeModal,
+            disabled: !selectedJob,
+            children: "\uD655\uC778"
+          }
+        ) })
       ] })
     ] }),
     JobSearchComponent: /* @__PURE__ */ jsxRuntime.jsx(
@@ -713,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
   };
 }
 
@@ -2281,33 +2315,41 @@ const JobVehicleSearchGrade = ({ riskGrade, hospitalizationGrade }) => {
 };
 
 const cx$2 = classNames.bind(styles$8);
-function VehicleSearch({ vehicles, onVehicleSelect }) {
+function VehicleSearch({ vehicles, onVehicleSelect, selectedVehicle }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$2("vehicle-search-section"), children: [
     /* @__PURE__ */ jsxRuntime.jsx("p", { children: "\uC6B4\uC804 \uCC28\uC885" }),
-    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Radio.Root, { name: "vehicle-selection", size: "small", className: cx$2("vehicle-radio-root"), children: vehicles.map((vehicle, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-      salesFrontendDesignSystem.Radio.Item,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      salesFrontendDesignSystem.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__ */ jsxRuntime.jsxs(
+          salesFrontendDesignSystem.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}`
+        ))
+      }
+    )
   ] });
 }
 
@@ -2315,7 +2357,14 @@ const useVehicleSearch = () => {
   const [selectedVehicle, setSelectedVehicle] = React.useState();
   const { data } = method.useSearchVehicleQuery();
   return {
-    VehicleSearchComponent: /* @__PURE__ */ jsxRuntime.jsx(VehicleSearch, { vehicles: data?.data?.vehicleTypeList || [], onVehicleSelect: setSelectedVehicle }),
+    VehicleSearchComponent: /* @__PURE__ */ jsxRuntime.jsx(
+      VehicleSearch,
+      {
+        vehicles: data?.data?.vehicleTypeList || [],
+        onVehicleSelect: setSelectedVehicle,
+        selectedVehicle
+      }
+    ),
     selectedVehicle,
     setSelectedVehicle,
     vehicleList: data
@@ -2326,14 +2375,33 @@ const useJobVehicleSearch = () => {
   const [rightPanelView, setRightPanelView] = React.useState("jobSearch");
   const [riskGrade, setRiskGrade] = React.useState("");
   const [hospitalizationGrade, setHospitalizationGrade] = React.useState("");
-  const { selectedJob, JobSearchComponent } = useJobSearchModal();
-  const { selectedVehicle, VehicleSearchComponent } = useVehicleSearch();
+  const { selectedJob, JobSearchComponent, selectedJobDetail, resetJobSearch, setSelectedJob } = useJobSearchModal();
+  const { selectedVehicle, VehicleSearchComponent, setSelectedVehicle } = useVehicleSearch();
+  const { data: riskGradeData } = method.useSearchRiskGradeQuery(
+    {
+      occupationIndustryCode: selectedJob?.occupationIndustryCode || "",
+      vehicleTypeCode: selectedVehicle?.integrationCodeValue || ""
+    },
+    {
+      enabled: !!selectedJob && !!selectedVehicle
+    }
+  );
+  const reset = () => {
+    setSelectedJob(null);
+    resetJobSearch();
+    setSelectedVehicle(void 0);
+    setRiskGrade("");
+    setHospitalizationGrade("");
+  };
   React.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,
@@ -2342,7 +2410,8 @@ const useJobVehicleSearch = () => {
     JobSearch: JobSearchComponent,
     VehicleSearch: VehicleSearchComponent,
     riskGrade,
-    hospitalizationGrade
+    hospitalizationGrade,
+    resetJobVehicleSearch: reset
   };
 };
 
@@ -2356,11 +2425,11 @@ function useJobVehicleSearchModal() {
     JobSearch,
     VehicleSearch,
     riskGrade,
-    hospitalizationGrade
+    hospitalizationGrade,
+    resetJobVehicleSearch
   } = useJobVehicleSearch();
   const { isOpen, openModal, closeModal } = salesFrontendDesignSystem.useModalState({ initialValue: true });
   const validate = () => {
-    console.log({ selectedJob, selectedVehicle });
     if (!selectedJob && !selectedVehicle) {
       return salesFrontendDesignSystem.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.",
@@ -2382,12 +2451,16 @@ function useJobVehicleSearchModal() {
     }
     closeModal();
   };
+  const openInitModal = () => {
+    resetJobVehicleSearch();
+    openModal();
+  };
   return {
     selectedJob,
     selectedVehicle,
     riskGrade,
     hospitalizationGrade,
-    openJobVehicleModal: openModal,
+    openJobVehicleModal: openInitModal,
     JobVehicleSearchModalComponent: /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Root, { isOpen, onClose: closeModal, modalSize: "xlarge", children: [
       /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Overlay, {}),
       /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Content, { style: { height: "697px" }, children: [
@@ -2439,18 +2512,6 @@ function useJobVehicleSearchModal() {
   };
 }
 
-const JobSearchModal = ({ onClose }) => {
-  const { JobSearchComponent } = useJobSearchModal();
-  return /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Root, { isOpen: true, onClose, modalSize: "xlarge", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Overlay, {}),
-    /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Content, { style: { height: "697px" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Header, { headerTitle: "\uC9C1\uC885 \uAC80\uC0C9", showCloseButton: true }),
-      /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Body, { raw: true, children: JobSearchComponent }),
-      /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { variant: "primary", size: "medium", appearance: "filled", width: "full", onClick: onClose, children: "\uD655\uC778" }) })
-    ] })
-  ] });
-};
-
 const useCustomerSearch = (onSelect) => {
   const { triggerRef, isOpen, setIsOpen, DropDown } = salesFrontendDesignSystem.useDropDown();
   const [searchKeyword, setSearchKeyword] = React.useState("");
@@ -2802,7 +2863,6 @@ exports.FormSearchJobField = FormSearchJobField;
 exports.FormSegmentGroup = FormSegmentGroup;
 exports.FormSelect = FormSelect;
 exports.FormTextField = FormTextField;
-exports.JobSearchModal = JobSearchModal;
 exports.OrganizationSearchModal = OrganizationSearchModal;
 exports.StepIndicator = StepIndicator;
 exports.resize = resize;
@@ -2811,6 +2871,7 @@ exports.useAddressComponent = useAddressComponent;
 exports.useBankStockSearch = useBankStockSearch;
 exports.useCamera = useCamera;
 exports.useCanvasPaint = useCanvasPaint;
+exports.useJobSearchModal = useJobSearchModal;
 exports.useJobVehicleSearchModal = useJobVehicleSearchModal;
 exports.useRemoteIdentityVerification = useRemoteIdentityVerification;
 exports.useRemoteIdentityVerificationIframe = useRemoteIdentityVerificationIframe;