sales-frontend-components 0.0.67 → 0.0.68

package/dist/index.cjs.js

@@ -4,16 +4,16 @@ var jsxRuntime = require('react/jsx-runtime');
 var reactHookForm = require('react-hook-form');
 var salesFrontendDesignSystem = require('sales-frontend-design-system');
 var React = require('react');
-var styles = require('./step-indicator/step-indicator.module.scss');
-var styles$1 = require('./camera/camera.module.scss');
-var styles$2 = require('./debug-tool/debug-tool.module.scss');
+var method = require('sales-frontend-api/method');
+var styles = require('./modal/pre-standard/job-search-modal/job-search-modal.module.scss');
+var styles$1 = require('./step-indicator/step-indicator.module.scss');
+var styles$2 = require('./camera/camera.module.scss');
+var styles$3 = require('./debug-tool/debug-tool.module.scss');
 var salesFrontendUtils = require('sales-frontend-utils');
 var salesFrontendApi = require('sales-frontend-api');
-var styles$3 = require('./debug-tool/features/network-log/network-log.module.scss');
-var method = require('sales-frontend-api/method');
-var styles$4 = require('./modal/standard/address-search/select-address.module.scss');
-var styles$5 = require('./modal/pre-standard/job-vehicle-search-modal/job-vehicle-search-modal.module.scss');
-var styles$6 = require('./modal/pre-standard/job-search-modal/job-search-modal.module.scss');
+var styles$4 = require('./debug-tool/features/network-log/network-log.module.scss');
+var styles$5 = require('./modal/standard/address-search/select-address.module.scss');
+var styles$6 = require('./modal/pre-standard/job-vehicle-search-modal/job-vehicle-search-modal.module.scss');
 var styles$7 = require('./modal/pre-standard/vehicle-search-modal/vehicle-search-modal.module.scss');
 
 const FormCheckboxButton = ({
@@ -24,7 +24,21 @@ const FormCheckboxButton = ({
   ...props
 }) => {
   const { field, fieldState } = reactHookForm.useController({ name, control, disabled });
-  return /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.CheckboxButton, { ...props, ...field, id: field.name, checked: field.value, error: fieldState.invalid, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    salesFrontendDesignSystem.CheckboxButton,
+    {
+      ...props,
+      ...field,
+      id: field.name,
+      checked: field.value ?? false,
+      error: fieldState.invalid,
+      onChange: (checked) => {
+        field.onChange(checked);
+        props.onChange?.(checked);
+      },
+      children
+    }
+  );
 };
 
 const FormCheckbox = ({
@@ -102,73 +116,10 @@ const FormDateRangePicker = ({
   );
 };
 
-const FormSegmentGroup = ({
-  name,
-  control,
-  disabled,
-  ...props
-}) => {
-  const { field, fieldState } = reactHookForm.useController({ name, control, disabled });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    salesFrontendDesignSystem.SegmentGroup,
-    {
-      ...props,
-      tabIndex: 0,
-      id: field.name,
-      ref: field.ref,
-      defaultValue: field.value,
-      disabled: field.disabled,
-      error: fieldState.invalid,
-      onBlur: field.onBlur,
-      onValueChange: (selected) => {
-        field.onChange(selected);
-        props.onValueChange?.(selected);
-      }
-    }
-  );
-};
-
-const FormTextField = ({
-  name,
-  control,
-  size = "medium",
-  disabled,
-  error,
-  onBlur,
-  onChange,
-  rootProps,
-  ...props
-}) => {
-  const { field, fieldState } = reactHookForm.useController({ name, control, disabled });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    salesFrontendDesignSystem.FormField.TextField,
-    {
-      ...props,
-      id: field.name,
-      size,
-      autoComplete: "off",
-      name: field.name,
-      value: field.value ?? "",
-      disabled: field.disabled,
-      error: fieldState.invalid || error,
-      onChange: (e) => {
-        field.onChange(e);
-        onChange?.(e);
-      },
-      onBlur: (e) => {
-        field.onBlur();
-        onBlur?.(e);
-      },
-      rootProps: {
-        ...rootProps,
-        onClear: () => {
-          field.onChange("");
-          rootProps?.onClear?.();
-        }
-      }
-    }
-  );
-};
+const JOB_SEARCH_TABS = [
+  { value: "jobName", label: "\uC9C1\uC885\uBA85 \uAC80\uC0C9" },
+  { value: "jobCode", label: "\uBD84\uB958\uB85C \uAC80\uC0C9" }
+];
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -261,2051 +212,2240 @@ function requireBind () {
 var bindExports = requireBind();
 var classNames = /*@__PURE__*/getDefaultExportFromCjs(bindExports);
 
-const cx$9 = classNames.bind(styles);
-const StepIndicator = ({
-  items,
-  onClickItem,
-  currentIndex = 0,
-  defaultValue = "",
-  dotCount = 3
-}) => {
-  const [current, setCurrent] = React.useState(currentIndex);
-  React.useEffect(() => {
-    items.map((item, idx) => {
-      if (item.value === defaultValue) {
-        setCurrent(idx);
+const highlightOnSearchKeyword = (originalText, targetString) => {
+  if (originalText?.includes(targetString)) {
+    const replacedText = [];
+    const splitText = originalText.split(targetString);
+    for (let i = 0; i < splitText.length; i++) {
+      replacedText.push(splitText[i]);
+      if (i !== splitText.length - 1) {
+        replacedText.push(/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: targetString }));
       }
-    });
-  }, [items, defaultValue]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$9("stepper-layout"), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$9("stepper"), children: items.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: cx$9("circle", (defaultValue === item.value || current === idx) && "active"),
-          onClick: () => onClickItem?.(item),
-          children: item.isCompleted || idx < current ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$9("completed") }) : ++idx
-        }
-      ),
-      idx < items.length && Array.from({ length: dotCount }).map((_, dotIdx) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$9("dot") }, `dot-${idx}-${dotIdx}`))
-    ] }, `num-${idx}`)) }),
-    /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cx$9("step-labels"), children: items.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: cx$9((defaultValue === item.value || current === idx) && "active"), children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.label ?? item.value }) }, `label-${idx}`)) })
-  ] });
+    }
+    return replacedText;
+  }
+  return originalText;
 };
 
-const cx$8 = classNames.bind(styles$1);
-function Attachment({
-  photos,
-  onAddPhoto,
-  onRemovePhoto,
-  show,
-  type = "multiple",
-  buttonText
-}) {
-  const handleAddPhoto = () => {
-    onAddPhoto();
-  };
-  const handleRemovePhoto = (id) => {
-    onRemovePhoto(id);
-  };
-  const renderPhotoSingle = () => {
-    if (photos.length === 0) {
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$8("single-photo-item", "add-photo-item"), children: /* @__PURE__ */ jsxRuntime.jsxs("button", { className: cx$8("add-photo-button-single"), onClick: handleAddPhoto, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Icon, { name: "illust/camera" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children: buttonText || "\uC0AC\uC9C4 \uCCA8\uBD80\uD558\uAE30" })
-      ] }) });
-    }
-    return photos.map((photo) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$8("single-photo-item"), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$8("photo-placeholder"), children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: photo.src, alt: photo.name, className: cx$8("photo-image") }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("button", { className: cx$8("remove-button"), onClick: () => handleRemovePhoto(photo.id), "aria-label": "\uC0AC\uC9C4 \uC0AD\uC81C", children: "\xD7" })
-    ] }, photo.id));
-  };
-  const renderPhotoGrid = () => {
-    const maxPhotos = type === "single" ? 1 : 4;
-    const gridItems = [];
-    if (photos.length < maxPhotos) {
-      gridItems.push(
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$8("photo-item", "add-photo-item"), children: /* @__PURE__ */ jsxRuntime.jsxs("button", { className: cx$8("add-photo-button"), onClick: handleAddPhoto, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Icon, { name: "illust/camera" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: buttonText || "\uCCA8\uBD80\uD558\uAE30" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx$8("photo-count"), children: [
+const cx$9 = classNames.bind(styles);
+function JobSearchCategory({ filteredJobs, onJobSelect, searchTerm }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$9("category-section"), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cx$9("result-title"), children: [
+      "\uCD1D ",
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: filteredJobs.length }),
+      "\uAC74\uC758 \uAC80\uC0C9\uACB0\uACFC"
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.Root, { children: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Radio.Root, { name: "job-selection", size: "small", className: cx$9("job-radio-root"), onToggle: () => {
+    }, children: filteredJobs.map((job, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+      salesFrontendDesignSystem.Accordion.Item,
+      {
+        id: `item-${job.occupationIndustryCode}-${index}-accordion`,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.HeaderDiv, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Radio.Item, { size: "small", value: job.occupationIndustryCode, onChange: () => onJobSelect(job), children: [
+            highlightOnSearchKeyword(job.occupationIndustryName, searchTerm),
             "(",
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$8("photo-count-number"), children: photos.length }),
-            "/",
-            maxPhotos,
+            job.occupationIndustryCode,
             ")"
-          ] })
-        ] }) }, "add-photo")
-      );
-    }
-    photos.forEach((photo) => {
-      gridItems.push(
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$8("photo-item"), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$8("photo-placeholder"), children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: photo.src, alt: photo.name, className: cx$8("photo-image") }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { className: cx$8("remove-button"), onClick: () => handleRemovePhoto(photo.id), "aria-label": "\uC0AC\uC9C4 \uC0AD\uC81C", children: "\xD7" })
-        ] }, photo.id)
-      );
-    });
-    return gridItems;
-  };
-  const isVisible = show || !show && photos.length > 0;
-  if (!isVisible) {
-    return null;
-  }
-  if (type === "single") {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$8("photo-single"), children: renderPhotoSingle() });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$8("photo-grid", { linear: type === "linear" }), children: renderPhotoGrid() });
+          ] }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.Content, { variant: "text", children: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Table, { variant: "horizontal", children: /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("th", { children: "\uD5E4\uB354 1" }),
+              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-24", children: "1\uD589 1\uBC88\uC9F8" }),
+              /* @__PURE__ */ jsxRuntime.jsx("th", { children: "\uD5E4\uB354 1-2" }),
+              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-24 ", children: "1\uD589 2\uBC88\uC9F8" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("th", { children: "\uD5E4\uB354 2" }),
+              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "pl-24 pr-16", colSpan: 3, children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "d-flex-center-center", children: [
+                "2\uD589 1\uBC88\uC9F8 ",
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 pipe-left", children: "\uC11C\uBE0C\uD14D\uC2A4\uD2B8" }),
+                /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { variant: "neutral", size: "xsmall", appearance: "outline", children: "\uBC84\uD2BC\uBA85" })
+              ] }) })
+            ] })
+          ] }) }) })
+        ]
+      },
+      `item-${job.occupationIndustryCode}-${index}`
+    )) }) }),
+    filteredJobs.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      "`",
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: searchTerm }),
+      "`\uC5D0 \uB300\uD55C \uAC80\uC0C9\uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
+    ] })
+  ] }) });
 }
 
-const maxImageSize = 3 * 1024 * 1024;
-function resize(image, options = { ext: "jpeg", filesize: maxImageSize }) {
-  return new Promise((resolve, reject) => {
-    const canvas = document.createElement("canvas");
-    const ctx = canvas.getContext("2d");
-    if (!ctx) {
-      reject(new Error("Canvas context\uB97C \uC0DD\uC131\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4."));
-      return;
-    }
-    const img = new Image();
-    img.crossOrigin = "anonymous";
-    img.onload = () => {
-      let { width, height } = img;
-      const { filesize, ext } = options;
-      if (filesize) {
-        const originalSize = width * height * 4;
-        if (originalSize > filesize) {
-          const ratio = Math.sqrt(filesize / originalSize);
-          width = Math.floor(width * ratio);
-          height = Math.floor(height * ratio);
-        }
-      } else {
-        const { width: targetWidth, height: targetHeight } = options;
-        if (targetWidth && targetHeight) {
-          width = targetWidth;
-          height = targetHeight;
-        } else if (targetWidth) {
-          const ratio = targetWidth / width;
-          width = targetWidth;
-          height = Math.floor(height * ratio);
-        } else if (targetHeight) {
-          const ratio = targetHeight / height;
-          height = targetHeight;
-          width = Math.floor(width * ratio);
-        }
-      }
-      canvas.width = width;
-      canvas.height = height;
-      ctx.drawImage(img, 0, 0, width, height);
-      if (typeof image === "string") {
-        const mimeType = ext === "png" ? "image/png" : "image/jpeg";
-        const quality = ext === "png" ? 1 : 0.8;
-        const base64 = canvas.toDataURL(mimeType, quality);
-        resolve(base64);
-      } else {
-        canvas.toBlob(
-          (blob) => {
-            if (!blob) {
-              reject(new Error("Blob\uC744 \uC0DD\uC131\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4."));
-              return;
-            }
-            const mimeType = ext === "png" ? "image/png" : "image/jpeg";
-            const fileName = image.name ? `${image.name.replace(/\.[^/.]+$/, "")}.${ext}` : `resized.${ext}`;
-            const resizedFile = new File([blob], fileName, { type: mimeType });
-            resolve(resizedFile);
-          },
-          ext === "png" ? "image/png" : "image/jpeg",
-          ext === "png" ? 1 : 0.8
-        );
-      }
-    };
-    img.onerror = () => {
-      reject(new Error("\uC774\uBBF8\uC9C0\uB97C \uB85C\uB4DC\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4."));
-    };
-    if (typeof image === "string") {
-      img.src = image;
-    } else {
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        if (e.target?.result) {
-          img.src = e.target.result;
-        } else {
-          reject(new Error("\uD30C\uC77C\uC744 \uC77D\uC744 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4."));
-        }
-      };
-      reader.onerror = () => {
-        reject(new Error("\uD30C\uC77C\uC744 \uC77D\uC744 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4."));
-      };
-      reader.readAsDataURL(image);
-    }
-  });
+const cx$8 = classNames.bind(styles);
+function JobSearchFavorite({ filteredJobs, onJobSelect }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$8("popular-jobs"), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { children: "\uB9CE\uC774 \uCC3E\uB294 \uC9C1\uC885" }),
+    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.Root, { children: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Radio.Root, { name: "job-selection", size: "small", className: cx$8("job-radio-root"), children: filteredJobs.map((job, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+      salesFrontendDesignSystem.Accordion.Item,
+      {
+        id: `item-${job.occupationIndustryCode}-${index}`,
+        className: cx$8("accordion-item"),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.HeaderDiv, { className: cx$8("accordion-header-item"), children: /* @__PURE__ */ jsxRuntime.jsxs(
+            salesFrontendDesignSystem.Radio.Item,
+            {
+              size: "small",
+              value: job.occupationIndustryCode,
+              onChange: () => onJobSelect(job),
+              className: cx$8("radio-item"),
+              children: [
+                job.occupationIndustryName,
+                "(",
+                job.occupationIndustryCode,
+                ")"
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.Content, { variant: "text", children: "\uD56D\uBAA9 1 \uB0B4\uC6A9" })
+        ]
+      },
+      `item-${job.occupationIndustryCode}-${index}`
+    )) }) })
+  ] }) });
 }
 
-const genImageId = () => `camera-${Date.now()}-${Math.random()}`;
-function useCamera({
-  onChange,
-  resize: resizeOption,
-  cameraOnly,
-  onDelete,
-  show,
-  type = "multiple",
-  buttonText
-} = {}) {
-  const [attachedPhotos, setAttachedPhotos] = React.useState([]);
-  const findImage = (imageId) => {
-    return attachedPhotos.find((image) => image.id === imageId);
-  };
-  const onClick = () => {
-    const input = document.createElement("input");
-    input.type = "file";
-    input.accept = "image/*";
-    if (cameraOnly) {
-      input.capture = "camera";
-    }
-    input.addEventListener("change", async (event) => {
-      const target = event.target;
-      const { files } = target;
-      if (files && files.length > 0) {
-        const file = files[0];
-        if (file) {
-          const resizedFile = await resize(file, resizeOption);
-          const newPhoto = {
-            id: genImageId(),
-            src: URL.createObjectURL(resizedFile),
-            name: `\uC11C\uB958\uC0AC\uC9C4_${attachedPhotos.length + 1}`
-          };
-          if (type === "single") {
-            setAttachedPhotos([newPhoto]);
-          } else {
-            setAttachedPhotos([...attachedPhotos, newPhoto]);
-          }
-          onChange && onChange(file);
-        }
-      }
-      document.body.removeChild(input);
-    });
-    input.style.display = "none";
-    document.body.appendChild(input);
-    input.click();
-  };
-  const deleteImage = (imageId) => {
-    const imageIndex = attachedPhotos.findIndex((image) => image.id === imageId);
-    if (imageIndex > -1) {
-      const item = attachedPhotos.splice(imageIndex, 1);
-      item[0] && URL.revokeObjectURL(item[0].src);
-      setAttachedPhotos([...attachedPhotos]);
-      onDelete && onDelete(imageId);
-    }
-  };
-  const CameraComponent = () => /* @__PURE__ */ jsxRuntime.jsx(
-    Attachment,
-    {
-      show: !!show,
-      onAddPhoto: onClick,
-      onRemovePhoto: deleteImage,
-      photos: attachedPhotos,
-      type,
-      buttonText
-    }
-  );
-  React.useEffect(() => {
-    return () => {
-      attachedPhotos.forEach((image) => {
-        URL.revokeObjectURL(image.src);
-      });
-    };
-  }, []);
-  return {
-    onClick,
-    getImage: findImage,
-    deleteImage,
-    attachedPhotos,
-    Attachment: CameraComponent
-  };
+const cx$7 = classNames.bind(styles);
+function JobSearchResult({ filteredJobs, onJobSelect, searchTerm }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$7("popular-jobs"), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cx$7("result-title"), children: [
+      "\uCD1D ",
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: filteredJobs.length }),
+      "\uAC74\uC758 \uAC80\uC0C9\uACB0\uACFC"
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.Root, { children: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Radio.Root, { name: "job-selection", size: "small", className: cx$7("job-radio-root"), children: filteredJobs.map((job) => /* @__PURE__ */ jsxRuntime.jsxs(
+      salesFrontendDesignSystem.Accordion.Item,
+      {
+        id: `item-${job.occupationIndustryCode}`,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.HeaderDiv, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+            salesFrontendDesignSystem.Radio.Item,
+            {
+              id: `item-${job.occupationIndustryCode}`,
+              size: "small",
+              value: job.occupationIndustryCode,
+              onChange: () => {
+                onJobSelect(job);
+              },
+              children: highlightOnSearchKeyword(job.occupationIndustryName, searchTerm)
+            }
+          ) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.Content, { variant: "text", children: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Table, { variant: "horizontal", children: /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("th", { children: "\uD5E4\uB354 1" }),
+              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-24", children: "1\uD589 1\uBC88\uC9F8" }),
+              /* @__PURE__ */ jsxRuntime.jsx("th", { children: "\uD5E4\uB354 1-2" }),
+              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-24 ", children: "1\uD589 2\uBC88\uC9F8" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("th", { children: "\uD5E4\uB354 2" }),
+              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "pl-24 pr-16", colSpan: 3, children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "d-flex-center-center", children: [
+                "2\uD589 1\uBC88\uC9F8 ",
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 pipe-left", children: "\uC11C\uBE0C\uD14D\uC2A4\uD2B8" }),
+                /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { variant: "neutral", size: "xsmall", appearance: "outline", children: "\uBC84\uD2BC\uBA85" })
+              ] }) })
+            ] })
+          ] }) }) })
+        ]
+      },
+      job.occupationIndustryCode
+    )) }) }),
+    filteredJobs.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      "`",
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: searchTerm }),
+      "`\uC5D0 \uB300\uD55C \uAC80\uC0C9\uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
+    ] })
+  ] }) });
 }
 
