sales-frontend-components 0.0.72 → 0.0.74

package/dist/index.esm.js

@@ -1,16 +1,17 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useController } from 'react-hook-form';
-import { CheckboxButton, Checkbox, DatePicker, DateRangePicker, Accordion, Radio, Table, Button, FormField, Select, Tab, Icon, useModalState, Modal, SegmentGroup, ModalUtils, FormCore, RadioGroup } from 'sales-frontend-design-system';
+import { CheckboxButton, Checkbox, DatePicker, DateRangePicker, Accordion, Radio, Table, Button, FormField, Select, Tab, useModalState, Modal, SegmentGroup, ModalUtils, Icon, FormCore, RadioGroup, useDropDown, List, ListItem } from 'sales-frontend-design-system';
 import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import { useSearchOccupationQuery, useSearchModalAddressQuery, useSearchVehicleQuery } from 'sales-frontend-api/method';
+import { IconMainUiSearch, IconGraphicsBankHsbc, IconGraphicsBankKebHana, IconGraphicsBankScJeil, IconGraphicsBankGyeongnam, IconGraphicsBankGwangju, IconGraphicsBankKukmin, IconGraphicsBankKiup, IconGraphicsBankJiyeokNonghyeop, IconGraphicsBankNhNonghyeop, IconGraphicsBankDaegu, IconGraphicsBankBusan, IconGraphicsBankSanlim, IconGraphicsBankSaneop, IconGraphicsBankSaemaulGeumgo, IconGraphicsBankSuhyeop, IconGraphicsBankSinhan, IconGraphicsBankSinhyeop, IconGraphicsBankOehwan, IconGraphicsBankWoori, IconGraphicsBankPost, IconGraphicsBankJeochuk, IconGraphicsBankJeonbuk, IconGraphicsBankJeju, IconGraphicsBankKakaoBank, IconGraphicsBankKBank, IconGraphicsBankHankookCity, IconGraphicsStockDbGeumyungTujajeungkwon, IconGraphicsStockKbJeungkwon, IconGraphicsStockNhWooriTujajeungkwon, IconGraphicsStockNhTujajeungkwon, IconGraphicsStockSkJeungkwon, IconGraphicsStockGyoboJeungkwon, IconGraphicsStockDaesinJeungkwon, IconGraphicsStockMeritzJeungkwon, IconGraphicsStockMiraeAssetJeungkwon, IconGraphicsStockBugukJeungkwon, IconGraphicsStockSamsungJeungkwon, IconGraphicsStockSinyeongJeungkwon, IconGraphicsStockSinhanTujajeungkwon, IconGraphicsStockYuantaJeungkwon, IconGraphicsStockYujinTujajeungkwon, IconGraphicsStockKiwoomJeungkwon, IconGraphicsStockHanaGeumyungTujajeungkwon, IconGraphicsStockHiTujajeungkwon, IconGraphicsStockHankookJeungkwonGeumyung, IconGraphicsStockHankookTujajeungkwon, IconGraphicsStockHanwhaTujajeungkwon, IconGraphicsStockHyundaiChaJeungkwon, IconGraphicsStockHochulEopsum, IconIllustGrade, IconIllustJob, IconSubUiArrowRight, IconIllustVehicle } from 'sales-frontend-assets';
 import styles from './modal/pre-standard/job-search-modal/job-search-modal.module.scss';
 import styles$1 from './step-indicator/step-indicator.module.scss';
 import styles$2 from './camera/camera.module.scss';
 import styles$3 from './modal/standard/address-search/select-address.module.scss';
 import styles$4 from './modal/standard/bank-stock-search/bank-stock-search-modal.module.scss';
