sales-frontend-components 0.0.66 → 0.0.68

package/dist/index.esm.js

@@ -1,13 +1,18 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, Fragment, jsxs } 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, Accordion, Radio, Table, Button, FormField, Select, Tab, Icon, useModalState, Modal, SegmentGroup, ModalUtils, List, ListItem, Segment, FormCore, RadioGroup } 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';
-import styles$2 from './debug-tool/debug-tool.module.scss';
+import { useSearchOccupationQuery, useSearchModalAddressQuery, useSearchVehicleQuery } from 'sales-frontend-api/method';
+import styles from './modal/pre-standard/job-search-modal/job-search-modal.module.scss';
+import styles$1 from './step-indicator/step-indicator.module.scss';
+import styles$2 from './camera/camera.module.scss';
+import styles$3 from './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 styles$4 from './debug-tool/features/network-log/network-log.module.scss';
+import styles$5 from './modal/standard/address-search/select-address.module.scss';
+import styles$6 from './modal/pre-standard/job-vehicle-search-modal/job-vehicle-search-modal.module.scss';
+import styles$7 from './modal/pre-standard/vehicle-search-modal/vehicle-search-modal.module.scss';
 
 const FormCheckboxButton = ({
   name,
@@ -17,7 +22,21 @@ const FormCheckboxButton = ({
   ...props
 }) => {
   const { field, fieldState } = useController({ name, control, disabled });
-  return /* @__PURE__ */ jsx(CheckboxButton, { ...props, ...field, id: field.name, checked: field.value, error: fieldState.invalid, children });
+  return /* @__PURE__ */ jsx(
+    CheckboxButton,
+    {
+      ...props,
+      ...field,
+      id: field.name,
+      checked: field.value ?? false,
+      error: fieldState.invalid,
+      onChange: (checked) => {
+        field.onChange(checked);
+        props.onChange?.(checked);
+      },
+      children
+    }
+  );
 };
 
 const FormCheckbox = ({
@@ -95,73 +114,10 @@ const FormDateRangePicker = ({
   );
 };
 
-const FormSegmentGroup = ({
-  name,
-  control,
-  disabled,
-  ...props
-}) => {
-  const { field, fieldState } = useController({ name, control, disabled });
-  return /* @__PURE__ */ jsx(
-    SegmentGroup,
-    {
-      ...props,
-      tabIndex: 0,
-      id: field.name,
-      ref: field.ref,
-      defaultValue: field.value,
-      disabled: field.disabled,
-      error: fieldState.invalid,
-      onBlur: field.onBlur,
-      onValueChange: (selected) => {
-        field.onChange(selected);
-        props.onValueChange?.(selected);
-      }
-    }
-  );
-};
-
-const FormTextField = ({
-  name,
-  control,
-  size = "medium",
-  disabled,
-  error,
-  onBlur,
-  onChange,
-  rootProps,
-  ...props
-}) => {
-  const { field, fieldState } = useController({ name, control, disabled });
-  return /* @__PURE__ */ jsx(
-    FormField.TextField,
-    {
-      ...props,
-      id: field.name,
-      size,
-      autoComplete: "off",
-      name: field.name,
-      value: field.value ?? "",
-      disabled: field.disabled,
-      error: fieldState.invalid || error,
-      onChange: (e) => {
-        field.onChange(e);
-        onChange?.(e);
-      },
-      onBlur: (e) => {
-        field.onBlur();
-        onBlur?.(e);
-      },
-      rootProps: {
-        ...rootProps,
-        onClear: () => {
-          field.onChange("");
-          rootProps?.onClear?.();
-        }
-      }
-    }
-  );
-};
+const JOB_SEARCH_TABS = [
+  { value: "jobName", label: "\uC9C1\uC885\uBA85 \uAC80\uC0C9" },
+  { value: "jobCode", label: "\uBD84\uB958\uB85C \uAC80\uC0C9" }
+];
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -254,39 +210,671 @@ function requireBind () {
 var bindExports = requireBind();
 var classNames = /*@__PURE__*/getDefaultExportFromCjs(bindExports);
 
-const cx$1 = classNames.bind(styles);
+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$9 = classNames.bind(styles);
+function JobSearchCategory({ filteredJobs, onJobSelect, searchTerm }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: cx$9("category-section"), children: [
+    /* @__PURE__ */ jsxs("p", { className: cx$9("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$9("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$8 = classNames.bind(styles);
+function JobSearchFavorite({ filteredJobs, onJobSelect }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: cx$8("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$8("job-radio-root"), children: filteredJobs.map((job, index) => /* @__PURE__ */ jsxs(
+      Accordion.Item,
+      {
+        id: `item-${job.occupationIndustryCode}-${index}`,
+        className: cx$8("accordion-item"),
+        children: [
+          /* @__PURE__ */ jsx(Accordion.HeaderDiv, { className: cx$8("accordion-header-item"), children: /* @__PURE__ */ jsxs(
+            Radio.Item,
+            {
+              size: "small",
+              value: job.occupationIndustryCode,
+              onChange: () => onJobSelect(job),
+              className: cx$8("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$7 = classNames.bind(styles);
+function JobSearchResult({ filteredJobs, onJobSelect, searchTerm }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: cx$7("popular-jobs"), children: [
+    /* @__PURE__ */ jsxs("p", { className: cx$7("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$7("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$6 = classNames.bind(styles);
+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$6("favorite-jobs-section"), children: [
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            placeholder: "\uC9C1\uC885\uBA85 \uAC80\uC0C9",
+            value: searchInput,
+            onKeyUp,
+            onChange: (e) => setSearchInput(e.target.value),
+            className: styles.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$6("select-jobs-section"), children: [
+        /* @__PURE__ */ jsxs("div", { className: cx$6("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 FormSearchJobField = ({
+  name,
+  control,
+  disabled,
+  rootProps,
+  error,
+  size = "medium",
+  placeholder = "\uC9C1\uC885 \uAC80\uC0C9",
+  ...props
+}) => {
+  const [selected, setSelected] = useState();
+  const { field, fieldState } = useController({ name, control, disabled });
+  const { JobSearchModal, openJobSearchModal, selectedJob } = useJobSearchModal();
+  useEffect(() => {
+    if (selectedJob) {
+      setSelected(selectedJob);
+      field.onChange(selectedJob.occupationIndustryCode);
+      props.onValueChange?.(selectedJob);
+    }
+  }, [selectedJob]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      FormField.TextField,
+      {
+        ...props,
+        ...field,
+        id: field.name,
+        error: fieldState.invalid || error,
+        value: selected?.occupationIndustryName ?? "",
+        rootProps: {
+          ...rootProps,
+          endElement: /* @__PURE__ */ jsx(Icon, { name: "sub-ui/search" })
+        },
+        readOnly: true,
+        size,
+        placeholder,
+        style: { background: "#fff", cursor: "pointer" },
+        autoComplete: "off",
+        onClick: openJobSearchModal
+      }
+    ),
+    JobSearchModal
+  ] });
+};
+
+const FormSegmentGroup = ({
+  name,
+  control,
+  disabled,
+  disabledItems,
+  items,
+  ...props
+}) => {
+  const { field, fieldState } = useController({ name, control, disabled });
+  const itemList = items.map((item) => {
+    return {
+      ...item,
+      disabled: disabledItems?.includes(item.value)
+    };
+  });
+  return /* @__PURE__ */ jsx(
+    SegmentGroup,
+    {
+      ...props,
+      tabIndex: 0,
+      id: field.name,
+      ref: field.ref,
+      defaultValue: field.value,
+      disabled: field.disabled,
+      error: fieldState.invalid,
+      onBlur: field.onBlur,
+      items: itemList,
+      onValueChange: (selected) => {
+        field.onChange(selected);
+        props.onValueChange?.(selected);
+      }
+    }
+  );
+};
+
+const FormSelect = ({
+  name,
+  control,
+  disabled,
+  error,
+  children,
+  ...props
+}) => {
+  const { field, fieldState } = useController({ name, control, disabled });
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      ...props,
+      id: field.name,
+      disabled: field.disabled,
+      error: fieldState.invalid || error,
+      onBlur: field.onBlur,
+      value: field.value,
+      onChange: (selected) => {
+        field.onChange(selected);
+      },
+      children
+    }
+  );
+};
+const FormSelectOption = ({ children, value, ...rest }) => {
+  return /* @__PURE__ */ jsx(Select.Option, { value, ...rest, children });
+};
+const FormSelectGroup = ({
+  options,
+  optionsProps,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(FormSelect, { ...props, children: options.map((option) => /* @__PURE__ */ jsx(FormSelectOption, { value: option.value, ...optionsProps, children: option.label }, option.value)) });
+};
+FormSelect.Option = FormSelectOption;
+FormSelect.Group = FormSelectGroup;
+
+const FormTextField = ({
+  name,
+  control,
+  size = "medium",
+  disabled,
+  error,
+  onBlur,
+  onChange,
+  rootProps,
+  ...props
+}) => {
+  const { field, fieldState } = useController({ name, control, disabled });
+  return /* @__PURE__ */ jsx(
+    FormField.TextField,
+    {
+      ...props,
+      id: field.name,
+      size,
+      autoComplete: "off",
+      name: field.name,
+      value: field.value ?? "",
+      disabled: field.disabled,
+      error: fieldState.invalid || error,
+      onChange: (e) => {
+        field.onChange(e);
+        onChange?.(e);
+      },
+      onBlur: (e) => {
+        field.onBlur();
+        onBlur?.(e);
+      },
+      rootProps: {
+        ...rootProps,
+        onClear: () => {
+          field.onChange("");
+          rootProps?.onClear?.();
+        }
+      }
+    }
+  );
+};
+
+const cx$5 = classNames.bind(styles$1);
 const StepIndicator = ({
   items,
   onClickItem,
   currentIndex = 0,
   defaultValue = "",
-  dotCount = 3
+  dotCount = 3,
+  isLoading
 }) => {
+  const [steps, setSteps] = React.useState(
+    Array.from({ length: 10 }).map(() => ({ label: "-", value: "" }))
+  );
   const [current, setCurrent] = React.useState(currentIndex);
   React.useEffect(() => {
-    items.map((item, idx) => {
-      if (item.value === defaultValue) {
-        setCurrent(idx);
-      }
-    });
+    if (items.length > 0) {
+      setSteps(items);
+      items.map((item, idx) => {
+        if (item.value === defaultValue) {
+          setCurrent(idx);
+        }
+      });
+    }
   }, [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: [
+  const handleClickStep = (item) => {
+    const index = steps.findIndex((step) => step.value === item.value);
+    if (index === -1) {
+      console.error("error not found index");
+      return;
+    }
+    if (steps[index < 1 ? index : index - 1]?.isCompleted) {
+      onClickItem?.(item);
+    } else {
+      ModalUtils.alert("\uC774\uC804 \uB2E8\uACC4\uB97C \uBAA8\uB450 \uC644\uB8CC\uD574\uC57C \uC120\uD0DD\uD55C \uB2E8\uACC4\uB85C\n\uC774\uB3D9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.", "\uC774\uC804 \uB2E8\uACC4\uB97C \uBA3C\uC800 \uC9C4\uD589\uD574\uC8FC\uC138\uC694");
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cx$5("stepper-layout", { loading: isLoading }), children: [
+    /* @__PURE__ */ jsx("div", { className: cx$5("stepper"), children: steps.map((item, idx) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: cx$1("circle", (defaultValue === item.value || current === idx) && "active"),
-          onClick: () => onClickItem?.(item),
-          children: item.isCompleted || idx < current ? /* @__PURE__ */ jsx("span", { className: cx$1("completed") }) : ++idx
+          className: cx$5(
+            "circle",
+            { completed: item.isCompleted ?? false },
+            { active: defaultValue === item.value || current === idx }
+          ),
+          onClick: () => handleClickStep?.(item),
+          children: item.isCompleted ? /* @__PURE__ */ jsx("span", { className: cx$5("completed-icon") }) : idx + 1
         }
       ),
-      idx < items.length && Array.from({ length: dotCount }).map((_, dotIdx) => /* @__PURE__ */ jsx("span", { className: cx$1("dot") }, `dot-${idx}-${dotIdx}`))
+      idx < steps.length - 1 && Array.from({ length: dotCount }).map((_, dotIdx) => /* @__PURE__ */ jsx("span", { className: cx$5("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$5("step-labels"), children: steps.map((item, idx) => /* @__PURE__ */ jsx(
+      "li",
+      {
+        className: cx$5(
+          { completed: steps[idx < 1 ? idx : idx - 1]?.isCompleted ?? false },
+          { active: defaultValue === item.value || current === idx }
+        ),
+        onClick: () => handleClickStep?.(item),
+        children: /* @__PURE__ */ jsx("span", { className: "text-ellipsis", children: item.label ?? item.value })
+      },
+      `label-${idx}`
+    )) })
   ] });
 };
 
-const cx = classNames.bind(styles$1);
+const cx$4 = classNames.bind(styles$2);
 function Attachment({
   photos,
   onAddPhoto,
@@ -303,14 +891,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$4("single-photo-item", "add-photo-item"), children: /* @__PURE__ */ jsxs("button", { className: cx$4("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$4("single-photo-item"), children: [
+      /* @__PURE__ */ jsx("div", { className: cx$4("photo-placeholder"), children: /* @__PURE__ */ jsx("img", { src: photo.src, alt: photo.name, className: cx$4("photo-image") }) }),
+      /* @__PURE__ */ jsx("button", { className: cx$4("remove-button"), onClick: () => handleRemovePhoto(photo.id), "aria-label": "\uC0AC\uC9C4 \uC0AD\uC81C", children: "\xD7" })
     ] }, photo.id));
   };
   const renderPhotoGrid = () => {
@@ -318,12 +906,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$4("photo-item", "add-photo-item"), children: /* @__PURE__ */ jsxs("button", { className: cx$4("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$4("photo-count"), children: [
             "(",
-            /* @__PURE__ */ jsx("span", { className: cx("photo-count-number"), children: photos.length }),
+            /* @__PURE__ */ jsx("span", { className: cx$4("photo-count-number"), children: photos.length }),
             "/",
             maxPhotos,
             ")"
@@ -333,9 +921,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$4("photo-item"), children: [
+          /* @__PURE__ */ jsx("div", { className: cx$4("photo-placeholder"), children: /* @__PURE__ */ jsx("img", { src: photo.src, alt: photo.name, className: cx$4("photo-image") }) }),
+          /* @__PURE__ */ jsx("button", { className: cx$4("remove-button"), onClick: () => handleRemovePhoto(photo.id), "aria-label": "\uC0AC\uC9C4 \uC0AD\uC81C", children: "\xD7" })
         ] }, photo.id)
       );
     });
@@ -346,9 +934,9 @@ function Attachment({
     return null;
   }
   if (type === "single") {
-    return /* @__PURE__ */ jsx("div", { className: cx("photo-single"), children: renderPhotoSingle() });
+    return /* @__PURE__ */ jsx("div", { className: cx$4("photo-single"), children: renderPhotoSingle() });
   }
-  return /* @__PURE__ */ jsx("div", { className: cx("photo-grid", { linear: type === "linear" }), children: renderPhotoGrid() });
+  return /* @__PURE__ */ jsx("div", { className: cx$4("photo-grid", { linear: type === "linear" }), children: renderPhotoGrid() });
 }
 
 const maxImageSize = 3 * 1024 * 1024;
@@ -842,7 +1430,7 @@ const FloatingButton = ({ onClick }) => {
       variant: "secondary",
       appearance: "filled",
       size: "xsmall",
-      className: styles$2["debug-floating-button"],
+      className: styles$3["debug-floating-button"],
       style: {
         transform: `translate(${position.x}px, ${position.y}px)`,
         cursor: isDragging ? "grabbing" : "grab"
@@ -935,7 +1523,7 @@ const LogMessage = ({ entry }) => {
     }
     return String(part);
   });
-  return /* @__PURE__ */ jsx("pre", { className: `${styles$2["log-message"]} ${styles$2[`log-${entry.type}`]}`, children: messageParts.join(" ") });
+  return /* @__PURE__ */ jsx("pre", { className: `${styles$3["log-message"]} ${styles$3[`log-${entry.type}`]}`, children: messageParts.join(" ") });
 };
 const ConsoleLogPanel = ({ onClose }) => {
   const { logs, clearLogs } = useConsoleLog();
@@ -955,7 +1543,7 @@ const ConsoleLogPanel = ({ onClose }) => {
   return /* @__PURE__ */ jsx(Modal.Root, { isOpen: true, onClose, modalSize: "full-screen", children: /* @__PURE__ */ jsxs(Modal.Content, { children: [
     /* @__PURE__ */ jsx(Modal.Header, { headerTitle: "Console Logs", showCloseButton: true }),
     /* @__PURE__ */ jsxs(Modal.Body, { children: [
-      /* @__PURE__ */ jsxs("div", { className: styles$2["panel-toolbar"], children: [
+      /* @__PURE__ */ jsxs("div", { className: styles$3["panel-toolbar"], children: [
         /* @__PURE__ */ jsxs(
           Segment.Root,
           {
@@ -984,8 +1572,8 @@ const ConsoleLogPanel = ({ onClose }) => {
           }
         )
       ] }),
-      /* @__PURE__ */ jsx("div", { className: styles$2["log-list-container"], ref: logContainerRef, children: filteredLogs.map((log) => /* @__PURE__ */ jsxs("div", { className: styles$2["log-item"], children: [
-        /* @__PURE__ */ jsx("span", { className: styles$2["log-timestamp"], children: log.timestamp }),
+      /* @__PURE__ */ jsx("div", { className: styles$3["log-list-container"], ref: logContainerRef, children: filteredLogs.map((log) => /* @__PURE__ */ jsxs("div", { className: styles$3["log-item"], children: [
+        /* @__PURE__ */ jsx("span", { className: styles$3["log-timestamp"], children: log.timestamp }),
         /* @__PURE__ */ jsx(LogMessage, { entry: log })
       ] }, log.id)) })
     ] })
@@ -1012,7 +1600,7 @@ const LoginPanel = ({ onClose, onLogin }) => {
   }, [selectedType]);
   return /* @__PURE__ */ jsx(Modal.Root, { isOpen: true, onClose, modalSize: "full-screen", children: /* @__PURE__ */ jsxs(Modal.Content, { children: [
     /* @__PURE__ */ jsx(Modal.Header, { headerTitle: "\uAC04\uD3B8 \uB85C\uADF8\uC778", showCloseButton: true }),
-    /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsxs("form", { className: styles$2["login-form-container"], onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsxs("form", { className: styles$3["login-form-container"], onSubmit: handleSubmit, children: [
       /* @__PURE__ */ jsxs(FormField.FieldControl, { children: [
         /* @__PURE__ */ jsx(FormField.Label, { htmlFor: "login-type-select", children: "\uB85C\uADF8\uC778 \uC720\uD615" }),
         /* @__PURE__ */ jsx(
@@ -1042,7 +1630,7 @@ const LoginPanel = ({ onClose, onLogin }) => {
           }
         )
       ] }, field.name)),
-      /* @__PURE__ */ jsx("div", { className: styles$2["form-actions"], children: /* @__PURE__ */ jsx(Button, { type: "submit", variant: "primary", appearance: "filled", size: "xsmall", children: "\uB85C\uADF8\uC778" }) })
+      /* @__PURE__ */ jsx("div", { className: styles$3["form-actions"], children: /* @__PURE__ */ jsx(Button, { type: "submit", variant: "primary", appearance: "filled", size: "xsmall", children: "\uB85C\uADF8\uC778" }) })
     ] }) })
   ] }) });
 };
@@ -1152,7 +1740,7 @@ const NetworkLog = ({ onClose }) => {
     /* @__PURE__ */ jsxs(Modal.Content, { children: [
       /* @__PURE__ */ jsx(Modal.Header, { headerTitle: "\uB124\uD2B8\uC6CC\uD06C \uB85C\uADF8", showCloseButton: true }),
       /* @__PURE__ */ jsxs(Modal.Body, { children: [
-        /* @__PURE__ */ jsxs("div", { className: styles$3["search-container"], children: [
+        /* @__PURE__ */ jsxs("div", { className: styles$4["search-container"], children: [
           /* @__PURE__ */ jsx(Select, { value: searchSection, onChange: (value) => setSearchSection(value), size: "xsmall", children: SEARCH_SECTIONS.map((option) => /* @__PURE__ */ jsx(Select.Option, { value: option.value, children: option.label }, option.value)) }),
           /* @__PURE__ */ jsx(
             FormField.TextField,
@@ -1170,9 +1758,9 @@ const NetworkLog = ({ onClose }) => {
           /* @__PURE__ */ jsx(Button, { size: "xsmall", onClick: () => playAllRequests(), variant: "primary", appearance: "outline", children: "REQ Resolve" }),
           /* @__PURE__ */ jsx(Button, { size: "xsmall", onClick: () => playAllResponses(), variant: "primary", appearance: "outline", children: "RES Resolve" })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: styles$3["log-list"], children: filteredLogs.length === 0 ? /* @__PURE__ */ jsx("p", { children: "\uD45C\uC2DC\uD560 \uB85C\uADF8\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }) : /* @__PURE__ */ jsx(Accordion.Root, { children: filteredLogs.map((log, index) => /* @__PURE__ */ jsxs(Accordion.Item, { children: [
-          /* @__PURE__ */ jsx(Accordion.HeaderButton, { children: /* @__PURE__ */ jsx("p", { className: styles$3["log-summary"], children: renderLogSummary(log) }) }),
-          /* @__PURE__ */ jsx(Accordion.Content, { variant: "text", children: /* @__PURE__ */ jsx("div", { className: styles$3["log-content"], children: renderLogContent(log) }) })
+        /* @__PURE__ */ jsx("div", { className: styles$4["log-list"], children: filteredLogs.length === 0 ? /* @__PURE__ */ jsx("p", { children: "\uD45C\uC2DC\uD560 \uB85C\uADF8\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }) : /* @__PURE__ */ jsx(Accordion.Root, { children: filteredLogs.map((log, index) => /* @__PURE__ */ jsxs(Accordion.Item, { children: [
+          /* @__PURE__ */ jsx(Accordion.HeaderButton, { children: /* @__PURE__ */ jsx("p", { className: styles$4["log-summary"], children: renderLogSummary(log) }) }),
+          /* @__PURE__ */ jsx(Accordion.Content, { variant: "text", children: /* @__PURE__ */ jsx("div", { className: styles$4["log-content"], children: renderLogContent(log) }) })
         ] }, index)) }) })
       ] })
     ] })
@@ -1188,7 +1776,7 @@ const PageNavigationPanel = ({ onClose }) => {
   };
   return /* @__PURE__ */ jsx(Modal.Root, { isOpen: true, onClose, modalSize: "full-screen", children: /* @__PURE__ */ jsxs(Modal.Content, { children: [
     /* @__PURE__ */ jsx(Modal.Header, { headerTitle: "\uD398\uC774\uC9C0 \uC774\uB3D9", showCloseButton: true }),
-    /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsxs("div", { className: styles$2["page-navigation-content"], children: [
+    /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsxs("div", { className: styles$3["page-navigation-content"], children: [
       /* @__PURE__ */ jsx(
         FormField.TextField,
         {
@@ -1221,7 +1809,7 @@ const ResultMessage = ({ log }) => {
     return String(part);
   });
   const prefix = log.type === "return" ? "\u21A9 " : "";
-  return /* @__PURE__ */ jsxs("pre", { className: `${styles$2["log-message"]} ${styles$2[`log-${log.type}`]}`, children: [
+  return /* @__PURE__ */ jsxs("pre", { className: `${styles$3["log-message"]} ${styles$3[`log-${log.type}`]}`, children: [
     prefix,
     messageParts.join(" ")
   ] });
@@ -1273,26 +1861,26 @@ const ScriptExecutorPanel = ({ onClose }) => {
   };
   return /* @__PURE__ */ jsx(Modal.Root, { isOpen: true, onClose, modalSize: "full-screen", children: /* @__PURE__ */ jsxs(Modal.Content, { children: [
     /* @__PURE__ */ jsx(Modal.Header, { headerTitle: "\uC2A4\uD06C\uB9BD\uD2B8 \uC2E4\uD589", showCloseButton: true }),
-    /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsx("div", { className: `${styles$2["debug-feature-panel"]} ${styles$2["script-executor-panel"]}`, children: /* @__PURE__ */ jsxs("div", { className: styles$2["script-executor-content"], children: [
-      /* @__PURE__ */ jsxs("div", { className: styles$2["script-input-section"], children: [
+    /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsx("div", { className: `${styles$3["debug-feature-panel"]} ${styles$3["script-executor-panel"]}`, children: /* @__PURE__ */ jsxs("div", { className: styles$3["script-executor-content"], children: [
+      /* @__PURE__ */ jsxs("div", { className: styles$3["script-input-section"], children: [
         /* @__PURE__ */ jsx(
           "textarea",
           {
-            className: styles$2["script-textarea"],
+            className: styles$3["script-textarea"],
             value: code,
             onChange: (e) => setCode(e.target.value),
             spellCheck: "false"
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: styles$2["script-actions"], children: [
+        /* @__PURE__ */ jsxs("div", { className: styles$3["script-actions"], children: [
           /* @__PURE__ */ jsx(Button, { variant: "neutral", appearance: "outline", size: "xsmall", onClick: handleExecute, children: "\uC2E4\uD589 (\u25B6)" }),
           /* @__PURE__ */ jsx(Button, { variant: "neutral", appearance: "outline", size: "xsmall", onClick: handleClear, children: "\uACB0\uACFC \uC9C0\uC6B0\uAE30" })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: styles$2["script-output-section"], children: [
-        /* @__PURE__ */ jsx("div", { className: styles$2["panel-header"], children: /* @__PURE__ */ jsx("h3", { children: "\uACB0\uACFC" }) }),
-        /* @__PURE__ */ jsx("div", { className: styles$2["log-list-container"], children: results.map((log) => /* @__PURE__ */ jsxs("div", { className: styles$2["log-item"], children: [
-          /* @__PURE__ */ jsx("span", { className: styles$2["log-timestamp"], children: log.timestamp }),
+      /* @__PURE__ */ jsxs("div", { className: styles$3["script-output-section"], children: [
+        /* @__PURE__ */ jsx("div", { className: styles$3["panel-header"], children: /* @__PURE__ */ jsx("h3", { children: "\uACB0\uACFC" }) }),
+        /* @__PURE__ */ jsx("div", { className: styles$3["log-list-container"], children: results.map((log) => /* @__PURE__ */ jsxs("div", { className: styles$3["log-item"], children: [
+          /* @__PURE__ */ jsx("span", { className: styles$3["log-timestamp"], children: log.timestamp }),
           /* @__PURE__ */ jsx(ResultMessage, { log })
         ] }, log.id)) })
       ] })
@@ -1361,11 +1949,11 @@ const ValueDisplay = ({ value }) => {
   try {
     const parsed = JSON.parse(value);
     if (typeof parsed === "object" && parsed !== null) {
-      return /* @__PURE__ */ jsx("pre", { className: styles$2["log-content"], children: JSON.stringify(parsed, null, 2) });
+      return /* @__PURE__ */ jsx("pre", { className: styles$3["log-content"], children: JSON.stringify(parsed, null, 2) });
     }
   } catch (e) {
   }
-  return /* @__PURE__ */ jsx("div", { className: styles$2["log-content"], children: value });
+  return /* @__PURE__ */ jsx("div", { className: styles$3["log-content"], children: value });
 };
 const EditableRow = ({ item, onSave, onRemove }) => {
   const [isEditing, setIsEditing] = useState(false);
@@ -1404,7 +1992,7 @@ const StoragePanel = ({ onClose, storageType }) => {
   return /* @__PURE__ */ jsx(Modal.Root, { isOpen: true, onClose, modalSize: "full-screen", children: /* @__PURE__ */ jsxs(Modal.Content, { children: [
     /* @__PURE__ */ jsx(Modal.Header, { headerTitle: storageType === "localStorage" ? "Local Storage" : "Cookies", showCloseButton: true }),
     /* @__PURE__ */ jsxs(Modal.Body, { children: [
-      /* @__PURE__ */ jsx("div", { className: styles$2["panel-toolbar"], children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: styles$3["panel-toolbar"], children: /* @__PURE__ */ jsx(
         FormField.TextField,
         {
           placeholder: "Search key or value...",
@@ -1546,5 +2134,487 @@ const DebugTool = ({ onLogin, envOverride, menuItemsOverride }) => {
   ] });
 };
 
-export { Attachment, DebugTool, FormCheckbox, FormCheckboxButton, FormDatePicker, FormDateRangePicker, FormSegmentGroup, FormTextField, StepIndicator, resize, testSignatureBase64Data, useCamera, useCanvasPaint };
+const cx$3 = classNames.bind(styles$5);
+const { InputBox, Input } = FormCore;
+const AddressSearchInitialText = () => {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("p", { className: cx$3("guide-title"), children: "\uC774\uB807\uAC8C \uAC80\uC0C9\uD574 \uBCF4\uC138\uC694." }),
+    /* @__PURE__ */ jsxs("ul", { className: cx$3("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$3("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$3("search-result"), children: [
+            /* @__PURE__ */ jsxs("div", { className: cx$3("zipcode"), children: [
+              " ",
+              highlightOnSearchKeyword(item.zipCode, searchKeyword)
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: cx$3("divider") }),
+            /* @__PURE__ */ jsxs("div", { className: cx$3("address-info"), children: [
+              /* @__PURE__ */ jsx("span", { className: cx$3("address"), children: highlightOnSearchKeyword(item.address, searchKeyword) }),
+              /* @__PURE__ */ jsx("span", { className: cx$3("old-address"), children: highlightOnSearchKeyword(item.oldAddress, searchKeyword) })
+            ] })
+          ] }),
+          id: item.address
+        })),
+        className: cx$3("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$2 = classNames.bind(styles$6);
+const JobVehicleSearchGrade = ({ riskGrade, hospitalizationGrade }) => {
+  return /* @__PURE__ */ jsxs("div", { className: cx$2("grade-section"), children: [
+    /* @__PURE__ */ jsxs("div", { className: cx$2("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$2("grade-list"), children: [
+      /* @__PURE__ */ jsxs("div", { className: cx$2("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$2("grade"), children: [
+        /* @__PURE__ */ jsx("span", { children: "\uC785\uC6D0\uB4F1\uAE09" }),
+        /* @__PURE__ */ jsx("span", { className: "text-primary typo-subtitle3", children: hospitalizationGrade || "-" })
+      ] })
+    ] })
+  ] });
+};
+
+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$6);
+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" }) })
+      ] })
+    ] })
+  };
+}
+
+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" }) })
+    ] })
+  ] });
+};
+
+export { Attachment, DebugTool, FormCheckbox, FormCheckboxButton, FormDatePicker, FormDateRangePicker, FormSearchJobField, FormSegmentGroup, FormSelect, FormTextField, JobSearchModal, StepIndicator, resize, testSignatureBase64Data, useAddressComponent, useCamera, useCanvasPaint, useJobVehicleSearchModal, useSearchAddress };
 //# sourceMappingURL=index.esm.js.map