sales-frontend-components 3.0.9 → 4.0.0

package/dist/index.esm.js

@@ -20,8 +20,8 @@ import styles$9 from './modal/pre-standard/job-vehicle-search-modal/job-vehicle-
 import styles$a from './modal/pre-standard/vehicle-search-modal/vehicle-search-modal.module.scss';
 import styles$b from './modal/pre-standard/organization-search-modal/organization-search-modal.module.scss';
 import styles$c from './step-indicator/step-indicator.module.scss';
-import { Bridge } from 'sales-frontend-bridge';
 import styles$d from './camera/camera.module.scss';
+import { Bridge } from 'sales-frontend-bridge';
 import { useRemoteIdentityVerificationCore } from 'sales-frontend-headless/remote-identity-verification';
 import styles$e from './terms/components/unit/terms-radio.module.scss';
 import styles$f from './terms/components/unit/terms-rating-bar.module.scss';
@@ -174,12 +174,6 @@ var isClient$1 = () => {
     return false;
   }
 };
-var isAndroidDevice = () => {
-  if (isClient$1() === false) {
-    return false;
-  }
-  return /Android/i.test(navigator.userAgent);
-};
 var _MessageEventManager = class _MessageEventManager2 {
   constructor() {
     __publicField(this, "handlers", /* @__PURE__ */ new Map());
@@ -661,12 +655,12 @@ const highlightOnSearchKeyword = (originalText, targetString) => {
   return replacedText;
 };
 
-const cx$x = classNames$1.bind(styles);
+const cx$y = classNames$1.bind(styles);
 const { InputBox: InputBox$4, Input: Input$4 } = FormCore;
 const AddressSearchInitialText = () => {
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("p", { className: cx$x("guide-title"), children: "\uC774\uB807\uAC8C \uAC80\uC0C9\uD574 \uBCF4\uC138\uC694." }),
-    /* @__PURE__ */ jsxs("ul", { className: cx$x("guide"), children: [
+    /* @__PURE__ */ jsx("p", { className: cx$y("guide-title"), children: "\uC774\uB807\uAC8C \uAC80\uC0C9\uD574 \uBCF4\uC138\uC694." }),
+    /* @__PURE__ */ jsxs("ul", { className: cx$y("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" }),
@@ -683,31 +677,32 @@ const AddressSearchResult = ({
   selectedAddress
 }) => {
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs("div", { className: cx$x("guide-title"), children: [
+    /* @__PURE__ */ jsxs("div", { className: cx$y("guide-title"), children: [
       "\uCD1D ",
       /* @__PURE__ */ jsx("span", { className: "text-primary", children: addressSearchList.length }),
       "\uAC74\uC758 \uAC80\uC0C9\uACB0\uACFC"
     ] }),
-    /* @__PURE__ */ jsx("div", { className: cx$x("search-result-wrapper"), children: addressSearchList?.map((item, index) => {
-      return /* @__PURE__ */ jsx("div", { className: cx$x("search-result-row"), children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: cx$y("search-result-wrapper"), children: addressSearchList?.map((item, index) => {
+      return /* @__PURE__ */ jsx("div", { className: cx$y("search-result-row"), children: /* @__PURE__ */ jsx(
         Radio.Item,
         {
-          wrapperProps: { className: cx$x("search-result-radio") },
+          wrapperProps: { className: cx$y("search-result-radio") },
           id: `address-search-result--${index}`,
           size: "medium",
           name: "address-search",
+          clampLabel: false,
           onChange,
           value: String(index),
           checked: item.firstPostalCode === selectedAddress?.firstPostalCode && item.secondPostalCode === selectedAddress?.secondPostalCode && item.roadNameBaseAddress === selectedAddress?.roadNameBaseAddress && item.roadNameDetailAddress === selectedAddress?.roadNameDetailAddress,
-          children: /* @__PURE__ */ jsxs("span", { className: cx$x("search-result"), children: [
-            /* @__PURE__ */ jsx("span", { className: cx$x("zipcode"), children: highlightOnSearchKeyword(`${item.firstPostalCode}${item.secondPostalCode}`, searchKeyword) }),
-            /* @__PURE__ */ jsx("span", { className: cx$x("divider") }),
-            /* @__PURE__ */ jsxs("span", { className: cx$x("address-info"), children: [
-              /* @__PURE__ */ jsx("span", { className: cx$x("road-address"), children: highlightOnSearchKeyword(
+          children: /* @__PURE__ */ jsxs("span", { className: cx$y("search-result"), children: [
+            /* @__PURE__ */ jsx("span", { className: cx$y("zipcode"), children: highlightOnSearchKeyword(`${item.firstPostalCode}${item.secondPostalCode}`, searchKeyword) }),
+            /* @__PURE__ */ jsx("span", { className: cx$y("divider") }),
+            /* @__PURE__ */ jsxs("span", { className: cx$y("address-info"), children: [
+              /* @__PURE__ */ jsx("span", { className: cx$y("road-address"), children: highlightOnSearchKeyword(
                 `${item.roadNameBaseAddress} ${item.roadNameDetailAddress} ${item.mainBuildingName}`,
                 searchKeyword
               ) }),
-              /* @__PURE__ */ jsx("span", { className: cx$x("land-address"), children: highlightOnSearchKeyword(
+              /* @__PURE__ */ jsx("span", { className: cx$y("land-address"), children: highlightOnSearchKeyword(
                 `${item.landNumberBaseAddress} ${item.landNumberDetailAddress}`,
                 searchKeyword
               ) })
@@ -731,20 +726,29 @@ const AddressSearchDetailInput = ({
 }) => {
   const { land, road } = selectedStandardizationAddress || {};
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(Radio.Root, { name: "address-search-standardization", size: "medium", align: "vertical", className: "mb-xxlarge", children: /* @__PURE__ */ jsx(Radio.Item, { wrapperProps: { className: cx$x("search-result-radio") }, value: "", checked: true, children: /* @__PURE__ */ jsxs("span", { className: cx$x("search-result"), children: [
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: cx$x("zipcode"),
-          children: `${selectedStandardizationAddress?.land?.firstPostalCode}${land?.secondPostalCode}`
-        }
-      ),
-      /* @__PURE__ */ jsx("span", { className: cx$x("divider") }),
-      /* @__PURE__ */ jsxs("span", { className: cx$x("address-info"), children: [
-        /* @__PURE__ */ jsx("span", { className: cx$x("road-address"), children: `${road?.baseAddress} ${road?.detailAddress}` }),
-        /* @__PURE__ */ jsx("span", { className: cx$x("land-address"), children: `${land?.baseAddress} ${land?.detailAddress}` })
-      ] })
-    ] }) }) }),
+    /* @__PURE__ */ jsx(Radio.Root, { name: "address-search-standardization", size: "medium", align: "vertical", className: "mb-xxlarge", children: /* @__PURE__ */ jsx(
+      Radio.Item,
+      {
+        wrapperProps: { className: cx$y("search-result-radio") },
+        value: "",
+        checked: true,
+        clampLabel: false,
+        children: /* @__PURE__ */ jsxs("span", { className: cx$y("search-result"), children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cx$y("zipcode"),
+              children: `${selectedStandardizationAddress?.land?.firstPostalCode}${land?.secondPostalCode}`
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: cx$y("divider") }),
+          /* @__PURE__ */ jsxs("span", { className: cx$y("address-info"), children: [
+            /* @__PURE__ */ jsx("span", { className: cx$y("road-address"), children: `${road?.baseAddress} ${road?.detailAddress}` }),
+            /* @__PURE__ */ jsx("span", { className: cx$y("land-address"), children: `${land?.baseAddress} ${land?.detailAddress}` })
+          ] })
+        ] })
+      }
+    ) }),
     /* @__PURE__ */ jsxs("div", { className: "d-flex gap-large items-center", children: [
       /* @__PURE__ */ jsx(FormField.Label, { htmlFor: "detail", children: "\uC0C1\uC138\uC8FC\uC18C" }),
       /* @__PURE__ */ jsx(
@@ -800,7 +804,7 @@ function AddressComponent({ isOpen, onClose, setValue, inputProps, inputBoxProps
     /* @__PURE__ */ jsx(Modal.Overlay, {}),
     /* @__PURE__ */ jsxs(Modal.Content, { children: [
       /* @__PURE__ */ jsx(Modal.Header, { headerTitle: "\uC8FC\uC18C \uAC80\uC0C9", showCloseButton: true }),
-      /* @__PURE__ */ jsxs(Modal.Body, { className: cx$x("modal-body"), children: [
+      /* @__PURE__ */ jsxs(Modal.Body, { className: cx$y("modal-body"), children: [
         /* @__PURE__ */ jsx(
           InputBox$4,
           {
@@ -824,7 +828,7 @@ function AddressComponent({ isOpen, onClose, setValue, inputProps, inputBoxProps
           }
         ),
         addressSearchStep === "initial" && /* @__PURE__ */ jsx(AddressSearchInitialText, {}),
-        isLoading && /* @__PURE__ */ jsx(Loading.Wait, { className: cx$x("loading") }),
+        isLoading && /* @__PURE__ */ jsx(Loading.Wait, { className: cx$y("loading") }),
         !isLoading && addressSearchStep === "search-result" && /* @__PURE__ */ jsx(
           AddressSearchResult,
           {
@@ -1495,26 +1499,26 @@ function useBankStockSearch({ onSelect, commonCodeId }) {
   };
 }
 
-const cx$w = classNames$1.bind(styles$1);
+const cx$x = classNames$1.bind(styles$1);
 function BankStockSearchModal({ open, onClose, onSelect, commonCodeId }) {
   const { bankList, stockList, handleSelect } = useBankStockSearch({
     onSelect,
     commonCodeId
   });
   const renderItems = (list) => {
-    return /* @__PURE__ */ jsx("div", { className: cx$w("grid-container"), children: list.map((item) => {
+    return /* @__PURE__ */ jsx("div", { className: cx$x("grid-container"), children: list.map((item) => {
       const findItem = BANK_STOCK_ICON_LIST.find((icon) => icon.codeVal === item.codeVal);
       const convertedItem = findItem ? findItem : {
         replaceName: item.codeName
       };
-      return /* @__PURE__ */ jsxs("button", { className: cx$w("grid-item", "text-pre-line"), onClick: () => handleSelect(item), children: [
-        /* @__PURE__ */ jsx("span", { className: cx$w("icon-box"), children: /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsxs("button", { className: cx$x("grid-item", "text-pre-line"), onClick: () => handleSelect(item), children: [
+        /* @__PURE__ */ jsx("span", { className: cx$x("icon-box"), children: /* @__PURE__ */ jsx(
           "span",
           {
-            className: `${cx$w("icon")} dsp-icons ${findItem?.className ?? "dsp-icons-graphics-stock-hochul-eopsum"}`
+            className: `${cx$x("icon")} dsp-icons ${findItem?.className ?? "dsp-icons-graphics-stock-hochul-eopsum"}`
           }
         ) }),
-        /* @__PURE__ */ jsx("span", { className: cx$w("icon-name"), children: convertedItem?.replaceName })
+        /* @__PURE__ */ jsx("span", { className: cx$x("icon-name"), children: convertedItem?.replaceName })
       ] }, item.codeVal);
     }) });
   };
@@ -1522,13 +1526,13 @@ function BankStockSearchModal({ open, onClose, onSelect, commonCodeId }) {
     /* @__PURE__ */ jsx(Modal.Overlay, {}),
     /* @__PURE__ */ jsxs(Modal.Content, { children: [
       /* @__PURE__ */ jsx(Modal.Header, { headerTitle: "\uC740\uD589/\uC99D\uAD8C\uC0AC \uC120\uD0DD", showCloseButton: true }),
-      /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsxs("div", { className: cx$w("container"), children: [
-        /* @__PURE__ */ jsxs("div", { className: cx$w("section"), children: [
-          /* @__PURE__ */ jsx("h2", { className: cx$w("section-title"), children: "\uC740\uD589\uC0AC" }),
+      /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsxs("div", { className: cx$x("container"), children: [
+        /* @__PURE__ */ jsxs("div", { className: cx$x("section"), children: [
+          /* @__PURE__ */ jsx("h2", { className: cx$x("section-title"), children: "\uC740\uD589\uC0AC" }),
           renderItems(bankList || [])
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: cx$w("section"), children: [
-          /* @__PURE__ */ jsx("h2", { className: cx$w("section-title"), children: "\uC99D\uAD8C\uC0AC" }),
+        /* @__PURE__ */ jsxs("div", { className: cx$x("section"), children: [
+          /* @__PURE__ */ jsx("h2", { className: cx$x("section-title"), children: "\uC99D\uAD8C\uC0AC" }),
           renderItems(stockList || [])
         ] })
       ] }) })
@@ -1547,7 +1551,7 @@ const useCustomerSearch = (onSelect, options) => {
   const [customerList, setCustomerList] = useState([]);
   const [selectedCustomer, setSelectedCustomer] = useState(null);
   const setSentryCustInfo = useSetSentryCustInfo();
-  const { data } = useSearchCustomerListQuery({ customerName: searchKeyword });
+  const { data, isFetching } = useSearchCustomerListQuery({ customerName: searchKeyword });
   const search = () => {
     if (searchInput.length >= 2) {
       setSearchKeyword(searchInput);
@@ -1600,6 +1604,7 @@ const useCustomerSearch = (onSelect, options) => {
     searchInput,
     customerList,
     searchKeyword,
+    isLoading: isFetching && searchKeyword.length > 0,
     onSearchInputChange,
     onKeyUp,
     search,
@@ -1613,7 +1618,7 @@ const useCustomerSearch = (onSelect, options) => {
   };
 };
 
-const cx$v = classNames$1.bind(styles$2);
+const cx$w = classNames$1.bind(styles$2);
 const { InputBox: InputBox$3, Input: Input$3 } = FormCore;
 const CustomerSearch = ({
   onSelectCustomer,
@@ -1630,6 +1635,7 @@ const CustomerSearch = ({
     searchInput,
     customerList,
     searchKeyword,
+    isLoading,
     onSearchInputChange,
     onKeyUp,
     search,
@@ -1640,8 +1646,8 @@ const CustomerSearch = ({
     onClear();
     onSearchClear?.();
   };
-  return /* @__PURE__ */ jsxs("div", { className: cx$v("container"), children: [
-    /* @__PURE__ */ jsx("div", { className: cx$v("search-bar"), children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs("div", { className: cx$w("container"), children: [
+    /* @__PURE__ */ jsx("div", { className: cx$w("search-bar"), children: /* @__PURE__ */ jsx(
       InputBox$3,
       {
         endElement: /* @__PURE__ */ jsx(IconMainUiSearch, { onClick: search, style: { width: "20px", height: "20px" } }),
@@ -1662,34 +1668,38 @@ const CustomerSearch = ({
         )
       }
     ) }),
-    isOpen && customerList.length > 0 && /* @__PURE__ */ jsx(DropDown, { children: /* @__PURE__ */ jsx("div", { className: cx$v("result-container"), children: /* @__PURE__ */ jsx(List, { children: customerList.map((customer, index) => /* @__PURE__ */ jsx(
+    isOpen && searchKeyword && /* @__PURE__ */ jsx(DropDown, { children: /* @__PURE__ */ jsx("div", { className: cx$w("result-container"), children: customerList.length > 0 ? /* @__PURE__ */ jsx(List, { children: customerList.map((customer, index) => /* @__PURE__ */ jsx(
       ListItem,
       {
         onClick: () => handleSelectItem(customer),
         selectable: true,
-        children: /* @__PURE__ */ jsxs("button", { className: cx$v("customer-item"), children: [
-          /* @__PURE__ */ jsx("div", { className: cx$v("name"), children: highlightOnSearchKeyword(customer.customerName || "", searchKeyword) }),
-          /* @__PURE__ */ jsxs("div", { className: cx$v("details"), children: [
+        children: /* @__PURE__ */ jsxs("button", { className: cx$w("customer-item"), children: [
+          /* @__PURE__ */ jsx("div", { className: cx$w("name"), children: highlightOnSearchKeyword(customer.customerName || "", searchKeyword) }),
+          /* @__PURE__ */ jsxs("div", { className: cx$w("details"), children: [
             /* @__PURE__ */ jsx("span", { children: customer.birthDate && convertDateString({
               dateString: customer.birthDate,
               fromFormat: "YYYYMMDD",
               toFormat: "YYYY.MM.DD"
             }) }),
-            /* @__PURE__ */ jsx("span", { className: cx$v("separator"), children: "|" }),
+            /* @__PURE__ */ jsx("span", { className: cx$w("separator"), children: "|" }),
             /* @__PURE__ */ jsx("span", { children: getGenderName(customer.genderCode) }),
             customer.baseAddress && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx("span", { className: cx$v("separator"), children: "|" }),
+              /* @__PURE__ */ jsx("span", { className: cx$w("separator"), children: "|" }),
               /* @__PURE__ */ jsx("span", { children: customer.baseAddress })
             ] })
           ] })
         ] })
       },
       `cust-item-${customer.customerId}-${index}`
-    )) }) }) })
+    )) }) : !isLoading && /* @__PURE__ */ jsxs("div", { className: cx$w("no-result-message"), children: [
+      "`",
+      /* @__PURE__ */ jsx("span", { className: "text-primary", children: searchKeyword }),
+      "`\uC5D0 \uB300\uD55C \uAC80\uC0C9\uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
+    ] }) }) })
   ] });
 };
 
-const cx$u = classNames$1.bind(styles$2);
+const cx$v = classNames$1.bind(styles$2);
 const { InputBox: InputBox$2, Input: Input$2 } = FormCore;
 function CustomerSearchModal({ isOpen, closeModal, onSelect, onSearchClear, inputProps, inputBoxProps }) {
   const {
@@ -1736,12 +1746,12 @@ function CustomerSearchModal({ isOpen, closeModal, onSelect, onSearchClear, inpu
             )
           }
         ),
-        searchKeyword && /* @__PURE__ */ jsxs("p", { className: cx$u("result-count"), children: [
+        searchKeyword && /* @__PURE__ */ jsxs("p", { className: cx$v("result-count"), children: [
           "\uCD1D ",
           /* @__PURE__ */ jsx("span", { className: "text-primary", children: customerList.length }),
           "\uAC74\uC758 \uAC80\uC0C9\uACB0\uACFC"
         ] }),
-        searchKeyword && customerList.length === 0 && /* @__PURE__ */ jsxs("div", { className: cx$u("search-result"), children: [
+        searchKeyword && customerList.length === 0 && /* @__PURE__ */ jsxs("div", { className: cx$v("search-result"), children: [
           "`",
           /* @__PURE__ */ jsx("span", { className: "text-primary", children: searchKeyword }),
           "`\uC5D0 \uB300\uD55C \uAC80\uC0C9\uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
@@ -1757,18 +1767,18 @@ function CustomerSearchModal({ isOpen, closeModal, onSelect, onSearchClear, inpu
               closeModal();
             },
             selectable: true,
-            children: /* @__PURE__ */ jsxs("div", { className: cx$u("customer-item", "modal"), children: [
-              /* @__PURE__ */ jsx("div", { className: cx$u("name"), children: highlightOnSearchKeyword(customer.customerName || "", searchKeyword) }),
-              /* @__PURE__ */ jsxs("div", { className: cx$u("details", "modal"), children: [
+            children: /* @__PURE__ */ jsxs("div", { className: cx$v("customer-item", "modal"), children: [
+              /* @__PURE__ */ jsx("div", { className: cx$v("name"), children: highlightOnSearchKeyword(customer.customerName || "", searchKeyword) }),
+              /* @__PURE__ */ jsxs("div", { className: cx$v("details", "modal"), children: [
                 /* @__PURE__ */ jsx("span", { children: customer.birthDate && convertDateString({
                   dateString: customer.birthDate,
                   fromFormat: "YYYYMMDD",
                   toFormat: "YYYY.MM.DD"
                 }) }),
-                /* @__PURE__ */ jsx("span", { className: cx$u("separator"), children: "|" }),
+                /* @__PURE__ */ jsx("span", { className: cx$v("separator"), children: "|" }),
                 /* @__PURE__ */ jsx("span", { children: getGenderName(customer.genderCode) }),
                 customer.baseAddress && /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx("span", { className: cx$u("separator"), children: "|" }),
+                  /* @__PURE__ */ jsx("span", { className: cx$v("separator"), children: "|" }),
                   /* @__PURE__ */ jsx("span", { children: customer.baseAddress })
                 ] })
               ] })
@@ -1781,7 +1791,7 @@ function CustomerSearchModal({ isOpen, closeModal, onSelect, onSearchClear, inpu
   ] });
 }
 
-const cx$t = classNames$1.bind(styles$3);
+const cx$u = classNames$1.bind(styles$3);
 const { InputBox: InputBox$1, Input: Input$1 } = FormCore;
 const favoriteList = [
   {
@@ -1823,9 +1833,9 @@ const NationalitySearchInitialText = ({
     setSearchInput(keyword);
     setSearchKeyword(keyword);
   };
-  return /* @__PURE__ */ jsxs("div", { className: cx$t("favorite-container"), children: [
-    /* @__PURE__ */ jsx("p", { className: cx$t("favorite-title"), children: "\uB9CE\uC774 \uCC3E\uB294 \uAD6D\uC801" }),
-    /* @__PURE__ */ jsx("ul", { className: cx$t("favorite"), children: favoriteList.map((item, index) => /* @__PURE__ */ jsx("li", { onClick: () => set(item.nationalityCodeName), children: /* @__PURE__ */ jsx("button", { children: item.nationalityCodeName }) }, `${item.nationalityCode}-${index}`)) })
+  return /* @__PURE__ */ jsxs("div", { className: cx$u("favorite-container"), children: [
+    /* @__PURE__ */ jsx("p", { className: cx$u("favorite-title"), children: "\uB9CE\uC774 \uCC3E\uB294 \uAD6D\uC801" }),
+    /* @__PURE__ */ jsx("ul", { className: cx$u("favorite"), children: favoriteList.map((item, index) => /* @__PURE__ */ jsx("li", { onClick: () => set(item.nationalityCodeName), children: /* @__PURE__ */ jsx("button", { children: item.nationalityCodeName }) }, `${item.nationalityCode}-${index}`)) })
   ] });
 };
 const NationalitySearchResult = ({
@@ -1840,12 +1850,12 @@ const NationalitySearchResult = ({
     setFilterList(filterList2);
   }, [nationalityList, searchKeyWord]);
   return /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
-    /* @__PURE__ */ jsxs("p", { className: cx$t("favorite-title"), children: [
+    /* @__PURE__ */ jsxs("p", { className: cx$u("favorite-title"), children: [
       "\uCD1D ",
       /* @__PURE__ */ jsx("span", { className: "text-primary", children: filterList.length }),
       "\uAC74\uC758 \uAC80\uC0C9\uACB0\uACFC"
     ] }),
-    /* @__PURE__ */ jsx("ul", { className: cx$t("favorite"), children: filterList.length > 0 && filterList.map((item, index) => {
+    /* @__PURE__ */ jsx("ul", { className: cx$u("favorite"), children: filterList.length > 0 && filterList.map((item, index) => {
       return /* @__PURE__ */ jsx(
         "li",
         {
@@ -1858,7 +1868,7 @@ const NationalitySearchResult = ({
         `${index}-${item.nationalityCode}`
       );
     }) }),
-    filterList.length === 0 && /* @__PURE__ */ jsxs("div", { className: cx$t("search-result"), children: [
+    filterList.length === 0 && /* @__PURE__ */ jsxs("div", { className: cx$u("search-result"), children: [
       "`",
       /* @__PURE__ */ jsx("span", { className: "text-primary", children: searchKeyWord }),
       "`\uC5D0 \uB300\uD55C \uAC80\uC0C9\uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
@@ -1893,7 +1903,7 @@ function NationalityComponent({ isOpen, onClose, setValue, onConfirm, inputProps
             clearable: true,
             endElement: /* @__PURE__ */ jsx("button", { children: /* @__PURE__ */ jsx(IconMainUiSearch, { onClick: search }) }),
             onClear,
-            className: cx$t("search-input"),
+            className: cx$u("search-input"),
             ...inputBoxProps,
             children: /* @__PURE__ */ jsx(
               Input$1,
@@ -2004,7 +2014,7 @@ const useNationalityComponent = () => {
   };
 };
 
-const cx$s = classNames$1.bind(styles$4);
+const cx$t = classNames$1.bind(styles$4);
 const AUTH_TEMPLATE_CODES = {
   appInit: {
     dev: {
@@ -2235,7 +2245,7 @@ function useNxlOneModal({
     isNxlOneModalOpen: isOpen,
     NxlModalComponent: /* @__PURE__ */ jsxs(Modal.Root, { isOpen, onClose: closeModal, modalSize, children: [
       /* @__PURE__ */ jsx(Modal.Overlay, {}),
-      /* @__PURE__ */ jsx(Modal.Content, { children: /* @__PURE__ */ jsxs(Modal.Body, { raw: true, className: cx$s("modal-body", `modal-body-${modalSize}`), children: [
+      /* @__PURE__ */ jsx(Modal.Content, { children: /* @__PURE__ */ jsxs(Modal.Body, { raw: true, className: cx$t("modal-body", `modal-body-${modalSize}`), children: [
         isIframeShow && /* @__PURE__ */ jsx(
           NxlOneIframe,
           {
@@ -2245,7 +2255,7 @@ function useNxlOneModal({
             env: nxlOnePropsState.env,
             bizCode: nxlOnePropsState.bizCode || bizCode,
             tmplCode: nxlOnePropsState.tmplCode || tmplCode,
-            className: cx$s("nxl-one-iframe"),
+            className: cx$t("nxl-one-iframe"),
             onSuccess: (result) => {
               onSuccess(result);
               setIsIframeShow(false);
@@ -2257,16 +2267,16 @@ function useNxlOneModal({
             }
           }
         ),
-        !isIframeShow && /* @__PURE__ */ jsx("div", { className: cx$s("nxl-one-iframe") })
+        !isIframeShow && /* @__PURE__ */ jsx("div", { className: cx$t("nxl-one-iframe") })
       ] }) })
     ] })
   };
 }
 
-const cx$r = classNames$1.bind(styles$5);
+const cx$s = classNames$1.bind(styles$5);
 const { InputBox, Input } = FormCore;
 const VisaSearchInitialText = ({ visaList, onSelect, onConfirm }) => {
-  return /* @__PURE__ */ jsx("div", { className: cx$r("favorite-container"), children: /* @__PURE__ */ jsx("ul", { className: cx$r("favorite"), children: visaList.map((item, index) => {
+  return /* @__PURE__ */ jsx("div", { className: cx$s("favorite-container"), children: /* @__PURE__ */ jsx("ul", { className: cx$s("favorite"), children: visaList.map((item, index) => {
     return /* @__PURE__ */ jsx(
       "li",
       {
@@ -2287,12 +2297,12 @@ const VisaSearchResult = ({ visaList, searchKeyword, onSelect, onConfirm }) => {
     setFilterList(filterList2);
   }, [visaList, searchKeyword]);
   return /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
-    /* @__PURE__ */ jsxs("p", { className: cx$r("favorite-title"), children: [
+    /* @__PURE__ */ jsxs("p", { className: cx$s("favorite-title"), children: [
       "\uCD1D ",
       /* @__PURE__ */ jsx("span", { className: "text-primary", children: filterList.length }),
       "\uAC74\uC758 \uAC80\uC0C9\uACB0\uACFC"
     ] }),
-    /* @__PURE__ */ jsx("ul", { className: cx$r("favorite"), children: filterList.length > 0 && filterList.map((item, index) => {
+    /* @__PURE__ */ jsx("ul", { className: cx$s("favorite"), children: filterList.length > 0 && filterList.map((item, index) => {
       return /* @__PURE__ */ jsx(
         "li",
         {
@@ -2305,7 +2315,7 @@ const VisaSearchResult = ({ visaList, searchKeyword, onSelect, onConfirm }) => {
         `${index}-${item.integrationCodeValueName}`
       );
     }) }),
-    filterList.length === 0 && /* @__PURE__ */ jsxs("div", { className: cx$r("search-result"), children: [
+    filterList.length === 0 && /* @__PURE__ */ jsxs("div", { className: cx$s("search-result"), children: [
       "`",
       /* @__PURE__ */ jsx("span", { className: "text-primary", children: searchKeyword }),
       "`\uC5D0 \uB300\uD55C \uAC80\uC0C9\uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
@@ -2329,7 +2339,7 @@ function VisaComponent({ isOpen, onClose, setValue, onConfirm, inputProps, input
             clearable: true,
             endElement: /* @__PURE__ */ jsx("button", { children: /* @__PURE__ */ jsx(IconMainUiSearch, { onClick: search }) }),
             onClear,
-            className: cx$r("search-input"),
+            className: cx$s("search-input"),
             ...inputBoxProps,
             children: /* @__PURE__ */ jsx(
               Input,
@@ -2441,30 +2451,30 @@ const useVisaComponent = () => {
   };
 };
 
-const cx$q = classNames$1.bind(styles$6);
+const cx$r = classNames$1.bind(styles$6);
 function DeaCustomerSearchResult({
   customerList,
   onCustomerSelect,
   selectedCustomer
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: cx$q("result-section"), children: [
-    /* @__PURE__ */ jsxs("p", { className: cx$q("result-title"), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cx$r("result-section"), children: [
+    /* @__PURE__ */ jsxs("p", { className: cx$r("result-title"), children: [
       "\uCD1D ",
       /* @__PURE__ */ jsx("span", { className: "text-primary", children: customerList.length }),
       "\uAC74"
     ] }),
     /* @__PURE__ */ jsxs(Table, { variant: "vertical", style: { tableLayout: "fixed" }, height: "292px", children: [
       /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-        /* @__PURE__ */ jsx("th", { className: cx$q("th-padding", "select-col"), children: "\uC120\uD0DD" }),
-        /* @__PURE__ */ jsx("th", { className: cx$q("th-padding"), children: "\uACE0\uAC1DID" }),
-        /* @__PURE__ */ jsx("th", { className: cx$q("th-padding"), children: "\uACE0\uAC1D\uBA85" }),
-        /* @__PURE__ */ jsx("th", { className: cx$q("th-padding"), children: "\uC8FC\uBBFC\uB4F1\uB85D\uBC88\uD638" }),
-        /* @__PURE__ */ jsx("th", { className: cx$q("th-padding"), children: "\uC9C1\uC885\uC5C5\uC885\uBA85" }),
-        /* @__PURE__ */ jsx("th", { className: cx$q("th-padding"), children: "\uC804\uD654\uBC88\uD638" }),
-        /* @__PURE__ */ jsx("th", { className: cx$q("th-padding"), children: "\uC8FC\uC18C" })
+        /* @__PURE__ */ jsx("th", { className: cx$r("th-padding", "select-col"), children: "\uC120\uD0DD" }),
+        /* @__PURE__ */ jsx("th", { className: cx$r("th-padding"), children: "\uACE0\uAC1DID" }),
+        /* @__PURE__ */ jsx("th", { className: cx$r("th-padding"), children: "\uACE0\uAC1D\uBA85" }),
+        /* @__PURE__ */ jsx("th", { className: cx$r("th-padding"), children: "\uC8FC\uBBFC\uB4F1\uB85D\uBC88\uD638" }),
+        /* @__PURE__ */ jsx("th", { className: cx$r("th-padding"), children: "\uC9C1\uC885\uC5C5\uC885\uBA85" }),
+        /* @__PURE__ */ jsx("th", { className: cx$r("th-padding"), children: "\uC804\uD654\uBC88\uD638" }),
+        /* @__PURE__ */ jsx("th", { className: cx$r("th-padding"), children: "\uC8FC\uC18C" })
       ] }) }),
       /* @__PURE__ */ jsx("tbody", { children: customerList.length > 0 ? customerList.map((customer, index) => /* @__PURE__ */ jsxs("tr", { children: [
-        /* @__PURE__ */ jsx("td", { className: cx$q("radio-cell"), children: /* @__PURE__ */ jsx("div", { className: "d-flex-center-center", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("td", { className: cx$r("radio-cell"), children: /* @__PURE__ */ jsx("div", { className: "d-flex-center-center", children: /* @__PURE__ */ jsx(
           Radio.Item,
           {
             id: `radio-${index}`,
@@ -2483,7 +2493,7 @@ function DeaCustomerSearchResult({
         /* @__PURE__ */ jsx("td", { children: customer.occupationKindName }),
         /* @__PURE__ */ jsx("td", { children: customer.mobilePhoneNumber }),
         /* @__PURE__ */ jsx("td", { children: customer.address })
-      ] }, `cust-item-${customer.customerId}-${index}`)) : /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: 7, children: /* @__PURE__ */ jsxs("div", { className: cx$q("no-result"), children: [
+      ] }, `cust-item-${customer.customerId}-${index}`)) : /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: 7, children: /* @__PURE__ */ jsxs("div", { className: cx$r("no-result"), children: [
         /* @__PURE__ */ jsx(IconGraphicsFeedbackEmpty, {}),
         /* @__PURE__ */ jsx("p", { children: "\uC870\uD68C \uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }),
         /* @__PURE__ */ jsx("p", { children: "\uC785\uB825\uD55C \uC815\uBCF4\uB97C \uB2E4\uC2DC \uD655\uC778\uD574\uC8FC\uC138\uC694." })
@@ -2493,7 +2503,7 @@ function DeaCustomerSearchResult({
 }
 
 const { TextField: TextField$3 } = FormField;
-const cx$p = classNames$1.bind(styles$6);
+const cx$q = classNames$1.bind(styles$6);
 function DeaCustomerSearch({
   setSearchParams,
   customerList,
@@ -2564,15 +2574,15 @@ function DeaCustomerSearch({
     }
   }, [initSearchParams]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: cx$p("search-section"), children: /* @__PURE__ */ jsxs("div", { className: cx$p("search-filters"), children: [
-      /* @__PURE__ */ jsxs("div", { className: cx$p("search-filters-wrap"), children: [
-        /* @__PURE__ */ jsxs("div", { className: cx$p("search-filter-section", "flex-1"), children: [
+    /* @__PURE__ */ jsx("div", { className: cx$q("search-section"), children: /* @__PURE__ */ jsxs("div", { className: cx$q("search-filters"), children: [
+      /* @__PURE__ */ jsxs("div", { className: cx$q("search-filters-wrap"), children: [
+        /* @__PURE__ */ jsxs("div", { className: cx$q("search-filter-section", "flex-1"), children: [
           /* @__PURE__ */ jsx(FormField.Label, { className: "subtitle3 text-body-1", children: "\uACE0\uAC1D \uAD6C\uBD84" }),
           /* @__PURE__ */ jsx(Select, { value: "personal", placeholder: "\uAC1C\uC778", disabled: true, size: "small", className: "w-full", children: /* @__PURE__ */ jsx(Select.Option, { value: "personal", children: "\uAC1C\uC778" }) })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: cx$p("search-filter-section", "flex-2"), children: [
+        /* @__PURE__ */ jsxs("div", { className: cx$q("search-filter-section", "flex-2"), children: [
           /* @__PURE__ */ jsx(FormField.Label, { className: "subtitle3 text-body-1", children: "\uC8FC\uBBFC\uB4F1\uB85D\uBC88\uD638" }),
-          /* @__PURE__ */ jsxs("div", { className: cx$p("resident-number-inputs"), children: [
+          /* @__PURE__ */ jsxs("div", { className: cx$q("resident-number-inputs"), children: [
             /* @__PURE__ */ jsx(
               TextField$3,
               {
@@ -2586,7 +2596,7 @@ function DeaCustomerSearch({
                 onKeyDown,
                 onFocus: onFocusResidentFrontInput,
                 rootProps: {
-                  className: cx$p("search-input"),
+                  className: cx$q("search-input"),
                   onClear: () => {
                     setResidentNumberFront("");
                   }
@@ -2610,16 +2620,16 @@ function DeaCustomerSearch({
                 onFocus: onFocusResidentBackInput,
                 rootProps: {
                   clearable: false,
-                  className: cx$p("search-input")
+                  className: cx$q("search-input")
                 }
               }
             )
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: cx$p("search-buttons"), children: /* @__PURE__ */ jsx(Button, { appearance: "filled", size: "small", variant: "primary", className: "button", onClick: handleSearch, children: "\uC870\uD68C" }) })
+      /* @__PURE__ */ jsx("div", { className: cx$q("search-buttons"), children: /* @__PURE__ */ jsx(Button, { appearance: "filled", size: "small", variant: "primary", className: "button", onClick: handleSearch, children: "\uC870\uD68C" }) })
     ] }) }),
-    /* @__PURE__ */ jsx("div", { className: cx$p("divider") }),
+    /* @__PURE__ */ jsx("div", { className: cx$q("divider") }),
     /* @__PURE__ */ jsx(
       DeaCustomerSearchResult,
       {
@@ -2732,28 +2742,28 @@ const EMPLOYEE_SEARCH_TABS = [
   { value: "WKIS", label: "\uB0B4\uADFC" }
 ];
 
-const cx$o = classNames$1.bind(styles$7);
+const cx$p = classNames$1.bind(styles$7);
 function EmployeeSearchResult({
   filteredEmployees,
   onEmployeeSelect,
   selectedEmployee
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: cx$o("result-section"), children: [
-    /* @__PURE__ */ jsxs("p", { className: cx$o("result-title"), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cx$p("result-section"), children: [
+    /* @__PURE__ */ jsxs("p", { className: cx$p("result-title"), children: [
       "\uCD1D ",
       /* @__PURE__ */ jsx("span", { className: "text-primary", children: filteredEmployees.length }),
       "\uAC74"
     ] }),
     /* @__PURE__ */ jsxs(Table, { variant: "vertical", style: { tableLayout: "fixed" }, height: "292px", children: [
       /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-        /* @__PURE__ */ jsx("th", { className: cx$o("th-padding", "select-col"), children: "\uC120\uD0DD" }),
-        /* @__PURE__ */ jsx("th", { className: cx$o("th-padding"), children: "\uC0AC\uC6D0\uBC88\uD638" }),
-        /* @__PURE__ */ jsx("th", { className: cx$o("th-padding"), children: "\uC0AC\uC6D0\uBA85" }),
-        /* @__PURE__ */ jsx("th", { className: cx$o("th-padding"), children: "\uC18C\uC18D\uAE30\uAD00\uBA85" }),
-        /* @__PURE__ */ jsx("th", { className: cx$o("th-padding"), children: "\uC0AC\uC6D0\uAD6C\uBD84" })
+        /* @__PURE__ */ jsx("th", { className: cx$p("th-padding", "select-col"), children: "\uC120\uD0DD" }),
+        /* @__PURE__ */ jsx("th", { className: cx$p("th-padding"), children: "\uC0AC\uC6D0\uBC88\uD638" }),
+        /* @__PURE__ */ jsx("th", { className: cx$p("th-padding"), children: "\uC0AC\uC6D0\uBA85" }),
+        /* @__PURE__ */ jsx("th", { className: cx$p("th-padding"), children: "\uC18C\uC18D\uAE30\uAD00\uBA85" }),
+        /* @__PURE__ */ jsx("th", { className: cx$p("th-padding"), children: "\uC0AC\uC6D0\uAD6C\uBD84" })
       ] }) }),
       /* @__PURE__ */ jsx("tbody", { children: filteredEmployees.length > 0 ? filteredEmployees.map((employee, index) => /* @__PURE__ */ jsxs("tr", { children: [
-        /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("span", { className: cx$o("td-padding"), children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("span", { className: cx$p("td-padding"), children: /* @__PURE__ */ jsx(
           Radio.Item,
           {
             id: `radio-${index}`,
@@ -2766,11 +2776,11 @@ function EmployeeSearchResult({
             }
           }
         ) }) }),
-        /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("span", { className: cx$o("td-padding"), children: employee.employeeNumber }) }),
-        /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("span", { className: cx$o("td-padding"), children: employee.employeeName }) }),
-        /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("span", { className: cx$o("td-padding"), children: employee.organizationName }) }),
-        /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("span", { className: cx$o("td-padding"), children: employee.employeeDivisionCodeName }) })
-      ] }, `${employee.employeeNumber}-${index}`)) : /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: 5, children: /* @__PURE__ */ jsxs("div", { className: cx$o("no-result"), children: [
+        /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("span", { className: cx$p("td-padding"), children: employee.employeeNumber }) }),
+        /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("span", { className: cx$p("td-padding"), children: employee.employeeName }) }),
+        /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("span", { className: cx$p("td-padding"), children: employee.organizationName }) }),
+        /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("span", { className: cx$p("td-padding"), children: employee.employeeDivisionCodeName }) })
+      ] }, `${employee.employeeNumber}-${index}`)) : /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: 5, children: /* @__PURE__ */ jsxs("div", { className: cx$p("no-result"), children: [
         /* @__PURE__ */ jsx(IconGraphicsFeedbackEmpty, {}),
         /* @__PURE__ */ jsx("p", { children: "\uC870\uD68C \uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }),
         /* @__PURE__ */ jsx("p", { children: "\uC785\uB825\uD55C \uC815\uBCF4\uB97C \uB2E4\uC2DC \uD655\uC778\uD574\uC8FC\uC138\uC694." })
@@ -2780,7 +2790,7 @@ function EmployeeSearchResult({
 }
 
 const { TextField: TextField$2 } = FormField;
-const cx$n = classNames$1.bind(styles$7);
+const cx$o = classNames$1.bind(styles$7);
 function EmployeeSearch({
   activeTab,
   onTabChange,
@@ -2799,9 +2809,9 @@ function EmployeeSearch({
     setSearchInput("");
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: cx$n("search-section"), children: /* @__PURE__ */ jsxs("div", { className: cx$n("search-filters"), children: [
-      /* @__PURE__ */ jsxs("div", { className: cx$n("search-filters-wrap"), children: [
-        /* @__PURE__ */ jsxs("div", { className: cx$n("search-filter-section", "flex-1"), children: [
+    /* @__PURE__ */ jsx("div", { className: cx$o("search-section"), children: /* @__PURE__ */ jsxs("div", { className: cx$o("search-filters"), children: [
+      /* @__PURE__ */ jsxs("div", { className: cx$o("search-filters-wrap"), children: [
+        /* @__PURE__ */ jsxs("div", { className: cx$o("search-filter-section", "flex-1"), children: [
           /* @__PURE__ */ jsx(FormField.Label, { className: "subtitle3 text-body-1", children: "\uC131\uBA85/\uC0AC\uBC88" }),
           /* @__PURE__ */ jsx(
             TextField$2,
@@ -2814,12 +2824,12 @@ function EmployeeSearch({
               rootProps: {
                 onClear: handleReset,
                 clearable: true,
-                className: cx$n("search-input")
+                className: cx$o("search-input")
               }
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: cx$n("search-filter-section"), children: [
+        /* @__PURE__ */ jsxs("div", { className: cx$o("search-filter-section"), children: [
           /* @__PURE__ */ jsx(FormField.Label, { className: "subtitle3 text-body-1", children: "\uC0AC\uC6D0 \uAD6C\uBD84" }),
           /* @__PURE__ */ jsx(
             Select,
@@ -2833,7 +2843,7 @@ function EmployeeSearch({
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: cx$n("search-buttons"), children: [
+      /* @__PURE__ */ jsxs("div", { className: cx$o("search-buttons"), children: [
         /* @__PURE__ */ jsx(
           Button,
           {
@@ -2841,14 +2851,14 @@ function EmployeeSearch({
             size: "small",
             variant: "secondary",
             onClick: handleReset,
-            className: cx$n("button"),
+            className: cx$o("button"),
             children: "\uCD08\uAE30\uD654"
           }
         ),
-        /* @__PURE__ */ jsx(Button, { appearance: "filled", size: "small", variant: "primary", onClick: handleSearch, className: cx$n("button"), children: "\uC870\uD68C" })
+        /* @__PURE__ */ jsx(Button, { appearance: "filled", size: "small", variant: "primary", onClick: handleSearch, className: cx$o("button"), children: "\uC870\uD68C" })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx("div", { className: cx$n("divider") }),
+    /* @__PURE__ */ jsx("div", { className: cx$o("divider") }),
     searchTerm && /* @__PURE__ */ jsx(
       EmployeeSearchResult,
       {
@@ -3010,15 +3020,15 @@ function JobSearchDetail({ occupationTypeCode, occupationIndustryCode }) {
   ] }) }) });
 }
 
-const cx$m = classNames$1.bind(styles$8);
+const cx$n = classNames$1.bind(styles$8);
 function JobSearchCategory({ filteredJobs, onJobSelect, searchTerm }) {
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: cx$m("category-section"), children: [
-    /* @__PURE__ */ jsxs("p", { className: cx$m("result-title"), children: [
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: cx$n("category-section"), children: [
+    /* @__PURE__ */ jsxs("p", { className: cx$n("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", align: "vertical", className: cx$m("job-radio-root"), children: filteredJobs.map((job, index) => /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(Accordion.Root, { children: /* @__PURE__ */ jsx(Radio.Root, { name: "job-selection", size: "small", align: "vertical", className: cx$n("job-radio-root"), children: filteredJobs.map((job, index) => /* @__PURE__ */ jsxs(
       Accordion.Item,
       {
         id: `item-${job.occupationIndustryCode}-${index}-accordion`,
@@ -3048,24 +3058,24 @@ function JobSearchCategory({ filteredJobs, onJobSelect, searchTerm }) {
   ] }) });
 }
 
-const cx$l = classNames$1.bind(styles$8);
+const cx$m = classNames$1.bind(styles$8);
 function JobSearchFavorite({ filteredJobs, onJobSelect }) {
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: cx$l("popular-jobs"), children: [
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: cx$m("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", align: "vertical", className: cx$l("job-radio-root"), children: filteredJobs.map((job, index) => /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(Accordion.Root, { children: /* @__PURE__ */ jsx(Radio.Root, { name: "job-selection", size: "small", align: "vertical", className: cx$m("job-radio-root"), children: filteredJobs.map((job, index) => /* @__PURE__ */ jsxs(
       Accordion.Item,
       {
         id: `item-${job.occupationIndustryCode}-${index}`,
-        className: cx$l("accordion-item"),
+        className: cx$m("accordion-item"),
         children: [
-          /* @__PURE__ */ jsx(Accordion.HeaderDiv, { className: cx$l("accordion-header-item"), children: /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx(Accordion.HeaderDiv, { className: cx$m("accordion-header-item"), children: /* @__PURE__ */ jsxs(
             Radio.Item,
             {
               size: "small",
               id: `item-radio-${job.occupationIndustryCode}-${index}`,
               value: job.occupationIndustryCode,
               onChange: () => onJobSelect(job),
-              className: cx$l("radio-item"),
+              className: cx$m("radio-item"),
               children: [
                 job.occupationIndustryName,
                 "(",
@@ -3088,15 +3098,15 @@ function JobSearchFavorite({ filteredJobs, onJobSelect }) {
   ] }) });
 }
 
-const cx$k = classNames$1.bind(styles$8);
+const cx$l = classNames$1.bind(styles$8);
 function JobSearchResult({ filteredJobs, onJobSelect, searchTerm }) {
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: cx$k("popular-jobs"), children: [
-    /* @__PURE__ */ jsxs("p", { className: cx$k("result-title"), children: [
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: cx$l("popular-jobs"), children: [
+    /* @__PURE__ */ jsxs("p", { className: cx$l("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", align: "vertical", className: cx$k("job-radio-root"), children: filteredJobs.map((job, index) => /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(Accordion.Root, { children: /* @__PURE__ */ jsx(Radio.Root, { name: "job-selection", size: "small", align: "vertical", className: cx$l("job-radio-root"), children: filteredJobs.map((job, index) => /* @__PURE__ */ jsxs(
       Accordion.Item,
       {
         id: `item-${job.occupationIndustryCode}`,
@@ -3133,7 +3143,7 @@ function JobSearchResult({ filteredJobs, onJobSelect, searchTerm }) {
 }
 
 const { TextField: TextField$1 } = FormField;
-const cx$j = classNames$1.bind(styles$8);
+const cx$k = classNames$1.bind(styles$8);
 const { Option } = Select;
 function JobSearch({
   activeTab,
@@ -3171,7 +3181,7 @@ function JobSearch({
       }
     ),
     /* @__PURE__ */ jsxs("div", { children: [
-      activeTab === "jobName" && /* @__PURE__ */ jsxs("div", { className: cx$j("favorite-jobs-section"), children: [
+      activeTab === "jobName" && /* @__PURE__ */ jsxs("div", { className: cx$k("favorite-jobs-section"), children: [
         /* @__PURE__ */ jsx(
           TextField$1,
           {
@@ -3193,8 +3203,8 @@ function JobSearch({
         !searchTerm && /* @__PURE__ */ jsx(JobSearchFavorite, { filteredJobs, onJobSelect }),
         searchTerm && !isLoading && /* @__PURE__ */ jsx(JobSearchResult, { filteredJobs, onJobSelect, searchTerm })
       ] }),
-      activeTab === "jobCode" && /* @__PURE__ */ jsxs("div", { className: cx$j("select-jobs-section"), children: [
-        /* @__PURE__ */ jsxs("div", { className: cx$j("category-section"), children: [
+      activeTab === "jobCode" && /* @__PURE__ */ jsxs("div", { className: cx$k("select-jobs-section"), children: [
+        /* @__PURE__ */ jsxs("div", { className: cx$k("category-section"), children: [
           /* @__PURE__ */ jsx(
             Select,
             {
@@ -3486,20 +3496,20 @@ function useJobSearchModal() {
   };
 }
 
-const cx$i = classNames$1.bind(styles$9);
+const cx$j = classNames$1.bind(styles$9);
 const JobVehicleSearchGrade = ({ riskGrade, hospitalizationGrade }) => {
-  return /* @__PURE__ */ jsxs("div", { className: cx$i("grade-section"), children: [
-    /* @__PURE__ */ jsxs("div", { className: cx$i("icon-title"), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cx$j("grade-section"), children: [
+    /* @__PURE__ */ jsxs("div", { className: cx$j("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$i("grade-list"), children: [
-      /* @__PURE__ */ jsxs("div", { className: cx$i("grade"), children: [
+    /* @__PURE__ */ jsxs("div", { className: cx$j("grade-list"), children: [
+      /* @__PURE__ */ jsxs("div", { className: cx$j("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$i("grade"), children: [
+      /* @__PURE__ */ jsxs("div", { className: cx$j("grade"), children: [
         /* @__PURE__ */ jsx("span", { children: "\uC785\uC6D0\uB4F1\uAE09" }),
         /* @__PURE__ */ jsx("span", { className: "text-primary typo-subtitle3", children: hospitalizationGrade || "-" })
       ] })
@@ -3507,9 +3517,9 @@ const JobVehicleSearchGrade = ({ riskGrade, hospitalizationGrade }) => {
   ] });
 };
 
-const cx$h = classNames$1.bind(styles$a);
+const cx$i = classNames$1.bind(styles$a);
 function VehicleSearch({ vehicles, onVehicleSelect, selectedVehicle }) {
-  return /* @__PURE__ */ jsxs("div", { className: cx$h("vehicle-search-section"), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cx$i("vehicle-search-section"), children: [
     /* @__PURE__ */ jsx("p", { children: "\uC6B4\uC804 \uCC28\uC885" }),
     /* @__PURE__ */ jsx(
       Radio.Root,
@@ -3517,7 +3527,7 @@ function VehicleSearch({ vehicles, onVehicleSelect, selectedVehicle }) {
         name: "vehicle-selection",
         size: "small",
         align: "vertical",
-        className: cx$h("vehicle-radio-root"),
+        className: cx$i("vehicle-radio-root"),
         defaultValue: selectedVehicle?.integrationCodeValue || "",
         children: vehicles.map((vehicle, index) => /* @__PURE__ */ jsxs(
           Radio.Item,
@@ -3532,7 +3542,7 @@ function VehicleSearch({ vehicles, onVehicleSelect, selectedVehicle }) {
                 onVehicleSelect(selected);
               }
             },
-            className: cx$h("item"),
+            className: cx$i("item"),
             children: [
               vehicle.integrationCodeValueName,
               "(",
@@ -3611,7 +3621,7 @@ const useJobVehicleSearch = () => {
   };
 };
 
-const cx$g = classNames$1.bind(styles$9);
+const cx$h = classNames$1.bind(styles$9);
 function useJobVehicleSearchModal() {
   const {
     selectedVehicle,
@@ -3680,18 +3690,18 @@ 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$g("job-vehicle-search-modal"), raw: true, children: /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsxs("div", { className: cx$g("left-panel"), children: [
-                /* @__PURE__ */ jsxs("div", { className: cx$g("card-section"), children: [
+            /* @__PURE__ */ jsx(Modal.Body, { className: cx$h("job-vehicle-search-modal"), raw: true, children: /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs("div", { className: cx$h("left-panel"), children: [
+                /* @__PURE__ */ jsxs("div", { className: cx$h("card-section"), children: [
                   /* @__PURE__ */ jsxs(
                     "div",
                     {
-                      className: cx$g("card-menu", { "card-selected": rightPanelView === "jobSearch" }),
+                      className: cx$h("card-menu", { "card-selected": rightPanelView === "jobSearch" }),
                       onClick: () => setRightPanelView("jobSearch"),
                       children: [
-                        /* @__PURE__ */ jsxs("div", { className: cx$g("card-title"), children: [
-                          /* @__PURE__ */ jsx(IconIllustJob, { className: cx$g("card-icon") }),
-                          /* @__PURE__ */ jsx("span", { className: cx$g("card-text", "typo-title5", "text-body"), children: "\uC9C1\uC885" }),
+                        /* @__PURE__ */ jsxs("div", { className: cx$h("card-title"), children: [
+                          /* @__PURE__ */ jsx(IconIllustJob, { className: cx$h("card-icon") }),
+                          /* @__PURE__ */ jsx("span", { className: cx$h("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" })
@@ -3701,12 +3711,12 @@ function useJobVehicleSearchModal() {
                   /* @__PURE__ */ jsxs(
                     "div",
                     {
-                      className: cx$g("card-menu", { "card-selected": rightPanelView === "vehicleSelection" }),
+                      className: cx$h("card-menu", { "card-selected": rightPanelView === "vehicleSelection" }),
                       onClick: () => setRightPanelView("vehicleSelection"),
                       children: [
-                        /* @__PURE__ */ jsxs("div", { className: cx$g("card-title"), children: [
-                          /* @__PURE__ */ jsx(IconIllustVehicle, { className: cx$g("card-icon") }),
-                          /* @__PURE__ */ jsx("span", { className: cx$g("card-text", "typo-title5", "text-body"), children: "\uC6B4\uC804 \uC5EC\uBD80\xB7\uCC28\uC885" }),
+                        /* @__PURE__ */ jsxs("div", { className: cx$h("card-title"), children: [
+                          /* @__PURE__ */ jsx(IconIllustVehicle, { className: cx$h("card-icon") }),
+                          /* @__PURE__ */ jsx("span", { className: cx$h("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: [
@@ -3719,7 +3729,7 @@ function useJobVehicleSearchModal() {
                 ] }),
                 /* @__PURE__ */ jsx(JobVehicleSearchGrade, { riskGrade, hospitalizationGrade })
               ] }),
-              /* @__PURE__ */ jsx("div", { className: cx$g("right-panel"), children: rightPanelView === "jobSearch" ? JobSearch : VehicleSearch })
+              /* @__PURE__ */ jsx("div", { className: cx$h("right-panel"), children: rightPanelView === "jobSearch" ? JobSearch : VehicleSearch })
             ] }) }),
             /* @__PURE__ */ jsx(Modal.Footer, { style: { marginTop: 0 }, children: /* @__PURE__ */ jsx(
               Button,
@@ -3742,27 +3752,27 @@ function useJobVehicleSearchModal() {
   };
 }
 
-const cx$f = classNames$1.bind(styles$b);
+const cx$g = classNames$1.bind(styles$b);
 function OrganizationSearchResult({
   filteredOrganizations,
   selectedOrganization,
   onOrganizationSelect
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: cx$f("result-section"), children: [
-    /* @__PURE__ */ jsxs("p", { className: cx$f("result-title"), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cx$g("result-section"), children: [
+    /* @__PURE__ */ jsxs("p", { className: cx$g("result-title"), children: [
       "\uCD1D ",
       /* @__PURE__ */ jsx("span", { className: "text-primary", children: filteredOrganizations.length }),
       "\uAC74"
     ] }),
     /* @__PURE__ */ jsxs(Table, { variant: "vertical", style: { tableLayout: "fixed" }, height: "292px", children: [
       /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-        /* @__PURE__ */ jsx("th", { className: cx$f("th-padding", "select-col"), children: "\uC120\uD0DD" }),
-        /* @__PURE__ */ jsx("th", { className: cx$f("th-padding"), children: "\uAE30\uAD00\uCF54\uB4DC" }),
-        /* @__PURE__ */ jsx("th", { className: cx$f("th-padding"), children: "\uAE30\uAD00\uC774\uB984" }),
-        /* @__PURE__ */ jsx("th", { className: cx$f("th-padding"), children: "\uD3D0\uC1C4\uC77C\uC790" })
+        /* @__PURE__ */ jsx("th", { className: cx$g("th-padding", "select-col"), children: "\uC120\uD0DD" }),
+        /* @__PURE__ */ jsx("th", { className: cx$g("th-padding"), children: "\uAE30\uAD00\uCF54\uB4DC" }),
+        /* @__PURE__ */ jsx("th", { className: cx$g("th-padding"), children: "\uAE30\uAD00\uC774\uB984" }),
+        /* @__PURE__ */ jsx("th", { className: cx$g("th-padding"), children: "\uD3D0\uC1C4\uC77C\uC790" })
       ] }) }),
       /* @__PURE__ */ jsx("tbody", { children: filteredOrganizations.length > 0 ? filteredOrganizations.map((organization, index) => /* @__PURE__ */ jsxs("tr", { children: [
-        /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("span", { className: cx$f("td-padding"), children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("span", { className: cx$g("td-padding"), children: /* @__PURE__ */ jsx(
           Radio.Item,
           {
             id: `radio-${index}`,
@@ -3778,7 +3788,7 @@ function OrganizationSearchResult({
         /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("span", { className: "td-padding", children: organization.organizationCode }) }),
         /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("span", { className: "td-padding", children: organization.organizationName }) }),
         /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("span", { className: "td-padding", children: organization.closeDate }) })
-      ] }, `${organization.organizationCode}-${index}`)) : /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: 4, children: /* @__PURE__ */ jsxs("div", { className: cx$f("no-result"), children: [
+      ] }, `${organization.organizationCode}-${index}`)) : /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: 4, children: /* @__PURE__ */ jsxs("div", { className: cx$g("no-result"), children: [
         /* @__PURE__ */ jsx(IconGraphicsFeedbackEmpty, {}),
         /* @__PURE__ */ jsx("p", { children: "\uC870\uD68C \uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }),
         /* @__PURE__ */ jsx("p", { children: "\uC785\uB825\uD55C \uC815\uBCF4\uB97C \uB2E4\uC2DC \uD655\uC778\uD574\uC8FC\uC138\uC694." })
@@ -3788,7 +3798,7 @@ function OrganizationSearchResult({
 }
 
 const { TextField } = FormField;
-const cx$e = classNames$1.bind(styles$b);
+const cx$f = classNames$1.bind(styles$b);
 function OrganizationSearch({
   searchTerm,
   setSearchTerm,
@@ -3805,8 +3815,8 @@ function OrganizationSearch({
     setSearchInput("");
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: cx$e("search-section"), children: /* @__PURE__ */ jsxs("div", { className: cx$e("search-filters"), children: [
-      /* @__PURE__ */ jsxs("div", { className: cx$e("search-filter-section"), children: [
+    /* @__PURE__ */ jsx("div", { className: cx$f("search-section"), children: /* @__PURE__ */ jsxs("div", { className: cx$f("search-filters"), children: [
+      /* @__PURE__ */ jsxs("div", { className: cx$f("search-filter-section"), children: [
         /* @__PURE__ */ jsx(FormField.Label, { className: "subtitle3 text-body-1", children: "\uAE30\uAD00\uCF54\uB4DC(\uBA85)" }),
         /* @__PURE__ */ jsx(
           TextField,
@@ -3817,19 +3827,19 @@ function OrganizationSearch({
             size: "small",
             onKeyUp: (e) => isEnter(e) && handleSearch(),
             rootProps: {
-              className: cx$e("search-input"),
+              className: cx$f("search-input"),
               clearable: true,
               onClear: handleReset
             }
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: cx$e("search-buttons"), children: [
-        /* @__PURE__ */ jsx(Button, { appearance: "outline", size: "small", variant: "secondary", className: cx$e("button"), onClick: handleReset, children: "\uCD08\uAE30\uD654" }),
-        /* @__PURE__ */ jsx(Button, { appearance: "filled", size: "small", variant: "primary", className: cx$e("button"), onClick: handleSearch, children: "\uC870\uD68C" })
+      /* @__PURE__ */ jsxs("div", { className: cx$f("search-buttons"), children: [
+        /* @__PURE__ */ jsx(Button, { appearance: "outline", size: "small", variant: "secondary", className: cx$f("button"), onClick: handleReset, children: "\uCD08\uAE30\uD654" }),
+        /* @__PURE__ */ jsx(Button, { appearance: "filled", size: "small", variant: "primary", className: cx$f("button"), onClick: handleSearch, children: "\uC870\uD68C" })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx("div", { className: cx$e("divider") }),
+    /* @__PURE__ */ jsx("div", { className: cx$f("divider") }),
     searchTerm && /* @__PURE__ */ jsx(
       OrganizationSearchResult,
       {
@@ -3917,14 +3927,14 @@ const OrganizationSearchModal = ({
   ] });
 };
 
-const cx$d = classNames$1.bind(styles$a);
+const cx$e = classNames$1.bind(styles$a);
 function JobVehicleSearchModal({ onClose }) {
   const { selectedVehicle, VehicleSearchComponent } = useVehicleSearch();
   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: "\uC6B4\uC804\uCC28\uC885 \uAC80\uC0C9", showCloseButton: true }),
-      /* @__PURE__ */ jsx(Modal.Body, { className: cx$d("job-vehicle-search-modal"), raw: true, children: VehicleSearchComponent }),
+      /* @__PURE__ */ jsx(Modal.Body, { className: cx$e("job-vehicle-search-modal"), raw: true, children: VehicleSearchComponent }),
       /* @__PURE__ */ jsx(Modal.Footer, { style: { marginTop: 0 }, children: /* @__PURE__ */ jsxs(Button, { variant: "primary", size: "medium", appearance: "filled", width: "full", onClick: onClose, children: [
         "\uD655\uC778(",
         selectedVehicle?.integrationCodeValueName || "\uBBF8\uC120\uD0DD",
@@ -4242,7 +4252,7 @@ const HookFormDateRangePickerRenew = ({
   return /* @__PURE__ */ jsx(DatePickerRangeRenew, { startDateProps: startDateMergedProps, endDateProps: endDateMergedProps });
 };
 
-const cx$c = classNames$1.bind(styles$c);
+const cx$d = classNames$1.bind(styles$c);
 const StepIndicator = ({
   items,
   onClickItem,
@@ -4277,26 +4287,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$c("stepper-layout", { loading: isLoading }), children: [
-    /* @__PURE__ */ jsx("div", { className: cx$c("stepper"), children: steps.map((item, idx) => /* @__PURE__ */ jsxs(React9.Fragment, { children: [
+  return /* @__PURE__ */ jsxs("div", { className: cx$d("stepper-layout", { loading: isLoading }), children: [
+    /* @__PURE__ */ jsx("div", { className: cx$d("stepper"), children: steps.map((item, idx) => /* @__PURE__ */ jsxs(React9.Fragment, { children: [
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: cx$c(
+          className: cx$d(
             "circle",
             { completed: item.isCompleted ?? false },
             { active: defaultValue === item.value || current === idx }
           ),
           onClick: () => handleClickStep?.(item),
-          children: item.isCompleted ? /* @__PURE__ */ jsx("span", { className: cx$c("completed-icon") }) : idx + 1
+          children: item.isCompleted ? /* @__PURE__ */ jsx("span", { className: cx$d("completed-icon") }) : idx + 1
         }
       ),
-      idx < steps.length - 1 && Array.from({ length: dotCount }).map((_, dotIdx) => /* @__PURE__ */ jsx("span", { className: cx$c("dot") }, `dot-${idx}-${dotIdx}`))
+      idx < steps.length - 1 && Array.from({ length: dotCount }).map((_, dotIdx) => /* @__PURE__ */ jsx("span", { className: cx$d("dot") }, `dot-${idx}-${dotIdx}`))
     ] }, `num-${idx}`)) }),
-    /* @__PURE__ */ jsx("ul", { className: cx$c("step-labels"), children: steps.map((item, idx) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("ul", { className: cx$d("step-labels"), children: steps.map((item, idx) => /* @__PURE__ */ jsx(
       "li",
       {
-        className: cx$c(
+        className: cx$d(
           { completed: steps[idx < 1 ? idx : idx - 1]?.isCompleted ?? false },
           { active: defaultValue === item.value || current === idx }
         ),
@@ -4308,15 +4318,17 @@ const StepIndicator = ({
   ] });
 };
 
-const cx$b = classNames$1.bind(styles$d);
+const cx$c = classNames$1.bind(styles$d);
 function Attachment({
   photos,
   onAddPhoto,
   onRemovePhoto,
   show,
   type = "multiple",
-  buttonText
+  buttonText,
+  maxPhotos
 }) {
+  const resolvedMaxPhotos = maxPhotos ?? (type === "single" ? 1 : 4);
   const handleAddPhoto = () => {
     onAddPhoto();
   };
@@ -4325,17 +4337,17 @@ function Attachment({
   };
   const renderPhotoSingle = () => {
     if (photos.length === 0) {
-      return /* @__PURE__ */ jsx("div", { className: cx$b("single-photo-item", "add-photo-item"), children: /* @__PURE__ */ jsxs("button", { className: cx$b("add-photo-button-single"), onClick: handleAddPhoto, children: [
+      return /* @__PURE__ */ jsx("div", { className: cx$c("single-photo-item", "add-photo-item"), children: /* @__PURE__ */ jsxs("button", { className: cx$c("add-photo-button-single"), onClick: handleAddPhoto, children: [
         /* @__PURE__ */ jsx(IconIllustCamera, {}),
         /* @__PURE__ */ jsx("span", { children: buttonText || "\uC0AC\uC9C4 \uCCA8\uBD80\uD558\uAE30" })
       ] }) });
     }
-    return photos.map((photo) => /* @__PURE__ */ jsxs("div", { className: cx$b("single-photo-item"), children: [
-      /* @__PURE__ */ jsx("div", { className: cx$b("photo-placeholder"), children: /* @__PURE__ */ jsx("img", { src: photo.src, alt: photo.name, className: cx$b("photo-image") }) }),
+    return photos.map((photo) => /* @__PURE__ */ jsxs("div", { className: cx$c("single-photo-item"), children: [
+      /* @__PURE__ */ jsx("div", { className: cx$c("photo-placeholder"), children: /* @__PURE__ */ jsx("img", { src: photo.src, alt: photo.name, className: cx$c("photo-image") }) }),
       /* @__PURE__ */ jsx(
         "button",
         {
-          className: cx$b("remove-button", "dsp-icons", "dsp-icons-icons-sub-ui-reset"),
+          className: cx$c("remove-button", "dsp-icons", "dsp-icons-icons-sub-ui-reset"),
           onClick: () => handleRemovePhoto(photo.id),
           "aria-label": "\uC0AC\uC9C4 \uC0AD\uC81C"
         }
@@ -4343,18 +4355,17 @@ function Attachment({
     ] }, photo.id));
   };
   const renderPhotoGrid = () => {
-    const maxPhotos = type === "single" ? 1 : 4;
     const gridItems = [];
-    if (photos.length < maxPhotos) {
+    if (photos.length < resolvedMaxPhotos) {
       gridItems.push(
-        /* @__PURE__ */ jsx("div", { className: cx$b("photo-item", "add-photo-item"), children: /* @__PURE__ */ jsxs("button", { className: cx$b("add-photo-button"), onClick: handleAddPhoto, children: [
+        /* @__PURE__ */ jsx("div", { className: cx$c("photo-item", "add-photo-item"), children: /* @__PURE__ */ jsxs("button", { className: cx$c("add-photo-button"), onClick: handleAddPhoto, children: [
           /* @__PURE__ */ jsx(IconIllustCamera, {}),
           /* @__PURE__ */ jsx("span", { children: buttonText || "\uCCA8\uBD80\uD558\uAE30" }),
-          /* @__PURE__ */ jsxs("span", { className: cx$b("photo-count"), children: [
+          /* @__PURE__ */ jsxs("span", { className: cx$c("photo-count"), children: [
             "(",
-            /* @__PURE__ */ jsx("span", { className: cx$b("photo-count-number"), children: photos.length }),
+            /* @__PURE__ */ jsx("span", { className: cx$c("photo-count-number"), children: photos.length }),
             "/",
-            maxPhotos,
+            resolvedMaxPhotos,
             ")"
           ] })
         ] }) }, "add-photo")
@@ -4362,12 +4373,12 @@ function Attachment({
     }
     photos.forEach((photo) => {
       gridItems.push(
-        /* @__PURE__ */ jsxs("div", { className: cx$b("photo-item"), children: [
-          /* @__PURE__ */ jsx("div", { className: cx$b("photo-placeholder"), children: /* @__PURE__ */ jsx("img", { src: photo.src, alt: photo.name, className: cx$b("photo-image") }) }),
+        /* @__PURE__ */ jsxs("div", { className: cx$c("photo-item"), children: [
+          /* @__PURE__ */ jsx("div", { className: cx$c("photo-placeholder"), children: /* @__PURE__ */ jsx("img", { src: photo.src, alt: photo.name, className: cx$c("photo-image") }) }),
           /* @__PURE__ */ jsx(
             "button",
             {
-              className: cx$b("remove-button", "dsp-icons", "dsp-icons-icons-sub-ui-reset"),
+              className: cx$c("remove-button", "dsp-icons", "dsp-icons-icons-sub-ui-reset"),
               onClick: () => handleRemovePhoto(photo.id),
               "aria-label": "\uC0AC\uC9C4 \uC0AD\uC81C"
             }
@@ -4382,9 +4393,96 @@ function Attachment({
     return null;
   }
   if (type === "single") {
-    return /* @__PURE__ */ jsx("div", { className: cx$b("photo-single"), children: renderPhotoSingle() });
+    return /* @__PURE__ */ jsx("div", { className: cx$c("photo-single"), children: renderPhotoSingle() });
+  }
+  return /* @__PURE__ */ jsx("div", { className: cx$c("photo-grid", { linear: type === "linear" }), children: renderPhotoGrid() });
+}
+
+const CAMERA_DEBUG_STORAGE_KEY = "dsp-camera-debug";
+const CAMERA_DEBUG_COOKIE_VALUE = "camera";
+const DEBUG_FILTER_COOKIE_KEY = "dsp-debug-mode-filter-name=";
+function isCameraDebugEnabled() {
+  if (typeof window === "undefined") {
+    return false;
+  }
+  const localStorageEnabled = getLocalStorageDebugEnabled();
+  const cookieEnabled = typeof document !== "undefined" && document.cookie.split(";").some((cookie) => cookie.trim().startsWith(DEBUG_FILTER_COOKIE_KEY) && cookie.includes(CAMERA_DEBUG_COOKIE_VALUE));
+  return localStorageEnabled || cookieEnabled;
+}
+function logCameraDebug(message, detail) {
+  if (!isCameraDebugEnabled()) {
+    return;
+  }
+  console.debug(`[camera] ${message}`, detail ?? "");
+}
+function logCameraError(message, error) {
+  console.error(`[camera] ${message}`, error ?? "");
+}
+function getLocalStorageDebugEnabled() {
+  try {
+    return window.localStorage?.getItem(CAMERA_DEBUG_STORAGE_KEY) === "true";
+  } catch {
+    return false;
   }
-  return /* @__PURE__ */ jsx("div", { className: cx$b("photo-grid", { linear: type === "linear" }), children: renderPhotoGrid() });
+}
+
+const MIN_PAGE_LIMIT = 1;
+const MAX_PAGE_LIMIT = 20;
+function clampPageLimit(pageLimit) {
+  if (!pageLimit || Number.isNaN(pageLimit)) {
+    return MIN_PAGE_LIMIT;
+  }
+  return Math.min(MAX_PAGE_LIMIT, Math.max(MIN_PAGE_LIMIT, Math.floor(pageLimit)));
+}
+async function convertSourceToFile(source, convertType) {
+  if (source.kind === "file") {
+    return source.file;
+  }
+  if (source.kind === "base64") {
+    return base64ToFile(source.uri, "image.jpg");
+  }
+  return imageUrlToFile(source.uri, convertType);
+}
+async function captureNativeDocuments({ pageLimit }) {
+  const clampedPageLimit = clampPageLimit(pageLimit);
+  logCameraDebug("native documentCapture requested", { pageLimit: clampedPageLimit });
+  const response = await Bridge.native.documentCapture({ pageLimit: clampedPageLimit });
+  if (response.uris && response.uris.length > 0) {
+    logCameraDebug("native documentCapture android uris", { count: response.uris.length });
+    return response.uris.map((uri) => ({ kind: "scheme", uri }));
+  }
+  if (response.sessionId) {
+    return pullIosSession(response.sessionId, response.count ?? 0);
+  }
+  logCameraDebug("native documentCapture canceled or empty");
+  return [];
+}
+async function pullIosSession(sessionId, count) {
+  logCameraDebug("native documentCapture ios session", { sessionId, count });
+  const sources = [];
+  try {
+    for (let index = 0; index < count; index += 1) {
+      const { base64 } = await Bridge.native.documentCaptureNext({ sessionId, index });
+      sources.push({ kind: "base64", uri: base64 });
+    }
+  } catch (error) {
+    logCameraError("native documentCaptureNext failed", error);
+  } finally {
+    await Bridge.native.documentCaptureEnd({ sessionId });
+    logCameraDebug("native documentCaptureEnd called", { sessionId });
+  }
+  return sources;
+}
+
+const DEFAULT_CAPTURE_ENGINE_TYPE = "input";
+function resolveCaptureEngineType(options) {
+  if (options.captureEngineType) {
+    return options.captureEngineType;
+  }
+  if (options.useNativeCamera) {
+    return "native";
+  }
+  return DEFAULT_CAPTURE_ENGINE_TYPE;
 }
 
 const maxImageSize = 300 * 1024;
@@ -4560,161 +4658,259 @@ function resize(image, options = { ext: "jpeg", filesize: maxImageSize }) {
   });
 }
 
-const genImageId$1 = () => `camera-${Date.now()}-${Math.random()}`;
-function useCamera({
-  onChange,
-  resize: resizeOption = {
-    processType: "mixed",
-    resizeRatio: 5,
-    width: 1920,
-    // 300kb
-    filesize: 300 * 1024,
-    ext: "jpeg"
-  },
-  cameraOnly,
-  onDelete,
-  show,
-  type = "multiple",
-  buttonText,
-  initData,
-  useNativeCamera = false,
-  responseFileType,
-  convertType = "canvas"
-} = {}) {
-  const convertedInitData = initData?.map((data, index) => ({ ...data, id: String(index + 1) }));
-  const [attachedPhotos, setAttachedPhotos] = useState(convertedInitData || []);
-  const findImage = (imageId) => {
-    return attachedPhotos.find((image) => image.id === imageId);
+const cx$b = classNames$1.bind(styles$d);
+const VIDEO_CAPTURE_MIME_TYPE = "image/jpeg";
+const VIDEO_CAPTURE_QUALITY = 0.92;
+function createVideoCaptureConstraints() {
+  return {
+    audio: false,
+    video: {
+      facingMode: { ideal: "environment" },
+      width: { ideal: 1920 },
+      height: { ideal: 1080 }
+    }
   };
-  const imageHandler = async (file) => {
-    const newPhoto = {
-      id: genImageId$1(),
-      src: URL.createObjectURL(resizeOption ? await resize(file, resizeOption) : file),
-      name: `\uC11C\uB958\uC0AC\uC9C4_${attachedPhotos.length + 1}`
-    };
-    if (type === "single") {
-      setAttachedPhotos([newPhoto]);
-    } else {
-      setAttachedPhotos([...attachedPhotos, newPhoto]);
+}
+async function createVideoCaptureFile(video) {
+  const width = video.videoWidth;
+  const height = video.videoHeight;
+  if (width <= 0 || height <= 0) {
+    throw new Error("Video frame is not ready");
+  }
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const context = canvas.getContext("2d");
+  if (!context) {
+    throw new Error("Canvas 2D context is not available");
+  }
+  context.drawImage(video, 0, 0, width, height);
+  const blob = await canvasToBlob(canvas);
+  return new File([blob], `camera-video-${Date.now()}.jpg`, {
+    type: blob.type || VIDEO_CAPTURE_MIME_TYPE,
+    lastModified: Date.now()
+  });
+}
+function VideoCaptureModal({ open, onCapture, onClose, maxShots = 1 }) {
+  const videoRef = useRef(null);
+  const streamRef = useRef(null);
+  const [errorMessage, setErrorMessage] = useState(null);
+  const [isReady, setIsReady] = useState(false);
+  const [isCapturing, setIsCapturing] = useState(false);
+  const [capturedShots, setCapturedShots] = useState([]);
+  const normalizedMaxShots = maxShots > 0 ? maxShots : 1;
+  const isMultiShot = normalizedMaxShots > 1;
+  const canCaptureMore = capturedShots.length < normalizedMaxShots;
+  const revokeAllPreviewUrls = (shots) => {
+    shots.forEach((shot) => URL.revokeObjectURL(shot.previewUrl));
+  };
+  useEffect(() => {
+    if (!open) {
+      setCapturedShots((prev) => {
+        revokeAllPreviewUrls(prev);
+        return [];
+      });
+      return void 0;
     }
-    if (onChange) {
-      onChange(file);
+    let canceled = false;
+    const startVideoStream = async () => {
+      try {
+        setErrorMessage(null);
+        setIsReady(false);
+        logCameraDebug("video engine stream request");
+        if (!navigator.mediaDevices?.getUserMedia) {
+          throw new Error("mediaDevices.getUserMedia is not supported");
+        }
+        const stream = await navigator.mediaDevices.getUserMedia(createVideoCaptureConstraints());
+        if (canceled) {
+          stopVideoStream(stream);
+          return;
+        }
+        streamRef.current = stream;
+        if (!videoRef.current) {
+          throw new Error("Video element is not mounted");
+        }
+        videoRef.current.srcObject = stream;
+        await videoRef.current.play();
+        if (canceled) {
+          stopVideoStream(stream);
+          return;
+        }
+        if (isVideoFrameReady(videoRef.current)) {
+          setIsReady(true);
+        }
+        logCameraDebug("video engine stream ready");
+      } catch (error) {
+        if (canceled) {
+          return;
+        }
+        logCameraError("video engine stream failed", error);
+        setErrorMessage("\uCE74\uBA54\uB77C\uB97C \uC0AC\uC6A9\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4.");
+      }
+    };
+    void startVideoStream();
+    return () => {
+      canceled = true;
+      stopVideoStream(streamRef.current);
+      streamRef.current = null;
+      logCameraDebug("video engine stream stopped");
+    };
+  }, [open]);
+  const handleLoadedMetadata = () => {
+    if (!videoRef.current) {
+      return;
     }
+    setIsReady(isVideoFrameReady(videoRef.current));
   };
-  const processImage = async (uri) => {
-    if (responseFileType === "scheme") {
-      const file = await imageUrlToFile(uri, convertType);
-      await imageHandler(file);
-    } else {
-      const file = await base64ToFile(uri, "image.jpg");
-      await imageHandler(file);
+  const handleCapture = async () => {
+    if (!videoRef.current || isCapturing || !canCaptureMore) {
+      return;
     }
-  };
-  const onClick = () => {
-    if (useNativeCamera) {
-      if (isAndroidDevice()) {
-        Bridge.native.documentCapture({ responseFileType: responseFileType || "scheme" }).then(async ({ uri }) => {
-          processImage(uri);
-        });
-      } else {
-        Bridge.native.documentCapture({ responseFileType: responseFileType || "base64" }).then(async ({ uri }) => {
-          processImage(uri);
-        });
-      }
-    } else {
-      const input = document.createElement("input");
-      input.type = "file";
-      input.accept = "image/*";
-      if (cameraOnly) {
-        input.capture = "camera";
+    try {
+      setIsCapturing(true);
+      const file = await createVideoCaptureFile(videoRef.current);
+      logCameraDebug("video engine capture completed", { size: file.size, type: file.type });
+      if (isMultiShot) {
+        setCapturedShots((prev) => [...prev, { file, previewUrl: URL.createObjectURL(file) }]);
+        return;
       }
-      input.addEventListener("change", async (event) => {
-        const target = event.target;
-        const { files } = target;
-        if (files && files.length > 0) {
-          const file = files[0];
-          if (file) {
-            await imageHandler(file);
-          }
-        }
-        document.body.removeChild(input);
-      });
-      input.style.display = "none";
-      document.body.appendChild(input);
-      input.click();
+      await onCapture([file]);
+      onClose();
+    } catch (error) {
+      logCameraError("video engine capture failed", error);
+      setErrorMessage("\uCD2C\uC601 \uC774\uBBF8\uC9C0\uB97C \uCC98\uB9AC\uD558\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4.");
+    } finally {
+      setIsCapturing(false);
     }
   };
-  const deleteImage = (imageId) => {
-    const imageIndex = attachedPhotos.findIndex((image) => image.id === imageId);
-    if (imageIndex > -1) {
-      const item = attachedPhotos.splice(imageIndex, 1);
-      if (item[0]) {
-        URL.revokeObjectURL(item[0].src);
-      }
-      setAttachedPhotos([...attachedPhotos]);
-      if (onDelete) {
-        onDelete(imageId);
-      }
+  const handleComplete = async () => {
+    if (capturedShots.length === 0) {
+      return;
+    }
+    try {
+      await onCapture(capturedShots.map((shot) => shot.file));
+      onClose();
+    } catch (error) {
+      logCameraError("video engine multi-shot complete failed", error);
+      setErrorMessage("\uCD2C\uC601 \uC774\uBBF8\uC9C0\uB97C \uCC98\uB9AC\uD558\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4.");
     }
   };
-  const deleteAllImages = () => {
-    attachedPhotos.forEach((image) => {
-      URL.revokeObjectURL(image.src);
-      if (onDelete) {
-        onDelete(image.id);
+  const handleRemoveCapturedShot = (targetIndex) => {
+    setCapturedShots((prev) => {
+      const target = prev[targetIndex];
+      if (target) {
+        URL.revokeObjectURL(target.previewUrl);
       }
+      return prev.filter((_, index) => index !== targetIndex);
     });
-    setAttachedPhotos([]);
   };
-  const CameraComponent = () => /* @__PURE__ */ jsx(
-    Attachment,
-    {
-      show: !!show,
-      onAddPhoto: onClick,
-      onRemovePhoto: deleteImage,
-      photos: attachedPhotos,
-      type,
-      buttonText
-    }
-  );
-  useEffect(() => {
-    return () => {
-      attachedPhotos.forEach((image) => {
-        URL.revokeObjectURL(image.src);
-      });
-    };
-  }, []);
-  return {
-    onClick,
-    getImage: findImage,
-    deleteImage,
-    deleteAllImages,
-    attachedPhotos,
-    Attachment: CameraComponent,
-    addImage: (data) => {
-      setAttachedPhotos([
-        ...attachedPhotos,
-        ...data.map((item) => {
-          let blobUrl = "";
-          if (item.data instanceof Blob) {
-            blobUrl = URL.createObjectURL(item.data);
-          } else if (typeof item.data === "string") {
-            blobUrl = URL.createObjectURL(base64ToBlob(item.data));
+  if (!open) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className: cx$b("video-capture-overlay"), role: "dialog", "aria-modal": "true", "aria-label": "\uCE74\uBA54\uB77C \uCD2C\uC601", children: /* @__PURE__ */ jsxs("div", { className: cx$b("video-capture-dialog"), children: [
+    /* @__PURE__ */ jsx(
+      "video",
+      {
+        ref: videoRef,
+        className: cx$b("video-capture-view"),
+        autoPlay: true,
+        muted: true,
+        playsInline: true,
+        onLoadedMetadata: handleLoadedMetadata
+      }
+    ),
+    errorMessage ? /* @__PURE__ */ jsx("p", { className: cx$b("video-capture-error"), role: "alert", children: errorMessage }) : null,
+    isMultiShot ? /* @__PURE__ */ jsxs("div", { className: cx$b("video-capture-thumbnails"), "aria-live": "polite", children: [
+      /* @__PURE__ */ jsxs("p", { className: cx$b("video-capture-counter"), children: [
+        capturedShots.length,
+        "/",
+        normalizedMaxShots
+      ] }),
+      capturedShots.length > 0 ? /* @__PURE__ */ jsx("ul", { className: cx$b("video-capture-thumbnail-list"), children: capturedShots.map((shot, index) => /* @__PURE__ */ jsxs("li", { className: cx$b("video-capture-thumbnail-item"), children: [
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: shot.previewUrl,
+            alt: `\uCD2C\uC601 ${index + 1}\uBC88 \uC0AC\uC9C4`,
+            className: cx$b("video-capture-thumbnail-image")
           }
-          const newPhoto = {
-            id: genImageId$1(),
-            src: blobUrl,
-            name: item.name || `\uC11C\uB958\uC0AC\uC9C4_${attachedPhotos.length + 1}`
-          };
-          return newPhoto;
-        })
-      ]);
-    }
-  };
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: cx$b("video-capture-thumbnail-remove"),
+            onClick: () => handleRemoveCapturedShot(index),
+            "aria-label": `\uCD2C\uC601 ${index + 1}\uBC88 \uC0AC\uC9C4 \uC0AD\uC81C`,
+            children: "\xD7"
+          }
+        )
+      ] }, shot.previewUrl)) }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsxs("div", { className: cx$b("video-capture-actions"), children: [
+      /* @__PURE__ */ jsx("button", { className: cx$b("video-capture-button", "video-capture-secondary"), type: "button", onClick: onClose, children: "\uB2EB\uAE30" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: cx$b("video-capture-button", "video-capture-primary"),
+          type: "button",
+          disabled: !isReady || isCapturing || !canCaptureMore,
+          onClick: handleCapture,
+          children: "\uCD2C\uC601"
+        }
+      ),
+      isMultiShot ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: cx$b("video-capture-button", "video-capture-primary"),
+          type: "button",
+          disabled: capturedShots.length === 0,
+          onClick: handleComplete,
+          children: "\uC644\uB8CC"
+        }
+      ) : null
+    ] })
+  ] }) });
+}
+function stopVideoStream(stream) {
+  stream?.getTracks().forEach((track) => {
+    track.stop();
+  });
+}
+function isVideoFrameReady(video) {
+  return video.videoWidth > 0 && video.videoHeight > 0;
+}
+function canvasToBlob(canvas) {
+  if (canvas.toBlob) {
+    return new Promise((resolve, reject) => {
+      canvas.toBlob(
+        (blob) => {
+          if (!blob) {
+            reject(new Error("Canvas blob is empty"));
+            return;
+          }
+          resolve(blob);
+        },
+        VIDEO_CAPTURE_MIME_TYPE,
+        VIDEO_CAPTURE_QUALITY
+      );
+    });
+  }
+  return Promise.resolve(dataUrlToBlob(canvas.toDataURL(VIDEO_CAPTURE_MIME_TYPE, VIDEO_CAPTURE_QUALITY)));
+}
+function dataUrlToBlob(dataUrl) {
+  const [header = "", body = ""] = dataUrl.split(",");
+  const mimeType = header.match(/data:(.*);base64/)?.[1] || VIDEO_CAPTURE_MIME_TYPE;
+  const binary = window.atob(body);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return new Blob([bytes], { type: mimeType });
 }
 
 const genImageId = () => `camera-${Date.now()}-${Math.random()}`;
-function useCameraV2({
+function useCameraV3({
   onChange,
   resize: resizeOption = {
     processType: "mixed",
@@ -4730,83 +4926,152 @@ function useCameraV2({
   type = "multiple",
   buttonText,
   initData,
+  captureEngineType,
+  resizeTiming = "onCapture",
+  pageLimit,
   useNativeCamera = false,
-  responseFileType,
-  convertType = "canvas"
-}) {
+  convertType = "canvas",
+  maxPhotos,
+  overMaxPhotosBehavior,
+  maxPhotosErrorHandler
+} = {}) {
   const convertedInitData = initData?.map((data, index) => ({ ...data, id: String(index + 1) }));
   const [attachedPhotos, setAttachedPhotos] = useState(convertedInitData || []);
-  const findImage = async (imageId) => {
-    const photo = attachedPhotos.find((image) => image.id === imageId);
-    if (!photo) {
-      throw new Error("[use-camera-v2] : Image not found");
+  const attachedPhotosRef = useRef(convertedInitData || []);
+  const [isVideoCaptureOpen, setIsVideoCaptureOpen] = useState(false);
+  const resolvedCaptureEngineType = resolveCaptureEngineType({ captureEngineType, useNativeCamera });
+  const normalizedPageLimit = pageLimit && pageLimit > 0 ? pageLimit : 1;
+  const resolvedMaxPhotos = maxPhotos ?? (type === "single" ? 1 : Math.max(4, normalizedPageLimit));
+  const resolvedOverflowBehavior = overMaxPhotosBehavior ?? (maxPhotosErrorHandler ? "error" : "truncate");
+  const applyMaxPhotosPolicy = (items, overflow) => {
+    if (items.length === 0) {
+      return items;
+    }
+    const current = attachedPhotosRef.current.length;
+    const remaining = Math.max(0, resolvedMaxPhotos - current);
+    if (items.length <= remaining) {
+      return items;
+    }
+    if (resolvedOverflowBehavior === "error" && maxPhotosErrorHandler) {
+      maxPhotosErrorHandler(
+        overflow.buildInfo({ attempted: items.length, current, max: resolvedMaxPhotos, data: items })
+      );
+      return null;
     }
-    const file = await imageUrlToFile(photo?.src, convertType);
-    const convertedPhoto = {
-      ...photo,
-      src: URL.createObjectURL(resizeOption ? await resize(file, resizeOption) : file)
-    };
-    return convertedPhoto;
+    if (remaining === 0) {
+      return null;
+    }
+    return items.slice(0, remaining);
   };
-  const imageHandler = async (uri) => {
-    const newPhoto = {
-      id: genImageId(),
-      src: uri,
-      name: `\uC11C\uB958\uC0AC\uC9C4_${attachedPhotos.length + 1}`
-    };
-    if (type === "single") {
-      setAttachedPhotos([newPhoto]);
-    } else {
-      setAttachedPhotos([...attachedPhotos, newPhoto]);
+  const buildPhoto = async (source, name) => {
+    if (resizeTiming === "onCapture") {
+      const original = await convertSourceToFile(source, convertType);
+      const processed = resizeOption ? await resize(original, resizeOption) : original;
+      return { photo: { id: genImageId(), src: URL.createObjectURL(processed), name }, file: original };
+    }
+    const file = onChange ? await convertSourceToFile(source, convertType) : void 0;
+    return { photo: { id: genImageId(), src: source.uri, name }, file };
+  };
+  const storeCapturedSources = async (sources, source = "native", overflowData) => {
+    if (sources.length === 0) {
+      return;
+    }
+    const accepted = applyMaxPhotosPolicy(sources, {
+      source,
+      buildInfo: ({ attempted, current, max }) => {
+        const data = overflowData ?? sources;
+        if (source === "native") {
+          return { source: "native", attempted, current, max, data };
+        }
+        if (source === "addImage") {
+          return { source: "addImage", attempted, current, max, data };
+        }
+        return { source, attempted, current, max, data };
+      }
+    });
+    if (!accepted || accepted.length === 0) {
+      return;
     }
+    const baseCount = attachedPhotosRef.current.length;
+    const built = await Promise.all(
+      accepted.map((item, index) => buildPhoto(item, `\uC11C\uB958\uC0AC\uC9C4_${baseCount + index + 1}`))
+    );
+    const builtPhotos = built.map((item) => item.photo);
+    setAttachedPhotos((prev) => type === "single" ? builtPhotos.slice(-1) : [...prev, ...builtPhotos]);
     if (onChange) {
-      const file = await imageUrlToFile(uri, convertType);
-      onChange(file);
+      built.forEach((item) => {
+        if (item.file) {
+          onChange(item.file);
+        }
+      });
     }
   };
-  const onClick = () => {
-    if (useNativeCamera) {
-      Bridge.native.documentCapture({ responseFileType }).then(async ({ uri }) => {
-        imageHandler(uri);
-      });
-    } else {
-      const input = document.createElement("input");
-      input.type = "file";
-      input.accept = "image/*";
-      if (cameraOnly) {
-        input.capture = "camera";
+  const openFileInput = () => {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = "image/*";
+    input.multiple = normalizedPageLimit > 1;
+    if (cameraOnly) {
+      input.capture = "camera";
+    }
+    input.addEventListener("change", async (event) => {
+      const target = event.target;
+      const fileList = target.files ? Array.from(target.files) : [];
+      if (fileList.length > 0) {
+        const sources = fileList.map((file) => ({
+          kind: "file",
+          file,
+          uri: URL.createObjectURL(file)
+        }));
+        await storeCapturedSources(sources, "input", fileList);
       }
-      input.addEventListener("change", async (event) => {
-        const target = event.target;
-        const { files } = target;
-        if (files && files.length > 0) {
-          const file = files[0];
-          if (file) {
-            await imageHandler(URL.createObjectURL(file));
-          }
-        }
-        document.body.removeChild(input);
-      });
-      input.style.display = "none";
-      document.body.appendChild(input);
-      input.click();
+      document.body.removeChild(input);
+    });
+    input.style.display = "none";
+    document.body.appendChild(input);
+    input.click();
+  };
+  const onClick = () => {
+    logCameraDebug("useCameraV3 capture requested", {
+      captureEngineType: resolvedCaptureEngineType,
+      resizeTiming
+    });
+    if (resolvedCaptureEngineType === "native") {
+      captureNativeDocuments({ pageLimit }).then((sources) => storeCapturedSources(sources, "native"));
+      return;
+    }
+    if (resolvedCaptureEngineType === "video") {
+      setIsVideoCaptureOpen(true);
+      return;
     }
+    openFileInput();
+  };
+  const getImage = async (imageId) => {
+    const photo = attachedPhotosRef.current.find((image) => image.id === imageId);
+    if (!photo) {
+      throw new Error("[use-camera-v3] : Image not found");
+    }
+    if (resizeTiming === "onCapture") {
+      return photo;
+    }
+    const file = await convertSourceToFile({ kind: "scheme", uri: photo.src }, convertType);
+    return { ...photo, src: URL.createObjectURL(resizeOption ? await resize(file, resizeOption) : file) };
   };
   const deleteImage = (imageId) => {
-    const imageIndex = attachedPhotos.findIndex((image) => image.id === imageId);
-    if (imageIndex > -1) {
-      const item = attachedPhotos.splice(imageIndex, 1);
-      if (item[0]) {
-        URL.revokeObjectURL(item[0].src);
+    setAttachedPhotos((prev) => {
+      const target = prev.find((image) => image.id === imageId);
+      if (!target) {
+        return prev;
       }
-      setAttachedPhotos([...attachedPhotos]);
+      URL.revokeObjectURL(target.src);
       if (onDelete) {
         onDelete(imageId);
       }
-    }
+      return prev.filter((image) => image.id !== imageId);
+    });
   };
   const deleteAllImages = () => {
-    attachedPhotos.forEach((image) => {
+    attachedPhotosRef.current.forEach((image) => {
       URL.revokeObjectURL(image.src);
       if (onDelete) {
         onDelete(image.id);
@@ -4814,51 +5079,94 @@ function useCameraV2({
     });
     setAttachedPhotos([]);
   };
-  const CameraComponent = () => /* @__PURE__ */ jsx(
-    Attachment,
-    {
-      show: !!show,
-      onAddPhoto: onClick,
-      onRemovePhoto: deleteImage,
-      photos: attachedPhotos,
-      type,
-      buttonText
+  const addImage = (data) => {
+    const accepted = applyMaxPhotosPolicy(data, {
+      source: "addImage",
+      buildInfo: ({ attempted, current, max }) => ({
+        source: "addImage",
+        attempted,
+        current,
+        max,
+        data
+      })
+    });
+    if (!accepted || accepted.length === 0) {
+      return;
     }
-  );
+    setAttachedPhotos((prev) => [
+      ...prev,
+      ...accepted.map((item, index) => {
+        let blobUrl = "";
+        if (item.data instanceof Blob) {
+          blobUrl = URL.createObjectURL(item.data);
+        } else if (typeof item.data === "string") {
+          blobUrl = URL.createObjectURL(base64ToBlob(item.data));
+        }
+        return { id: genImageId(), src: blobUrl, name: item.name || `\uC11C\uB958\uC0AC\uC9C4_${prev.length + index + 1}` };
+      })
+    ]);
+  };
+  const CameraComponent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Attachment,
+      {
+        show: !!show,
+        onAddPhoto: onClick,
+        onRemovePhoto: deleteImage,
+        photos: attachedPhotos,
+        type,
+        buttonText,
+        maxPhotos: resolvedMaxPhotos
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      VideoCaptureModal,
+      {
+        open: resolvedCaptureEngineType === "video" && isVideoCaptureOpen,
+        maxShots: normalizedPageLimit,
+        onCapture: (files) => {
+          const sources = files.map((file) => ({
+            kind: "file",
+            file,
+            uri: URL.createObjectURL(file)
+          }));
+          return storeCapturedSources(sources, "video", files);
+        },
+        onClose: () => setIsVideoCaptureOpen(false)
+      }
+    )
+  ] });
+  useEffect(() => {
+    attachedPhotosRef.current = attachedPhotos;
+  }, [attachedPhotos]);
   useEffect(() => {
     return () => {
-      attachedPhotos.forEach((image) => {
+      attachedPhotosRef.current.forEach((image) => {
         URL.revokeObjectURL(image.src);
       });
     };
   }, []);
   return {
     onClick,
-    getImage: findImage,
+    getImage,
     deleteImage,
     deleteAllImages,
     attachedPhotos,
     Attachment: CameraComponent,
-    addImage: (data) => {
-      setAttachedPhotos([
-        ...attachedPhotos,
-        ...data.map((item) => {
-          let blobUrl = "";
-          if (item.data instanceof Blob) {
-            blobUrl = URL.createObjectURL(item.data);
-          } else if (typeof item.data === "string") {
-            blobUrl = URL.createObjectURL(base64ToBlob(item.data));
-          }
-          const newPhoto = {
-            id: genImageId(),
-            src: blobUrl,
-            name: item.name || `\uC11C\uB958\uC0AC\uC9C4_${attachedPhotos.length + 1}`
-          };
-          return newPhoto;
-        })
-      ]);
-    }
+    addImage
+  };
+}
+
+function useCamera(options = {}) {
+  const camera = useCameraV3({ pageLimit: 1, ...options, resizeTiming: "onCapture" });
+  const getImage = (imageId) => {
+    return camera.attachedPhotos.find((image) => image.id === imageId);
   };
+  return { ...camera, getImage };
+}
+
+function useCameraV2(options) {
+  return useCameraV3({ pageLimit: 1, ...options, resizeTiming: "onRetrieve" });
 }
 
 const HISTORY_SIZE = 100;
@@ -7394,4 +7702,4 @@ function useTerms(initialValue) {
   };
 }
 
-export { AUTH_TEMPLATE_CODES, Attachment, BANK_STOCK_ICON_LIST, BANK_STOCK_SEARCH_MODAL_TABS, BankStockSearchModal, CustomerSearch, CustomerSearchModal, DeaCustomerSearchModal, DudDownload, DudUpload, EmployeeSearchModal, GtmIframe, HookFormCheckbox, HookFormCheckboxButton, HookFormDatePickerRenew, HookFormDateRangePickerRenew, HookFormSearchJobField, HookFormSegmentGroup, HookFormSelect, HookFormTextField, JobVehicleSearchModal, OrganizationSearchModal, RATING_DATA, RIV_SEARCH_PARAM_MAP, RemoteIdentityVerification, RivModalIframe, StepIndicator, TermsCancerCollectQR, TermsCancerMarketing, TermsCancerProvideQR, TermsCancerSystem, TermsCheckboxButton, TermsDesign, TermsExecution, TermsLoan, TermsMarketing, TermsMarketingCollectQR, TermsMarketingProviderQR, TermsMobileCard, TermsRadio, TermsRatingBar, TermsSignature, TermsTransfer, VERIFICATION_CODES, highlightOnSearchKeyword, resize, testSignatureBase64Data, useAddressComponent, useBankStockSearch, useCamera, useCameraV2, useCanvasPaint, useCustomerSearch, useDownloader, useJobSearchModal, useJobVehicleSearch, useJobVehicleSearchModal, useNationalityComponent, useNxlOneModal, useRemoteIdentityVerification$1 as useRemoteIdentityVerification, useRemoteIdentityVerificationIframe, useSearchAddress, useSearchNationality, useSearchVisa, useTerms, useVisaComponent };
+export { AUTH_TEMPLATE_CODES, Attachment, BANK_STOCK_ICON_LIST, BANK_STOCK_SEARCH_MODAL_TABS, BankStockSearchModal, CustomerSearch, CustomerSearchModal, DeaCustomerSearchModal, DudDownload, DudUpload, EmployeeSearchModal, GtmIframe, HookFormCheckbox, HookFormCheckboxButton, HookFormDatePickerRenew, HookFormDateRangePickerRenew, HookFormSearchJobField, HookFormSegmentGroup, HookFormSelect, HookFormTextField, JobVehicleSearchModal, OrganizationSearchModal, RATING_DATA, RIV_SEARCH_PARAM_MAP, RemoteIdentityVerification, RivModalIframe, StepIndicator, TermsCancerCollectQR, TermsCancerMarketing, TermsCancerProvideQR, TermsCancerSystem, TermsCheckboxButton, TermsDesign, TermsExecution, TermsLoan, TermsMarketing, TermsMarketingCollectQR, TermsMarketingProviderQR, TermsMobileCard, TermsRadio, TermsRatingBar, TermsSignature, TermsTransfer, VERIFICATION_CODES, highlightOnSearchKeyword, resize, testSignatureBase64Data, useAddressComponent, useBankStockSearch, useCamera, useCameraV2, useCameraV3, useCanvasPaint, useCustomerSearch, useDownloader, useJobSearchModal, useJobVehicleSearch, useJobVehicleSearchModal, useNationalityComponent, useNxlOneModal, useRemoteIdentityVerification$1 as useRemoteIdentityVerification, useRemoteIdentityVerificationIframe, useSearchAddress, useSearchNationality, useSearchVisa, useTerms, useVisaComponent };