-const HISTORY_SIZE = 100;
-const DEFAULT_DOWNLOAD_PROPS = {
-  fileExtendsion: "png",
-  fileName: "image",
-  transparent: true,
-  backgroundColor: "white",
-  width: 500,
-  height: 500
-};
-function useCanvasPaint(paintProps = {}) {
-  const { pen = { strokeWeight: 5, strokeColor: "black" }, onChange, onStart, onEnd } = paintProps;
-  const [canvasRefState, setCanvasRefState] = React.useState(null);
-  const contextRef = React.useRef(null);
-  const [isPainting, setIsPainting] = React.useState(false);
-  const [history, setHistory] = React.useState([]);
-  const [historyIndex, setHistoryIndex] = React.useState(-1);
-  const saveState = React.useCallback(() => {
-    if (!canvasRefState) {
-      return;
-    }
-    const dataUrl = canvasRefState.toDataURL();
-    const newHistory = history.slice(0, historyIndex + 1);
-    if (newHistory.length >= HISTORY_SIZE) {
-      newHistory.shift();
+const { TextField } = salesFrontendDesignSystem.FormField;
+const cx$6 = classNames.bind(styles);
+const { Option } = salesFrontendDesignSystem.Select;
+function JobSearch({
+  activeTab,
+  onTabChange,
+  searchTerm,
+  setSearchInput,
+  filteredJobs,
+  onJobSelect,
+  setSearchTerm,
+  searchInput,
+  firstCategory,
+  setFirstCategory,
+  secondCategory,
+  setSecondCategory,
+  firstCategoryList,
+  secondCategoryList
+}) {
+  const onKeyUp = (e) => {
+    if (e.key === "Enter") {
+      setSearchTerm(searchInput);
     }
-    newHistory.push(dataUrl);
-    setHistory(newHistory);
-    setHistoryIndex(newHistory.length - 1);
-    onChange && onChange();
-  }, [history, historyIndex, onChange, canvasRefState]);
-  const restoreState = React.useCallback(
-    (index) => {
-      const context = contextRef.current;
-      if (!canvasRefState || !context || !history[index]) {
-        return;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      salesFrontendDesignSystem.Tab.Root,
+      {
+        defaultValue: activeTab,
+        onValueChange: onTabChange,
+        scroll: "fixed",
+        size: "small",
+        variant: "sub",
+        style: { gap: 0, overflow: "visible" },
+        children: JOB_SEARCH_TABS.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Tab.Item, { value: tab.value, children: tab.label }, tab.value))
       }
-      const dataUrl = history[index];
-      const img = new Image();
-      img.onload = () => {
-        context.clearRect(0, 0, canvasRefState.width, canvasRefState.height);
-        context.drawImage(img, 0, 0);
-      };
-      img.src = dataUrl;
-      onChange && onChange();
-    },
-    [history, onChange, canvasRefState]
-  );
-  React.useEffect(() => {
-    if (!canvasRefState) {
-      return;
-    }
-    const context = canvasRefState.getContext("2d", { willReadFrequently: true });
-    if (!context) {
-      return;
-    }
-    contextRef.current = context;
-    const initialDataUrl = canvasRefState.toDataURL();
-    setHistory([initialDataUrl]);
-    setHistoryIndex(0);
-  }, [canvasRefState]);
-  React.useEffect(() => {
-    const context = contextRef.current;
-    if (context) {
-      context.lineWidth = pen.strokeWeight;
-      context.strokeStyle = pen.strokeColor;
-    }
-  }, [pen]);
-  const getEventPosition = React.useCallback(
-    (event) => {
-      if (!canvasRefState) {
-        return null;
-      }
-      const rect = canvasRefState.getBoundingClientRect();
-      const scaleX = canvasRefState.width / rect.width;
-      const scaleY = canvasRefState.height / rect.height;
-      let clientX;
-      let clientY;
-      if (event instanceof MouseEvent) {
-        clientX = event.clientX;
-        clientY = event.clientY;
-      } else if (event instanceof TouchEvent) {
-        const touch = event.touches[0];
-        if (!touch) {
-          return null;
-        }
-        clientX = touch.clientX;
-        clientY = touch.clientY;
-      } else {
-        return null;
-      }
-      const offsetX = (clientX - rect.left) * scaleX;
-      const offsetY = (clientY - rect.top) * scaleY;
-      return { offsetX, offsetY };
-    },
-    [canvasRefState]
-  );
-  const startPainting = React.useCallback(
-    (event) => {
-      event.preventDefault();
-      const context = contextRef.current;
-      if (!context) {
-        return;
-      }
-      const pos = getEventPosition(event);
-      if (!pos) {
-        return;
-      }
-      onStart && onStart();
-      const { offsetX, offsetY } = pos;
-      context.beginPath();
-      context.moveTo(offsetX, offsetY);
-      setIsPainting(true);
-    },
-    [onStart, getEventPosition]
-  );
-  const stopPainting = React.useCallback(() => {
-    const context = contextRef.current;
-    if (!context || !isPainting) {
-      return;
-    }
-    context.closePath();
-    setIsPainting(false);
-    onEnd && onEnd();
-    saveState();
-  }, [isPainting, onEnd, saveState]);
-  const paint = React.useCallback(
-    (event) => {
-      event.preventDefault();
-      if (!isPainting || !contextRef.current) {
-        return;
-      }
-      const pos = getEventPosition(event);
-      if (!pos) {
-        return;
-      }
-      const { offsetX, offsetY } = pos;
-      contextRef.current.lineTo(offsetX, offsetY);
-      contextRef.current.stroke();
-    },
-    [isPainting, getEventPosition]
-  );
-  React.useEffect(() => {
-    if (!canvasRefState) {
-      return;
-    }
-    canvasRefState.addEventListener("mousedown", startPainting);
-    canvasRefState.addEventListener("mouseup", stopPainting);
-    canvasRefState.addEventListener("mousemove", paint);
-    canvasRefState.addEventListener("mouseleave", stopPainting);
-    canvasRefState.addEventListener("touchstart", startPainting);
-    canvasRefState.addEventListener("touchend", stopPainting);
-    canvasRefState.addEventListener("touchmove", paint);
-    canvasRefState.addEventListener("touchcancel", stopPainting);
-    return () => {
-      canvasRefState.removeEventListener("mousedown", startPainting);
-      canvasRefState.removeEventListener("mouseup", stopPainting);
-      canvasRefState.removeEventListener("mousemove", paint);
-      canvasRefState.removeEventListener("mouseleave", stopPainting);
-      canvasRefState.removeEventListener("touchstart", startPainting);
-      canvasRefState.removeEventListener("touchend", stopPainting);
-      canvasRefState.removeEventListener("touchmove", paint);
-      canvasRefState.removeEventListener("touchcancel", stopPainting);
-    };
-  }, [startPainting, stopPainting, paint, canvasRefState]);
-  const clear = () => {
-    const context = contextRef.current;
-    if (canvasRefState && context) {
-      context.clearRect(0, 0, canvasRefState.width, canvasRefState.height);
-      const initialDataUrl = canvasRefState.toDataURL();
-      setHistory([initialDataUrl]);
-      setHistoryIndex(0);
-      onChange && onChange();
-    }
-  };
-  const undo = () => {
-    if (historyIndex > 0) {
-      const newIndex = historyIndex - 1;
-      setHistoryIndex(newIndex);
-      restoreState(newIndex);
-    }
-  };
-  const redo = () => {
-    if (historyIndex < history.length - 1) {
-      const newIndex = historyIndex + 1;
-      setHistoryIndex(newIndex);
-      restoreState(newIndex);
-    }
-  };
-  const loadImage = (base64String) => {
-    const context = contextRef.current;
-    if (!canvasRefState || !context) {
-      return;
-    }
-    const img = new Image();
-    img.onload = () => {
-      context.clearRect(0, 0, canvasRefState.width, canvasRefState.height);
-      context.drawImage(img, 0, 0, canvasRefState.width, canvasRefState.height);
-      saveState();
-    };
-    img.src = base64String;
-  };
-  const getBase64String = (imageProps) => {
-    const props = { ...DEFAULT_DOWNLOAD_PROPS, ...imageProps };
-    const { fileExtendsion, transparent, backgroundColor, width, height } = props;
-    const originalCanvas = canvasRefState;
-    if (!originalCanvas) {
-      return;
-    }
-    const tempCanvas = document.createElement("canvas");
-    tempCanvas.width = width;
-    tempCanvas.height = height;
-    const tempCtx = tempCanvas.getContext("2d");
-    if (tempCtx) {
-      if (!transparent) {
-        tempCtx.fillStyle = backgroundColor || "white";
-        tempCtx.fillRect(0, 0, width, height);
-      }
-      tempCtx.drawImage(originalCanvas, 0, 0, width, height);
-      return tempCanvas.toDataURL(`image/${fileExtendsion}`);
-    }
-  };
-  const download = (downloadProps) => {
-    const props = { ...DEFAULT_DOWNLOAD_PROPS, ...downloadProps };
-    const { fileName, fileExtendsion, transparent, backgroundColor, width, height } = props;
-    const originalCanvas = canvasRefState;
-    if (!originalCanvas) {
-      return;
-    }
-    const tempCanvas = document.createElement("canvas");
-    tempCanvas.width = width;
-    tempCanvas.height = height;
-    const tempCtx = tempCanvas.getContext("2d");
-    if (tempCtx) {
-      if (!transparent) {
-        tempCtx.fillStyle = backgroundColor || "white";
-        tempCtx.fillRect(0, 0, width, height);
-      }
-      tempCtx.drawImage(originalCanvas, 0, 0, width, height);
-      const link = document.createElement("a");
-      link.download = `${fileName}.${fileExtendsion}`;
-      link.href = tempCanvas.toDataURL(`image/${fileExtendsion}`);
-      link.click();
-    }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      activeTab === "jobName" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$6("favorite-jobs-section"), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TextField,
+          {
+            placeholder: "\uC9C1\uC885\uBA85 \uAC80\uC0C9",
+            value: searchInput,
+            onKeyUp,
+            onChange: (e) => setSearchInput(e.target.value),
+            className: styles.searchInput,
+            size: "medium",
+            rootProps: {
+              endElement: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Icon, { name: "sub-ui/search", onClick: () => setSearchTerm(searchInput) }),
+              onClear: () => {
+                setSearchTerm("");
+                setSearchInput("");
+              }
+            }
+          }
+        ),
+        !searchTerm && /* @__PURE__ */ jsxRuntime.jsx(JobSearchFavorite, { filteredJobs, onJobSelect }),
+        searchTerm && /* @__PURE__ */ jsxRuntime.jsx(JobSearchResult, { filteredJobs, onJobSelect, searchTerm })
+      ] }),
+      activeTab === "jobCode" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$6("select-jobs-section"), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$6("category-section"), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            salesFrontendDesignSystem.Select,
+            {
+              name: "first_category",
+              onChange: (value) => {
+                setFirstCategory(value);
+                setSecondCategory("");
+              },
+              placeholder: "\uB300\uBD84\uB958 \uC120\uD0DD",
+              rootProps: {
+                style: {
+                  // width: '300px'
+                }
+              },
+              size: "large",
+              value: firstCategory,
+              children: firstCategoryList.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(Option, { value: option.occupationIndustryCode, children: option.occupationIndustryName }, `${index}-${option.occupationIndustryCode}`))
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            salesFrontendDesignSystem.Select,
+            {
+              name: "second_category",
+              onChange: setSecondCategory,
+              placeholder: "\uC911\uBD84\uB958 \uC120\uD0DD",
+              rootProps: {
+                style: {
+                  // width: '300px'
+                }
+              },
+              size: "large",
+              value: secondCategory,
+              disabled: !firstCategory,
+              children: secondCategoryList.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(Option, { value: option.occupationIndustryCode, children: option.occupationIndustryName }, `${index}-${option.occupationIndustryCode}`))
+            }
+          )
+        ] }),
+        firstCategory && secondCategory && /* @__PURE__ */ jsxRuntime.jsx(JobSearchCategory, { filteredJobs, onJobSelect, searchTerm })
+      ] })
+    ] })
+  ] });
+}
+
+const initData = [
+  {
+    occupationIndustryCode: "430101",
+    occupationIndustryName: "\uD68C\uC0AC \uC0AC\uBB34\uC9C1 \uC885\uC0AC\uC790",
+    occupationTypeCode: null,
+    historySequence: 0
+  },
+  {
+    occupationIndustryCode: "400301",
+    occupationIndustryName: "\uACBD\uC601\uC9C0\uC6D0 \uC0AC\uBB34\uC9C1 \uAD00\uB9AC\uC790",
+    occupationTypeCode: null,
+    historySequence: 0
+  },
+  {
+    occupationIndustryCode: "510201",
+    occupationIndustryName: "\uC804\uC5C5\uC8FC\uBD80",
+    occupationTypeCode: null,
+    historySequence: 0
+  },
+  {
+    occupationIndustryCode: "442501",
+    occupationIndustryName: "\uC8FC\uBC29\uC7A5 \uBC0F \uC870\uB9AC\uC0AC(\uC120\uBC15 \uC870\uB9AC\uC0AC \uC81C\uC678)",
+    occupationTypeCode: null,
+    historySequence: 0
+  },
+  {
+    occupationIndustryCode: "450303",
+    occupationIndustryName: "\uBCF4\uD5D8\uC124\uACC4\uC0AC(\uB2F9\uC0AC)",
+    occupationTypeCode: null,
+    historySequence: 0
+  }
+];
+const useJobSearch = () => {
+  const [activeTab, setActiveTab] = React.useState(JOB_SEARCH_TABS[0]?.value ?? "");
+  const [selectedJob, setSelectedJob] = React.useState(null);
+  const [searchTerm, setSearchTerm] = React.useState("");
+  const [searchInput, setSearchInput] = React.useState("");
+  const handleJobSelect = (job) => {
+    setSelectedJob(job);
   };
-  const isCanvasBlank = () => {
-    if (!canvasRefState) {
-      return true;
+  const [firstCategory, setFirstCategory] = React.useState("");
+  const [secondCategory, setSecondCategory] = React.useState("");
+  const [jobList, setJobList] = React.useState(initData);
+  const [firstCategoryList, setFirstCategoryList] = React.useState([]);
+  const [secondCategoryList, setSecondCategoryList] = React.useState([]);
+  const { data } = method.useSearchOccupationQuery({
+    occupationMajorCategoryCode: firstCategory,
+    occupationSearchTypeCode: searchTerm ? "4" : "3",
+    occupationSubCategoryCode: secondCategory,
+    searchOccupationIndustryName: searchTerm
+  });
+  const { data: firstCategoryData } = method.useSearchOccupationQuery({
+    occupationMajorCategoryCode: "",
+    occupationSearchTypeCode: "1",
+    occupationSubCategoryCode: "",
+    searchOccupationIndustryName: ""
+  });
+  const { data: secondCategoryData } = method.useSearchOccupationQuery({
+    occupationMajorCategoryCode: firstCategory,
+    occupationSearchTypeCode: "2",
+    occupationSubCategoryCode: "",
+    searchOccupationIndustryName: ""
+  });
+  React.useEffect(() => {
+    if (data && searchTerm && activeTab === "jobName") {
+      const filteredJobs = data.data.occupationList.filter((job) => job.occupationIndustryName.includes(searchTerm));
+      setJobList(filteredJobs);
+    } else if (!data && searchTerm && activeTab === "jobName") {
+      setJobList([]);
+    } else if (!searchTerm && activeTab === "jobName") {
+      setJobList(initData);
+    } else if (activeTab === "jobCode" && firstCategory && secondCategory) {
+      setJobList(data?.data.occupationList || []);
     }
-    const { width, height } = canvasRefState;
-    const ctx = canvasRefState.getContext("2d");
-    if (!ctx) {
-      console.error("2D context not available");
-      return true;
+  }, [searchTerm, data, firstCategory, secondCategory, secondCategoryData, activeTab]);
+  React.useEffect(() => {
+    console.log("jobList", jobList);
+  }, [jobList]);
+  React.useEffect(() => {
+    if (firstCategoryData) {
+      setFirstCategoryList(firstCategoryData.data.occupationList);
     }
-    const imageData = ctx.getImageData(0, 0, width, height);
-    const { data } = imageData;
-    for (let i = 0; i < data.length; i += 4) {
-      if (data[i + 3] !== 0) {
-        return false;
-      }
+  }, [firstCategoryData]);
+  React.useEffect(() => {
+    if (secondCategoryData) {
+      setSecondCategoryList(secondCategoryData.data.occupationList);
     }
-    return true;
+  }, [secondCategoryData]);
+  return {
+    activeTab,
+    setActiveTab,
+    selectedJob,
+    searchTerm,
+    setSearchTerm,
+    handleJobSelect,
+    filteredJobs: jobList,
+    searchInput,
+    setSearchInput,
+    firstCategory,
+    setFirstCategory,
+    secondCategory,
+    setSecondCategory,
+    secondCategoryList,
+    firstCategoryList
+  };
+};
+function useJobSearchModal() {
+  const {
+    activeTab,
+    setActiveTab,
+    searchTerm,
+    setSearchTerm,
+    filteredJobs,
+    handleJobSelect,
+    selectedJob,
+    searchInput,
+    setSearchInput,
+    firstCategory,
+    setFirstCategory,
+    secondCategory,
+    setSecondCategory,
+    firstCategoryList,
+    secondCategoryList
+  } = useJobSearch();
+  const { isOpen, openModal, closeModal } = salesFrontendDesignSystem.useModalState();
+  const onTabChange = (value) => {
+    setSearchTerm("");
+    setFirstCategory("");
+    setSecondCategory("");
+    setActiveTab(value);
   };
   return {
-    clear,
-    undo,
-    redo,
-    loadImage,
-    download,
-    getBase64String,
-    isCanvasBlank,
-    setCanvasRefState,
-    canvasRefState
+    JobSearchModal: /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Root, { isOpen, onClose: closeModal, modalSize: "xlarge", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Overlay, {}),
+      /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Content, { style: { height: "697px" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Header, { headerTitle: "\uC9C1\uC885 \uAC80\uC0C9", showCloseButton: true }),
+        /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Body, { raw: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+          JobSearch,
+          {
+            firstCategory,
+            firstCategoryList,
+            secondCategoryList,
+            setFirstCategory,
+            secondCategory,
+            activeTab,
+            onTabChange,
+            searchTerm,
+            setSearchInput,
+            filteredJobs: filteredJobs || [],
+            onJobSelect: handleJobSelect,
+            searchInput,
+            setSearchTerm,
+            setSecondCategory
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { variant: "primary", size: "medium", appearance: "filled", width: "full", onClick: closeModal, children: "\uD655\uC778" }) })
+      ] })
+    ] }),
+    JobSearchComponent: /* @__PURE__ */ jsxRuntime.jsx(
+      JobSearch,
+      {
+        firstCategoryList,
+        secondCategoryList,
+        firstCategory,
+        setFirstCategory,
+        secondCategory,
+        setSecondCategory,
+        activeTab,
+        onTabChange,
+        searchTerm,
+        setSearchInput,
+        filteredJobs: filteredJobs || [],
+        onJobSelect: handleJobSelect,
+        searchInput,
+        setSearchTerm
+      }
+    ),
+    isJobSearchOpen: isOpen,
+    openJobSearchModal: openModal,
+    closeJobSearchModal: closeModal,
+    selectedJob
   };
 }
 