-import { IconGraphicsBankHsbc, IconGraphicsBankKebHana, IconGraphicsBankScJeil, IconGraphicsBankGyeongnam, IconGraphicsBankGwangju, IconGraphicsBankKukmin, IconGraphicsBankKiup, IconGraphicsBankJiyeokNonghyeop, IconGraphicsBankNhNonghyeop, IconGraphicsBankDaegu, IconGraphicsBankBusan, IconGraphicsBankSanlim, IconGraphicsBankSaneop, IconGraphicsBankSaemaulGeumgo, IconGraphicsBankSuhyeop, IconGraphicsBankSinhan, IconGraphicsBankSinhyeop, IconGraphicsBankOehwan, IconGraphicsBankWoori, IconGraphicsBankPost, IconGraphicsBankJeochuk, IconGraphicsBankJeonbuk, IconGraphicsBankJeju, IconGraphicsBankKakaoBank, IconGraphicsBankKBank, IconGraphicsBankHankookCity, IconGraphicsStockDbGeumyungTujajeungkwon, IconGraphicsStockKbJeungkwon, IconGraphicsStockNhWooriTujajeungkwon, IconGraphicsStockNhTujajeungkwon, IconGraphicsStockSkJeungkwon, IconGraphicsStockGyoboJeungkwon, IconGraphicsStockDaesinJeungkwon, IconGraphicsStockMeritzJeungkwon, IconGraphicsStockMiraeAssetJeungkwon, IconGraphicsStockBugukJeungkwon, IconGraphicsStockSamsungJeungkwon, IconGraphicsStockSinyeongJeungkwon, IconGraphicsStockSinhanTujajeungkwon, IconGraphicsStockYuantaJeungkwon, IconGraphicsStockYujinTujajeungkwon, IconGraphicsStockKiwoomJeungkwon, IconGraphicsStockHanaGeumyungTujajeungkwon, IconGraphicsStockHiTujajeungkwon, IconGraphicsStockHankookJeungkwonGeumyung, IconGraphicsStockHankookTujajeungkwon, IconGraphicsStockHanwhaTujajeungkwon, IconGraphicsStockHyundaiChaJeungkwon, IconGraphicsStockHochulEopsum } from 'sales-frontend-assets';
 import styles$5 from './modal/pre-standard/job-vehicle-search-modal/job-vehicle-search-modal.module.scss';
 import styles$6 from './modal/pre-standard/vehicle-search-modal/vehicle-search-modal.module.scss';
