sales-frontend-components 0.0.66 → 0.0.67

package/dist/index.esm.js

@@ -1,6 +1,6 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useController } from 'react-hook-form';
-import { CheckboxButton, Checkbox, DatePicker, DateRangePicker, SegmentGroup, FormField, Icon, Button, Modal, List, ListItem, Segment, Select, Accordion } from 'sales-frontend-design-system';
+import { CheckboxButton, Checkbox, DatePicker, DateRangePicker, SegmentGroup, FormField, Icon, Button, Modal, List, ListItem, Segment, Select, Accordion, FormCore, RadioGroup, useModalState, Radio, Table, Tab, ModalUtils } from 'sales-frontend-design-system';
 import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import styles from './step-indicator/step-indicator.module.scss';
 import styles$1 from './camera/camera.module.scss';
@@ -8,6 +8,11 @@ import styles$2 from './debug-tool/debug-tool.module.scss';
 import { isClient, getEnvironmentFromHostname } from 'sales-frontend-utils';
 import { useDebugStore } from 'sales-frontend-api';
 import styles$3 from './debug-tool/features/network-log/network-log.module.scss';
+import { useSearchModalAddressQuery, useSearchOccupationQuery, useSearchVehicleQuery } from 'sales-frontend-api/method';
+import styles$4 from './modal/standard/address-search/select-address.module.scss';
+import styles$5 from './modal/pre-standard/job-vehicle-search-modal/job-vehicle-search-modal.module.scss';
+import styles$6 from './modal/pre-standard/job-search-modal/job-search-modal.module.scss';
+import styles$7 from './modal/pre-standard/vehicle-search-modal/vehicle-search-modal.module.scss';
 
 const FormCheckboxButton = ({
   name,
@@ -254,7 +259,7 @@ function requireBind () {
 var bindExports = requireBind();
 var classNames = /*@__PURE__*/getDefaultExportFromCjs(bindExports);
 
-const cx$1 = classNames.bind(styles);
+const cx$9 = classNames.bind(styles);
 const StepIndicator = ({
   items,
   onClickItem,
@@ -270,23 +275,23 @@ const StepIndicator = ({
       }
     });
   }, [items, defaultValue]);
-  return /* @__PURE__ */ jsxs("div", { className: cx$1("stepper-layout"), children: [
-    /* @__PURE__ */ jsx("div", { className: cx$1("stepper"), children: items.map((item, idx) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+  return /* @__PURE__ */ jsxs("div", { className: cx$9("stepper-layout"), children: [
+    /* @__PURE__ */ jsx("div", { className: cx$9("stepper"), children: items.map((item, idx) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: cx$1("circle", (defaultValue === item.value || current === idx) && "active"),
+          className: cx$9("circle", (defaultValue === item.value || current === idx) && "active"),
           onClick: () => onClickItem?.(item),
-          children: item.isCompleted || idx < current ? /* @__PURE__ */ jsx("span", { className: cx$1("completed") }) : ++idx
+          children: item.isCompleted || idx < current ? /* @__PURE__ */ jsx("span", { className: cx$9("completed") }) : ++idx
         }
       ),
-      idx < items.length && Array.from({ length: dotCount }).map((_, dotIdx) => /* @__PURE__ */ jsx("span", { className: cx$1("dot") }, `dot-${idx}-${dotIdx}`))
+      idx < items.length && Array.from({ length: dotCount }).map((_, dotIdx) => /* @__PURE__ */ jsx("span", { className: cx$9("dot") }, `dot-${idx}-${dotIdx}`))
     ] }, `num-${idx}`)) }),
-    /* @__PURE__ */ jsx("ul", { className: cx$1("step-labels"), children: items.map((item, idx) => /* @__PURE__ */ jsx("li", { className: cx$1((defaultValue === item.value || current === idx) && "active"), children: /* @__PURE__ */ jsx("span", { children: item.label ?? item.value }) }, `label-${idx}`)) })
+    /* @__PURE__ */ jsx("ul", { className: cx$9("step-labels"), children: items.map((item, idx) => /* @__PURE__ */ jsx("li", { className: cx$9((defaultValue === item.value || current === idx) && "active"), children: /* @__PURE__ */ jsx("span", { children: item.label ?? item.value }) }, `label-${idx}`)) })
   ] });
 };
 
-const cx = classNames.bind(styles$1);
+const cx$8 = classNames.bind(styles$1);
 function Attachment({
   photos,
   onAddPhoto,
@@ -303,14 +308,14 @@ function Attachment({
   };
   const renderPhotoSingle = () => {
     if (photos.length === 0) {
-      return /* @__PURE__ */ jsx("div", { className: cx("single-photo-item", "add-photo-item"), children: /* @__PURE__ */ jsxs("button", { className: cx("add-photo-button-single"), onClick: handleAddPhoto, children: [
+      return /* @__PURE__ */ jsx("div", { className: cx$8("single-photo-item", "add-photo-item"), children: /* @__PURE__ */ jsxs("button", { className: cx$8("add-photo-button-single"), onClick: handleAddPhoto, children: [
         /* @__PURE__ */ jsx(Icon, { name: "illust/camera" }),
         /* @__PURE__ */ jsx("span", { children: buttonText || "\uC0AC\uC9C4 \uCCA8\uBD80\uD558\uAE30" })
       ] }) });
     }
-    return photos.map((photo) => /* @__PURE__ */ jsxs("div", { className: cx("single-photo-item"), children: [
-      /* @__PURE__ */ jsx("div", { className: cx("photo-placeholder"), children: /* @__PURE__ */ jsx("img", { src: photo.src, alt: photo.name, className: cx("photo-image") }) }),
-      /* @__PURE__ */ jsx("button", { className: cx("remove-button"), onClick: () => handleRemovePhoto(photo.id), "aria-label": "\uC0AC\uC9C4 \uC0AD\uC81C", children: "\xD7" })
+    return photos.map((photo) => /* @__PURE__ */ jsxs("div", { className: cx$8("single-photo-item"), children: [
+      /* @__PURE__ */ jsx("div", { className: cx$8("photo-placeholder"), children: /* @__PURE__ */ jsx("img", { src: photo.src, alt: photo.name, className: cx$8("photo-image") }) }),
+      /* @__PURE__ */ jsx("button", { className: cx$8("remove-button"), onClick: () => handleRemovePhoto(photo.id), "aria-label": "\uC0AC\uC9C4 \uC0AD\uC81C", children: "\xD7" })
     ] }, photo.id));
   };
   const renderPhotoGrid = () => {
@@ -318,12 +323,12 @@ function Attachment({
     const gridItems = [];
     if (photos.length < maxPhotos) {
       gridItems.push(
-        /* @__PURE__ */ jsx("div", { className: cx("photo-item", "add-photo-item"), children: /* @__PURE__ */ jsxs("button", { className: cx("add-photo-button"), onClick: handleAddPhoto, children: [
+        /* @__PURE__ */ jsx("div", { className: cx$8("photo-item", "add-photo-item"), children: /* @__PURE__ */ jsxs("button", { className: cx$8("add-photo-button"), onClick: handleAddPhoto, children: [
           /* @__PURE__ */ jsx(Icon, { name: "illust/camera" }),
           /* @__PURE__ */ jsx("span", { children: buttonText || "\uCCA8\uBD80\uD558\uAE30" }),
-          /* @__PURE__ */ jsxs("span", { className: cx("photo-count"), children: [
+          /* @__PURE__ */ jsxs("span", { className: cx$8("photo-count"), children: [
             "(",
-            /* @__PURE__ */ jsx("span", { className: cx("photo-count-number"), children: photos.length }),
+            /* @__PURE__ */ jsx("span", { className: cx$8("photo-count-number"), children: photos.length }),
             "/",
             maxPhotos,
             ")"
@@ -333,9 +338,9 @@ function Attachment({
     }
     photos.forEach((photo) => {
       gridItems.push(
-        /* @__PURE__ */ jsxs("div", { className: cx("photo-item"), children: [
-          /* @__PURE__ */ jsx("div", { className: cx("photo-placeholder"), children: /* @__PURE__ */ jsx("img", { src: photo.src, alt: photo.name, className: cx("photo-image") }) }),
-          /* @__PURE__ */ jsx("button", { className: cx("remove-button"), onClick: () => handleRemovePhoto(photo.id), "aria-label": "\uC0AC\uC9C4 \uC0AD\uC81C", children: "\xD7" })
+        /* @__PURE__ */ jsxs("div", { className: cx$8("photo-item"), children: [
+          /* @__PURE__ */ jsx("div", { className: cx$8("photo-placeholder"), children: /* @__PURE__ */ jsx("img", { src: photo.src, alt: photo.name, className: cx$8("photo-image") }) }),
+          /* @__PURE__ */ jsx("button", { className: cx$8("remove-button"), onClick: () => handleRemovePhoto(photo.id), "aria-label": "\uC0AC\uC9C4 \uC0AD\uC81C", children: "\xD7" })
         ] }, photo.id)
       );
     });
@@ -346,9 +351,9 @@ function Attachment({
     return null;
   }
   if (type === "single") {
-    return /* @__PURE__ */ jsx("div", { className: cx("photo-single"), children: renderPhotoSingle() });
+    return /* @__PURE__ */ jsx("div", { className: cx$8("photo-single"), children: renderPhotoSingle() });
   }
-  return /* @__PURE__ */ jsx("div", { className: cx("photo-grid", { linear: type === "linear" }), children: renderPhotoGrid() });
+  return /* @__PURE__ */ jsx("div", { className: cx$8("photo-grid", { linear: type === "linear" }), children: renderPhotoGrid() });
 }
 
 const maxImageSize = 3 * 1024 * 1024;
@@ -1546,5 +1551,918 @@ const DebugTool = ({ onLogin, envOverride, menuItemsOverride }) => {
   ] });
 };
 
-export { Attachment, DebugTool, FormCheckbox, FormCheckboxButton, FormDatePicker, FormDateRangePicker, FormSegmentGroup, FormTextField, StepIndicator, resize, testSignatureBase64Data, useCamera, useCanvasPaint };
+const highlightOnSearchKeyword = (originalText, targetString) => {
+  if (originalText?.includes(targetString)) {
+    const replacedText = [];
+    const splitText = originalText.split(targetString);
+    for (let i = 0; i < splitText.length; i++) {
+      replacedText.push(splitText[i]);
+      if (i !== splitText.length - 1) {
+        replacedText.push(/* @__PURE__ */ jsx("span", { className: "text-primary", children: targetString }));
+      }
+    }
+    return replacedText;
+  }
+  return originalText;
+};
+
+const cx$7 = classNames.bind(styles$4);
+const { InputBox, Input } = FormCore;
+const AddressSearchInitialText = () => {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("p", { className: cx$7("guide-title"), children: "\uC774\uB807\uAC8C \uAC80\uC0C9\uD574 \uBCF4\uC138\uC694." }),
+    /* @__PURE__ */ jsxs("ul", { className: cx$7("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" }),
+      /* @__PURE__ */ jsx("li", { children: "\uC608) \uC5EC\uC758\uB3C4\uB3D9, \uC5ED\uC0BC\uB3D9" }),
+      /* @__PURE__ */ jsx("li", { children: "\uC6B0\uD3B8\uBC88\uD638 \uB2E4\uC12F\uC790\uB9AC\uB97C \uBAA8\uB450 \uC785\uB825\uD574\uC8FC\uC138\uC694" }),
+      /* @__PURE__ */ jsx("li", { children: "\uC608) 07345, 06232" })
+    ] })
+  ] });
+};
+const AddressSearchResult = ({
+  addressSearchList,
+  onChange,
+  searchKeyword,
+  selectedAddress
+}) => {
+  const [filterList, setFilterList] = useState([]);
+  useEffect(() => {
+    const filterList2 = addressSearchList.filter(
+      (item) => item.address.includes(searchKeyword) || item.oldAddress.includes(searchKeyword)
+    ) || [];
+    setFilterList(filterList2);
+  }, [addressSearchList, searchKeyword]);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("p", { className: cx$7("guide-title"), children: [
+      "\uCD1D ",
+      /* @__PURE__ */ jsx("span", { className: "text-primary", children: filterList.length }),
+      "\uAC74\uC758 \uAC80\uC0C9\uACB0\uACFC"
+    ] }),
+    filterList.length > 0 && /* @__PURE__ */ jsx(
+      RadioGroup,
+      {
+        items: filterList.map((item) => ({
+          value: item.address,
+          select: item.address === selectedAddress?.address && item.zipCode === selectedAddress?.zipCode,
+          label: /* @__PURE__ */ jsxs("div", { className: cx$7("search-result"), children: [
+            /* @__PURE__ */ jsxs("div", { className: cx$7("zipcode"), children: [
+              " ",
+              highlightOnSearchKeyword(item.zipCode, searchKeyword)
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: cx$7("divider") }),
+            /* @__PURE__ */ jsxs("div", { className: cx$7("address-info"), children: [
+              /* @__PURE__ */ jsx("span", { className: cx$7("address"), children: highlightOnSearchKeyword(item.address, searchKeyword) }),
+              /* @__PURE__ */ jsx("span", { className: cx$7("old-address"), children: highlightOnSearchKeyword(item.oldAddress, searchKeyword) })
+            ] })
+          ] }),
+          id: item.address
+        })),
+        className: cx$7("radio-group"),
+        name: "address-search",
+        size: "medium",
+        defaultValue: "",
+        onChange
+      }
+    ),
+    filterList.length === 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      "`",
+      /* @__PURE__ */ jsx("span", { className: "text-primary", children: searchKeyword }),
+      "`\uC5D0 \uB300\uD55C \uAC80\uC0C9\uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
+    ] })
+  ] });
+};
+const AddressSearchDetailInput = ({
+  selectedAddress,
+  onDetailChange,
+  step,
+  detailAddressInput
+}) => {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        " ",
+        selectedAddress.zipCode
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        "|",
+        /* @__PURE__ */ jsx("span", { children: `${selectedAddress.address}` })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(FormField.Label, { id: "detail", style: { width: "90px" }, children: "\uC0C1\uC138\uC8FC\uC18C" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          placeholder: "\uC0C1\uC138\uC8FC\uC18C \uC785\uB825",
+          onChange: onDetailChange,
+          size: "large",
+          value: detailAddressInput,
+          ...step === "detail-input" && { autoFocus: true }
+        }
+      )
+    ] })
+  ] });
+};
+function AddressComponent({ isOpen, onClose, setValue }) {
+  const {
+    onAddressSearchClear,
+    addressSearchKeyword,
+    addressSearchStep,
+    onAddressSearchNext,
+    nextButtonDisabled,
+    detailAddressInput,
+    addressSearchList,
+    onSearch,
+    onKeyUp,
+    onSelectChange,
+    setDetail,
+    search,
+    searchInput,
+    selectedAddress
+  } = useSearchAddress({
+    setValue,
+    onClose,
+    isOpen
+  });
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Modal.Root, { isOpen, onClose, modalSize: "full-screen", children: [
+    /* @__PURE__ */ jsx(Modal.Overlay, {}),
+    /* @__PURE__ */ jsxs(Modal.Content, { children: [
+      /* @__PURE__ */ jsx(Modal.Header, { headerTitle: "\uC8FC\uC18C \uAC80\uC0C9", showCloseButton: true }),
+      /* @__PURE__ */ jsxs(Modal.Body, { children: [
+        /* @__PURE__ */ jsx(
+          InputBox,
+          {
+            clearable: true,
+            endElement: /* @__PURE__ */ jsx(Icon, { name: "sub-ui/search", onClick: search }),
+            onClear: onAddressSearchClear,
+            children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                ...addressSearchStep !== "detail-input" && { autoFocus: true },
+                onChange: onSearch,
+                onKeyUp,
+                value: searchInput,
+                placeholder: "\uC9C0\uBC88, \uB3C4\uB85C\uBA85, \uAC74\uBB3C\uBA85, \uC6B0\uD3B8\uBC88\uD638 \uC785\uB825",
+                size: "large"
+              }
+            )
+          }
+        ),
+        addressSearchStep === "initial" && /* @__PURE__ */ jsx(AddressSearchInitialText, {}),
+        addressSearchStep === "search-result" && /* @__PURE__ */ jsx(
+          AddressSearchResult,
+          {
+            onChange: onSelectChange,
+            addressSearchList: addressSearchList || [],
+            searchKeyword: addressSearchKeyword,
+            selectedAddress
+          }
+        ),
+        addressSearchStep === "detail-input" && selectedAddress && /* @__PURE__ */ jsx(
+          AddressSearchDetailInput,
+          {
+            selectedAddress,
+            onDetailChange: setDetail,
+            step: addressSearchStep,
+            detailAddressInput
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(Modal.Footer, { children: addressSearchStep !== "initial" && /* @__PURE__ */ jsxs(
+        Button,
+        {
+          onClick: onAddressSearchNext,
+          variant: "primary",
+          size: "medium",
+          appearance: "filled",
+          width: "full",
+          disabled: nextButtonDisabled,
+          children: [
+            addressSearchStep === "search-result" && "\uB2E4\uC74C(1/2)",
+            addressSearchStep === "detail-input" && "\uD655\uC778(2/2)"
+          ]
+        }
+      ) })
+    ] })
+  ] }) });
+}
+
+function useSearchAddress({ setValue, onClose, isOpen }) {
+  const [searchKeyword, setSearchKeyword] = useState("");
+  const [step, setStep] = useState("initial");
+  const [selectedAddress, setSelectedAddress] = useState(null);
+  const [searchInput, setSearchInput] = useState("");
+  const [detailAddressInput, setDetailAddressInput] = useState("");
+  const { data: addressList } = useSearchModalAddressQuery({ searchKeyword });
+  const [nextButtonDisabled, setNextButtonDisabled] = useState(false);
+  const onNext = () => {
+    if (step === "search-result") {
+      setStep("detail-input");
+      setNextButtonDisabled(true);
+    } else {
+      setValue({
+        address: selectedAddress?.address || "",
+        oldAddress: selectedAddress?.oldAddress || "",
+        zipCode: selectedAddress?.zipCode || "",
+        detail: detailAddressInput || ""
+      });
+      onClose();
+    }
+  };
+  const onSearch = (e) => {
+    const typeStr = e.target.value;
+    setSearchInput(typeStr);
+  };
+  const search = () => {
+    if (searchInput === "") {
+      onClear();
+      return;
+    }
+    if (searchInput && searchInput.length > 1) {
+      setSearchKeyword(searchInput);
+      setStep("search-result");
+      setSelectedAddress(null);
+      setDetailAddressInput("");
+      setNextButtonDisabled(true);
+    }
+  };
+  const onKeyUp = (e) => {
+    if (e.key === "Enter") {
+      search();
+    }
+  };
+  const onSelectChange = (e) => {
+    const selectedAddress2 = e.target.value;
+    if (selectedAddress2) {
+      const adr = addressList?.find((addr) => {
+        return addr.address === selectedAddress2;
+      });
+      setSelectedAddress(adr || null);
+      setNextButtonDisabled(false);
+    }
+  };
+  const onClear = useCallback(() => {
+    setSearchKeyword("");
+    setSearchInput("");
+    setSelectedAddress(null);
+    setDetailAddressInput("");
+    setStep("initial");
+  }, []);
+  const setDetail = (e) => {
+    const detail = e.target.value;
+    setDetailAddressInput(detail);
+    if (detail) {
+      setNextButtonDisabled(false);
+    } else {
+      setNextButtonDisabled(true);
+    }
+  };
+  useEffect(() => {
+    if (isOpen) {
+      setSelectedAddress(null);
+      setDetailAddressInput("");
+      setStep("initial");
+      setSearchKeyword("");
+    }
+  }, [isOpen]);
+  return {
+    onAddressSearchClear: onClear,
+    onAddressSearchNext: onNext,
+    addressSearchKeyword: searchKeyword,
+    addressSearchList: addressList,
+    addressSearchStep: step,
+    selectedAddress,
+    addressSearchOnValueChange: onSelectChange,
+    nextButtonDisabled,
+    detailAddressInput,
+    onSearch,
+    onKeyUp,
+    onSelectChange,
+    setDetail,
+    search,
+    searchInput
+  };
+}
+const useAddressComponent = () => {
+  const [fullAddress, setFullAddress] = useState(null);
+  const { isOpen, closeModal, openModal } = useModalState();
+  const AddressSearchComponent = () => /* @__PURE__ */ jsx(AddressComponent, { isOpen, onClose: closeModal, setValue: setFullAddress });
+  return {
+    fullAddress,
+    openModal,
+    AddressSearchComponent
+  };
+};
+
+const cx$6 = classNames.bind(styles$5);
+const JobVehicleSearchGrade = ({ riskGrade, hospitalizationGrade }) => {
+  return /* @__PURE__ */ jsxs("div", { className: cx$6("grade-section"), children: [
+    /* @__PURE__ */ jsxs("div", { className: cx$6("icon-title"), children: [
+      /* @__PURE__ */ jsx(Icon, { name: "illust/grade" }),
+      /* @__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$6("grade-list"), children: [
+      /* @__PURE__ */ jsxs("div", { className: cx$6("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$6("grade"), children: [
+        /* @__PURE__ */ jsx("span", { children: "\uC785\uC6D0\uB4F1\uAE09" }),
+        /* @__PURE__ */ jsx("span", { className: "text-primary typo-subtitle3", children: hospitalizationGrade || "-" })
+      ] })
+    ] })
+  ] });
+};
+
+const JOB_SEARCH_TABS = [
+  { value: "jobName", label: "\uC9C1\uC885\uBA85 \uAC80\uC0C9" },
+  { value: "jobCode", label: "\uBD84\uB958\uB85C \uAC80\uC0C9" }
+];
+
+const cx$5 = classNames.bind(styles$6);
+function JobSearchCategory({ filteredJobs, onJobSelect, searchTerm }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: cx$5("category-section"), children: [
+    /* @__PURE__ */ jsxs("p", { className: cx$5("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$5("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(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."
+    ] })
+  ] }) });
+}
+
+const cx$4 = classNames.bind(styles$6);
+function JobSearchFavorite({ filteredJobs, onJobSelect }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: cx$4("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$4("job-radio-root"), children: filteredJobs.map((job, index) => /* @__PURE__ */ jsxs(
+      Accordion.Item,
+      {
+        id: `item-${job.occupationIndustryCode}-${index}`,
+        className: cx$4("accordion-item"),
+        children: [
+          /* @__PURE__ */ jsx(Accordion.HeaderDiv, { className: cx$4("accordion-header-item"), children: /* @__PURE__ */ jsxs(
+            Radio.Item,
+            {
+              size: "small",
+              value: job.occupationIndustryCode,
+              onChange: () => onJobSelect(job),
+              className: cx$4("radio-item"),
+              children: [
+                job.occupationIndustryName,
+                "(",
+                job.occupationIndustryCode,
+                ")"
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Accordion.Content, { variant: "text", children: "\uD56D\uBAA9 1 \uB0B4\uC6A9" })
+        ]
+      },
+      `item-${job.occupationIndustryCode}-${index}`
+    )) }) })
+  ] }) });
+}
+
+const cx$3 = classNames.bind(styles$6);
+function JobSearchResult({ filteredJobs, onJobSelect, searchTerm }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: cx$3("popular-jobs"), children: [
+    /* @__PURE__ */ jsxs("p", { className: cx$3("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$3("job-radio-root"), children: filteredJobs.map((job) => /* @__PURE__ */ jsxs(
+      Accordion.Item,
+      {
+        id: `item-${job.occupationIndustryCode}`,
+        children: [
+          /* @__PURE__ */ jsx(Accordion.HeaderDiv, { children: /* @__PURE__ */ jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsx(
+            Radio.Item,
+            {
+              id: `item-${job.occupationIndustryCode}`,
+              size: "small",
+              value: job.occupationIndustryCode,
+              onChange: () => {
+                onJobSelect(job);
+              },
+              children: highlightOnSearchKeyword(job.occupationIndustryName, searchTerm)
+            }
+          ) }) }),
+          /* @__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" })
+              ] }) })
+            ] })
+          ] }) }) })
+        ]
+      },
+      job.occupationIndustryCode
+    )) }) }),
+    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 { TextField } = FormField;
+const cx$2 = classNames.bind(styles$6);
+const { Option } = Select;
+function JobSearch({
+  activeTab,
+  onTabChange,
+  searchTerm,
+  setSearchInput,
+  filteredJobs,
+  onJobSelect,
+  setSearchTerm,
+  searchInput,
+  firstCategory,
+  setFirstCategory,
+  secondCategory,
+  setSecondCategory,
+  firstCategoryList,
+  secondCategoryList
+}) {
+  const onKeyUp = (e) => {
+    if (e.key === "Enter") {
+      setSearchTerm(searchInput);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Tab.Root,
+      {
+        defaultValue: activeTab,
+        onValueChange: onTabChange,
+        scroll: "fixed",
+        size: "small",
+        variant: "sub",
+        style: { gap: 0, overflow: "visible" },
+        children: JOB_SEARCH_TABS.map((tab) => /* @__PURE__ */ jsx(Tab.Item, { value: tab.value, children: tab.label }, tab.value))
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { children: [
+      activeTab === "jobName" && /* @__PURE__ */ jsxs("div", { className: cx$2("favorite-jobs-section"), children: [
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            placeholder: "\uC9C1\uC885\uBA85 \uAC80\uC0C9",
+            value: searchInput,
+            onKeyUp,
+            onChange: (e) => setSearchInput(e.target.value),
+            className: styles$6.searchInput,
+            size: "medium",
+            rootProps: {
+              endElement: /* @__PURE__ */ jsx(Icon, { name: "sub-ui/search", onClick: () => setSearchTerm(searchInput) }),
+              onClear: () => {
+                setSearchTerm("");
+                setSearchInput("");
+              }
+            }
+          }
+        ),
+        !searchTerm && /* @__PURE__ */ jsx(JobSearchFavorite, { filteredJobs, onJobSelect }),
+        searchTerm && /* @__PURE__ */ jsx(JobSearchResult, { filteredJobs, onJobSelect, searchTerm })
+      ] }),
+      activeTab === "jobCode" && /* @__PURE__ */ jsxs("div", { className: cx$2("select-jobs-section"), children: [
+        /* @__PURE__ */ jsxs("div", { className: cx$2("category-section"), children: [
+          /* @__PURE__ */ jsx(
+            Select,
+            {
+              name: "first_category",
+              onChange: (value) => {
+                setFirstCategory(value);
+                setSecondCategory("");
+              },
+              placeholder: "\uB300\uBD84\uB958 \uC120\uD0DD",
+              rootProps: {
+                style: {
+                  // width: '300px'
+                }
+              },
+              size: "large",
+              value: firstCategory,
+              children: firstCategoryList.map((option, index) => /* @__PURE__ */ jsx(Option, { value: option.occupationIndustryCode, children: option.occupationIndustryName }, `${index}-${option.occupationIndustryCode}`))
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Select,
+            {
+              name: "second_category",
+              onChange: setSecondCategory,
+              placeholder: "\uC911\uBD84\uB958 \uC120\uD0DD",
+              rootProps: {
+                style: {
+                  // width: '300px'
+                }
+              },
+              size: "large",
+              value: secondCategory,
+              disabled: !firstCategory,
+              children: secondCategoryList.map((option, index) => /* @__PURE__ */ jsx(Option, { value: option.occupationIndustryCode, children: option.occupationIndustryName }, `${index}-${option.occupationIndustryCode}`))
+            }
+          )
+        ] }),
+        firstCategory && secondCategory && /* @__PURE__ */ jsx(JobSearchCategory, { filteredJobs, onJobSelect, searchTerm })
+      ] })
+    ] })
+  ] });
+}
+
+const initData = [
+  {
+    occupationIndustryCode: "430101",
+    occupationIndustryName: "\uD68C\uC0AC \uC0AC\uBB34\uC9C1 \uC885\uC0AC\uC790",
+    occupationTypeCode: null,
+    historySequence: 0
+  },
+  {
+    occupationIndustryCode: "400301",
+    occupationIndustryName: "\uACBD\uC601\uC9C0\uC6D0 \uC0AC\uBB34\uC9C1 \uAD00\uB9AC\uC790",
+    occupationTypeCode: null,
+    historySequence: 0
+  },
+  {
+    occupationIndustryCode: "510201",
+    occupationIndustryName: "\uC804\uC5C5\uC8FC\uBD80",
+    occupationTypeCode: null,
+    historySequence: 0
+  },
+  {
+    occupationIndustryCode: "442501",
+    occupationIndustryName: "\uC8FC\uBC29\uC7A5 \uBC0F \uC870\uB9AC\uC0AC(\uC120\uBC15 \uC870\uB9AC\uC0AC \uC81C\uC678)",
+    occupationTypeCode: null,
+    historySequence: 0
+  },
+  {
+    occupationIndustryCode: "450303",
+    occupationIndustryName: "\uBCF4\uD5D8\uC124\uACC4\uC0AC(\uB2F9\uC0AC)",
+    occupationTypeCode: null,
+    historySequence: 0
+  }
+];
+const useJobSearch = () => {
+  const [activeTab, setActiveTab] = useState(JOB_SEARCH_TABS[0]?.value ?? "");
+  const [selectedJob, setSelectedJob] = useState(null);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [searchInput, setSearchInput] = useState("");
+  const handleJobSelect = (job) => {
+    setSelectedJob(job);
+  };
+  const [firstCategory, setFirstCategory] = useState("");
+  const [secondCategory, setSecondCategory] = useState("");
+  const [jobList, setJobList] = useState(initData);
+  const [firstCategoryList, setFirstCategoryList] = useState([]);
+  const [secondCategoryList, setSecondCategoryList] = useState([]);
+  const { data } = useSearchOccupationQuery({
+    occupationMajorCategoryCode: firstCategory,
+    occupationSearchTypeCode: searchTerm ? "4" : "3",
+    occupationSubCategoryCode: secondCategory,
+    searchOccupationIndustryName: searchTerm
+  });
+  const { data: firstCategoryData } = useSearchOccupationQuery({
+    occupationMajorCategoryCode: "",
+    occupationSearchTypeCode: "1",
+    occupationSubCategoryCode: "",
+    searchOccupationIndustryName: ""
+  });
+  const { data: secondCategoryData } = useSearchOccupationQuery({
+    occupationMajorCategoryCode: firstCategory,
+    occupationSearchTypeCode: "2",
+    occupationSubCategoryCode: "",
+    searchOccupationIndustryName: ""
+  });
+  useEffect(() => {
+    if (data && searchTerm && activeTab === "jobName") {
+      const filteredJobs = data.data.occupationList.filter((job) => job.occupationIndustryName.includes(searchTerm));
+      setJobList(filteredJobs);
+    } else if (!data && searchTerm && activeTab === "jobName") {
+      setJobList([]);
+    } else if (!searchTerm && activeTab === "jobName") {
+      setJobList(initData);
+    } else if (activeTab === "jobCode" && firstCategory && secondCategory) {
+      setJobList(data?.data.occupationList || []);
+    }
+  }, [searchTerm, data, firstCategory, secondCategory, secondCategoryData, activeTab]);
+  useEffect(() => {
+    console.log("jobList", jobList);
+  }, [jobList]);
+  useEffect(() => {
+    if (firstCategoryData) {
+      setFirstCategoryList(firstCategoryData.data.occupationList);
+    }
+  }, [firstCategoryData]);
+  useEffect(() => {
+    if (secondCategoryData) {
+      setSecondCategoryList(secondCategoryData.data.occupationList);
+    }
+  }, [secondCategoryData]);
+  return {
+    activeTab,
+    setActiveTab,
+    selectedJob,
+    searchTerm,
+    setSearchTerm,
+    handleJobSelect,
+    filteredJobs: jobList,
+    searchInput,
+    setSearchInput,
+    firstCategory,
+    setFirstCategory,
+    secondCategory,
+    setSecondCategory,
+    secondCategoryList,
+    firstCategoryList
+  };
+};
+function useJobSearchModal() {
+  const {
+    activeTab,
+    setActiveTab,
+    searchTerm,
+    setSearchTerm,
+    filteredJobs,
+    handleJobSelect,
+    selectedJob,
+    searchInput,
+    setSearchInput,
+    firstCategory,
+    setFirstCategory,
+    secondCategory,
+    setSecondCategory,
+    firstCategoryList,
+    secondCategoryList
+  } = useJobSearch();
+  const { isOpen, openModal, closeModal } = useModalState();
+  const onTabChange = (value) => {
+    setSearchTerm("");
+    setFirstCategory("");
+    setSecondCategory("");
+    setActiveTab(value);
+  };
+  return {
+    JobSearchModal: /* @__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 \uAC80\uC0C9", showCloseButton: true }),
+        /* @__PURE__ */ jsx(Modal.Body, { raw: true, children: /* @__PURE__ */ jsx(
+          JobSearch,
+          {
+            firstCategory,
+            firstCategoryList,
+            secondCategoryList,
+            setFirstCategory,
+            secondCategory,
+            activeTab,
+            onTabChange,
+            searchTerm,
+            setSearchInput,
+            filteredJobs: filteredJobs || [],
+            onJobSelect: handleJobSelect,
+            searchInput,
+            setSearchTerm,
+            setSecondCategory
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Modal.Footer, { children: /* @__PURE__ */ jsx(Button, { variant: "primary", size: "medium", appearance: "filled", width: "full", onClick: closeModal, children: "\uD655\uC778" }) })
+      ] })
+    ] }),
+    JobSearchComponent: /* @__PURE__ */ jsx(
+      JobSearch,
+      {
+        firstCategoryList,
+        secondCategoryList,
+        firstCategory,
+        setFirstCategory,
+        secondCategory,
+        setSecondCategory,
+        activeTab,
+        onTabChange,
+        searchTerm,
+        setSearchInput,
+        filteredJobs: filteredJobs || [],
+        onJobSelect: handleJobSelect,
+        searchInput,
+        setSearchTerm
+      }
+    ),
+    isJobSearchOpen: isOpen,
+    openJobSearchModal: openModal,
+    closeJobSearchModal: closeModal,
+    selectedJob
+  };
+}
+
+const cx$1 = classNames.bind(styles$7);
+function VehicleSearch({ vehicles, onVehicleSelect }) {
+  return /* @__PURE__ */ jsxs("div", { className: cx$1("vehicle-search-section"), children: [
+    /* @__PURE__ */ jsx("p", { children: "\uC6B4\uC804 \uCC28\uC885" }),
+    /* @__PURE__ */ jsx(Radio.Root, { name: "vehicle-selection", size: "small", className: cx$1("vehicle-radio-root"), children: vehicles.map((vehicle, index) => /* @__PURE__ */ jsxs(
+      Radio.Item,
+      {
+        id: `item-${vehicle.integrationCodeValue}`,
+        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$1("item"),
+        children: [
+          vehicle.integrationCodeValueName,
+          "(",
+          vehicle.integrationCodeValue,
+          ")"
+        ]
+      },
+      `item-${vehicle.integrationCodeValue}-${index}`
+    )) })
+  ] });
+}
+
+const useVehicleSearch = () => {
+  const [selectedVehicle, setSelectedVehicle] = useState();
+  const { data } = useSearchVehicleQuery();
+  return {
+    VehicleSearchComponent: /* @__PURE__ */ jsx(VehicleSearch, { vehicles: data?.data?.vehicleTypeList || [], onVehicleSelect: setSelectedVehicle }),
+    selectedVehicle,
+    setSelectedVehicle,
+    vehicleList: data
+  };
+};
+
+const useJobVehicleSearch = () => {
+  const [rightPanelView, setRightPanelView] = useState("jobSearch");
+  const [riskGrade, setRiskGrade] = useState("");
+  const [hospitalizationGrade, setHospitalizationGrade] = useState("");
+  const { selectedJob, JobSearchComponent } = useJobSearchModal();
+  const { selectedVehicle, VehicleSearchComponent } = useVehicleSearch();
+  useEffect(() => {
+    if (selectedJob && selectedVehicle) {
+      setRiskGrade("\uC77C\uBC18(\uBE44\uC704\uD5D8\uC9C1)(0)");
+      setHospitalizationGrade("\uC77C\uBC18\uC785\uC6D0(\uBE44\uC704\uD5D8\uC9C1)(0)");
+    }
+  }, [selectedJob, selectedVehicle]);
+  return {
+    selectedVehicle,
+    rightPanelView,
+    setRightPanelView,
+    selectedJob,
+    JobSearch: JobSearchComponent,
+    VehicleSearch: VehicleSearchComponent,
+    riskGrade,
+    hospitalizationGrade
+  };
+};
+
+const cx = classNames.bind(styles$5);
+function useJobVehicleSearchModal() {
+  const {
+    selectedVehicle,
+    rightPanelView,
+    setRightPanelView,
+    selectedJob,
+    JobSearch,
+    VehicleSearch,
+    riskGrade,
+    hospitalizationGrade
+  } = 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.",
+        "\uC9C1\uC885\uACFC \uC6B4\uC804 \uC5EC\uBD80\xB7\uCC28\uC885\uC744 \uC120\uD0DD\uD574\uC8FC\uC138\uC694",
+        {
+          modalSize: "small"
+        }
+      );
+    }
+    if (!selectedJob) {
+      return ModalUtils.alert("\uC9C1\uC885\uC744 \uC120\uD0DD\uD574\uC57C \uB4F1\uAE09 \uC0B0\uC815\uC774 \uAC00\uB2A5\uD569\uB2C8\uB2E4.", "\uC9C1\uC885\uC744 \uC120\uD0DD\uD574\uC8FC\uC138\uC694", {
+        modalSize: "small"
+      });
+    }
+    if (!selectedVehicle) {
+      return ModalUtils.alert("\uC6B4\uC804 \uC5EC\uBD80\xB7\uCC28\uC885\uC744 \uC120\uD0DD\uD574\uC57C \uB4F1\uAE09 \uC0B0\uC815\uC774 \uAC00\uB2A5\uD569\uB2C8\uB2E4.", "\uC6B4\uC804 \uC5EC\uBD80\xB7\uCC28\uC885\uC744 \uC120\uD0DD\uD574\uC8FC\uC138\uC694", {
+        modalSize: "small"
+      });
+    }
+    closeModal();
+  };
+  return {
+    selectedJob,
+    selectedVehicle,
+    riskGrade,
+    hospitalizationGrade,
+    openJobVehicleModal: openModal,
+    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("job-vehicle-search-modal"), raw: true, children: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: cx("left-panel"), children: [
+            /* @__PURE__ */ jsxs("div", { className: cx("card-section"), children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cx("card-menu", { "card-selected": rightPanelView === "jobSearch" }),
+                  onClick: () => setRightPanelView("jobSearch"),
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: cx("card-title"), children: [
+                      /* @__PURE__ */ jsx(Icon, { name: "illust/job", className: cx("card-icon") }),
+                      /* @__PURE__ */ jsx("span", { className: cx("card-text", "typo-title5", "text-body"), children: "\uC9C1\uC885" }),
+                      /* @__PURE__ */ jsx(Icon, { name: "sub-ui/arrow/right" })
+                    ] }),
+                    /* @__PURE__ */ jsx("div", { className: "typo-body2 text-body_2", children: selectedJob ? selectedJob.occupationIndustryName : "\uBBF8\uC120\uD0DD" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cx("card-menu", { "card-selected": rightPanelView === "vehicleSelection" }),
+                  onClick: () => setRightPanelView("vehicleSelection"),
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: cx("card-title"), children: [
+                      /* @__PURE__ */ jsx(Icon, { name: "illust/vehicle", className: cx("card-icon") }),
+                      /* @__PURE__ */ jsx("span", { className: cx("card-text", "typo-title5", "text-body"), children: "\uC6B4\uC804 \uC5EC\uBD80\xB7\uCC28\uC885" }),
+                      /* @__PURE__ */ jsx(Icon, { name: "sub-ui/arrow/right" })
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "typo-body2 text-body_2", children: [
+                      selectedVehicle?.integrationCodeValueName,
+                      selectedVehicle?.integrationCodeValue || "\uBBF8\uC120\uD0DD"
+                    ] })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(JobVehicleSearchGrade, { riskGrade, hospitalizationGrade })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: cx("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" }) })
+      ] })
+    ] })
+  };
+}
+
+export { Attachment, DebugTool, FormCheckbox, FormCheckboxButton, FormDatePicker, FormDateRangePicker, FormSegmentGroup, FormTextField, StepIndicator, resize, testSignatureBase64Data, useAddressComponent, useCamera, useCanvasPaint, useJobVehicleSearchModal, useSearchAddress };
 //# sourceMappingURL=index.esm.js.map