-const testSignatureBase64Data = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAABkCAYAAACoy2Z3AAAQAElEQVR4AeydV6g2ORnHj733smvBiliws9jbhYoFREVQsYIFVBBRUBQRvbCgKIgFCyqoCCqiXiioN/ZesKEXYlkVXV11Xdde/z+/L/u95z0zSeadlmT+h+RkJvMkeZ5/kudJm3kveeQ/I1AvAncX67+S/+8B/glKM6X7uzIbwofI7YxA3QjYgNRdf1vl/p4S/Dz5L8qfLT/UfVkJLpSfymE8LjtVZs7HCNSCgA1ILTVlPkHg4/r3Z/nPy19XPteh4En7ICW4sjwzl48qHOMwQP9RBsw6hhoP0h0dKbGdEagZARuQmmuvfd6fLhF/Kv9veRT1gxVeUT7HMUN5nwjvKn95+YfKf0IeA6RglIOfqyiHS8jnun+IEHr8pXRtZwSqR8AGpPoqbE6Ar0miv8pjMN6q8Mbyue30t6J9vjxKmqWtx+n6q/JTOWYy8JXDz67BgJ/LTcWE8zECpSCQ0xFK4XWPD982gsBLJMfv5VHM+HN0zYxBQbY7V5S3l2dZ6zUKp3bMWuAtd6nqn2LABkMg2LWNgA1I2/VbqnTvFmP/kkcpv0zhNeQPcT9SolvIM0v5rsKpXTAcuctmyMPMI9fQTM2v8zMCiyJgA7Io3JstjKUolpcYmaNkOUJ76D4A6X8oJK8vj/HAiOhyUjfUcDCDYpmK/rSJmcekaDuzahGgwVfLvBkvFoEPiTNOGqHs8WyGX1txl5Y/xGF4vqWEN5Knzd5aIe9/KJjUYdTgd8iMA8NxrUm5cGZGoBIE6IyVsGo2K0DgXeIRBfxIhShWBQc7Nqw/otTkw5LQnXX9c/k5HKeq4Jtltdz84c/9Jxct0zWJgDvAGtXaXpm/kUgo4CcrHONYCnqeMsBosJH+CF3P5cJJL/ge0g8wHIG/uXhzvkagCgSGdJwqBDKTiyDA+xi7Cvg6B5bKhvNXlBaFjGcp6HW6n9sx48BADSnnLyKGx6HplMzOCLSJgA1Im/U6h1SPV6bsRTBi563uQxUpeyNvUV4oYzac76brpdwHVRD8D2n3f1IaeL2SQrv6EbAEEyIwpCNNWKyzqgiBq4tXlP57FB6yCc7y1quVFiWMZ6P6Gbpf2nGy6lGZhWJk+FQJ/F41M43JjMDmELAB2VyVZwuMsWDG8QelQJEqyHYYHE5eke4spXqB/FruIhWMQcg5WcXSFjzTL66mdHbtIsBeFu1i1xPXrsQzSEZHmSFbZ1k5Aoy+MR4YkWOiJG44xXQf0TDLeLvCNV0wHDlLTxeIUQzHUHmVzK5wBGgHDGh2DQXXnOzbZ504G5F9VCL3NiARcDb46AeSmc7FhwJ1meX+Jiq+cosCvoyuPye/pmOzGxlyDAd8YuwOfROe9PZlIsCSZWgHtM1cLjEitOlc+k3T2YBsuvovFv5puqKz3UphjuOtcjol/gpKwFduFazqguGAnxxGGJXCP2EOvWnqQCAYjpwlyz6JONzR92zF+PKKtgEpr06W5IiNcQzH2zIL/YnoULp8tFCXRbhwnDjXcMA0x4eZeXBt3wYC/M4LbXmM4dhFwktZu2j0XNuA9ADTeHQ4zsrR3BxRmdJjOG6WQ7wQTTAcQ44TYziQwyPMhSpp5mJ48ZQZJIaD49ZTFsdS1pT5NZmXDUiT1dor1Mf0hM425Dgrs40ho3sVMavj44kojSGGAwNowzFrtSyaOfVJO2bvinodUzhtaUz6Tae1AdlG9QfD8ZAB4j5GtLQP9jt0WYTjmO3NxUmu0mBfBNqSDKDYtxuBAAp/6AwytAPawr5nKRNjNIKl7SZFQWxX+vYlP8RwsC9CJ3t/QfCwHk0nz22vQWHknsQqSFSz0oNAmHXQNntITkTntoMheZ4oZMsRuR3yaMsgVSg7HYKR2pAZBwaDdE8sSN6fiRcMR+56NCdwkMGGQ8A14pht0JYJc0SivfxahG4HAmFuZwMyN8LL588v89Hh6EA5pYcZB0tWOfRL0bBcxe9/5JTHDAV5OYmTQ2+aOhDgZVZmHtRtiuPzRAAdOu16urZbAAHAXqAYF7EAArdTGRiO2yrMccFwlDTjgG+MAaPInLaJvCiNIRvqlFGZ3xy74YXWnC8DhGWqs0egRHvrSv6lrkjHnUEgp5OeofZVqQicL8a+I48yVRB1pRoOjhZjEHKXq86VlGyAKrBrCAFmnjkvtEJHe59iuZKl0i4I79oV6bgzCNiAnMGixiuO4zJ64nc0Uvy/VwR0uNJmHGLriKUKZIE/7mMeWuhuHCPys+oQ4KOdtOUcnfQFSZczOxFZlrtpDxXtjLJ6Hjs6p7JqR6lV/tkwZtSeku/HIqAjPEFhae4XYgilkaMMmJ0gR+4MRVnbVYIAswl+NiDFLh/rpA3cK0V4wPNv9KS5e0+8o4WADYhAqMw9U/yidFOfbICGzsZ7E0pSnEMZ3CCTKy9XZQJVGdlrxS/tNKWHoHm2aPlYp4JZ3DnKlXIUHHP0Id54Pxbpm1MIpCruFJX/l4IAG8xvymDmHaIptW7DrCNn/8LLVarIql0/87Tl5/Y/vvgJdLTlN1wcM9/F13uyzpkd9SRtO5qKaVvCNqSjozE6Si3fhCOPTy1UbJYqcmYdXq4qtAInYouBQaothzaw5Am7u0g++pmCY45ZyLEI35xCwAbkFA4l/2cExlQ/xeOzRFDqJzuQgY6Z0968XKWKbNhhPFJ7XnwoM2eGOgdMfHCzK1/acFf8puNyOvSmAVpR+BcdHR2hdFMjNRo8I6Q3r8hrX9GsHefIQHo6KHK0droKucBgjGfmBka1e9pqyniwZ5fa35sTh74ZT6ofzslTsXnbgJRZNXS0l2ewxqwj9xMPGdlNRsK5epYg+FpqKlPoMBx9HTeVvuTnGI8pFE8L/RQsYpvgoR1wanDtOsXYd/EAj13xm41roWG2VHkvkjA03lhHE8kRBgalW+KsA974BAn8wWvMcxR5raWKGF9jnjFboA7xUxiPMbyUkJbf6UhhQZspqR18GeA6PG36hx3xm42yASmn6hmh1TzrAElGaCnjBx0Khc7Y2rerUJbuU9Tw0VFYvkzVMe2+tFn0PSQCbVnBCXfLEzEbjnBjX7/yeVEJhZoarTJKQ+mWOOsARWSAP65jHoXRartLKcsYLi094zRgzvIldKUuXcZmRJ9sqbLGyNJqRx6DyZJp+ez0FzMKLHWvA9ZRAhgPrs/4k1cYDgxMqQrjJMf5MX8UaQ4GIjvIMXg4KOEKiajnnBkF7abUU4MBNk6Dhevd8P67N1u+tgFZp/ZRpEyRz0oUj+KAttRZB+v9KWWBokCGFg0H1YfCvCoXCR/qEix2PfGxpBimFMax9Es+A4vUTBp++O5V6cYDPjkNBv5c73rqj3a9G7fJaxuQ5audDTqMB40wVvqr9LBUxfEC8UbHSrWfd4quBkUhNg9yuQoTI7Ffl2HWklK4qXZyEOMzJMrBgj0i5LnmDOXPleVnezKmPvtmKD1JFoterKCUAliMkY0UhOFIfSIaxUwne2GhmKAMMW4x9oIMT4kRVf4sR2GykUxdomx2xWX0mjNrIQ1thrBEzwyUusbHDCFYgUOuzCXJer8IM8yq+T2SCEnbj2xAlqnfN6oYOhmdSJe97it6UnKdYDxSp6xQKiXLIIhHu4uUQ0xhUte/FE3XZ/ZRpvsGRaTHHDjTVvCxzdxjiVa4yalnZEHRrsDeZEX+JpITM2zaQ4Sk3Uc5DaBd6ZeRjE83sAkeKw2Fg7K4W4xo5WcovpTxYGSdetN4ZTHSxWdQxH7ECJzoVzfsyAfjGjM8JCF9ysBAt7b/cAYDGI8aZEmJwl4lsvTRxdpDX5om4mnoTQhSoBCvEE8YhpRC/ZXoSq8HlFpK8T1QcjAaU9CsYw2fOu0TECXTNdr+nRKQLlXPF4iuK72ii3J8EfrhCY7AogXjEcREFgZI4X4/pH4/sh/Z+n2qQbcu/1zy8VsXOXsYvANy/bmYmCjflPFgjZ7Z06cmKq/UbJg9xN7z2FeYGA2wQbGkNo3BGAxz3p1YAx9+bAk5guc3aWJ87GMRo63pGQMkMOjj+WF9D1qNn96AtIpUnlxh1pFat2Ykg8LgRFZezutQodhiMw8URUrWdTifvtRYX0GpMEKl1DBLwWhQx8TFPEucJc46eFkuGMA7xwTYe0abCFjsPWrilrruE4T6pv77njcXH+sUzQk7s0B0nJxZB58rYSQzMzujss85Yoq8LSuKIQDyXgOncVAusVnKfp4MJGIGep9+zvsvKPNgMJDjAbpHISoY5F45iLo+YgZM346wTf3TfyIk7TyyARlfl/dVFnS41AYzy1p0yBeLvmSHUksdt9ya8WAm1ldnzCCYbQwZFNBeaAtD0vSVvxufe/1NEe4aC/jh+0/wpEcHO/L59MGp60l4R7Eaw4r+w6BCZP93L9V/sNn1xCm6bmcDMq7++BRJTofhxbuUgRnHyTSpUZSpWUUOzTTclJNLbJYwpF5RIBz5XKvffV+QwsOdFMYUoB5nO/Jjfwj/PaXK6Q8iW93BL7x3+VzmfhIh5Gdw2QeLkNT/aK2GXD9yR0eM4DjeF5MlzDpeHSMq5BmGIaYoYZPZSYnr9fBWsj9fzKGw6W9X0fVS7jwVRDsNSvI2up/CkR+f1wkycdIQf/spMl8oD+pibFE3Uwb8JIGCTsfMlHdIul5G7IrrzKTkyClALFm+QbxlEjPCogPReWJJ3q2HQ0anIl/N5RgPjpiuteSyGjAjC2ZfhHZynZH5DEn+MREHo3FdXVO+gknct5QL+aE3Uu82ibRYR3ufijn2PC6MZEbds8y9T3KT/Yga72kINfK9Fs9Me7sawy4/wbg8aTey8OvYzIPOhtIo9YhpidAGwzH3C2Y/lfDBWNDu8A9RHPWlYJQjL45mk1fwQ05jjSp8psTMFsAr1t4pGtnxXOf4q4mIAZaCbTkbkLz6fq7IaFApvH4uuhSNSKpxbJZvfclqyDr2EobjfWo9LI3SHvn9eJS7okY78uOnBcgPTzvm5dDRGedlMCkV+GAokGnX83VdZJu0sNOZMcAa0lbYIzmdtN6ARlIv98twzqjltRlFMTq7UQZdaSTMMLp4ouOlNtS70rUQx8kq5Mezjp0rEwqKNKTPTZOi+6gImPmSL/6xuucoqYJR7jtKjTINHl1wT8XV6DAYYBM8+CDX0rJcWwX+Vj7HNTEwo9HkCLtFmptKaEYxKAVd9joaL42V9eFeokIfYDz6pvObeiHqdP0ERc2G8OmogwLSo8zI75AMMECkx/N281T9lPy+K4Zor3dQWLPjU+r0T2TCYEwtC3kfkif7ThxeOCRtdWmmapjVCZ5g+Ed6/mN5OpqCXlfKRnkvg4kHfcaDZKzrErbu3yoBURYooqn7A/mRL56BRmxP5DM7fGCAdDvavUU50IaDh5+aTkqJ/WMOxRzqihE8ch0jmOCGZVvyHWOUzhYf1LmCth0Nqm0Jh0v3NSW5uXzM0ThoZDVtlMfk2X/Gst1+XGv3vC2MMnq6/zM/RAAABkxJREFUBKMuFWQ70mUTnyZEIfEOCG2H9D87Hc+7BMTdR/dD+VCSE468GACR1zNOPK0nYneGgUx4RvfINZcUGI+plm1Ts0/0zFxyLJavDchJqM85GXUsprWN8mPC6YaOytFEXTbpwvIQbwsPVUZgw7swGANC7g8BiXLZLyP9mOOcpH+9GCC/4OnTt1BcbY5BC0oX44pcc80wunDp++GvLtqTcd0xHOEPdfKeDpJ7d8RVF0Vjq47pGRl+QyJvjvDS8RNkVT+m0VctQAfztPOgmIYuD5EOgwou5BPehSHknng8dB1FTx6Fkt3l5zmTlzBvhswsWM5DDjDDWODZawx4zsvBmdwpt++Hv85Qjb96orLoMiKKrttRYXVLMC33HNelUe/nSmNHSXx2/4Hvi0aAekNJEFJ/ucySBno8sw1Gx6m00EGPJ32KPuc5+dAePyBi8sVjAHP4UZJVHAqZWR6Ywzsy7HpmFmCF7kGesUySN0tPQ/MBQ3jo+uGvoXnl0DdpRAAwR/it0NDwadw0bEZJyE0DpdNyvRVPx0cB8GNXM8s8afacKoN36gw/tH1T59T90HS7QvBCGXnsxh16HfJ59KEZzJSOzWywAms8WAfP79vQX8Aw8D81G5TFJ0LCMmTsMMh+2Rgb+GIWt/9s7vtgRNAzc5e1SP5U8iIFVVhIWMPcIkZ0MOQOp0nosKU1+qDEMHRBiaFI4H1Ic0M2PkVBOup8SFpoMRihfPKa+vQa9UC+eGRFAVLuEp6yKHNXPvhgMzsMtMBtCV4ol30nyoMfeKDecssmPfJMtUmeW+4+HUaEdrofX+U9jbNKxs304ggwqqQT7ns6M6PRsQwxe+hSVvvlhXsUCEqMNoxSGVo+fJOO9EOVPrwGPkhLPkPLP4QeXjFyoWxC5AA36gCjmsoXOtKQNuUpizKXkm+XdwYslIvnGl5Z/iKk3ndpY9dhgxw51jYeMT5XeTa2UEAdm4fT14sAnXEs93RwOjR5jfGMymiP5DeWp1h6RqGUAc8xur5nGA947Xu+dDyygBvyYFRTdQAdaZbms688+MWgMbvgUzBcE4fxIsRzjYx9eXTFs8eBnNfqeui4aRAYWinTlOpcSkGA+kch0klL4WkOPpDvXGWMQhk7CkWZKSu7iRCgTmiHzC6mOInFuzbkucYex0SQ1JMNFVcPt+Z0DgTouLQDOh1LIXOUsUaejGSvp4KRC/n48KBuRzvyOpWJ/5eCAAME9kOo6yV/b6UU+Vfjw51hNeiLLJh9Djohnh9BQgnTOYtkdo8p+MQAwjuepRp+MXKPzLcNIUD7pK7RY+xFNSRaHaIAfB2cmsulEeCHcFDCtBE6KS+AoaSX5mO3PMpHabARzDFO+AoePjGAu/S+bhMBNtWpd9pnmxJWIhWdbiVWXWxlCOyuT9N5dz3rzYz+UfBDxIIegxA2tnfz7LqmvaI02Ic4a0hBpq0OgdA2GCzst4WSDjFUB+yUDNMhp8zPeW0TAU68MPqnPe139tg99BiEsRvbS6Mek6nGZ7w9jqLGmKO4l8aTMik77GOAYWgbDBaW5sflZSJAJWWSmswIGIFWENiTg895oKgx5ugEFPiSnjIp2/sYexVT+i0VVzqP5s8IGAEjYAQKRMAGpMBKMUtGwAgYgRoQsAE5pJacxggYASNgBI5sQNwIjIARMAJG4CAEbEAOgs2JjIARWAkBF1sQAjYgBVWGWTECRsAI1ISADUhNtWVejYARMAIFIWADUlBlLMGKyzACRsAITIWADchUSDofI2AEjMDGELAB2ViFW1wjYATWQqC9cm1A2qtTS2QEjIARWAQBG5BFYHYhRsAIGIH2ELABaa9OW5XIchkBI1AYAjYghVWI2TECRsAI1IKADUgtNWU+jYARMAJrIdBTrg1IDzCONgJGwAgYgTgCNiBxfPzUCBgBI2AEehCwAekBxtFGYDoEnJMRaBMBG5A269VSGQEjYARmR8AGZHaIXYARMAJGoE0EajAgbSJvqYyAETAClSNgA1J5BZp9I2AEjMBaCNiArIW8yzUCNSBgHo1ABAEbkAg4fmQEjIARMAL9CNiA9GPjJ0bACBgBIxBBwAYkAs74R87BCBgBI9AuAjYg7datJTMCRsAIzIqADcis8DpzI2AE1kLA5c6PwP8AAAD//+3/3TsAAAAGSURBVAMAJI6e9smFlTAAAAAASUVORK5CYII=";
-
-const FloatingButton = ({ onClick }) => {
-  const [position, setPosition] = React.useState({ x: 0, y: 0 });
-  const [isDragging, setIsDragging] = React.useState(false);
-  const dragHappened = React.useRef(false);
-  const dragStartPos = React.useRef({ x: 0, y: 0 });
-  const elementStartPos = React.useRef({ x: 0, y: 0 });
-  const handleMouseDown = (e) => {
-    if (e.button !== 0) {
-      return;
+const FormSearchJobField = ({
+  name,
+  control,
+  disabled,
+  rootProps,
+  error,
+  size = "medium",
+  placeholder = "\uC9C1\uC885 \uAC80\uC0C9",
+  ...props
+}) => {
+  const [selected, setSelected] = React.useState();
+  const { field, fieldState } = reactHookForm.useController({ name, control, disabled });
+  const { JobSearchModal, openJobSearchModal, selectedJob } = useJobSearchModal();
+  React.useEffect(() => {
+    if (selectedJob) {
+      setSelected(selectedJob);
+      field.onChange(selectedJob.occupationIndustryCode);
+      props.onValueChange?.(selectedJob);
     }
-    dragHappened.current = false;
-    setIsDragging(true);
-    dragStartPos.current = { x: e.clientX, y: e.clientY };
-    elementStartPos.current = { ...position };
-    const handleMouseMove = (event) => {
-      const dx = event.clientX - dragStartPos.current.x;
-      const dy = event.clientY - dragStartPos.current.y;
-      if (!dragHappened.current && (Math.abs(dx) > 5 || Math.abs(dy) > 5)) {
-        dragHappened.current = true;
+  }, [selectedJob]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      salesFrontendDesignSystem.FormField.TextField,
+      {
+        ...props,
+        ...field,
+        id: field.name,
+        error: fieldState.invalid || error,
+        value: selected?.occupationIndustryName ?? "",
+        rootProps: {
+          ...rootProps,
+          endElement: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Icon, { name: "sub-ui/search" })
+        },
+        readOnly: true,
+        size,
+        placeholder,
+        style: { background: "#fff", cursor: "pointer" },
+        autoComplete: "off",
+        onClick: openJobSearchModal
+      }
+    ),
+    JobSearchModal
+  ] });
+};
+
+const FormSegmentGroup = ({
+  name,
+  control,
+  disabled,
+  disabledItems,
+  items,
+  ...props
+}) => {
+  const { field, fieldState } = reactHookForm.useController({ name, control, disabled });
+  const itemList = items.map((item) => {
+    return {
+      ...item,
+      disabled: disabledItems?.includes(item.value)
+    };
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    salesFrontendDesignSystem.SegmentGroup,
+    {
+      ...props,
+      tabIndex: 0,
+      id: field.name,
+      ref: field.ref,
+      defaultValue: field.value,
+      disabled: field.disabled,
+      error: fieldState.invalid,
+      onBlur: field.onBlur,
+      items: itemList,
+      onValueChange: (selected) => {
+        field.onChange(selected);
+        props.onValueChange?.(selected);
       }
-      setPosition({
-        x: elementStartPos.current.x + dx,
-        y: elementStartPos.current.y + dy
-      });
-    };
-    const handleMouseUp = () => {
-      window.removeEventListener("mousemove", handleMouseMove);
-      window.removeEventListener("mouseup", handleMouseUp);
-      setIsDragging(false);
-    };
-    window.addEventListener("mousemove", handleMouseMove);
-    window.addEventListener("mouseup", handleMouseUp);
-  };
-  const handleClick = (e) => {
-    if (dragHappened.current) {
-      e.preventDefault();
-      e.stopPropagation();
-      return;
     }
-    onClick();
-  };
+  );
+};
+
+const FormSelect = ({
+  name,
+  control,
+  disabled,
+  error,
+  children,
+  ...props
+}) => {
+  const { field, fieldState } = reactHookForm.useController({ name, control, disabled });
   return /* @__PURE__ */ jsxRuntime.jsx(
-    salesFrontendDesignSystem.Button,
+    salesFrontendDesignSystem.Select,
     {
-      variant: "secondary",
-      appearance: "filled",
-      size: "xsmall",
-      className: styles$2["debug-floating-button"],
-      style: {
-        transform: `translate(${position.x}px, ${position.y}px)`,
-        cursor: isDragging ? "grabbing" : "grab"
+      ...props,
+      id: field.name,
+      disabled: field.disabled,
+      error: fieldState.invalid || error,
+      onBlur: field.onBlur,
+      value: field.value,
+      onChange: (selected) => {
+        field.onChange(selected);
       },
-      onMouseDown: handleMouseDown,
-      onClick: handleClick,
-      children: "DEBUG"
+      children
     }
   );
 };
+const FormSelectOption = ({ children, value, ...rest }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Select.Option, { value, ...rest, children });
+};
+const FormSelectGroup = ({
+  options,
+  optionsProps,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(FormSelect, { ...props, children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(FormSelectOption, { value: option.value, ...optionsProps, children: option.label }, option.value)) });
+};
+FormSelect.Option = FormSelectOption;
+FormSelect.Group = FormSelectGroup;
 
-const MenuPanel = ({ menuItems, onMenuItemClick, onClose }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Root, { isOpen: true, onClose, modalSize: "small", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Overlay, {}),
-    /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Content, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Header, { headerTitle: "Debug Menu", showCloseButton: true }),
-      /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.List, { selectable: true, children: menuItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.ListItem, { onClick: () => onMenuItemClick(item.component), children: item.label }, item.id)) }) })
-    ] })
-  ] });
+const FormTextField = ({
+  name,
+  control,
+  size = "medium",
+  disabled,
+  error,
+  onBlur,
+  onChange,
+  rootProps,
+  ...props
+}) => {
+  const { field, fieldState } = reactHookForm.useController({ name, control, disabled });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    salesFrontendDesignSystem.FormField.TextField,
+    {
+      ...props,
+      id: field.name,
+      size,
+      autoComplete: "off",
+      name: field.name,
+      value: field.value ?? "",
+      disabled: field.disabled,
+      error: fieldState.invalid || error,
+      onChange: (e) => {
+        field.onChange(e);
+        onChange?.(e);
+      },
+      onBlur: (e) => {
+        field.onBlur();
+        onBlur?.(e);
+      },
+      rootProps: {
+        ...rootProps,
+        onClear: () => {
+          field.onChange("");
+          rootProps?.onClear?.();
+        }
+      }
+    }
+  );
 };
 
-let globalLogs = [];
-let listeners = [];
-const originalConsoleMethods = {};
-let isConsoleOverridden = false;
-const addLog = (type, ...args) => {
-  const newLog = {
-    id: Date.now() + Math.random(),
-    type,
-    timestamp: (/* @__PURE__ */ new Date()).toLocaleTimeString(),
-    message: args
+const cx$5 = classNames.bind(styles$1);
+const StepIndicator = ({
+  items,
+  onClickItem,
+  currentIndex = 0,
+  defaultValue = "",
+  dotCount = 3,
+  isLoading
+}) => {
+  const [steps, setSteps] = React.useState(
+    Array.from({ length: 10 }).map(() => ({ label: "-", value: "" }))
+  );
+  const [current, setCurrent] = React.useState(currentIndex);
+  React.useEffect(() => {
+    if (items.length > 0) {
+      setSteps(items);
+      items.map((item, idx) => {
+        if (item.value === defaultValue) {
+          setCurrent(idx);
+        }
+      });
+    }
+  }, [items, defaultValue]);
+  const handleClickStep = (item) => {
+    const index = steps.findIndex((step) => step.value === item.value);
+    if (index === -1) {
+      console.error("error not found index");
+      return;
+    }
+    if (steps[index < 1 ? index : index - 1]?.isCompleted) {
+      onClickItem?.(item);
+    } else {
+      salesFrontendDesignSystem.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");
+    }
   };
-  globalLogs = [...globalLogs, newLog];
-  listeners.forEach((listener) => listener([...globalLogs]));
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$5("stepper-layout", { loading: isLoading }), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$5("stepper"), children: steps.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cx$5(
+            "circle",
+            { completed: item.isCompleted ?? false },
+            { active: defaultValue === item.value || current === idx }
+          ),
+          onClick: () => handleClickStep?.(item),
+          children: item.isCompleted ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$5("completed-icon") }) : idx + 1
+        }
+      ),
+      idx < steps.length - 1 && Array.from({ length: dotCount }).map((_, dotIdx) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$5("dot") }, `dot-${idx}-${dotIdx}`))
+    ] }, `num-${idx}`)) }),
+    /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cx$5("step-labels"), children: steps.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+      "li",
+      {
+        className: cx$5(
+          { completed: steps[idx < 1 ? idx : idx - 1]?.isCompleted ?? false },
+          { active: defaultValue === item.value || current === idx }
+        ),
+        onClick: () => handleClickStep?.(item),
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ellipsis", children: item.label ?? item.value })
+      },
+      `label-${idx}`
+    )) })
+  ] });
 };