+import styles$7 from './modal/standard/customer-search/customer-search.module.scss';
 
 const FormCheckboxButton = ({
   name,
@@ -56,12 +57,17 @@ const FormDatePicker = ({
   ...props
 }) => {
   const { field, fieldState } = useController({ name, control, disabled, defaultValue });
-  const [initialDate, setInitialDate] = React.useState();
+  const [selected, setSelected] = React.useState();
   React.useEffect(() => {
     if (field.value) {
-      setInitialDate(field.value);
+      setSelected(field.value);
     }
   }, [defaultValue]);
+  React.useEffect(() => {
+    if (field.value !== selected) {
+      setSelected(field.value);
+    }
+  }, [field.value]);
   return /* @__PURE__ */ jsx(
     DatePicker,
     {
@@ -70,7 +76,7 @@ const FormDatePicker = ({
         ...props,
         ...field,
         id: field.name,
-        defaultValue: initialDate,
+        defaultValue: selected,
         error: fieldState.invalid,
         onValueChange: field.onChange
       }
@@ -86,12 +92,18 @@ const FormDateRangePicker = ({
   ...props
 }) => {
   const { field, fieldState } = useController({ name, control, disabled, defaultValue });
-  const [initialDate, setInitialDate] = React.useState();
+  const [selected, setSelected] = React.useState();
   React.useEffect(() => {
     if (field.value) {
-      setInitialDate(field.value);
+      setSelected(field.value);
     }
   }, [defaultValue]);
+  React.useEffect(() => {
+    if (selected && field.value.startDate.getTime() === selected.startDate?.getTime() && field.value.endDate.getTime() === selected.endDate?.getTime()) {
+      return;
+    }
+    setSelected(field.value);
+  }, [field.value]);
   return /* @__PURE__ */ jsx(
     DateRangePicker,
     {
@@ -100,13 +112,9 @@ const FormDateRangePicker = ({
         ...props,
         ...field,
         id: field.name,
-        defaultValue: initialDate,
+        defaultValue: selected,
         error: fieldState.invalid,
-        onValueChange: (selected) => {
-          if (field.value !== selected) {
-            field.onChange(selected);
-          }
-        }
+        onValueChange: field.onChange
       }
     }
   );
@@ -208,7 +216,7 @@ function requireBind () {
 var bindExports = requireBind();
 var classNames = /*@__PURE__*/getDefaultExportFromCjs(bindExports);
 
-const highlightOnSearchKeyword = (originalText, targetString) => {
+const highlightOnSearchKeyword$1 = (originalText, targetString) => {
   if (originalText?.includes(targetString)) {
     const replacedText = [];
     const splitText = originalText.split(targetString);
@@ -223,22 +231,22 @@ const highlightOnSearchKeyword = (originalText, targetString) => {
   return originalText;
 };
 
-const cx$9 = classNames.bind(styles);
+const cx$a = 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: [
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: cx$a("category-section"), children: [
+    /* @__PURE__ */ jsxs("p", { className: cx$a("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: () => {
+    /* @__PURE__ */ jsx(Accordion.Root, { children: /* @__PURE__ */ jsx(Radio.Root, { name: "job-selection", size: "small", className: cx$a("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),
+            highlightOnSearchKeyword$1(job.occupationIndustryName, searchTerm),
             "(",
             job.occupationIndustryCode,
             ")"
@@ -271,23 +279,23 @@ function JobSearchCategory({ filteredJobs, onJobSelect, searchTerm }) {
   ] }) });
 }
 
-const cx$8 = classNames.bind(styles);
+const cx$9 = classNames.bind(styles);
 function JobSearchFavorite({ filteredJobs, onJobSelect }) {
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: cx$8("popular-jobs"), children: [
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: cx$9("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(
+    /* @__PURE__ */ jsx(Accordion.Root, { children: /* @__PURE__ */ jsx(Radio.Root, { name: "job-selection", size: "small", className: cx$9("job-radio-root"), children: filteredJobs.map((job, index) => /* @__PURE__ */ jsxs(
       Accordion.Item,
       {
         id: `item-${job.occupationIndustryCode}-${index}`,
-        className: cx$8("accordion-item"),
+        className: cx$9("accordion-item"),
         children: [
-          /* @__PURE__ */ jsx(Accordion.HeaderDiv, { className: cx$8("accordion-header-item"), children: /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx(Accordion.HeaderDiv, { className: cx$9("accordion-header-item"), children: /* @__PURE__ */ jsxs(
             Radio.Item,
             {
               size: "small",
               value: job.occupationIndustryCode,
               onChange: () => onJobSelect(job),
-              className: cx$8("radio-item"),
+              className: cx$9("radio-item"),
               children: [
                 job.occupationIndustryName,
                 "(",
@@ -304,15 +312,15 @@ function JobSearchFavorite({ filteredJobs, onJobSelect }) {
   ] }) });
 }
 
-const cx$7 = classNames.bind(styles);
+const cx$8 = 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: [
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: cx$8("popular-jobs"), children: [
+    /* @__PURE__ */ jsxs("p", { className: cx$8("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(
+    /* @__PURE__ */ jsx(Accordion.Root, { children: /* @__PURE__ */ jsx(Radio.Root, { name: "job-selection", size: "small", className: cx$8("job-radio-root"), children: filteredJobs.map((job) => /* @__PURE__ */ jsxs(
       Accordion.Item,
       {
         id: `item-${job.occupationIndustryCode}`,
@@ -326,7 +334,7 @@ function JobSearchResult({ filteredJobs, onJobSelect, searchTerm }) {
               onChange: () => {
                 onJobSelect(job);
               },
-              children: highlightOnSearchKeyword(job.occupationIndustryName, searchTerm)
+              children: highlightOnSearchKeyword$1(job.occupationIndustryName, searchTerm)
             }
           ) }) }),
           /* @__PURE__ */ jsx(Accordion.Content, { variant: "text", children: /* @__PURE__ */ jsx(Table, { variant: "horizontal", children: /* @__PURE__ */ jsxs("tbody", { children: [
@@ -358,7 +366,7 @@ function JobSearchResult({ filteredJobs, onJobSelect, searchTerm }) {
 }
 
 const { TextField } = FormField;
-const cx$6 = classNames.bind(styles);
+const cx$7 = classNames.bind(styles);
 const { Option } = Select;
 function JobSearch({
   activeTab,
@@ -395,7 +403,7 @@ function JobSearch({
       }
     ),
     /* @__PURE__ */ jsxs("div", { children: [
-      activeTab === "jobName" && /* @__PURE__ */ jsxs("div", { className: cx$6("favorite-jobs-section"), children: [
+      activeTab === "jobName" && /* @__PURE__ */ jsxs("div", { className: cx$7("favorite-jobs-section"), children: [
         /* @__PURE__ */ jsx(
           TextField,
           {
@@ -406,7 +414,7 @@ function JobSearch({
             className: styles.searchInput,
             size: "medium",
             rootProps: {
-              endElement: /* @__PURE__ */ jsx(Icon, { name: "sub-ui/search", onClick: () => setSearchTerm(searchInput) }),
+              endElement: /* @__PURE__ */ jsx(IconMainUiSearch, { onClick: () => setSearchTerm(searchInput) }),
               onClear: () => {
                 setSearchTerm("");
                 setSearchInput("");
@@ -417,8 +425,8 @@ function JobSearch({
         !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: [
+      activeTab === "jobCode" && /* @__PURE__ */ jsxs("div", { className: cx$7("select-jobs-section"), children: [
+        /* @__PURE__ */ jsxs("div", { className: cx$7("category-section"), children: [
           /* @__PURE__ */ jsx(
             Select,
             {
@@ -800,7 +808,7 @@ const FormTextField = ({
   );
 };
 
-const cx$5 = classNames.bind(styles$1);
+const cx$6 = classNames.bind(styles$1);
 const StepIndicator = ({
   items,
   onClickItem,
@@ -835,26 +843,26 @@ const StepIndicator = ({
       ModalUtils.alert("\uC774\uC804 \uB2E8\uACC4\uB97C \uBAA8\uB450 \uC644\uB8CC\uD574\uC57C \uC120\uD0DD\uD55C \uB2E8\uACC4\uB85C\n\uC774\uB3D9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.", "\uC774\uC804 \uB2E8\uACC4\uB97C \uBA3C\uC800 \uC9C4\uD589\uD574\uC8FC\uC138\uC694");
     }
   };
-  return /* @__PURE__ */ jsxs("div", { className: cx$5("stepper-layout", { loading: isLoading }), children: [
-    /* @__PURE__ */ jsx("div", { className: cx$5("stepper"), children: steps.map((item, idx) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+  return /* @__PURE__ */ jsxs("div", { className: cx$6("stepper-layout", { loading: isLoading }), children: [
+    /* @__PURE__ */ jsx("div", { className: cx$6("stepper"), children: steps.map((item, idx) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: cx$5(
+          className: cx$6(
             "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
+          children: item.isCompleted ? /* @__PURE__ */ jsx("span", { className: cx$6("completed-icon") }) : idx + 1
         }
       ),
-      idx < steps.length - 1 && Array.from({ length: dotCount }).map((_, dotIdx) => /* @__PURE__ */ jsx("span", { className: cx$5("dot") }, `dot-${idx}-${dotIdx}`))
+      idx < steps.length - 1 && Array.from({ length: dotCount }).map((_, dotIdx) => /* @__PURE__ */ jsx("span", { className: cx$6("dot") }, `dot-${idx}-${dotIdx}`))
     ] }, `num-${idx}`)) }),
-    /* @__PURE__ */ jsx("ul", { className: cx$5("step-labels"), children: steps.map((item, idx) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("ul", { className: cx$6("step-labels"), children: steps.map((item, idx) => /* @__PURE__ */ jsx(
       "li",
       {
-        className: cx$5(
+        className: cx$6(
           { completed: steps[idx < 1 ? idx : idx - 1]?.isCompleted ?? false },
           { active: defaultValue === item.value || current === idx }
         ),
@@ -866,7 +874,7 @@ const StepIndicator = ({
   ] });
 };
 
-const cx$4 = classNames.bind(styles$2);
+const cx$5 = classNames.bind(styles$2);
 function Attachment({
   photos,
   onAddPhoto,
@@ -883,14 +891,14 @@ function Attachment({
   };
   const renderPhotoSingle = () => {
     if (photos.length === 0) {
-      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: [
+      return /* @__PURE__ */ jsx("div", { className: cx$5("single-photo-item", "add-photo-item"), children: /* @__PURE__ */ jsxs("button", { className: cx$5("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$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" })
+    return photos.map((photo) => /* @__PURE__ */ jsxs("div", { className: cx$5("single-photo-item"), children: [
+      /* @__PURE__ */ jsx("div", { className: cx$5("photo-placeholder"), children: /* @__PURE__ */ jsx("img", { src: photo.src, alt: photo.name, className: cx$5("photo-image") }) }),
+      /* @__PURE__ */ jsx("button", { className: cx$5("remove-button"), onClick: () => handleRemovePhoto(photo.id), "aria-label": "\uC0AC\uC9C4 \uC0AD\uC81C", children: "\xD7" })
     ] }, photo.id));
   };
   const renderPhotoGrid = () => {
@@ -898,12 +906,12 @@ function Attachment({
     const gridItems = [];
     if (photos.length < maxPhotos) {
       gridItems.push(
-        /* @__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("div", { className: cx$5("photo-item", "add-photo-item"), children: /* @__PURE__ */ jsxs("button", { className: cx$5("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$4("photo-count"), children: [
+          /* @__PURE__ */ jsxs("span", { className: cx$5("photo-count"), children: [
             "(",
-            /* @__PURE__ */ jsx("span", { className: cx$4("photo-count-number"), children: photos.length }),
+            /* @__PURE__ */ jsx("span", { className: cx$5("photo-count-number"), children: photos.length }),
             "/",
             maxPhotos,
             ")"
@@ -913,9 +921,9 @@ function Attachment({
     }
     photos.forEach((photo) => {
       gridItems.push(
-        /* @__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" })
+        /* @__PURE__ */ jsxs("div", { className: cx$5("photo-item"), children: [
+          /* @__PURE__ */ jsx("div", { className: cx$5("photo-placeholder"), children: /* @__PURE__ */ jsx("img", { src: photo.src, alt: photo.name, className: cx$5("photo-image") }) }),
+          /* @__PURE__ */ jsx("button", { className: cx$5("remove-button"), onClick: () => handleRemovePhoto(photo.id), "aria-label": "\uC0AC\uC9C4 \uC0AD\uC81C", children: "\xD7" })
         ] }, photo.id)
       );
     });
@@ -926,9 +934,9 @@ function Attachment({
     return null;
   }
   if (type === "single") {
-    return /* @__PURE__ */ jsx("div", { className: cx$4("photo-single"), children: renderPhotoSingle() });
+    return /* @__PURE__ */ jsx("div", { className: cx$5("photo-single"), children: renderPhotoSingle() });
   }
-  return /* @__PURE__ */ jsx("div", { className: cx$4("photo-grid", { linear: type === "linear" }), children: renderPhotoGrid() });
+  return /* @__PURE__ */ jsx("div", { className: cx$5("photo-grid", { linear: type === "linear" }), children: renderPhotoGrid() });
 }
 
 const maxImageSize = 3 * 1024 * 1024;
@@ -1375,12 +1383,12 @@ function useCanvasPaint(paintProps = {}) {
 
 const testSignatureBase64Data = "data:image/png;base64,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";
 
-const cx$3 = classNames.bind(styles$3);
-const { InputBox, Input } = FormCore;
+const cx$4 = classNames.bind(styles$3);
+const { InputBox: InputBox$1, Input: Input$1 } = 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("p", { className: cx$4("guide-title"), children: "\uC774\uB807\uAC8C \uAC80\uC0C9\uD574 \uBCF4\uC138\uC694." }),
+    /* @__PURE__ */ jsxs("ul", { className: cx$4("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" }),
@@ -1404,7 +1412,7 @@ const AddressSearchResult = ({
     setFilterList(filterList2);
   }, [addressSearchList, searchKeyword]);
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs("p", { className: cx$3("guide-title"), children: [
+    /* @__PURE__ */ jsxs("p", { className: cx$4("guide-title"), children: [
       "\uCD1D ",
       /* @__PURE__ */ jsx("span", { className: "text-primary", children: filterList.length }),
       "\uAC74\uC758 \uAC80\uC0C9\uACB0\uACFC"
@@ -1415,20 +1423,20 @@ const AddressSearchResult = ({
         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: [
+          label: /* @__PURE__ */ jsxs("div", { className: cx$4("search-result"), children: [
+            /* @__PURE__ */ jsxs("div", { className: cx$4("zipcode"), children: [
               " ",
-              highlightOnSearchKeyword(item.zipCode, searchKeyword)
+              highlightOnSearchKeyword$1(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) })
+            /* @__PURE__ */ jsx("div", { className: cx$4("divider") }),
+            /* @__PURE__ */ jsxs("div", { className: cx$4("address-info"), children: [
+              /* @__PURE__ */ jsx("span", { className: cx$4("address"), children: highlightOnSearchKeyword$1(item.address, searchKeyword) }),
+              /* @__PURE__ */ jsx("span", { className: cx$4("old-address"), children: highlightOnSearchKeyword$1(item.oldAddress, searchKeyword) })
             ] })
           ] }),
           id: item.address
         })),
-        className: cx$3("radio-group"),
+        className: cx$4("radio-group"),
         name: "address-search",
         size: "medium",
         defaultValue: "",
@@ -1462,7 +1470,7 @@ const AddressSearchDetailInput = ({
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx(FormField.Label, { id: "detail", style: { width: "90px" }, children: "\uC0C1\uC138\uC8FC\uC18C" }),
       /* @__PURE__ */ jsx(
-        Input,
+        Input$1,
         {
           placeholder: "\uC0C1\uC138\uC8FC\uC18C \uC785\uB825",
           onChange: onDetailChange,
@@ -1500,25 +1508,17 @@ function AddressComponent({ isOpen, onClose, setValue }) {
     /* @__PURE__ */ jsxs(Modal.Content, { children: [
       /* @__PURE__ */ jsx(Modal.Header, { headerTitle: "\uC8FC\uC18C \uAC80\uC0C9", showCloseButton: true }),
       /* @__PURE__ */ jsxs(Modal.Body, { children: [
-        /* @__PURE__ */ jsx(
-          InputBox,
+        /* @__PURE__ */ jsx(InputBox$1, { clearable: true, endElement: /* @__PURE__ */ jsx(IconMainUiSearch, { onClick: search }), onClear: onAddressSearchClear, children: /* @__PURE__ */ jsx(
+          Input$1,
           {
-            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 !== "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,
@@ -1769,20 +1769,20 @@ function BankStockSearchModal({ open, onClose, onSelect }) {
   ] });
 }
 
-const cx$2 = classNames.bind(styles$5);
+const cx$3 = classNames.bind(styles$5);
 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" }),
+  return /* @__PURE__ */ jsxs("div", { className: cx$3("grade-section"), children: [
+    /* @__PURE__ */ jsxs("div", { className: cx$3("icon-title"), children: [
+      /* @__PURE__ */ jsx(IconIllustGrade, {}),
       /* @__PURE__ */ jsx("span", { className: "typo-title5 text-body", children: "\uB4F1\uAE09" })
     ] }),
     /* @__PURE__ */ jsx("p", { className: "typo-body2 text-body_3", children: "\uC9C1\uC885, \uC6B4\uC804 \uC5EC\uBD80 \uC120\uD0DD\uC2DC \uC790\uB3D9\uC73C\uB85C \uC0B0\uC815\uB429\uB2C8\uB2E4." }),
-    /* @__PURE__ */ jsxs("div", { className: cx$2("grade-list"), children: [
-      /* @__PURE__ */ jsxs("div", { className: cx$2("grade"), children: [
+    /* @__PURE__ */ jsxs("div", { className: cx$3("grade-list"), children: [
+      /* @__PURE__ */ jsxs("div", { className: cx$3("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__ */ jsxs("div", { className: cx$3("grade"), children: [
         /* @__PURE__ */ jsx("span", { children: "\uC785\uC6D0\uB4F1\uAE09" }),
         /* @__PURE__ */ jsx("span", { className: "text-primary typo-subtitle3", children: hospitalizationGrade || "-" })
       ] })
@@ -1790,11 +1790,11 @@ const JobVehicleSearchGrade = ({ riskGrade, hospitalizationGrade }) => {
   ] });
 };
 
-const cx$1 = classNames.bind(styles$6);
+const cx$2 = classNames.bind(styles$6);
 function VehicleSearch({ vehicles, onVehicleSelect }) {
-  return /* @__PURE__ */ jsxs("div", { className: cx$1("vehicle-search-section"), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cx$2("vehicle-search-section"), children: [
     /* @__PURE__ */ jsx("p", { children: "\uC6B4\uC804 \uCC28\uC885" }),
-    /* @__PURE__ */ jsx(Radio.Root, { name: "vehicle-selection", size: "small", className: cx$1("vehicle-radio-root"), children: vehicles.map((vehicle, index) => /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(Radio.Root, { name: "vehicle-selection", size: "small", className: cx$2("vehicle-radio-root"), children: vehicles.map((vehicle, index) => /* @__PURE__ */ jsxs(
       Radio.Item,
       {
         id: `item-${vehicle.integrationCodeValue}`,
@@ -1808,7 +1808,7 @@ function VehicleSearch({ vehicles, onVehicleSelect }) {
             onVehicleSelect(selected);
           }
         },
-        className: cx$1("item"),
+        className: cx$2("item"),
         children: [
           vehicle.integrationCodeValueName,
           "(",
@@ -1856,7 +1856,7 @@ const useJobVehicleSearch = () => {
   };
 };
 
-const cx = classNames.bind(styles$5);
+const cx$1 = classNames.bind(styles$5);
 function useJobVehicleSearchModal() {
   const {
     selectedVehicle,
@@ -1902,19 +1902,19 @@ function useJobVehicleSearchModal() {
       /* @__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__ */ jsx(Modal.Body, { className: cx$1("job-vehicle-search-modal"), raw: true, children: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: cx$1("left-panel"), children: [
+            /* @__PURE__ */ jsxs("div", { className: cx$1("card-section"), children: [
               /* @__PURE__ */ jsxs(
                 "div",
                 {
-                  className: cx("card-menu", { "card-selected": rightPanelView === "jobSearch" }),
+                  className: cx$1("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__ */ jsxs("div", { className: cx$1("card-title"), children: [
+                      /* @__PURE__ */ jsx(IconIllustJob, { className: cx$1("card-icon") }),
+                      /* @__PURE__ */ jsx("span", { className: cx$1("card-text", "typo-title5", "text-body"), children: "\uC9C1\uC885" }),
+                      /* @__PURE__ */ jsx(IconSubUiArrowRight, {})
                     ] }),
                     /* @__PURE__ */ jsx("div", { className: "typo-body2 text-body_2", children: selectedJob ? selectedJob.occupationIndustryName : "\uBBF8\uC120\uD0DD" })
                   ]
@@ -1923,13 +1923,13 @@ function useJobVehicleSearchModal() {
               /* @__PURE__ */ jsxs(
                 "div",
                 {
-                  className: cx("card-menu", { "card-selected": rightPanelView === "vehicleSelection" }),
+                  className: cx$1("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: cx$1("card-title"), children: [
+                      /* @__PURE__ */ jsx(IconIllustVehicle, { className: cx$1("card-icon") }),
+                      /* @__PURE__ */ jsx("span", { className: cx$1("card-text", "typo-title5", "text-body"), children: "\uC6B4\uC804 \uC5EC\uBD80\xB7\uCC28\uC885" }),
+                      /* @__PURE__ */ jsx(IconSubUiArrowRight, {})
                     ] }),
                     /* @__PURE__ */ jsxs("div", { className: "typo-body2 text-body_2", children: [
                       selectedVehicle?.integrationCodeValueName,
@@ -1941,7 +1941,7 @@ function useJobVehicleSearchModal() {
             ] }),
             /* @__PURE__ */ jsx(JobVehicleSearchGrade, { riskGrade, hospitalizationGrade })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: cx("right-panel"), children: rightPanelView === "jobSearch" ? JobSearch : VehicleSearch })
+          /* @__PURE__ */ jsx("div", { className: cx$1("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" }) })
       ] })
@@ -1961,5 +1961,144 @@ const JobSearchModal = ({ onClose }) => {
   ] });
 };
 
-export { Attachment, BankStockSearchModal, FormCheckbox, FormCheckboxButton, FormDatePicker, FormDateRangePicker, FormSearchJobField, FormSegmentGroup, FormSelect, FormTextField, JobSearchModal, StepIndicator, resize, testSignatureBase64Data, useAddressComponent, useBankStockSearch, useCamera, useCanvasPaint, useJobVehicleSearchModal, useSearchAddress };
+const mockCustomers = [
+  { customerId: "1", customerName: "\uAE40\uD55C\uD654", birthDate: "1999.01.01", genderCode: "\uB0A8\uC131" },
+  {
+    customerId: "2",
+    customerName: "\uAE40\uD55C\uD654\uC0DD\uBA85",
+    birthDate: "1989.01.01",
+    genderCode: "\uC5EC\uC131",
+    baseAddress: "\uC11C\uC6B8\uC2DC \uB9C8\uD3EC\uAD6C"
+  },
+  {
+    customerId: "3",
+    customerName: "\uAE40\uD55C\uD654\uC190\uD574\uBCF4\uD5D8",
+    birthDate: "1999.01.01",
+    genderCode: "\uB0A8\uC131",
+    baseAddress: "\uC11C\uC6B8\uC2DC \uB9C8\uD3EC\uAD6C"
+  }
+];
+const useCustomerSearch = (onSelect) => {
+  const { triggerRef, isOpen, setIsOpen, DropDown } = useDropDown();
+  const [searchKeyword, setSearchKeyword] = useState("");
+  const [searchInput, setSearchInput] = useState("");
+  const [customerList, setCustomerList] = useState([]);
+  const [selectedCustomer, setSelectedCustomer] = useState(null);
+  const search = () => {
+    if (searchInput.length >= 2) {
+      setSearchKeyword(searchInput);
+      const filtered = mockCustomers.filter((c) => c.customerName?.toLowerCase().includes(searchInput.toLowerCase()));
+      setCustomerList(filtered);
+      setIsOpen(true);
+    } else {
+      setCustomerList([]);
+      setSearchKeyword("");
+      setIsOpen(false);
+    }
+  };
+  const onKeyUp = (e) => {
+    if (e.key === "Enter") {
+      search();
+    }
+  };
+  const onSearchInputChange = (e) => {
+    setSearchInput(e.target.value);
+    if (e.target.value.length < 2) {
+      setCustomerList([]);
+      setSearchKeyword("");
+      setIsOpen(false);
+    }
+  };
+  const onClear = () => {
+    setSearchInput("");
+    setSearchKeyword("");
+    setCustomerList([]);
+    setSelectedCustomer(null);
+    setIsOpen(false);
+  };
+  const handleSelectItem = (customer) => {
+    setSelectedCustomer(customer);
+    setSearchInput(customer.customerName || "");
+    setCustomerList([]);
+    setIsOpen(false);
+    if (onSelect) {
+      onSelect(customer);
+    }
+  };
+  return {
+    triggerRef,
+    isOpen,
+    DropDown,
+    searchInput,
+    customerList,
+    searchKeyword,
+    onSearchInputChange,
+    onKeyUp,
+    search,
+    onClear,
+    handleSelectItem,
+    selectedCustomer
+  };
+};
+
+const cx = classNames.bind(styles$7);
+const highlightOnSearchKeyword = (originalText, targetString) => {
+  if (!targetString || !originalText?.includes(targetString)) {
+    return originalText;
+  }
+  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 }, i)
+      );
+    }
+  }
+  return replacedText;
+};
+const { InputBox, Input } = FormCore;
+const CustomerSearch = ({ onSelect }) => {
+  const {
+    triggerRef,
+    isOpen,
+    DropDown,
+    searchInput,
+    customerList,
+    searchKeyword,
+    onSearchInputChange,
+    onKeyUp,
+    search,
+    onClear,
+    handleSelectItem
+  } = useCustomerSearch(onSelect);
+  return /* @__PURE__ */ jsxs("div", { className: cx("container"), children: [
+    /* @__PURE__ */ jsx("div", { className: cx("search-bar"), children: /* @__PURE__ */ jsx(InputBox, { endElement: /* @__PURE__ */ jsx(IconMainUiSearch, { onClick: search }), onClear, clearable: true, children: /* @__PURE__ */ jsx(
+      Input,
+      {
+        onChange: onSearchInputChange,
+        onKeyUp,
+        value: searchInput,
+        placeholder: "\uACE0\uAC1D\uBA85\uC744 \uB450 \uAE00\uC790 \uC774\uC0C1 \uC785\uB825\uD574\uC8FC\uC138\uC694.",
+        size: "large",
+        ref: triggerRef
+      }
+    ) }) }),
+    isOpen && /* @__PURE__ */ jsx(DropDown, { children: /* @__PURE__ */ jsx("div", { className: cx("result-container"), children: customerList.length > 0 && /* @__PURE__ */ jsx(List, { rootProps: { style: { width: "100%" } }, children: customerList.map((customer) => /* @__PURE__ */ jsx(ListItem, { onClick: () => handleSelectItem(customer), selectable: true, children: /* @__PURE__ */ jsxs("div", { className: cx("customer-item"), children: [
+      /* @__PURE__ */ jsx("div", { className: cx("name"), children: highlightOnSearchKeyword(customer.customerName || "", searchKeyword) }),
+      /* @__PURE__ */ jsxs("div", { className: cx("details"), children: [
+        /* @__PURE__ */ jsx("span", { children: customer.birthDate }),
+        /* @__PURE__ */ jsx("span", { className: cx("separator"), children: "|" }),
+        /* @__PURE__ */ jsx("span", { children: customer.genderCode }),
+        customer.baseAddress && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: cx("separator"), children: "|" }),
+          /* @__PURE__ */ jsx("span", { children: customer.baseAddress })
+        ] })
+      ] })
+    ] }) }, customer.customerId)) }) }) })
+  ] });
+};
+
+export { Attachment, BankStockSearchModal, CustomerSearch, FormCheckbox, FormCheckboxButton, FormDatePicker, FormDateRangePicker, FormSearchJobField, FormSegmentGroup, FormSelect, FormTextField, JobSearchModal, StepIndicator, resize, testSignatureBase64Data, useAddressComponent, useBankStockSearch, useCamera, useCanvasPaint, useJobVehicleSearchModal, useSearchAddress };
 //# sourceMappingURL=index.esm.js.map