-const initializeConsoleLogOverride = () => {
-  if (!salesFrontendUtils.isClient() || isConsoleOverridden) {
-    return;
+
+const cx$4 = classNames.bind(styles$2);
+function Attachment({
+  photos,
+  onAddPhoto,
+  onRemovePhoto,
+  show,
+  type = "multiple",
+  buttonText
+}) {
+  const handleAddPhoto = () => {
+    onAddPhoto();
+  };
+  const handleRemovePhoto = (id) => {
+    onRemovePhoto(id);
+  };
+  const renderPhotoSingle = () => {
+    if (photos.length === 0) {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$4("single-photo-item", "add-photo-item"), children: /* @__PURE__ */ jsxRuntime.jsxs("button", { className: cx$4("add-photo-button-single"), onClick: handleAddPhoto, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Icon, { name: "illust/camera" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: buttonText || "\uC0AC\uC9C4 \uCCA8\uBD80\uD558\uAE30" })
+      ] }) });
+    }
+    return photos.map((photo) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$4("single-photo-item"), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$4("photo-placeholder"), children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: photo.src, alt: photo.name, className: cx$4("photo-image") }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { className: cx$4("remove-button"), onClick: () => handleRemovePhoto(photo.id), "aria-label": "\uC0AC\uC9C4 \uC0AD\uC81C", children: "\xD7" })
+    ] }, photo.id));
+  };
+  const renderPhotoGrid = () => {
+    const maxPhotos = type === "single" ? 1 : 4;
+    const gridItems = [];
+    if (photos.length < maxPhotos) {
+      gridItems.push(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$4("photo-item", "add-photo-item"), children: /* @__PURE__ */ jsxRuntime.jsxs("button", { className: cx$4("add-photo-button"), onClick: handleAddPhoto, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Icon, { name: "illust/camera" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: buttonText || "\uCCA8\uBD80\uD558\uAE30" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx$4("photo-count"), children: [
+            "(",
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$4("photo-count-number"), children: photos.length }),
+            "/",
+            maxPhotos,
+            ")"
+          ] })
+        ] }) }, "add-photo")
+      );
+    }
+    photos.forEach((photo) => {
+      gridItems.push(
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$4("photo-item"), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$4("photo-placeholder"), children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: photo.src, alt: photo.name, className: cx$4("photo-image") }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("button", { className: cx$4("remove-button"), onClick: () => handleRemovePhoto(photo.id), "aria-label": "\uC0AC\uC9C4 \uC0AD\uC81C", children: "\xD7" })
+        ] }, photo.id)
+      );
+    });
+    return gridItems;
+  };
+  const isVisible = show || !show && photos.length > 0;
+  if (!isVisible) {
+    return null;
   }
-  const logTypes = ["log", "info", "warn", "error", "debug"];
-  logTypes.forEach((type) => {
-    originalConsoleMethods[type] = console[type];
-    console[type] = (...args) => {
-      if (originalConsoleMethods[type]) {
-        originalConsoleMethods[type]?.apply(console, args);
+  if (type === "single") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$4("photo-single"), children: renderPhotoSingle() });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$4("photo-grid", { linear: type === "linear" }), children: renderPhotoGrid() });
+}
+
+const maxImageSize = 3 * 1024 * 1024;
+function resize(image, options = { ext: "jpeg", filesize: maxImageSize }) {
+  return new Promise((resolve, reject) => {
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      reject(new Error("Canvas context\uB97C \uC0DD\uC131\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4."));
+      return;
+    }
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => {
+      let { width, height } = img;
+      const { filesize, ext } = options;
+      if (filesize) {
+        const originalSize = width * height * 4;
+        if (originalSize > filesize) {
+          const ratio = Math.sqrt(filesize / originalSize);
+          width = Math.floor(width * ratio);
+          height = Math.floor(height * ratio);
+        }
+      } else {
+        const { width: targetWidth, height: targetHeight } = options;
+        if (targetWidth && targetHeight) {
+          width = targetWidth;
+          height = targetHeight;
+        } else if (targetWidth) {
+          const ratio = targetWidth / width;
+          width = targetWidth;
+          height = Math.floor(height * ratio);
+        } else if (targetHeight) {
+          const ratio = targetHeight / height;
+          height = targetHeight;
+          width = Math.floor(width * ratio);
+        }
+      }
+      canvas.width = width;
+      canvas.height = height;
+      ctx.drawImage(img, 0, 0, width, height);
+      if (typeof image === "string") {
+        const mimeType = ext === "png" ? "image/png" : "image/jpeg";
+        const quality = ext === "png" ? 1 : 0.8;
+        const base64 = canvas.toDataURL(mimeType, quality);
+        resolve(base64);
+      } else {
+        canvas.toBlob(
+          (blob) => {
+            if (!blob) {
+              reject(new Error("Blob\uC744 \uC0DD\uC131\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4."));
+              return;
+            }
+            const mimeType = ext === "png" ? "image/png" : "image/jpeg";
+            const fileName = image.name ? `${image.name.replace(/\.[^/.]+$/, "")}.${ext}` : `resized.${ext}`;
+            const resizedFile = new File([blob], fileName, { type: mimeType });
+            resolve(resizedFile);
+          },
+          ext === "png" ? "image/png" : "image/jpeg",
+          ext === "png" ? 1 : 0.8
+        );
       }
-      addLog(type, ...args);
     };
-  });
-  isConsoleOverridden = true;
-};
-const restoreConsoleLog = () => {
-  if (!salesFrontendUtils.isClient() || !isConsoleOverridden) {
-    return;
-  }
-  const logTypes = ["log", "info", "warn", "error", "debug"];
-  logTypes.forEach((type) => {
-    if (originalConsoleMethods[type]) {
-      console[type] = originalConsoleMethods[type];
-    }
-  });
-  isConsoleOverridden = false;
-};
-const useConsoleLog = () => {
-  const [logs, setLogs] = React.useState(globalLogs);
-  React.useEffect(() => {
-    listeners.push(setLogs);
-    return () => {
-      listeners = listeners.filter((l) => l !== setLogs);
+    img.onerror = () => {
+      reject(new Error("\uC774\uBBF8\uC9C0\uB97C \uB85C\uB4DC\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4."));
     };
-  }, []);
-  const clearLogs = React.useCallback(() => {
-    globalLogs = [];
-    listeners.forEach((listener) => listener([]));
-  }, []);
-  return { logs, clearLogs };
-};
-
-const safeStringify$1 = (obj) => {
-  try {
-    return JSON.stringify(obj, null, 2);
-  } catch (e) {
-    return "[Unserializable Object]";
-  }
-};
-const LogMessage = ({ entry }) => {
-  const messageParts = entry.message.map((part) => {
-    if (typeof part === "object" && part !== null) {
-      return safeStringify$1(part);
+    if (typeof image === "string") {
+      img.src = image;
+    } else {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        if (e.target?.result) {
+          img.src = e.target.result;
+        } else {
+          reject(new Error("\uD30C\uC77C\uC744 \uC77D\uC744 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4."));
+        }
+      };
+      reader.onerror = () => {
+        reject(new Error("\uD30C\uC77C\uC744 \uC77D\uC744 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4."));
+      };
+      reader.readAsDataURL(image);
     }
-    return String(part);
   });
-  return /* @__PURE__ */ jsxRuntime.jsx("pre", { className: `${styles$2["log-message"]} ${styles$2[`log-${entry.type}`]}`, children: messageParts.join(" ") });
-};
-const ConsoleLogPanel = ({ onClose }) => {
-  const { logs, clearLogs } = useConsoleLog();
-  const [filter, setFilter] = React.useState("all");
-  const logContainerRef = React.useRef(null);
-  const filteredLogs = React.useMemo(() => {
-    if (filter === "all") {
-      return logs;
-    }
-    return logs.filter((log) => log.type === filter);
-  }, [logs, filter]);
-  React.useEffect(() => {
-    if (logContainerRef.current) {
-      logContainerRef.current.scrollTop = logContainerRef.current.scrollHeight;
+}
+
+const genImageId = () => `camera-${Date.now()}-${Math.random()}`;
+function useCamera({
+  onChange,
+  resize: resizeOption,
+  cameraOnly,
+  onDelete,
+  show,
+  type = "multiple",
+  buttonText
+} = {}) {
+  const [attachedPhotos, setAttachedPhotos] = React.useState([]);
+  const findImage = (imageId) => {
+    return attachedPhotos.find((image) => image.id === imageId);
+  };
+  const onClick = () => {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = "image/*";
+    if (cameraOnly) {
+      input.capture = "camera";
     }
-  }, [filteredLogs]);
-  return /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Root, { isOpen: true, onClose, modalSize: "full-screen", children: /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Content, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Header, { headerTitle: "Console Logs", showCloseButton: true }),
-    /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Body, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$2["panel-toolbar"], children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          salesFrontendDesignSystem.Segment.Root,
-          {
-            size: "xsmall",
-            appearance: "outline",
-            align: "left",
-            defaultValue: filter,
-            onValueChange: (value) => setFilter(value),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Segment.Item, { value: "all", children: "All" }),
-              /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Segment.Item, { value: "log", children: "Log" }),
-              /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Segment.Item, { value: "warn", children: "Warn" }),
-              /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Segment.Item, { value: "error", children: "Error" })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          salesFrontendDesignSystem.Button,
-          {
-            variant: "neutral",
-            appearance: "outline",
-            size: "xsmall",
-            onClick: clearLogs,
-            style: { marginLeft: "auto" },
-            children: "Clear"
+    input.addEventListener("change", async (event) => {
+      const target = event.target;
+      const { files } = target;
+      if (files && files.length > 0) {
+        const file = files[0];
+        if (file) {
+          const resizedFile = await resize(file, resizeOption);
+          const newPhoto = {
+            id: genImageId(),
+            src: URL.createObjectURL(resizedFile),
+            name: `\uC11C\uB958\uC0AC\uC9C4_${attachedPhotos.length + 1}`
+          };
+          if (type === "single") {
+            setAttachedPhotos([newPhoto]);
+          } else {
+            setAttachedPhotos([...attachedPhotos, newPhoto]);
           }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$2["log-list-container"], ref: logContainerRef, children: filteredLogs.map((log) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$2["log-item"], children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$2["log-timestamp"], children: log.timestamp }),
-        /* @__PURE__ */ jsxRuntime.jsx(LogMessage, { entry: log })
-      ] }, log.id)) })
-    ] })
-  ] }) });
-};
-
-const LoginPanel = ({ onClose, onLogin }) => {
-  const [selectedTypeId, setSelectedTypeId] = React.useState(loginTypes[0]?.id || "");
-  const [formData, setFormData] = React.useState({});
-  const selectedType = React.useMemo(() => loginTypes.find((t) => t.id === selectedTypeId), [selectedTypeId]);
-  const handleInputChange = (e) => {
-    const { name, value } = e.target;
-    setFormData((prev) => ({ ...prev, [name]: value }));
+          onChange && onChange(file);
+        }
+      }
+      document.body.removeChild(input);
+    });
+    input.style.display = "none";
+    document.body.appendChild(input);
+    input.click();
   };
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    if (selectedType) {
-      onLogin(selectedType.id, formData);
-      onClose();
+  const deleteImage = (imageId) => {
+    const imageIndex = attachedPhotos.findIndex((image) => image.id === imageId);
+    if (imageIndex > -1) {
+      const item = attachedPhotos.splice(imageIndex, 1);
+      item[0] && URL.revokeObjectURL(item[0].src);
+      setAttachedPhotos([...attachedPhotos]);
+      onDelete && onDelete(imageId);
     }
   };
+  const CameraComponent = () => /* @__PURE__ */ jsxRuntime.jsx(
+    Attachment,
+    {
+      show: !!show,
+      onAddPhoto: onClick,
+      onRemovePhoto: deleteImage,
+      photos: attachedPhotos,
+      type,
+      buttonText
+    }
+  );
   React.useEffect(() => {
-    setFormData({});
-  }, [selectedType]);
-  return /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Root, { isOpen: true, onClose, modalSize: "full-screen", children: /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Content, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Header, { headerTitle: "\uAC04\uD3B8 \uB85C\uADF8\uC778", showCloseButton: true }),
-    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs("form", { className: styles$2["login-form-container"], onSubmit: handleSubmit, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.FormField.FieldControl, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.FormField.Label, { htmlFor: "login-type-select", children: "\uB85C\uADF8\uC778 \uC720\uD615" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          salesFrontendDesignSystem.Select,
-          {
-            value: selectedTypeId,
-            onChange: setSelectedTypeId,
-            size: "xsmall",
-            rootProps: { style: { width: "100%" } },
-            children: loginTypes.map((type) => /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Select.Option, { value: type.id, children: type.label }, type.id))
-          }
-        )
-      ] }),
-      selectedType?.fields.map((field) => /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.FormField.FieldControl, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.FormField.Label, { htmlFor: field.name, children: field.label }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          salesFrontendDesignSystem.FormField.TextField,
-          {
-            size: "xsmall",
-            type: field.type,
-            id: field.name,
-            name: field.name,
-            placeholder: field.placeholder,
-            value: formData[field.name] || "",
-            onChange: handleInputChange,
-            required: true
-          }
-        )
-      ] }, field.name)),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$2["form-actions"], children: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { type: "submit", variant: "primary", appearance: "filled", size: "xsmall", children: "\uB85C\uADF8\uC778" }) })
-    ] }) })
-  ] }) });
-};
+    return () => {
+      attachedPhotos.forEach((image) => {
+        URL.revokeObjectURL(image.src);
+      });
+    };
+  }, []);
+  return {
+    onClick,
+    getImage: findImage,
+    deleteImage,
+    attachedPhotos,
+    Attachment: CameraComponent
+  };
+}
 
-const SEARCH_SECTIONS = [
-  { value: "all", label: "\uC804\uCCB4" },
-  { value: "url", label: "\uC8FC\uC18C" },
-  { value: "headers", label: "\uD5E4\uB354" },
-  { value: "params", label: "\uD30C\uB77C\uBBF8\uD130" },
-  { value: "data", label: "\uC694\uCCAD" },
-  { value: "response", label: "\uC751\uB2F5" },
-  { value: "error", label: "\uC5D0\uB7EC" }
-];
-const getLogInfo = (log) => {
-  if (log.holdStatus === "held") {
-    if ("request" in log) {
-      return log.request;
+const HISTORY_SIZE = 100;
+const DEFAULT_DOWNLOAD_PROPS = {
+  fileExtendsion: "png",
+  fileName: "image",
+  transparent: true,
+  backgroundColor: "white",
+  width: 500,
+  height: 500
+};
+function useCanvasPaint(paintProps = {}) {
+  const { pen = { strokeWeight: 5, strokeColor: "black" }, onChange, onStart, onEnd } = paintProps;
+  const [canvasRefState, setCanvasRefState] = React.useState(null);
+  const contextRef = React.useRef(null);
+  const [isPainting, setIsPainting] = React.useState(false);
+  const [history, setHistory] = React.useState([]);
+  const [historyIndex, setHistoryIndex] = React.useState(-1);
+  const saveState = React.useCallback(() => {
+    if (!canvasRefState) {
+      return;
     }
-    if ("response" in log) {
-      return log.response;
+    const dataUrl = canvasRefState.toDataURL();
+    const newHistory = history.slice(0, historyIndex + 1);
+    if (newHistory.length >= HISTORY_SIZE) {
+      newHistory.shift();
     }
-    if ("error" in log) {
-      return log.error;
+    newHistory.push(dataUrl);
+    setHistory(newHistory);
+    setHistoryIndex(newHistory.length - 1);
+    onChange && onChange();
+  }, [history, historyIndex, onChange, canvasRefState]);
+  const restoreState = React.useCallback(
+    (index) => {
+      const context = contextRef.current;
+      if (!canvasRefState || !context || !history[index]) {
+        return;
+      }
+      const dataUrl = history[index];
+      const img = new Image();
+      img.onload = () => {
+        context.clearRect(0, 0, canvasRefState.width, canvasRefState.height);
+        context.drawImage(img, 0, 0);
+      };
+      img.src = dataUrl;
+      onChange && onChange();
+    },
+    [history, onChange, canvasRefState]
+  );
+  React.useEffect(() => {
+    if (!canvasRefState) {
+      return;
     }
-  }
-  return log;
-};
-const NetworkLog = ({ onClose }) => {
-  const {
-    requests,
-    responses,
-    errors,
-    clear,
-    isHold,
-    toggleHold,
-    heldRequests,
-    heldResponses,
-    heldErrors,
-    playAllRequests,
-    playAllResponses
-  } = salesFrontendApi.useDebugStore();
-  const [searchTerm, setSearchTerm] = React.useState("");
-  const [searchSection, setSearchSection] = React.useState(SEARCH_SECTIONS[0]?.value);
-  const allLogs = React.useMemo(() => {
-    const logs = [];
-    requests.forEach((req) => logs.push({ ...req, type: "request" }));
-    responses.forEach((res) => logs.push({ ...res, type: "response" }));
-    errors.forEach((err) => logs.push({ ...err, type: "error" }));
-    heldRequests.forEach((req) => logs.push({ ...req, type: "request", holdStatus: "held" }));
-    heldResponses.forEach((res) => logs.push({ ...res, type: "response", holdStatus: "held" }));
-    heldErrors.forEach((err) => logs.push({ ...err, type: "error", holdStatus: "held" }));
-    logs.sort((a, b) => {
-      const aInfo = getLogInfo(a);
-      const bInfo = getLogInfo(b);
-      const aTime = "startTime" in aInfo ? aInfo.startTime : 0;
-      const bTime = "startTime" in bInfo ? bInfo.startTime : 0;
-      return bTime - aTime;
-    });
-    return logs;
-  }, [requests, responses, errors, heldRequests, heldResponses, heldErrors]);
-  const filteredLogs = React.useMemo(() => {
-    if (!searchTerm) {
-      return allLogs;
+    const context = canvasRefState.getContext("2d", { willReadFrequently: true });
+    if (!context) {
+      return;
     }
-    const lowercasedTerm = searchTerm.toLowerCase();
-    return allLogs.filter((log) => {
-      const logInfo = getLogInfo(log);
-      switch (searchSection) {
-        case "url":
-          return logInfo.url?.toLowerCase().includes(lowercasedTerm);
-        case "headers":
-          return "headers" in logInfo && logInfo.headers && JSON.stringify(logInfo.headers)?.toLowerCase().includes(lowercasedTerm);
-        case "params":
-          return "params" in logInfo && logInfo.params && JSON.stringify(logInfo.params)?.toLowerCase().includes(lowercasedTerm);
-        case "data":
-          return "data" in logInfo && logInfo.data && log.type === "request" && JSON.stringify(logInfo.data)?.toLowerCase().includes(lowercasedTerm);
-        case "response":
-          return "data" in logInfo && logInfo.data && log.type === "response" && JSON.stringify(logInfo.data)?.toLowerCase().includes(lowercasedTerm);
-        case "error":
-          return log.type === "error" && JSON.stringify(logInfo)?.toLowerCase().includes(lowercasedTerm);
-        case "all":
-        default:
-          return JSON.stringify(logInfo).toLowerCase().includes(lowercasedTerm);
-      }
-    });
-  }, [allLogs, searchTerm, searchSection]);
-  const renderLogSummary = (log) => {
-    const logInfo = getLogInfo(log);
-    const prefix = log.holdStatus === "held" ? "[HELD] " : "";
-    if (log.type === "request") {
-      return `${prefix}[REQ] ${logInfo.method.toUpperCase()} ${logInfo.url}`;
+    contextRef.current = context;
+    const initialDataUrl = canvasRefState.toDataURL();
+    setHistory([initialDataUrl]);
+    setHistoryIndex(0);
+  }, [canvasRefState]);
+  React.useEffect(() => {
+    const context = contextRef.current;
+    if (context) {
+      context.lineWidth = pen.strokeWeight;
+      context.strokeStyle = pen.strokeColor;
     }
-    if (log.type === "response" && "status" in logInfo) {
-      return `${prefix}[RES] ${logInfo.method.toUpperCase()} ${logInfo.url} - ${logInfo.status}`;
+  }, [pen]);
+  const getEventPosition = React.useCallback(
+    (event) => {
+      if (!canvasRefState) {
+        return null;
+      }
+      const rect = canvasRefState.getBoundingClientRect();
+      const scaleX = canvasRefState.width / rect.width;
+      const scaleY = canvasRefState.height / rect.height;
+      let clientX;
+      let clientY;
+      if (event instanceof MouseEvent) {
+        clientX = event.clientX;
+        clientY = event.clientY;
+      } else if (event instanceof TouchEvent) {
+        const touch = event.touches[0];
+        if (!touch) {
+          return null;
+        }
+        clientX = touch.clientX;
+        clientY = touch.clientY;
+      } else {
+        return null;
+      }
+      const offsetX = (clientX - rect.left) * scaleX;
+      const offsetY = (clientY - rect.top) * scaleY;
+      return { offsetX, offsetY };
+    },
+    [canvasRefState]
+  );
+  const startPainting = React.useCallback(
+    (event) => {
+      event.preventDefault();
+      const context = contextRef.current;
+      if (!context) {
+        return;
+      }
+      const pos = getEventPosition(event);
+      if (!pos) {
+        return;
+      }
+      onStart && onStart();
+      const { offsetX, offsetY } = pos;
+      context.beginPath();
+      context.moveTo(offsetX, offsetY);
+      setIsPainting(true);
+    },
+    [onStart, getEventPosition]
+  );
+  const stopPainting = React.useCallback(() => {
+    const context = contextRef.current;
+    if (!context || !isPainting) {
+      return;
     }
-    if (log.type === "error" && "message" in logInfo) {
-      return `${prefix}[ERR] ${logInfo.method.toUpperCase()} ${logInfo.url} - ${logInfo.message}`;
+    context.closePath();
+    setIsPainting(false);
+    onEnd && onEnd();
+    saveState();
+  }, [isPainting, onEnd, saveState]);
+  const paint = React.useCallback(
+    (event) => {
+      event.preventDefault();
+      if (!isPainting || !contextRef.current) {
+        return;
+      }
+      const pos = getEventPosition(event);
+      if (!pos) {
+        return;
+      }
+      const { offsetX, offsetY } = pos;
+      contextRef.current.lineTo(offsetX, offsetY);
+      contextRef.current.stroke();
+    },
+    [isPainting, getEventPosition]
+  );
+  React.useEffect(() => {
+    if (!canvasRefState) {
+      return;
     }
-    return "Unknown Log";
-  };
-  const renderLogContent = (log) => {
-    const logInfo = getLogInfo(log);
-    return /* @__PURE__ */ jsxRuntime.jsx("pre", { children: JSON.stringify(logInfo, null, 2) });
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Root, { isOpen: true, onClose, modalSize: "full-screen", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Overlay, {}),
-    /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Content, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Header, { headerTitle: "\uB124\uD2B8\uC6CC\uD06C \uB85C\uADF8", showCloseButton: true }),
-      /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Body, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$3["search-container"], children: [
-          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Select, { value: searchSection, onChange: (value) => setSearchSection(value), size: "xsmall", children: SEARCH_SECTIONS.map((option) => /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Select.Option, { value: option.value, children: option.label }, option.value)) }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            salesFrontendDesignSystem.FormField.TextField,
-            {
-              placeholder: "\uAC80\uC0C9...",
-              value: searchTerm,
-              size: "xsmall",
-              onChange: (e) => setSearchTerm(e.target.value)
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Checkbox, { id: "hold-checkbox", checked: isHold, onChange: toggleHold, size: "small", variant: "main", children: "Hold" }),
-          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { variant: "neutral", appearance: "outline", size: "xsmall", onClick: clear, children: "clear" })
-        ] }),
-        isHold && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "row" }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { size: "xsmall", onClick: () => playAllRequests(), variant: "primary", appearance: "outline", children: "REQ Resolve" }),
-          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { size: "xsmall", onClick: () => playAllResponses(), variant: "primary", appearance: "outline", children: "RES Resolve" })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$3["log-list"], children: filteredLogs.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: "\uD45C\uC2DC\uD560 \uB85C\uADF8\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }) : /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.Root, { children: filteredLogs.map((log, index) => /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Accordion.Item, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.HeaderButton, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles$3["log-summary"], children: renderLogSummary(log) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.Content, { variant: "text", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$3["log-content"], children: renderLogContent(log) }) })
-        ] }, index)) }) })
-      ] })
-    ] })
-  ] });
-};
-
-const PageNavigationPanel = ({ onClose }) => {
-  const [url, setUrl] = React.useState("");
-  const handleNavigate = () => {
-    if (url) {
-      self.location.href = url;
+    canvasRefState.addEventListener("mousedown", startPainting);
+    canvasRefState.addEventListener("mouseup", stopPainting);
+    canvasRefState.addEventListener("mousemove", paint);
+    canvasRefState.addEventListener("mouseleave", stopPainting);
+    canvasRefState.addEventListener("touchstart", startPainting);
+    canvasRefState.addEventListener("touchend", stopPainting);
+    canvasRefState.addEventListener("touchmove", paint);
+    canvasRefState.addEventListener("touchcancel", stopPainting);
+    return () => {
+      canvasRefState.removeEventListener("mousedown", startPainting);
+      canvasRefState.removeEventListener("mouseup", stopPainting);
+      canvasRefState.removeEventListener("mousemove", paint);
+      canvasRefState.removeEventListener("mouseleave", stopPainting);
+      canvasRefState.removeEventListener("touchstart", startPainting);
+      canvasRefState.removeEventListener("touchend", stopPainting);
+      canvasRefState.removeEventListener("touchmove", paint);
+      canvasRefState.removeEventListener("touchcancel", stopPainting);
+    };
+  }, [startPainting, stopPainting, paint, canvasRefState]);
+  const clear = () => {
+    const context = contextRef.current;
+    if (canvasRefState && context) {
+      context.clearRect(0, 0, canvasRefState.width, canvasRefState.height);
+      const initialDataUrl = canvasRefState.toDataURL();
+      setHistory([initialDataUrl]);
+      setHistoryIndex(0);
+      onChange && onChange();
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Root, { isOpen: true, onClose, modalSize: "full-screen", children: /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Content, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Header, { headerTitle: "\uD398\uC774\uC9C0 \uC774\uB3D9", showCloseButton: true }),
-    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$2["page-navigation-content"], children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        salesFrontendDesignSystem.FormField.TextField,
-        {
-          size: "xsmall",
-          type: "text",
-          value: url,
-          onChange: (e) => setUrl(e.target.value),
-          placeholder: "\uC774\uB3D9\uD560 URL\uC744 \uC785\uB825\uD558\uC138\uC694 (\uC608: /main)",
-          rootProps: { style: { flex: 1 } }
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { variant: "primary", appearance: "filled", size: "xsmall", onClick: handleNavigate, children: "\uC774\uB3D9" })
-    ] }) })
-  ] }) });
-};
-
-const safeStringify = (obj) => {
-  try {
-    const replacer = (key, value) => typeof value === "bigint" ? value.toString() : value;
-    return JSON.stringify(obj, replacer, 2);
-  } catch (e) {
-    return "[Unserializable Object]";
-  }
-};
-const ResultMessage = ({ log }) => {
-  const messageParts = log.message.map((part) => {
-    if (typeof part === "object" && part !== null) {
-      return safeStringify(part);
+  const undo = () => {
+    if (historyIndex > 0) {
+      const newIndex = historyIndex - 1;
+      setHistoryIndex(newIndex);
+      restoreState(newIndex);
     }
-    return String(part);
-  });
-  const prefix = log.type === "return" ? "\u21A9 " : "";
-  return /* @__PURE__ */ jsxRuntime.jsxs("pre", { className: `${styles$2["log-message"]} ${styles$2[`log-${log.type}`]}`, children: [
-    prefix,
-    messageParts.join(" ")
-  ] });
-};
-const ScriptExecutorPanel = ({ onClose }) => {
-  const [code, setCode] = React.useState('// \uC5EC\uAE30\uC5D0 \uC2E4\uD589\uD560 \uCF54\uB4DC\uB97C \uC785\uB825\uD558\uC138\uC694\nconsole.log("Hello, World!");');
-  const [results, setResults] = React.useState([]);
-  const addResult = (type, ...args) => {
-    setResults((prevResults) => [
-      ...prevResults,
-      {
-        id: Date.now() + Math.random(),
-        type,
-        timestamp: (/* @__PURE__ */ new Date()).toLocaleTimeString(),
-        message: args
-      }
-    ]);
   };
-  const handleExecute = () => {
-    const originalConsole = { ...console };
-    const newConsole = {
-      log: (...args) => {
-        originalConsole.log(...args);
-        addResult("log", ...args);
-      },
-      warn: (...args) => {
-        originalConsole.warn(...args);
-        addResult("warn", ...args);
-      },
-      error: (...args) => {
-        originalConsole.error(...args);
-        addResult("error", ...args);
-      }
-    };
-    try {
-      Object.assign(console, newConsole);
-      const result = new Function(code)();
-      if (result !== void 0) {
-        addResult("return", result);
-      }
-    } catch (e) {
-      addResult("error", e.name, e.message);
-    } finally {
-      Object.assign(console, originalConsole);
+  const redo = () => {
+    if (historyIndex < history.length - 1) {
+      const newIndex = historyIndex + 1;
+      setHistoryIndex(newIndex);
+      restoreState(newIndex);
     }
   };
-  const handleClear = () => {
-    setResults([]);
+  const loadImage = (base64String) => {
+    const context = contextRef.current;
+    if (!canvasRefState || !context) {
+      return;
+    }
+    const img = new Image();
+    img.onload = () => {
+      context.clearRect(0, 0, canvasRefState.width, canvasRefState.height);
+      context.drawImage(img, 0, 0, canvasRefState.width, canvasRefState.height);
+      saveState();
+    };
+    img.src = base64String;
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Root, { isOpen: true, onClose, modalSize: "full-screen", children: /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Content, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Header, { headerTitle: "\uC2A4\uD06C\uB9BD\uD2B8 \uC2E4\uD589", showCloseButton: true }),
-    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles$2["debug-feature-panel"]} ${styles$2["script-executor-panel"]}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$2["script-executor-content"], children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$2["script-input-section"], children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "textarea",
-          {
-            className: styles$2["script-textarea"],
-            value: code,
-            onChange: (e) => setCode(e.target.value),
-            spellCheck: "false"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$2["script-actions"], children: [
-          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { variant: "neutral", appearance: "outline", size: "xsmall", onClick: handleExecute, children: "\uC2E4\uD589 (\u25B6)" }),
-          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { variant: "neutral", appearance: "outline", size: "xsmall", onClick: handleClear, children: "\uACB0\uACFC \uC9C0\uC6B0\uAE30" })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$2["script-output-section"], children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$2["panel-header"], children: /* @__PURE__ */ jsxRuntime.jsx("h3", { children: "\uACB0\uACFC" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$2["log-list-container"], children: results.map((log) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$2["log-item"], children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$2["log-timestamp"], children: log.timestamp }),
-          /* @__PURE__ */ jsxRuntime.jsx(ResultMessage, { log })
-        ] }, log.id)) })
-      ] })
-    ] }) }) })
-  ] }) });
-};
-
-const setCookie = (name, value) => {
-  document.cookie = `${name}=${encodeURIComponent(value)};path=/`;
-};
-const removeCookie = (name) => {
-  document.cookie = `${name}=;path=/;expires=Thu, 01 Jan 1970 00:00:01 GMT;`;
-};
-const useStorage = (storageType) => {
-  const [items, setItems] = React.useState([]);
-  const loadItems = React.useCallback(() => {
-    const newItems = [];
-    if (storageType === "localStorage") {
-      for (let i = 0; i < localStorage.length; i++) {
-        const key = localStorage.key(i);
-        if (key) {
-          newItems.push({ key, value: localStorage.getItem(key) || "" });
-        }
+  const getBase64String = (imageProps) => {
+    const props = { ...DEFAULT_DOWNLOAD_PROPS, ...imageProps };
+    const { fileExtendsion, transparent, backgroundColor, width, height } = props;
+    const originalCanvas = canvasRefState;
+    if (!originalCanvas) {
+      return;
+    }
+    const tempCanvas = document.createElement("canvas");
+    tempCanvas.width = width;
+    tempCanvas.height = height;
+    const tempCtx = tempCanvas.getContext("2d");
+    if (tempCtx) {
+      if (!transparent) {
+        tempCtx.fillStyle = backgroundColor || "white";
+        tempCtx.fillRect(0, 0, width, height);
       }
-    } else {
-      const cookies = document.cookie.split(";");
-      cookies.forEach((cookie) => {
-        const parts = cookie.split("=");
-        const key = parts.shift()?.trim();
-        if (key) {
-          newItems.push({ key, value: decodeURIComponent(parts.join("=")) });
-        }
-      });
+      tempCtx.drawImage(originalCanvas, 0, 0, width, height);
+      return tempCanvas.toDataURL(`image/${fileExtendsion}`);
     }
-    setItems(newItems);
-  }, [storageType]);
-  React.useEffect(() => {
-    loadItems();
-  }, [loadItems]);
-  const setItem = React.useCallback(
-    (key, value) => {
-      if (storageType === "localStorage") {
-        localStorage.setItem(key, value);
-      } else {
-        setCookie(key, value);
+  };
+  const download = (downloadProps) => {
+    const props = { ...DEFAULT_DOWNLOAD_PROPS, ...downloadProps };
+    const { fileName, fileExtendsion, transparent, backgroundColor, width, height } = props;
+    const originalCanvas = canvasRefState;
+    if (!originalCanvas) {
+      return;
+    }
+    const tempCanvas = document.createElement("canvas");
+    tempCanvas.width = width;
+    tempCanvas.height = height;
+    const tempCtx = tempCanvas.getContext("2d");
+    if (tempCtx) {
+      if (!transparent) {
+        tempCtx.fillStyle = backgroundColor || "white";
+        tempCtx.fillRect(0, 0, width, height);
       }
-      loadItems();
-    },
-    [storageType, loadItems]
-  );
-  const removeItem = React.useCallback(
-    (key) => {
-      if (storageType === "localStorage") {
-        localStorage.removeItem(key);
-      } else {
-        removeCookie(key);
+      tempCtx.drawImage(originalCanvas, 0, 0, width, height);
+      const link = document.createElement("a");
+      link.download = `${fileName}.${fileExtendsion}`;
+      link.href = tempCanvas.toDataURL(`image/${fileExtendsion}`);
+      link.click();
+    }
+  };
+  const isCanvasBlank = () => {
+    if (!canvasRefState) {
+      return true;
+    }
+    const { width, height } = canvasRefState;
+    const ctx = canvasRefState.getContext("2d");
+    if (!ctx) {
+      console.error("2D context not available");
+      return true;
+    }
+    const imageData = ctx.getImageData(0, 0, width, height);
+    const { data } = imageData;
+    for (let i = 0; i < data.length; i += 4) {
+      if (data[i + 3] !== 0) {
+        return false;
       }
-      loadItems();
-    },
-    [storageType, loadItems]
-  );
-  return { items, setItem, removeItem, loadItems };
-};
+    }
+    return true;
+  };
+  return {
+    clear,
+    undo,
+    redo,
+    loadImage,
+    download,
+    getBase64String,
+    isCanvasBlank,
+    setCanvasRefState,
+    canvasRefState
+  };
+}
 
-const ValueDisplay = ({ value }) => {
-  try {
-    const parsed = JSON.parse(value);
-    if (typeof parsed === "object" && parsed !== null) {
-      return /* @__PURE__ */ jsxRuntime.jsx("pre", { className: styles$2["log-content"], children: JSON.stringify(parsed, null, 2) });
+const testSignatureBase64Data = "data:image/png;base64,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";
+
+const FloatingButton = ({ onClick }) => {
+  const [position, setPosition] = React.useState({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = React.useState(false);
+  const dragHappened = React.useRef(false);
+  const dragStartPos = React.useRef({ x: 0, y: 0 });
+  const elementStartPos = React.useRef({ x: 0, y: 0 });
+  const handleMouseDown = (e) => {
+    if (e.button !== 0) {
+      return;
     }
-  } catch (e) {
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$2["log-content"], children: value });
-};
-const EditableRow = ({ item, onSave, onRemove }) => {
-  const [isEditing, setIsEditing] = React.useState(false);
-  const [value, setValue] = React.useState(item.value);
-  const handleSave = () => {
-    onSave(item.key, value);
-    setIsEditing(false);
+    dragHappened.current = false;
+    setIsDragging(true);
+    dragStartPos.current = { x: e.clientX, y: e.clientY };
+    elementStartPos.current = { ...position };
+    const handleMouseMove = (event) => {
+      const dx = event.clientX - dragStartPos.current.x;
+      const dy = event.clientY - dragStartPos.current.y;
+      if (!dragHappened.current && (Math.abs(dx) > 5 || Math.abs(dy) > 5)) {
+        dragHappened.current = true;
+      }
+      setPosition({
+        x: elementStartPos.current.x + dx,
+        y: elementStartPos.current.y + dy
+      });
+    };
+    const handleMouseUp = () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+      setIsDragging(false);
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
   };
-  const handleEdit = () => {
-    setValue(item.value);
-    setIsEditing(true);
+  const handleClick = (e) => {
+    if (dragHappened.current) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+    onClick();
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.Root, { children: /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Accordion.Item, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Accordion.HeaderButton, { children: [
-      " ",
-      item.key
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Accordion.Content, { variant: "text", style: { flex: 1, display: "flex", flexDirection: "column" }, children: [
-      isEditing ? /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { variant: "neutral", appearance: "outline", size: "xsmall", onClick: handleSave, children: "Save" }) : /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { variant: "neutral", appearance: "outline", size: "xsmall", onClick: handleEdit, children: "Edit" }),
-      /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { variant: "neutral", appearance: "outline", size: "xsmall", onClick: () => onRemove(item.key), children: "Remove" }),
-      isEditing ? /* @__PURE__ */ jsxRuntime.jsx("textarea", { value, onChange: (e) => setValue(e.target.value) }) : /* @__PURE__ */ jsxRuntime.jsx(ValueDisplay, { value: item.value })
-    ] })
-  ] }) });
-};
-const StoragePanel = ({ onClose, storageType }) => {
-  const { items, setItem, removeItem } = useStorage(storageType);
-  const [filter, setFilter] = React.useState("");
-  const filteredItems = React.useMemo(() => {
-    if (!filter) {
-      return items;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    salesFrontendDesignSystem.Button,
+    {
+      variant: "secondary",
+      appearance: "filled",
+      size: "xsmall",
+      className: styles$3["debug-floating-button"],
+      style: {
+        transform: `translate(${position.x}px, ${position.y}px)`,
+        cursor: isDragging ? "grabbing" : "grab"
+      },
+      onMouseDown: handleMouseDown,
+      onClick: handleClick,
+      children: "DEBUG"
     }
-    return items.filter(
-      (item) => item.key.toLowerCase().includes(filter.toLowerCase()) || item.value.toLowerCase().includes(filter.toLowerCase())
-    );
-  }, [items, filter]);
-  return /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Root, { isOpen: true, onClose, modalSize: "full-screen", children: /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Content, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Header, { headerTitle: storageType === "localStorage" ? "Local Storage" : "Cookies", showCloseButton: true }),
-    /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Body, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$2["panel-toolbar"], children: /* @__PURE__ */ jsxRuntime.jsx(
-        salesFrontendDesignSystem.FormField.TextField,
-        {
-          placeholder: "Search key or value...",
-          size: "xsmall",
-          value: filter,
-          onChange: (e) => setFilter(e.target.value),
-          rootProps: { style: { width: "100%" } }
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx("ul", { children: filteredItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(EditableRow, { item, onSave: setItem, onRemove: removeItem }) }, item.key)) })
-    ] })
-  ] }) });
+  );
 };
 
-const loginTypes = [
-  {
-    id: "fp",
-    label: "FP \uB85C\uADF8\uC778",
-    fields: [{ name: "employeeId", label: "\uC0AC\uBC88", type: "text", placeholder: "\uC0AC\uBC88\uC744 \uC785\uB825\uD558\uC138\uC694" }]
-  },
-  {
-    id: "customer",
-    label: "\uACE0\uAC1D \uB85C\uADF8\uC778",
-    fields: [
-      { name: "name", label: "\uC774\uB984", type: "text", placeholder: "\uC774\uB984" },
-      { name: "phone", label: "\uC804\uD654\uBC88\uD638", type: "tel", placeholder: "\uC804\uD654\uBC88\uD638" },
-      { name: "residentNumber", label: "\uC8FC\uBBFC\uBC88\uD638", type: "text", placeholder: "\uC8FC\uBBFC\uBC88\uD638 \uC55E 7\uC790\uB9AC" },
-      { name: "userId", label: "\uC544\uC774\uB514", type: "text", placeholder: "\uC544\uC774\uB514" },
-      { name: "password", label: "\uBE44\uBC00\uBC88\uD638", type: "password", placeholder: "\uBE44\uBC00\uBC88\uD638" }
-    ]
-  }
-];
-const menuItems = [
-  {
-    id: "network-log",
-    label: "\uB124\uD2B8\uC6CC\uD06C \uB85C\uADF8",
-    component: NetworkLog,
-    display: true
-  },
-  {
-    id: "console-log",
-    label: "\uCF58\uC194 \uB85C\uADF8 \uD655\uC778",
-    component: ConsoleLogPanel,
-    display: true
-  },
-  {
-    id: "local-storage",
-    label: "\uB85C\uCEEC \uC2A4\uD1A0\uB9AC\uC9C0 \uAD00\uB9AC",
-    // StoragePanel은 재사용 가능한 컴포넌트이므로, props를 통해 어떤 스토리지를 다룰지 지정합니다.
-    component: (props) => /* @__PURE__ */ jsxRuntime.jsx(StoragePanel, { ...props, storageType: "localStorage" }),
-    display: true
-  },
-  {
-    id: "cookie-management",
-    label: "\uCFE0\uD0A4 \uAD00\uB9AC",
-    component: (props) => /* @__PURE__ */ jsxRuntime.jsx(StoragePanel, { ...props, storageType: "cookie" }),
-    display: true
-  },
-  {
-    id: "quick-login",
-    label: "\uAC04\uD3B8 \uB85C\uADF8\uC778",
-    component: LoginPanel,
-    display: true
-    // 실제 표시는 DebugTool.tsx에서 onLogin prop 존재 여부에 따라 결정됩니다.
-  },
-  {
-    id: "script-executor",
-    label: "\uC2A4\uD06C\uB9BD\uD2B8 \uC2E4\uD589",
-    component: ScriptExecutorPanel,
-    display: true
-  },
-  {
-    id: "page-navigation",
-    label: "\uD398\uC774\uC9C0 \uC774\uB3D9",
-    component: PageNavigationPanel,
-    display: true
-  }
-];
-
-const useEnvironment = () => {
-  const [envInfo, setEnvInfo] = React.useState({
-    env: "prd"
-  });
-  React.useEffect(() => {
-    const { hostname } = window.location;
-    setEnvInfo({ env: salesFrontendUtils.getEnvironmentFromHostname(hostname) });
-  }, []);
-  return envInfo;
+const MenuPanel = ({ menuItems, onMenuItemClick, onClose }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Root, { isOpen: true, onClose, modalSize: "small", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Overlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Content, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Header, { headerTitle: "Debug Menu", showCloseButton: true }),
+      /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.List, { selectable: true, children: menuItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.ListItem, { onClick: () => onMenuItemClick(item.component), children: item.label }, item.id)) }) })
+    ] })
+  ] });
 };
 
-const DebugTool = ({ onLogin, envOverride, menuItemsOverride }) => {
-  React.useEffect(() => {
-    initializeConsoleLogOverride();
-    return () => {
-      restoreConsoleLog();
-    };
-  }, []);
-  const environment = useEnvironment();
-  const env = envOverride || environment.env;
-  const menuItems$1 = menuItemsOverride || menuItems;
-  const [isMenuOpen, setMenuOpen] = React.useState(false);
-  const [activeFeature, setActiveFeature] = React.useState(null);
-  const isVisible = ["local", "dev", "stg"].includes(env);
-  const handleMenuClick = (itemComponent) => {
-    setActiveFeature(() => itemComponent);
-    setMenuOpen(false);
-  };
-  const handleCloseFeature = () => {
-    setActiveFeature(null);
-  };
-  if (!isVisible) {
-    return null;
-  }
-  const toggleMenu = () => {
-    setMenuOpen((prev) => !prev);
-    if (!isMenuOpen) {
-      setActiveFeature(null);
-    }
+let globalLogs = [];
+let listeners = [];
+const originalConsoleMethods = {};
+let isConsoleOverridden = false;
+const addLog = (type, ...args) => {
+  const newLog = {
+    id: Date.now() + Math.random(),
+    type,
+    timestamp: (/* @__PURE__ */ new Date()).toLocaleTimeString(),
+    message: args
   };
-  const availableMenuItems = menuItems$1.filter(
-    (item) => item.display && // config에서 display가 true인 항목만 필터링합니다.
-    // 'quick-login' 기능은 onLogin prop이 제공된 경우에만 활성화합니다.
-    (item.id !== "quick-login" || item.id === "quick-login" && onLogin)
-  );
-  if (activeFeature) {
-    const FeatureComponent = activeFeature;
-    return /* @__PURE__ */ jsxRuntime.jsx(FeatureComponent, { onClose: handleCloseFeature, onLogin });
+  globalLogs = [...globalLogs, newLog];
+  listeners.forEach((listener) => listener([...globalLogs]));
+};
+const initializeConsoleLogOverride = () => {
+  if (!salesFrontendUtils.isClient() || isConsoleOverridden) {
+    return;
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "debug-tool-container", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(FloatingButton, { onClick: toggleMenu }),
-    isMenuOpen && /* @__PURE__ */ jsxRuntime.jsx(
-      MenuPanel,
-      {
-        menuItems: availableMenuItems,
-        onMenuItemClick: handleMenuClick,
-        onClose: () => setMenuOpen(false)
+  const logTypes = ["log", "info", "warn", "error", "debug"];
+  logTypes.forEach((type) => {
+    originalConsoleMethods[type] = console[type];
+    console[type] = (...args) => {
+      if (originalConsoleMethods[type]) {
+        originalConsoleMethods[type]?.apply(console, args);
       }
-    )
-  ] });
+      addLog(type, ...args);
+    };
+  });
+  isConsoleOverridden = true;
 };
-
-const highlightOnSearchKeyword = (originalText, targetString) => {
-  if (originalText?.includes(targetString)) {
-    const replacedText = [];
-    const splitText = originalText.split(targetString);
-    for (let i = 0; i < splitText.length; i++) {
-      replacedText.push(splitText[i]);
-      if (i !== splitText.length - 1) {
-        replacedText.push(/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: targetString }));
-      }
-    }
-    return replacedText;
+const restoreConsoleLog = () => {
+  if (!salesFrontendUtils.isClient() || !isConsoleOverridden) {
+    return;
   }
-  return originalText;
-};
-
-const cx$7 = classNames.bind(styles$4);
-const { InputBox, Input } = salesFrontendDesignSystem.FormCore;
-const AddressSearchInitialText = () => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: cx$7("guide-title"), children: "\uC774\uB807\uAC8C \uAC80\uC0C9\uD574 \uBCF4\uC138\uC694." }),
-    /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: cx$7("guide"), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("li", { children: "\uB3C4\uB85C\uBA85/\uC9C0\uBA85\uACFC \uAC74\uBB3C\uBC88\uD638\uB97C \uD568\uAED8 \uC785\uB825\uD574\uC8FC\uC138\uC694" }),
-      /* @__PURE__ */ jsxRuntime.jsx("li", { children: "\uC608) 63\uB85C 50, \uC5EC\uC758\uB3C4\uB3D9 60" }),
-      /* @__PURE__ */ jsxRuntime.jsx("li", { children: "\uC9C0\uBA85\uC740 \uB3D9/\uC74D/\uBA74/\uB9AC\uB85C \uC785\uB825\uD574\uC8FC\uC138\uC694" }),
-      /* @__PURE__ */ jsxRuntime.jsx("li", { children: "\uC608) \uC5EC\uC758\uB3C4\uB3D9, \uC5ED\uC0BC\uB3D9" }),
-      /* @__PURE__ */ jsxRuntime.jsx("li", { children: "\uC6B0\uD3B8\uBC88\uD638 \uB2E4\uC12F\uC790\uB9AC\uB97C \uBAA8\uB450 \uC785\uB825\uD574\uC8FC\uC138\uC694" }),
-      /* @__PURE__ */ jsxRuntime.jsx("li", { children: "\uC608) 07345, 06232" })
-    ] })
-  ] });
+  const logTypes = ["log", "info", "warn", "error", "debug"];
+  logTypes.forEach((type) => {
+    if (originalConsoleMethods[type]) {
+      console[type] = originalConsoleMethods[type];
+    }
+  });
+  isConsoleOverridden = false;
 };
-const AddressSearchResult = ({
-  addressSearchList,
-  onChange,
-  searchKeyword,
-  selectedAddress
-}) => {
-  const [filterList, setFilterList] = React.useState([]);
+const useConsoleLog = () => {
+  const [logs, setLogs] = React.useState(globalLogs);
   React.useEffect(() => {
-    const filterList2 = addressSearchList.filter(
-      (item) => item.address.includes(searchKeyword) || item.oldAddress.includes(searchKeyword)
-    ) || [];
-    setFilterList(filterList2);
-  }, [addressSearchList, searchKeyword]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cx$7("guide-title"), children: [
-      "\uCD1D ",
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: filterList.length }),
-      "\uAC74\uC758 \uAC80\uC0C9\uACB0\uACFC"
-    ] }),
-    filterList.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-      salesFrontendDesignSystem.RadioGroup,
-      {
-        items: filterList.map((item) => ({
-          value: item.address,
-          select: item.address === selectedAddress?.address && item.zipCode === selectedAddress?.zipCode,
-          label: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$7("search-result"), children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$7("zipcode"), children: [
-              " ",
-              highlightOnSearchKeyword(item.zipCode, searchKeyword)
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$7("divider") }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$7("address-info"), children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$7("address"), children: highlightOnSearchKeyword(item.address, searchKeyword) }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$7("old-address"), children: highlightOnSearchKeyword(item.oldAddress, searchKeyword) })
-            ] })
-          ] }),
-          id: item.address
-        })),
-        className: cx$7("radio-group"),
-        name: "address-search",
-        size: "medium",
-        defaultValue: "",
-        onChange
-      }
-    ),
-    filterList.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      "`",
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: searchKeyword }),
-      "`\uC5D0 \uB300\uD55C \uAC80\uC0C9\uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
-    ] })
-  ] });
+    listeners.push(setLogs);
+    return () => {
+      listeners = listeners.filter((l) => l !== setLogs);
+    };
+  }, []);
+  const clearLogs = React.useCallback(() => {
+    globalLogs = [];
+    listeners.forEach((listener) => listener([]));
+  }, []);
+  return { logs, clearLogs };
 };
-const AddressSearchDetailInput = ({
-  selectedAddress,
-  onDetailChange,
-  step,
-  detailAddressInput
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        " ",
-        selectedAddress.zipCode
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        "|",
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children: `${selectedAddress.address}` })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.FormField.Label, { id: "detail", style: { width: "90px" }, children: "\uC0C1\uC138\uC8FC\uC18C" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Input,
-        {
-          placeholder: "\uC0C1\uC138\uC8FC\uC18C \uC785\uB825",
-          onChange: onDetailChange,
-          size: "large",
-          value: detailAddressInput,
-          ...step === "detail-input" && { autoFocus: true }
-        }
-      )
-    ] })
-  ] });
+
+const safeStringify$1 = (obj) => {
+  try {
+    return JSON.stringify(obj, null, 2);
+  } catch (e) {
+    return "[Unserializable Object]";
+  }
 };
-function AddressComponent({ isOpen, onClose, setValue }) {
-  const {
-    onAddressSearchClear,
-    addressSearchKeyword,
-    addressSearchStep,
-    onAddressSearchNext,
-    nextButtonDisabled,
-    detailAddressInput,
-    addressSearchList,
-    onSearch,
-    onKeyUp,
-    onSelectChange,
-    setDetail,
-    search,
-    searchInput,
-    selectedAddress
-  } = useSearchAddress({
-    setValue,
-    onClose,
-    isOpen
+const LogMessage = ({ entry }) => {
+  const messageParts = entry.message.map((part) => {
+    if (typeof part === "object" && part !== null) {
+      return safeStringify$1(part);
+    }
+    return String(part);
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Root, { isOpen, onClose, modalSize: "full-screen", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Overlay, {}),
-    /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Content, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Header, { headerTitle: "\uC8FC\uC18C \uAC80\uC0C9", showCloseButton: true }),
-      /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Body, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          InputBox,
+  return /* @__PURE__ */ jsxRuntime.jsx("pre", { className: `${styles$3["log-message"]} ${styles$3[`log-${entry.type}`]}`, children: messageParts.join(" ") });
+};
+const ConsoleLogPanel = ({ onClose }) => {
+  const { logs, clearLogs } = useConsoleLog();
+  const [filter, setFilter] = React.useState("all");
+  const logContainerRef = React.useRef(null);
+  const filteredLogs = React.useMemo(() => {
+    if (filter === "all") {
+      return logs;
+    }
+    return logs.filter((log) => log.type === filter);
+  }, [logs, filter]);
+  React.useEffect(() => {
+    if (logContainerRef.current) {
+      logContainerRef.current.scrollTop = logContainerRef.current.scrollHeight;
+    }
+  }, [filteredLogs]);
+  return /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Root, { isOpen: true, onClose, modalSize: "full-screen", children: /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Content, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Header, { headerTitle: "Console Logs", showCloseButton: true }),
+    /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Body, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$3["panel-toolbar"], children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          salesFrontendDesignSystem.Segment.Root,
           {
-            clearable: true,
-            endElement: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Icon, { name: "sub-ui/search", onClick: search }),
-            onClear: onAddressSearchClear,
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              Input,
-              {
-                ...addressSearchStep !== "detail-input" && { autoFocus: true },
-                onChange: onSearch,
-                onKeyUp,
-                value: searchInput,
-                placeholder: "\uC9C0\uBC88, \uB3C4\uB85C\uBA85, \uAC74\uBB3C\uBA85, \uC6B0\uD3B8\uBC88\uD638 \uC785\uB825",
-                size: "large"
-              }
-            )
+            size: "xsmall",
+            appearance: "outline",
+            align: "left",
+            defaultValue: filter,
+            onValueChange: (value) => setFilter(value),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Segment.Item, { value: "all", children: "All" }),
+              /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Segment.Item, { value: "log", children: "Log" }),
+              /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Segment.Item, { value: "warn", children: "Warn" }),
+              /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Segment.Item, { value: "error", children: "Error" })
+            ]
           }
         ),
-        addressSearchStep === "initial" && /* @__PURE__ */ jsxRuntime.jsx(AddressSearchInitialText, {}),
-        addressSearchStep === "search-result" && /* @__PURE__ */ jsxRuntime.jsx(
-          AddressSearchResult,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          salesFrontendDesignSystem.Button,
+          {
+            variant: "neutral",
+            appearance: "outline",
+            size: "xsmall",
+            onClick: clearLogs,
+            style: { marginLeft: "auto" },
+            children: "Clear"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$3["log-list-container"], ref: logContainerRef, children: filteredLogs.map((log) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$3["log-item"], children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$3["log-timestamp"], children: log.timestamp }),
+        /* @__PURE__ */ jsxRuntime.jsx(LogMessage, { entry: log })
+      ] }, log.id)) })
+    ] })
+  ] }) });
+};
+
+const LoginPanel = ({ onClose, onLogin }) => {
+  const [selectedTypeId, setSelectedTypeId] = React.useState(loginTypes[0]?.id || "");
+  const [formData, setFormData] = React.useState({});
+  const selectedType = React.useMemo(() => loginTypes.find((t) => t.id === selectedTypeId), [selectedTypeId]);
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  };
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (selectedType) {
+      onLogin(selectedType.id, formData);
+      onClose();
+    }
+  };
+  React.useEffect(() => {
+    setFormData({});
+  }, [selectedType]);
+  return /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Root, { isOpen: true, onClose, modalSize: "full-screen", children: /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Content, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Header, { headerTitle: "\uAC04\uD3B8 \uB85C\uADF8\uC778", showCloseButton: true }),
+    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs("form", { className: styles$3["login-form-container"], onSubmit: handleSubmit, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.FormField.FieldControl, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.FormField.Label, { htmlFor: "login-type-select", children: "\uB85C\uADF8\uC778 \uC720\uD615" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          salesFrontendDesignSystem.Select,
           {
-            onChange: onSelectChange,
-            addressSearchList: addressSearchList || [],
-            searchKeyword: addressSearchKeyword,
-            selectedAddress
+            value: selectedTypeId,
+            onChange: setSelectedTypeId,
+            size: "xsmall",
+            rootProps: { style: { width: "100%" } },
+            children: loginTypes.map((type) => /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Select.Option, { value: type.id, children: type.label }, type.id))
           }
-        ),
-        addressSearchStep === "detail-input" && selectedAddress && /* @__PURE__ */ jsxRuntime.jsx(
-          AddressSearchDetailInput,
+        )
+      ] }),
+      selectedType?.fields.map((field) => /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.FormField.FieldControl, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.FormField.Label, { htmlFor: field.name, children: field.label }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          salesFrontendDesignSystem.FormField.TextField,
           {
-            selectedAddress,
-            onDetailChange: setDetail,
-            step: addressSearchStep,
-            detailAddressInput
+            size: "xsmall",
+            type: field.type,
+            id: field.name,
+            name: field.name,
+            placeholder: field.placeholder,
+            value: formData[field.name] || "",
+            onChange: handleInputChange,
+            required: true
           }
         )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Footer, { children: addressSearchStep !== "initial" && /* @__PURE__ */ jsxRuntime.jsxs(
-        salesFrontendDesignSystem.Button,
-        {
-          onClick: onAddressSearchNext,
-          variant: "primary",
-          size: "medium",
-          appearance: "filled",
-          width: "full",
-          disabled: nextButtonDisabled,
-          children: [
-            addressSearchStep === "search-result" && "\uB2E4\uC74C(1/2)",
-            addressSearchStep === "detail-input" && "\uD655\uC778(2/2)"
-          ]
-        }
-      ) })
-    ] })
+      ] }, field.name)),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$3["form-actions"], children: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { type: "submit", variant: "primary", appearance: "filled", size: "xsmall", children: "\uB85C\uADF8\uC778" }) })
+    ] }) })
   ] }) });
-}
+};
 
-function useSearchAddress({ setValue, onClose, isOpen }) {
-  const [searchKeyword, setSearchKeyword] = React.useState("");
-  const [step, setStep] = React.useState("initial");
-  const [selectedAddress, setSelectedAddress] = React.useState(null);
-  const [searchInput, setSearchInput] = React.useState("");
-  const [detailAddressInput, setDetailAddressInput] = React.useState("");
-  const { data: addressList } = method.useSearchModalAddressQuery({ searchKeyword });
-  const [nextButtonDisabled, setNextButtonDisabled] = React.useState(false);
-  const onNext = () => {
-    if (step === "search-result") {
-      setStep("detail-input");
-      setNextButtonDisabled(true);
-    } else {
-      setValue({
-        address: selectedAddress?.address || "",
-        oldAddress: selectedAddress?.oldAddress || "",
-        zipCode: selectedAddress?.zipCode || "",
-        detail: detailAddressInput || ""
-      });
-      onClose();
+const SEARCH_SECTIONS = [
+  { value: "all", label: "\uC804\uCCB4" },
+  { value: "url", label: "\uC8FC\uC18C" },
+  { value: "headers", label: "\uD5E4\uB354" },
+  { value: "params", label: "\uD30C\uB77C\uBBF8\uD130" },
+  { value: "data", label: "\uC694\uCCAD" },
+  { value: "response", label: "\uC751\uB2F5" },
+  { value: "error", label: "\uC5D0\uB7EC" }
+];
+const getLogInfo = (log) => {
+  if (log.holdStatus === "held") {
+    if ("request" in log) {
+      return log.request;
     }
-  };
-  const onSearch = (e) => {
-    const typeStr = e.target.value;
-    setSearchInput(typeStr);
-  };
-  const search = () => {
-    if (searchInput === "") {
-      onClear();
-      return;
+    if ("response" in log) {
+      return log.response;
     }
-    if (searchInput && searchInput.length > 1) {
-      setSearchKeyword(searchInput);
-      setStep("search-result");
-      setSelectedAddress(null);
-      setDetailAddressInput("");
-      setNextButtonDisabled(true);
+    if ("error" in log) {
+      return log.error;
     }
-  };
-  const onKeyUp = (e) => {
-    if (e.key === "Enter") {
-      search();
+  }
+  return log;
+};
+const NetworkLog = ({ onClose }) => {
+  const {
+    requests,
+    responses,
+    errors,
+    clear,
+    isHold,
+    toggleHold,
+    heldRequests,
+    heldResponses,
+    heldErrors,
+    playAllRequests,
+    playAllResponses
+  } = salesFrontendApi.useDebugStore();
+  const [searchTerm, setSearchTerm] = React.useState("");
+  const [searchSection, setSearchSection] = React.useState(SEARCH_SECTIONS[0]?.value);
+  const allLogs = React.useMemo(() => {
+    const logs = [];
+    requests.forEach((req) => logs.push({ ...req, type: "request" }));
+    responses.forEach((res) => logs.push({ ...res, type: "response" }));
+    errors.forEach((err) => logs.push({ ...err, type: "error" }));
+    heldRequests.forEach((req) => logs.push({ ...req, type: "request", holdStatus: "held" }));
+    heldResponses.forEach((res) => logs.push({ ...res, type: "response", holdStatus: "held" }));
+    heldErrors.forEach((err) => logs.push({ ...err, type: "error", holdStatus: "held" }));
+    logs.sort((a, b) => {
+      const aInfo = getLogInfo(a);
+      const bInfo = getLogInfo(b);
+      const aTime = "startTime" in aInfo ? aInfo.startTime : 0;
+      const bTime = "startTime" in bInfo ? bInfo.startTime : 0;
+      return bTime - aTime;
+    });
+    return logs;
+  }, [requests, responses, errors, heldRequests, heldResponses, heldErrors]);
+  const filteredLogs = React.useMemo(() => {
+    if (!searchTerm) {
+      return allLogs;
     }
-  };
-  const onSelectChange = (e) => {
-    const selectedAddress2 = e.target.value;
-    if (selectedAddress2) {
-      const adr = addressList?.find((addr) => {
-        return addr.address === selectedAddress2;
-      });
-      setSelectedAddress(adr || null);
-      setNextButtonDisabled(false);
+    const lowercasedTerm = searchTerm.toLowerCase();
+    return allLogs.filter((log) => {
+      const logInfo = getLogInfo(log);
+      switch (searchSection) {
+        case "url":
+          return logInfo.url?.toLowerCase().includes(lowercasedTerm);
+        case "headers":
+          return "headers" in logInfo && logInfo.headers && JSON.stringify(logInfo.headers)?.toLowerCase().includes(lowercasedTerm);
+        case "params":
+          return "params" in logInfo && logInfo.params && JSON.stringify(logInfo.params)?.toLowerCase().includes(lowercasedTerm);
+        case "data":
+          return "data" in logInfo && logInfo.data && log.type === "request" && JSON.stringify(logInfo.data)?.toLowerCase().includes(lowercasedTerm);
+        case "response":
+          return "data" in logInfo && logInfo.data && log.type === "response" && JSON.stringify(logInfo.data)?.toLowerCase().includes(lowercasedTerm);
+        case "error":
+          return log.type === "error" && JSON.stringify(logInfo)?.toLowerCase().includes(lowercasedTerm);
+        case "all":
+        default:
+          return JSON.stringify(logInfo).toLowerCase().includes(lowercasedTerm);
+      }
+    });
+  }, [allLogs, searchTerm, searchSection]);
+  const renderLogSummary = (log) => {
+    const logInfo = getLogInfo(log);
+    const prefix = log.holdStatus === "held" ? "[HELD] " : "";
+    if (log.type === "request") {
+      return `${prefix}[REQ] ${logInfo.method.toUpperCase()} ${logInfo.url}`;
     }
-  };
-  const onClear = React.useCallback(() => {
-    setSearchKeyword("");
-    setSearchInput("");
-    setSelectedAddress(null);
-    setDetailAddressInput("");
-    setStep("initial");
-  }, []);
-  const setDetail = (e) => {
-    const detail = e.target.value;
-    setDetailAddressInput(detail);
-    if (detail) {
-      setNextButtonDisabled(false);
-    } else {
-      setNextButtonDisabled(true);
+    if (log.type === "response" && "status" in logInfo) {
+      return `${prefix}[RES] ${logInfo.method.toUpperCase()} ${logInfo.url} - ${logInfo.status}`;
     }
-  };
-  React.useEffect(() => {
-    if (isOpen) {
-      setSelectedAddress(null);
-      setDetailAddressInput("");
-      setStep("initial");
-      setSearchKeyword("");
+    if (log.type === "error" && "message" in logInfo) {
+      return `${prefix}[ERR] ${logInfo.method.toUpperCase()} ${logInfo.url} - ${logInfo.message}`;
     }
-  }, [isOpen]);
-  return {
-    onAddressSearchClear: onClear,
-    onAddressSearchNext: onNext,
-    addressSearchKeyword: searchKeyword,
-    addressSearchList: addressList,
-    addressSearchStep: step,
-    selectedAddress,
-    addressSearchOnValueChange: onSelectChange,
-    nextButtonDisabled,
-    detailAddressInput,
-    onSearch,
-    onKeyUp,
-    onSelectChange,
-    setDetail,
-    search,
-    searchInput
-  };
-}
-const useAddressComponent = () => {
-  const [fullAddress, setFullAddress] = React.useState(null);
-  const { isOpen, closeModal, openModal } = salesFrontendDesignSystem.useModalState();
-  const AddressSearchComponent = () => /* @__PURE__ */ jsxRuntime.jsx(AddressComponent, { isOpen, onClose: closeModal, setValue: setFullAddress });
-  return {
-    fullAddress,
-    openModal,
-    AddressSearchComponent
-  };
-};
-
-const cx$6 = classNames.bind(styles$5);
-const JobVehicleSearchGrade = ({ riskGrade, hospitalizationGrade }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$6("grade-section"), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$6("icon-title"), children: [
-      /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Icon, { name: "illust/grade" }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-title5 text-body", children: "\uB4F1\uAE09" })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: cx$6("grade-list"), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$6("grade"), children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\uC704\uD5D8\uB4F1\uAE09" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary typo-subtitle3", children: riskGrade || "-" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$6("grade"), children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\uC785\uC6D0\uB4F1\uAE09" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary typo-subtitle3", children: hospitalizationGrade || "-" })
+    return "Unknown Log";
+  };
+  const renderLogContent = (log) => {
+    const logInfo = getLogInfo(log);
+    return /* @__PURE__ */ jsxRuntime.jsx("pre", { children: JSON.stringify(logInfo, null, 2) });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Root, { isOpen: true, onClose, modalSize: "full-screen", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Overlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Content, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Header, { headerTitle: "\uB124\uD2B8\uC6CC\uD06C \uB85C\uADF8", showCloseButton: true }),
+      /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Body, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$4["search-container"], children: [
+          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Select, { value: searchSection, onChange: (value) => setSearchSection(value), size: "xsmall", children: SEARCH_SECTIONS.map((option) => /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Select.Option, { value: option.value, children: option.label }, option.value)) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            salesFrontendDesignSystem.FormField.TextField,
+            {
+              placeholder: "\uAC80\uC0C9...",
+              value: searchTerm,
+              size: "xsmall",
+              onChange: (e) => setSearchTerm(e.target.value)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Checkbox, { id: "hold-checkbox", checked: isHold, onChange: toggleHold, size: "small", variant: "main", children: "Hold" }),
+          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { variant: "neutral", appearance: "outline", size: "xsmall", onClick: clear, children: "clear" })
+        ] }),
+        isHold && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "row" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { size: "xsmall", onClick: () => playAllRequests(), variant: "primary", appearance: "outline", children: "REQ Resolve" }),
+          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { size: "xsmall", onClick: () => playAllResponses(), variant: "primary", appearance: "outline", children: "RES Resolve" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$4["log-list"], children: filteredLogs.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: "\uD45C\uC2DC\uD560 \uB85C\uADF8\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }) : /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.Root, { children: filteredLogs.map((log, index) => /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Accordion.Item, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.HeaderButton, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles$4["log-summary"], children: renderLogSummary(log) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.Content, { variant: "text", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$4["log-content"], children: renderLogContent(log) }) })
+        ] }, index)) }) })
       ] })
     ] })
   ] });
 };
 
-const JOB_SEARCH_TABS = [
-  { value: "jobName", label: "\uC9C1\uC885\uBA85 \uAC80\uC0C9" },
-  { value: "jobCode", label: "\uBD84\uB958\uB85C \uAC80\uC0C9" }
-];
-
-const cx$5 = classNames.bind(styles$6);
-function JobSearchCategory({ filteredJobs, onJobSelect, searchTerm }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$5("category-section"), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cx$5("result-title"), children: [
-      "\uCD1D ",
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: filteredJobs.length }),
-      "\uAC74\uC758 \uAC80\uC0C9\uACB0\uACFC"
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.Root, { children: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Radio.Root, { name: "job-selection", size: "small", className: cx$5("job-radio-root"), onToggle: () => {
-    }, children: filteredJobs.map((job, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-      salesFrontendDesignSystem.Accordion.Item,
-      {
-        id: `item-${job.occupationIndustryCode}-${index}-accordion`,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.HeaderDiv, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Radio.Item, { size: "small", value: job.occupationIndustryCode, onChange: () => onJobSelect(job), children: [
-            highlightOnSearchKeyword(job.occupationIndustryName, searchTerm),
-            "(",
-            job.occupationIndustryCode,
-            ")"
-          ] }) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.Content, { variant: "text", children: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Table, { variant: "horizontal", children: /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("th", { children: "\uD5E4\uB354 1" }),
-              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-24", children: "1\uD589 1\uBC88\uC9F8" }),
-              /* @__PURE__ */ jsxRuntime.jsx("th", { children: "\uD5E4\uB354 1-2" }),
-              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-24 ", children: "1\uD589 2\uBC88\uC9F8" })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("th", { children: "\uD5E4\uB354 2" }),
-              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "pl-24 pr-16", colSpan: 3, children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "d-flex-center-center", children: [
-                "2\uD589 1\uBC88\uC9F8 ",
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 pipe-left", children: "\uC11C\uBE0C\uD14D\uC2A4\uD2B8" }),
-                /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { variant: "neutral", size: "xsmall", appearance: "outline", children: "\uBC84\uD2BC\uBA85" })
-              ] }) })
-            ] })
-          ] }) }) })
-        ]
-      },
-      `item-${job.occupationIndustryCode}-${index}`
-    )) }) }),
-    filteredJobs.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      "`",
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: searchTerm }),
-      "`\uC5D0 \uB300\uD55C \uAC80\uC0C9\uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
-    ] })
+const PageNavigationPanel = ({ onClose }) => {
+  const [url, setUrl] = React.useState("");
+  const handleNavigate = () => {
+    if (url) {
+      self.location.href = url;
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Root, { isOpen: true, onClose, modalSize: "full-screen", children: /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Content, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Header, { headerTitle: "\uD398\uC774\uC9C0 \uC774\uB3D9", showCloseButton: true }),
+    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$3["page-navigation-content"], children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        salesFrontendDesignSystem.FormField.TextField,
+        {
+          size: "xsmall",
+          type: "text",
+          value: url,
+          onChange: (e) => setUrl(e.target.value),
+          placeholder: "\uC774\uB3D9\uD560 URL\uC744 \uC785\uB825\uD558\uC138\uC694 (\uC608: /main)",
+          rootProps: { style: { flex: 1 } }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { variant: "primary", appearance: "filled", size: "xsmall", onClick: handleNavigate, children: "\uC774\uB3D9" })
+    ] }) })
   ] }) });
-}
+};
 
-const cx$4 = classNames.bind(styles$6);
-function JobSearchFavorite({ filteredJobs, onJobSelect }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$4("popular-jobs"), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("p", { children: "\uB9CE\uC774 \uCC3E\uB294 \uC9C1\uC885" }),
-    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.Root, { children: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Radio.Root, { name: "job-selection", size: "small", className: cx$4("job-radio-root"), children: filteredJobs.map((job, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-      salesFrontendDesignSystem.Accordion.Item,
+const safeStringify = (obj) => {
+  try {
+    const replacer = (key, value) => typeof value === "bigint" ? value.toString() : value;
+    return JSON.stringify(obj, replacer, 2);
+  } catch (e) {
+    return "[Unserializable Object]";
+  }
+};
+const ResultMessage = ({ log }) => {
+  const messageParts = log.message.map((part) => {
+    if (typeof part === "object" && part !== null) {
+      return safeStringify(part);
+    }
+    return String(part);
+  });
+  const prefix = log.type === "return" ? "\u21A9 " : "";
+  return /* @__PURE__ */ jsxRuntime.jsxs("pre", { className: `${styles$3["log-message"]} ${styles$3[`log-${log.type}`]}`, children: [
+    prefix,
+    messageParts.join(" ")
+  ] });
+};
+const ScriptExecutorPanel = ({ onClose }) => {
+  const [code, setCode] = React.useState('// \uC5EC\uAE30\uC5D0 \uC2E4\uD589\uD560 \uCF54\uB4DC\uB97C \uC785\uB825\uD558\uC138\uC694\nconsole.log("Hello, World!");');
+  const [results, setResults] = React.useState([]);
+  const addResult = (type, ...args) => {
+    setResults((prevResults) => [
+      ...prevResults,
       {
-        id: `item-${job.occupationIndustryCode}-${index}`,
-        className: cx$4("accordion-item"),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.HeaderDiv, { className: cx$4("accordion-header-item"), children: /* @__PURE__ */ jsxRuntime.jsxs(
-            salesFrontendDesignSystem.Radio.Item,
-            {
-              size: "small",
-              value: job.occupationIndustryCode,
-              onChange: () => onJobSelect(job),
-              className: cx$4("radio-item"),
-              children: [
-                job.occupationIndustryName,
-                "(",
-                job.occupationIndustryCode,
-                ")"
-              ]
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.Content, { variant: "text", children: "\uD56D\uBAA9 1 \uB0B4\uC6A9" })
-        ]
+        id: Date.now() + Math.random(),
+        type,
+        timestamp: (/* @__PURE__ */ new Date()).toLocaleTimeString(),
+        message: args
+      }
+    ]);
+  };
+  const handleExecute = () => {
+    const originalConsole = { ...console };
+    const newConsole = {
+      log: (...args) => {
+        originalConsole.log(...args);
+        addResult("log", ...args);
       },
-      `item-${job.occupationIndustryCode}-${index}`
-    )) }) })
+      warn: (...args) => {
+        originalConsole.warn(...args);
+        addResult("warn", ...args);
+      },
+      error: (...args) => {
+        originalConsole.error(...args);
+        addResult("error", ...args);
+      }
+    };
+    try {
+      Object.assign(console, newConsole);
+      const result = new Function(code)();
+      if (result !== void 0) {
+        addResult("return", result);
+      }
+    } catch (e) {
+      addResult("error", e.name, e.message);
+    } finally {
+      Object.assign(console, originalConsole);
+    }
+  };
+  const handleClear = () => {
+    setResults([]);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Root, { isOpen: true, onClose, modalSize: "full-screen", children: /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Content, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Header, { headerTitle: "\uC2A4\uD06C\uB9BD\uD2B8 \uC2E4\uD589", showCloseButton: true }),
+    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles$3["debug-feature-panel"]} ${styles$3["script-executor-panel"]}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$3["script-executor-content"], children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$3["script-input-section"], children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "textarea",
+          {
+            className: styles$3["script-textarea"],
+            value: code,
+            onChange: (e) => setCode(e.target.value),
+            spellCheck: "false"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$3["script-actions"], children: [
+          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { variant: "neutral", appearance: "outline", size: "xsmall", onClick: handleExecute, children: "\uC2E4\uD589 (\u25B6)" }),
+          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { variant: "neutral", appearance: "outline", size: "xsmall", onClick: handleClear, children: "\uACB0\uACFC \uC9C0\uC6B0\uAE30" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$3["script-output-section"], children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$3["panel-header"], children: /* @__PURE__ */ jsxRuntime.jsx("h3", { children: "\uACB0\uACFC" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$3["log-list-container"], children: results.map((log) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$3["log-item"], children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$3["log-timestamp"], children: log.timestamp }),
+          /* @__PURE__ */ jsxRuntime.jsx(ResultMessage, { log })
+        ] }, log.id)) })
+      ] })
+    ] }) }) })
   ] }) });
-}
+};
+
+const setCookie = (name, value) => {
+  document.cookie = `${name}=${encodeURIComponent(value)};path=/`;
+};
+const removeCookie = (name) => {
+  document.cookie = `${name}=;path=/;expires=Thu, 01 Jan 1970 00:00:01 GMT;`;
+};
+const useStorage = (storageType) => {
+  const [items, setItems] = React.useState([]);
+  const loadItems = React.useCallback(() => {
+    const newItems = [];
+    if (storageType === "localStorage") {
+      for (let i = 0; i < localStorage.length; i++) {
+        const key = localStorage.key(i);
+        if (key) {
+          newItems.push({ key, value: localStorage.getItem(key) || "" });
+        }
+      }
+    } else {
+      const cookies = document.cookie.split(";");
+      cookies.forEach((cookie) => {
+        const parts = cookie.split("=");
+        const key = parts.shift()?.trim();
+        if (key) {
+          newItems.push({ key, value: decodeURIComponent(parts.join("=")) });
+        }
+      });
+    }
+    setItems(newItems);
+  }, [storageType]);
+  React.useEffect(() => {
+    loadItems();
+  }, [loadItems]);
+  const setItem = React.useCallback(
+    (key, value) => {
+      if (storageType === "localStorage") {
+        localStorage.setItem(key, value);
+      } else {
+        setCookie(key, value);
+      }
+      loadItems();
+    },
+    [storageType, loadItems]
+  );
+  const removeItem = React.useCallback(
+    (key) => {
+      if (storageType === "localStorage") {
+        localStorage.removeItem(key);
+      } else {
+        removeCookie(key);
+      }
+      loadItems();
+    },
+    [storageType, loadItems]
+  );
+  return { items, setItem, removeItem, loadItems };
+};
 
-const cx$3 = classNames.bind(styles$6);
-function JobSearchResult({ filteredJobs, onJobSelect, searchTerm }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$3("popular-jobs"), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cx$3("result-title"), children: [
-      "\uCD1D ",
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: filteredJobs.length }),
-      "\uAC74\uC758 \uAC80\uC0C9\uACB0\uACFC"
+const ValueDisplay = ({ value }) => {
+  try {
+    const parsed = JSON.parse(value);
+    if (typeof parsed === "object" && parsed !== null) {
+      return /* @__PURE__ */ jsxRuntime.jsx("pre", { className: styles$3["log-content"], children: JSON.stringify(parsed, null, 2) });
+    }
+  } catch (e) {
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$3["log-content"], children: value });
+};
+const EditableRow = ({ item, onSave, onRemove }) => {
+  const [isEditing, setIsEditing] = React.useState(false);
+  const [value, setValue] = React.useState(item.value);
+  const handleSave = () => {
+    onSave(item.key, value);
+    setIsEditing(false);
+  };
+  const handleEdit = () => {
+    setValue(item.value);
+    setIsEditing(true);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.Root, { children: /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Accordion.Item, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Accordion.HeaderButton, { children: [
+      " ",
+      item.key
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.Root, { children: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Radio.Root, { name: "job-selection", size: "small", className: cx$3("job-radio-root"), children: filteredJobs.map((job) => /* @__PURE__ */ jsxRuntime.jsxs(
-      salesFrontendDesignSystem.Accordion.Item,
-      {
-        id: `item-${job.occupationIndustryCode}`,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.HeaderDiv, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(
-            salesFrontendDesignSystem.Radio.Item,
-            {
-              id: `item-${job.occupationIndustryCode}`,
-              size: "small",
-              value: job.occupationIndustryCode,
-              onChange: () => {
-                onJobSelect(job);
-              },
-              children: highlightOnSearchKeyword(job.occupationIndustryName, searchTerm)
-            }
-          ) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.Content, { variant: "text", children: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Table, { variant: "horizontal", children: /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("th", { children: "\uD5E4\uB354 1" }),
-              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-24", children: "1\uD589 1\uBC88\uC9F8" }),
-              /* @__PURE__ */ jsxRuntime.jsx("th", { children: "\uD5E4\uB354 1-2" }),
-              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-24 ", children: "1\uD589 2\uBC88\uC9F8" })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("th", { children: "\uD5E4\uB354 2" }),
-              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "pl-24 pr-16", colSpan: 3, children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "d-flex-center-center", children: [
-                "2\uD589 1\uBC88\uC9F8 ",
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 pipe-left", children: "\uC11C\uBE0C\uD14D\uC2A4\uD2B8" }),
-                /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { variant: "neutral", size: "xsmall", appearance: "outline", children: "\uBC84\uD2BC\uBA85" })
-              ] }) })
-            ] })
-          ] }) }) })
-        ]
-      },
-      job.occupationIndustryCode
-    )) }) }),
-    filteredJobs.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      "`",
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: searchTerm }),
-      "`\uC5D0 \uB300\uD55C \uAC80\uC0C9\uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
+    /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Accordion.Content, { variant: "text", style: { flex: 1, display: "flex", flexDirection: "column" }, children: [
+      isEditing ? /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { variant: "neutral", appearance: "outline", size: "xsmall", onClick: handleSave, children: "Save" }) : /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { variant: "neutral", appearance: "outline", size: "xsmall", onClick: handleEdit, children: "Edit" }),
+      /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { variant: "neutral", appearance: "outline", size: "xsmall", onClick: () => onRemove(item.key), children: "Remove" }),
+      isEditing ? /* @__PURE__ */ jsxRuntime.jsx("textarea", { value, onChange: (e) => setValue(e.target.value) }) : /* @__PURE__ */ jsxRuntime.jsx(ValueDisplay, { value: item.value })
     ] })
   ] }) });
-}
+};
+const StoragePanel = ({ onClose, storageType }) => {
+  const { items, setItem, removeItem } = useStorage(storageType);
+  const [filter, setFilter] = React.useState("");
+  const filteredItems = React.useMemo(() => {
+    if (!filter) {
+      return items;
+    }
+    return items.filter(
+      (item) => item.key.toLowerCase().includes(filter.toLowerCase()) || item.value.toLowerCase().includes(filter.toLowerCase())
+    );
+  }, [items, filter]);
+  return /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Root, { isOpen: true, onClose, modalSize: "full-screen", children: /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Content, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Header, { headerTitle: storageType === "localStorage" ? "Local Storage" : "Cookies", showCloseButton: true }),
+    /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Body, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$3["panel-toolbar"], children: /* @__PURE__ */ jsxRuntime.jsx(
+        salesFrontendDesignSystem.FormField.TextField,
+        {
+          placeholder: "Search key or value...",
+          size: "xsmall",
+          value: filter,
+          onChange: (e) => setFilter(e.target.value),
+          rootProps: { style: { width: "100%" } }
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx("ul", { children: filteredItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(EditableRow, { item, onSave: setItem, onRemove: removeItem }) }, item.key)) })
+    ] })
+  ] }) });
+};
 
-const { TextField } = salesFrontendDesignSystem.FormField;
-const cx$2 = classNames.bind(styles$6);
-const { Option } = salesFrontendDesignSystem.Select;
-function JobSearch({
-  activeTab,
-  onTabChange,
-  searchTerm,
-  setSearchInput,
-  filteredJobs,
-  onJobSelect,
-  setSearchTerm,
-  searchInput,
-  firstCategory,
-  setFirstCategory,
-  secondCategory,
-  setSecondCategory,
-  firstCategoryList,
-  secondCategoryList
-}) {
-  const onKeyUp = (e) => {
-    if (e.key === "Enter") {
-      setSearchTerm(searchInput);
+const loginTypes = [
+  {
+    id: "fp",
+    label: "FP \uB85C\uADF8\uC778",
+    fields: [{ name: "employeeId", label: "\uC0AC\uBC88", type: "text", placeholder: "\uC0AC\uBC88\uC744 \uC785\uB825\uD558\uC138\uC694" }]
+  },
+  {
+    id: "customer",
+    label: "\uACE0\uAC1D \uB85C\uADF8\uC778",
+    fields: [
+      { name: "name", label: "\uC774\uB984", type: "text", placeholder: "\uC774\uB984" },
+      { name: "phone", label: "\uC804\uD654\uBC88\uD638", type: "tel", placeholder: "\uC804\uD654\uBC88\uD638" },
+      { name: "residentNumber", label: "\uC8FC\uBBFC\uBC88\uD638", type: "text", placeholder: "\uC8FC\uBBFC\uBC88\uD638 \uC55E 7\uC790\uB9AC" },
+      { name: "userId", label: "\uC544\uC774\uB514", type: "text", placeholder: "\uC544\uC774\uB514" },
+      { name: "password", label: "\uBE44\uBC00\uBC88\uD638", type: "password", placeholder: "\uBE44\uBC00\uBC88\uD638" }
+    ]
+  }
+];
+const menuItems = [
+  {
+    id: "network-log",
+    label: "\uB124\uD2B8\uC6CC\uD06C \uB85C\uADF8",
+    component: NetworkLog,
+    display: true
+  },
+  {
+    id: "console-log",
+    label: "\uCF58\uC194 \uB85C\uADF8 \uD655\uC778",
+    component: ConsoleLogPanel,
+    display: true
+  },
+  {
+    id: "local-storage",
+    label: "\uB85C\uCEEC \uC2A4\uD1A0\uB9AC\uC9C0 \uAD00\uB9AC",
+    // StoragePanel은 재사용 가능한 컴포넌트이므로, props를 통해 어떤 스토리지를 다룰지 지정합니다.
+    component: (props) => /* @__PURE__ */ jsxRuntime.jsx(StoragePanel, { ...props, storageType: "localStorage" }),
+    display: true
+  },
+  {
+    id: "cookie-management",
+    label: "\uCFE0\uD0A4 \uAD00\uB9AC",
+    component: (props) => /* @__PURE__ */ jsxRuntime.jsx(StoragePanel, { ...props, storageType: "cookie" }),
+    display: true
+  },
+  {
+    id: "quick-login",
+    label: "\uAC04\uD3B8 \uB85C\uADF8\uC778",
+    component: LoginPanel,
+    display: true
+    // 실제 표시는 DebugTool.tsx에서 onLogin prop 존재 여부에 따라 결정됩니다.
+  },
+  {
+    id: "script-executor",
+    label: "\uC2A4\uD06C\uB9BD\uD2B8 \uC2E4\uD589",
+    component: ScriptExecutorPanel,
+    display: true
+  },
+  {
+    id: "page-navigation",
+    label: "\uD398\uC774\uC9C0 \uC774\uB3D9",
+    component: PageNavigationPanel,
+    display: true
+  }
+];
+
+const useEnvironment = () => {
+  const [envInfo, setEnvInfo] = React.useState({
+    env: "prd"
+  });
+  React.useEffect(() => {
+    const { hostname } = window.location;
+    setEnvInfo({ env: salesFrontendUtils.getEnvironmentFromHostname(hostname) });
+  }, []);
+  return envInfo;
+};
+
+const DebugTool = ({ onLogin, envOverride, menuItemsOverride }) => {
+  React.useEffect(() => {
+    initializeConsoleLogOverride();
+    return () => {
+      restoreConsoleLog();
+    };
+  }, []);
+  const environment = useEnvironment();
+  const env = envOverride || environment.env;
+  const menuItems$1 = menuItemsOverride || menuItems;
+  const [isMenuOpen, setMenuOpen] = React.useState(false);
+  const [activeFeature, setActiveFeature] = React.useState(null);
+  const isVisible = ["local", "dev", "stg"].includes(env);
+  const handleMenuClick = (itemComponent) => {
+    setActiveFeature(() => itemComponent);
+    setMenuOpen(false);
+  };
+  const handleCloseFeature = () => {
+    setActiveFeature(null);
+  };
+  if (!isVisible) {
+    return null;
+  }
+  const toggleMenu = () => {
+    setMenuOpen((prev) => !prev);
+    if (!isMenuOpen) {
+      setActiveFeature(null);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      salesFrontendDesignSystem.Tab.Root,
+  const availableMenuItems = menuItems$1.filter(
+    (item) => item.display && // config에서 display가 true인 항목만 필터링합니다.
+    // 'quick-login' 기능은 onLogin prop이 제공된 경우에만 활성화합니다.
+    (item.id !== "quick-login" || item.id === "quick-login" && onLogin)
+  );
+  if (activeFeature) {
+    const FeatureComponent = activeFeature;
+    return /* @__PURE__ */ jsxRuntime.jsx(FeatureComponent, { onClose: handleCloseFeature, onLogin });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "debug-tool-container", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(FloatingButton, { onClick: toggleMenu }),
+    isMenuOpen && /* @__PURE__ */ jsxRuntime.jsx(
+      MenuPanel,
+      {
+        menuItems: availableMenuItems,
+        onMenuItemClick: handleMenuClick,
+        onClose: () => setMenuOpen(false)
+      }
+    )
+  ] });
+};
+
+const cx$3 = classNames.bind(styles$5);
+const { InputBox, Input } = salesFrontendDesignSystem.FormCore;
+const AddressSearchInitialText = () => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: cx$3("guide-title"), children: "\uC774\uB807\uAC8C \uAC80\uC0C9\uD574 \uBCF4\uC138\uC694." }),
+    /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: cx$3("guide"), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("li", { children: "\uB3C4\uB85C\uBA85/\uC9C0\uBA85\uACFC \uAC74\uBB3C\uBC88\uD638\uB97C \uD568\uAED8 \uC785\uB825\uD574\uC8FC\uC138\uC694" }),
+      /* @__PURE__ */ jsxRuntime.jsx("li", { children: "\uC608) 63\uB85C 50, \uC5EC\uC758\uB3C4\uB3D9 60" }),
+      /* @__PURE__ */ jsxRuntime.jsx("li", { children: "\uC9C0\uBA85\uC740 \uB3D9/\uC74D/\uBA74/\uB9AC\uB85C \uC785\uB825\uD574\uC8FC\uC138\uC694" }),
+      /* @__PURE__ */ jsxRuntime.jsx("li", { children: "\uC608) \uC5EC\uC758\uB3C4\uB3D9, \uC5ED\uC0BC\uB3D9" }),
+      /* @__PURE__ */ jsxRuntime.jsx("li", { children: "\uC6B0\uD3B8\uBC88\uD638 \uB2E4\uC12F\uC790\uB9AC\uB97C \uBAA8\uB450 \uC785\uB825\uD574\uC8FC\uC138\uC694" }),
+      /* @__PURE__ */ jsxRuntime.jsx("li", { children: "\uC608) 07345, 06232" })
+    ] })
+  ] });
+};
+const AddressSearchResult = ({
+  addressSearchList,
+  onChange,
+  searchKeyword,
+  selectedAddress
+}) => {
+  const [filterList, setFilterList] = React.useState([]);
+  React.useEffect(() => {
+    const filterList2 = addressSearchList.filter(
+      (item) => item.address.includes(searchKeyword) || item.oldAddress.includes(searchKeyword)
+    ) || [];
+    setFilterList(filterList2);
+  }, [addressSearchList, searchKeyword]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cx$3("guide-title"), children: [
+      "\uCD1D ",
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: filterList.length }),
+      "\uAC74\uC758 \uAC80\uC0C9\uACB0\uACFC"
+    ] }),
+    filterList.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+      salesFrontendDesignSystem.RadioGroup,
       {
-        defaultValue: activeTab,
-        onValueChange: onTabChange,
-        scroll: "fixed",
-        size: "small",
-        variant: "sub",
-        style: { gap: 0, overflow: "visible" },
-        children: JOB_SEARCH_TABS.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Tab.Item, { value: tab.value, children: tab.label }, tab.value))
+        items: filterList.map((item) => ({
+          value: item.address,
+          select: item.address === selectedAddress?.address && item.zipCode === selectedAddress?.zipCode,
+          label: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$3("search-result"), children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$3("zipcode"), children: [
+              " ",
+              highlightOnSearchKeyword(item.zipCode, searchKeyword)
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$3("divider") }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$3("address-info"), children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$3("address"), children: highlightOnSearchKeyword(item.address, searchKeyword) }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$3("old-address"), children: highlightOnSearchKeyword(item.oldAddress, searchKeyword) })
+            ] })
+          ] }),
+          id: item.address
+        })),
+        className: cx$3("radio-group"),
+        name: "address-search",
+        size: "medium",
+        defaultValue: "",
+        onChange
       }
     ),
+    filterList.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      "`",
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: searchKeyword }),
+      "`\uC5D0 \uB300\uD55C \uAC80\uC0C9\uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
+    ] })
+  ] });
+};
+const AddressSearchDetailInput = ({
+  selectedAddress,
+  onDetailChange,
+  step,
+  detailAddressInput
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        " ",
+        selectedAddress.zipCode
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        "|",
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: `${selectedAddress.address}` })
+      ] })
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      activeTab === "jobName" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$2("favorite-jobs-section"), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.FormField.Label, { id: "detail", style: { width: "90px" }, children: "\uC0C1\uC138\uC8FC\uC18C" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Input,
+        {
+          placeholder: "\uC0C1\uC138\uC8FC\uC18C \uC785\uB825",
+          onChange: onDetailChange,
+          size: "large",
+          value: detailAddressInput,
+          ...step === "detail-input" && { autoFocus: true }
+        }
+      )
+    ] })
+  ] });
+};
+function AddressComponent({ isOpen, onClose, setValue }) {
+  const {
+    onAddressSearchClear,
+    addressSearchKeyword,
+    addressSearchStep,
+    onAddressSearchNext,
+    nextButtonDisabled,
+    detailAddressInput,
+    addressSearchList,
+    onSearch,
+    onKeyUp,
+    onSelectChange,
+    setDetail,
+    search,
+    searchInput,
+    selectedAddress
+  } = useSearchAddress({
+    setValue,
+    onClose,
+    isOpen
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Root, { isOpen, onClose, modalSize: "full-screen", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Overlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Content, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Header, { headerTitle: "\uC8FC\uC18C \uAC80\uC0C9", showCloseButton: true }),
+      /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Body, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          TextField,
+          InputBox,
           {
-            placeholder: "\uC9C1\uC885\uBA85 \uAC80\uC0C9",
-            value: searchInput,
-            onKeyUp,
-            onChange: (e) => setSearchInput(e.target.value),
-            className: styles$6.searchInput,
-            size: "medium",
-            rootProps: {
-              endElement: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Icon, { name: "sub-ui/search", onClick: () => setSearchTerm(searchInput) }),
-              onClear: () => {
-                setSearchTerm("");
-                setSearchInput("");
+            clearable: true,
+            endElement: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Icon, { name: "sub-ui/search", onClick: search }),
+            onClear: onAddressSearchClear,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              Input,
+              {
+                ...addressSearchStep !== "detail-input" && { autoFocus: true },
+                onChange: onSearch,
+                onKeyUp,
+                value: searchInput,
+                placeholder: "\uC9C0\uBC88, \uB3C4\uB85C\uBA85, \uAC74\uBB3C\uBA85, \uC6B0\uD3B8\uBC88\uD638 \uC785\uB825",
+                size: "large"
               }
-            }
+            )
           }
         ),
-        !searchTerm && /* @__PURE__ */ jsxRuntime.jsx(JobSearchFavorite, { filteredJobs, onJobSelect }),
-        searchTerm && /* @__PURE__ */ jsxRuntime.jsx(JobSearchResult, { filteredJobs, onJobSelect, searchTerm })
+        addressSearchStep === "initial" && /* @__PURE__ */ jsxRuntime.jsx(AddressSearchInitialText, {}),
+        addressSearchStep === "search-result" && /* @__PURE__ */ jsxRuntime.jsx(
+          AddressSearchResult,
+          {
+            onChange: onSelectChange,
+            addressSearchList: addressSearchList || [],
+            searchKeyword: addressSearchKeyword,
+            selectedAddress
+          }
+        ),
+        addressSearchStep === "detail-input" && selectedAddress && /* @__PURE__ */ jsxRuntime.jsx(
+          AddressSearchDetailInput,
+          {
+            selectedAddress,
+            onDetailChange: setDetail,
+            step: addressSearchStep,
+            detailAddressInput
+          }
+        )
       ] }),
-      activeTab === "jobCode" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$2("select-jobs-section"), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$2("category-section"), children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            salesFrontendDesignSystem.Select,
-            {
-              name: "first_category",
-              onChange: (value) => {
-                setFirstCategory(value);
-                setSecondCategory("");
-              },
-              placeholder: "\uB300\uBD84\uB958 \uC120\uD0DD",
-              rootProps: {
-                style: {
-                  // width: '300px'
-                }
-              },
-              size: "large",
-              value: firstCategory,
-              children: firstCategoryList.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(Option, { value: option.occupationIndustryCode, children: option.occupationIndustryName }, `${index}-${option.occupationIndustryCode}`))
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            salesFrontendDesignSystem.Select,
-            {
-              name: "second_category",
-              onChange: setSecondCategory,
-              placeholder: "\uC911\uBD84\uB958 \uC120\uD0DD",
-              rootProps: {
-                style: {
-                  // width: '300px'
-                }
-              },
-              size: "large",
-              value: secondCategory,
-              disabled: !firstCategory,
-              children: secondCategoryList.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(Option, { value: option.occupationIndustryCode, children: option.occupationIndustryName }, `${index}-${option.occupationIndustryCode}`))
-            }
-          )
-        ] }),
-        firstCategory && secondCategory && /* @__PURE__ */ jsxRuntime.jsx(JobSearchCategory, { filteredJobs, onJobSelect, searchTerm })
-      ] })
+      /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Footer, { children: addressSearchStep !== "initial" && /* @__PURE__ */ jsxRuntime.jsxs(
+        salesFrontendDesignSystem.Button,
+        {
+          onClick: onAddressSearchNext,
+          variant: "primary",
+          size: "medium",
+          appearance: "filled",
+          width: "full",
+          disabled: nextButtonDisabled,
+          children: [
+            addressSearchStep === "search-result" && "\uB2E4\uC74C(1/2)",
+            addressSearchStep === "detail-input" && "\uD655\uC778(2/2)"
+          ]
+        }
+      ) })
     ] })
-  ] });
-}
-
-const initData = [
-  {
-    occupationIndustryCode: "430101",
-    occupationIndustryName: "\uD68C\uC0AC \uC0AC\uBB34\uC9C1 \uC885\uC0AC\uC790",
-    occupationTypeCode: null,
-    historySequence: 0
-  },
-  {
-    occupationIndustryCode: "400301",
-    occupationIndustryName: "\uACBD\uC601\uC9C0\uC6D0 \uC0AC\uBB34\uC9C1 \uAD00\uB9AC\uC790",
-    occupationTypeCode: null,
-    historySequence: 0
-  },
-  {
-    occupationIndustryCode: "510201",
-    occupationIndustryName: "\uC804\uC5C5\uC8FC\uBD80",
-    occupationTypeCode: null,
-    historySequence: 0
-  },
-  {
-    occupationIndustryCode: "442501",
-    occupationIndustryName: "\uC8FC\uBC29\uC7A5 \uBC0F \uC870\uB9AC\uC0AC(\uC120\uBC15 \uC870\uB9AC\uC0AC \uC81C\uC678)",
-    occupationTypeCode: null,
-    historySequence: 0
-  },
-  {
-    occupationIndustryCode: "450303",
-    occupationIndustryName: "\uBCF4\uD5D8\uC124\uACC4\uC0AC(\uB2F9\uC0AC)",
-    occupationTypeCode: null,
-    historySequence: 0
-  }
-];
-const useJobSearch = () => {
-  const [activeTab, setActiveTab] = React.useState(JOB_SEARCH_TABS[0]?.value ?? "");
-  const [selectedJob, setSelectedJob] = React.useState(null);
-  const [searchTerm, setSearchTerm] = React.useState("");
+  ] }) });
+}
+
+function useSearchAddress({ setValue, onClose, isOpen }) {
+  const [searchKeyword, setSearchKeyword] = React.useState("");
+  const [step, setStep] = React.useState("initial");
+  const [selectedAddress, setSelectedAddress] = React.useState(null);
   const [searchInput, setSearchInput] = React.useState("");
-  const handleJobSelect = (job) => {
-    setSelectedJob(job);
+  const [detailAddressInput, setDetailAddressInput] = React.useState("");
+  const { data: addressList } = method.useSearchModalAddressQuery({ searchKeyword });
+  const [nextButtonDisabled, setNextButtonDisabled] = React.useState(false);
+  const onNext = () => {
+    if (step === "search-result") {
+      setStep("detail-input");
+      setNextButtonDisabled(true);
+    } else {
+      setValue({
+        address: selectedAddress?.address || "",
+        oldAddress: selectedAddress?.oldAddress || "",
+        zipCode: selectedAddress?.zipCode || "",
+        detail: detailAddressInput || ""
+      });
+      onClose();
+    }
   };
-  const [firstCategory, setFirstCategory] = React.useState("");
-  const [secondCategory, setSecondCategory] = React.useState("");
-  const [jobList, setJobList] = React.useState(initData);
-  const [firstCategoryList, setFirstCategoryList] = React.useState([]);
-  const [secondCategoryList, setSecondCategoryList] = React.useState([]);
-  const { data } = method.useSearchOccupationQuery({
-    occupationMajorCategoryCode: firstCategory,
-    occupationSearchTypeCode: searchTerm ? "4" : "3",
-    occupationSubCategoryCode: secondCategory,
-    searchOccupationIndustryName: searchTerm
-  });
-  const { data: firstCategoryData } = method.useSearchOccupationQuery({
-    occupationMajorCategoryCode: "",
-    occupationSearchTypeCode: "1",
-    occupationSubCategoryCode: "",
-    searchOccupationIndustryName: ""
-  });
-  const { data: secondCategoryData } = method.useSearchOccupationQuery({
-    occupationMajorCategoryCode: firstCategory,
-    occupationSearchTypeCode: "2",
-    occupationSubCategoryCode: "",
-    searchOccupationIndustryName: ""
-  });
-  React.useEffect(() => {
-    if (data && searchTerm && activeTab === "jobName") {
-      const filteredJobs = data.data.occupationList.filter((job) => job.occupationIndustryName.includes(searchTerm));
-      setJobList(filteredJobs);
-    } else if (!data && searchTerm && activeTab === "jobName") {
-      setJobList([]);
-    } else if (!searchTerm && activeTab === "jobName") {
-      setJobList(initData);
-    } else if (activeTab === "jobCode" && firstCategory && secondCategory) {
-      setJobList(data?.data.occupationList || []);
+  const onSearch = (e) => {
+    const typeStr = e.target.value;
+    setSearchInput(typeStr);
+  };
+  const search = () => {
+    if (searchInput === "") {
+      onClear();
+      return;
     }
-  }, [searchTerm, data, firstCategory, secondCategory, secondCategoryData, activeTab]);
-  React.useEffect(() => {
-    console.log("jobList", jobList);
-  }, [jobList]);
-  React.useEffect(() => {
-    if (firstCategoryData) {
-      setFirstCategoryList(firstCategoryData.data.occupationList);
+    if (searchInput && searchInput.length > 1) {
+      setSearchKeyword(searchInput);
+      setStep("search-result");
+      setSelectedAddress(null);
+      setDetailAddressInput("");
+      setNextButtonDisabled(true);
     }
-  }, [firstCategoryData]);
-  React.useEffect(() => {
-    if (secondCategoryData) {
-      setSecondCategoryList(secondCategoryData.data.occupationList);
+  };
+  const onKeyUp = (e) => {
+    if (e.key === "Enter") {
+      search();
     }
-  }, [secondCategoryData]);
-  return {
-    activeTab,
-    setActiveTab,
-    selectedJob,
-    searchTerm,
-    setSearchTerm,
-    handleJobSelect,
-    filteredJobs: jobList,
-    searchInput,
-    setSearchInput,
-    firstCategory,
-    setFirstCategory,
-    secondCategory,
-    setSecondCategory,
-    secondCategoryList,
-    firstCategoryList
   };
-};
-function useJobSearchModal() {
-  const {
-    activeTab,
-    setActiveTab,
-    searchTerm,
-    setSearchTerm,
-    filteredJobs,
-    handleJobSelect,
-    selectedJob,
-    searchInput,
-    setSearchInput,
-    firstCategory,
-    setFirstCategory,
-    secondCategory,
-    setSecondCategory,
-    firstCategoryList,
-    secondCategoryList
-  } = useJobSearch();
-  const { isOpen, openModal, closeModal } = salesFrontendDesignSystem.useModalState();
-  const onTabChange = (value) => {
-    setSearchTerm("");
-    setFirstCategory("");
-    setSecondCategory("");
-    setActiveTab(value);
+  const onSelectChange = (e) => {
+    const selectedAddress2 = e.target.value;
+    if (selectedAddress2) {
+      const adr = addressList?.find((addr) => {
+        return addr.address === selectedAddress2;
+      });
+      setSelectedAddress(adr || null);
+      setNextButtonDisabled(false);
+    }
+  };
+  const onClear = React.useCallback(() => {
+    setSearchKeyword("");
+    setSearchInput("");
+    setSelectedAddress(null);
+    setDetailAddressInput("");
+    setStep("initial");
+  }, []);
+  const setDetail = (e) => {
+    const detail = e.target.value;
+    setDetailAddressInput(detail);
+    if (detail) {
+      setNextButtonDisabled(false);
+    } else {
+      setNextButtonDisabled(true);
+    }
   };
+  React.useEffect(() => {
+    if (isOpen) {
+      setSelectedAddress(null);
+      setDetailAddressInput("");
+      setStep("initial");
+      setSearchKeyword("");
+    }
+  }, [isOpen]);
   return {
-    JobSearchModal: /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Root, { isOpen, onClose: closeModal, modalSize: "xlarge", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Overlay, {}),
-      /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Content, { style: { height: "697px" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Header, { headerTitle: "\uC9C1\uC885 \uAC80\uC0C9", showCloseButton: true }),
-        /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Body, { raw: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-          JobSearch,
-          {
-            firstCategory,
-            firstCategoryList,
-            secondCategoryList,
-            setFirstCategory,
-            secondCategory,
-            activeTab,
-            onTabChange,
-            searchTerm,
-            setSearchInput,
-            filteredJobs: filteredJobs || [],
-            onJobSelect: handleJobSelect,
-            searchInput,
-            setSearchTerm,
-            setSecondCategory
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { variant: "primary", size: "medium", appearance: "filled", width: "full", onClick: closeModal, children: "\uD655\uC778" }) })
-      ] })
-    ] }),
-    JobSearchComponent: /* @__PURE__ */ jsxRuntime.jsx(
-      JobSearch,
-      {
-        firstCategoryList,
-        secondCategoryList,
-        firstCategory,
-        setFirstCategory,
-        secondCategory,
-        setSecondCategory,
-        activeTab,
-        onTabChange,
-        searchTerm,
-        setSearchInput,
-        filteredJobs: filteredJobs || [],
-        onJobSelect: handleJobSelect,
-        searchInput,
-        setSearchTerm
-      }
-    ),
-    isJobSearchOpen: isOpen,
-    openJobSearchModal: openModal,
-    closeJobSearchModal: closeModal,
-    selectedJob
+    onAddressSearchClear: onClear,
+    onAddressSearchNext: onNext,
+    addressSearchKeyword: searchKeyword,
+    addressSearchList: addressList,
+    addressSearchStep: step,
+    selectedAddress,
+    addressSearchOnValueChange: onSelectChange,
+    nextButtonDisabled,
+    detailAddressInput,
+    onSearch,
+    onKeyUp,
+    onSelectChange,
+    setDetail,
+    search,
+    searchInput
   };
 }
+const useAddressComponent = () => {
+  const [fullAddress, setFullAddress] = React.useState(null);
+  const { isOpen, closeModal, openModal } = salesFrontendDesignSystem.useModalState();
+  const AddressSearchComponent = () => /* @__PURE__ */ jsxRuntime.jsx(AddressComponent, { isOpen, onClose: closeModal, setValue: setFullAddress });
+  return {
+    fullAddress,
+    openModal,
+    AddressSearchComponent
+  };
+};
+
+const cx$2 = classNames.bind(styles$6);
+const JobVehicleSearchGrade = ({ riskGrade, hospitalizationGrade }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$2("grade-section"), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$2("icon-title"), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Icon, { name: "illust/grade" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-title5 text-body", children: "\uB4F1\uAE09" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: cx$2("grade-list"), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$2("grade"), children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\uC704\uD5D8\uB4F1\uAE09" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary typo-subtitle3", children: riskGrade || "-" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$2("grade"), children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\uC785\uC6D0\uB4F1\uAE09" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary typo-subtitle3", children: hospitalizationGrade || "-" })
+      ] })
+    ] })
+  ] });
+};
 
 const cx$1 = classNames.bind(styles$7);
 function VehicleSearch({ vehicles, onVehicleSelect }) {
@@ -2373,7 +2513,7 @@ const useJobVehicleSearch = () => {
   };
 };
 
-const cx = classNames.bind(styles$5);
+const cx = classNames.bind(styles$6);
 function useJobVehicleSearchModal() {
   const {
     selectedVehicle,
@@ -2466,14 +2606,29 @@ function useJobVehicleSearchModal() {
   };
 }
 
+const JobSearchModal = ({ onClose }) => {
+  const { JobSearchComponent } = useJobSearchModal();
+  return /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Root, { isOpen: true, onClose, modalSize: "xlarge", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Overlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(salesFrontendDesignSystem.Modal.Content, { style: { height: "697px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Header, { headerTitle: "\uC9C1\uC885 \uAC80\uC0C9", showCloseButton: true }),
+      /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Body, { raw: true, children: JobSearchComponent }),
+      /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Modal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Button, { variant: "primary", size: "medium", appearance: "filled", width: "full", onClick: onClose, children: "\uD655\uC778" }) })
+    ] })
+  ] });
+};
+
 exports.Attachment = Attachment;
 exports.DebugTool = DebugTool;
 exports.FormCheckbox = FormCheckbox;
 exports.FormCheckboxButton = FormCheckboxButton;
 exports.FormDatePicker = FormDatePicker;
 exports.FormDateRangePicker = FormDateRangePicker;
+exports.FormSearchJobField = FormSearchJobField;
 exports.FormSegmentGroup = FormSegmentGroup;
+exports.FormSelect = FormSelect;
 exports.FormTextField = FormTextField;
+exports.JobSearchModal = JobSearchModal;
 exports.StepIndicator = StepIndicator;
 exports.resize = resize;
 exports.testSignatureBase64Data = testSignatureBase64Data;