sales-frontend-components 0.0.34 → 0.0.36

package/dist/form/form-signautre/form-signature.module.scss

@@ -0,0 +1,39 @@
+@use 'sales-frontend-design-system/design-system-context' as *;
+
+.form-label {
+  display: flex;
+  gap: padding(10);
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: padding(xxxsmall);
+}
+
+.form-label-button-box {
+  display: flex;
+  gap: padding(xxsmall);
+}
+
+.form-signature {
+  background: colors(surface-neutral_1);
+  border: 1px solid colors(border-neutral_3);
+  border-radius: radius-basic(medium);
+
+  &.is-error {
+    border-color: colors(additional-semantic_2);
+  }
+}
+
+.error-msg {
+  padding: padding(xxxsmall) 0;
+  color: colors(additional-semantic_2);
+
+  @include apply-typography(body2);
+}
+
+.error-msg-box {
+  display: flex;
+  flex-direction: column;
+  gap: padding(xxxsmall);
+  justify-content: space-between;
+  padding-top: padding(xsmall);
+}

package/dist/form/form-signautre/form.signature.module.scss

@@ -0,0 +1,39 @@
+@use 'sales-frontend-design-system/design-system-context' as *;
+
+.form-label {
+  display: flex;
+  gap: padding(10);
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: padding(xxxsmall);
+}
+
+.form-label-button-box {
+  display: flex;
+  gap: padding(xxsmall);
+}
+
+.form-signature {
+  background: colors(surface-neutral_1);
+  border: 1px solid colors(border-neutral_3);
+  border-radius: radius-basic(medium);
+
+  &.is-error {
+    border-color: colors(additional-semantic_2);
+  }
+}
+
+.error-msg {
+  padding: padding(xxxsmall) 0;
+  color: colors(additional-semantic_2);
+
+  @include apply-typography(body2);
+}
+
+.error-msg-box {
+  display: flex;
+  flex-direction: column;
+  gap: padding(xxxsmall);
+  justify-content: space-between;
+  padding-top: padding(xsmall);
+}

package/dist/index.cjs.js

@@ -6,7 +6,8 @@ var styles = require('./data-table/data-table.module.scss');
 var salesFrontendDesignSystem = require('sales-frontend-design-system');
 var React = require('react');
 var reactHookForm = require('react-hook-form');
-var styles$1 = require('./step-indicator/step-indicator.module.scss');
+var styles$1 = require('./form/form-signautre/form-signature.module.scss');
+var styles$2 = require('./step-indicator/step-indicator.module.scss');
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -99,7 +100,7 @@ function requireBind () {
 var bindExports = requireBind();
 var classNames = /*@__PURE__*/getDefaultExportFromCjs(bindExports);
 
-const cx$1 = classNames.bind(styles);
+const cx$2 = classNames.bind(styles);
 const DataTable = ({ table, isError, isLoading, msgText, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     salesFrontendDesignSystem.Table,
@@ -114,7 +115,7 @@ const DataTable = ({ table, isError, isLoading, msgText, ...props }) => {
           "th",
           {
             colSpan: header.colSpan,
-            className: cx$1({
+            className: cx$2({
               "is-resizing": header.column.getIsResizing()
               // 3. 리사이징 중일 때 클래스 추가
             }),
@@ -126,7 +127,7 @@ const DataTable = ({ table, isError, isLoading, msgText, ...props }) => {
                 {
                   onMouseDown: header.getResizeHandler(),
                   onTouchStart: header.getResizeHandler(),
-                  className: cx$1("resize-handle")
+                  className: cx$2("resize-handle")
                 }
               )
             ]
@@ -147,7 +148,7 @@ const DataTable = ({ table, isError, isLoading, msgText, ...props }) => {
             },
             cell.id
           )) }, row.id)
-        )) : /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { className: cx$1("feedback-cell"), colSpan: table.getVisibleLeafColumns().length, children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Loading..." }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: msgText || (isError ? "Error" : "No data") }) }) }) })
+        )) : /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { className: cx$2("feedback-cell"), colSpan: table.getVisibleLeafColumns().length, children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Loading..." }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: msgText || (isError ? "Error" : "No data") }) }) }) })
       ]
     }
   );
@@ -296,7 +297,398 @@ const FormTextField = ({
   );
 };
 
-const cx = classNames.bind(styles$1);
+const cx$1 = classNames.bind(styles$1);
+const FormSignature = ({
+  label,
+  error,
+  errorMsg,
+  onSubmit,
+  onRecentSignatureLoad,
+  onChangeSignature,
+  onReset,
+  isShowRecentSignatureButton,
+  isShowResetButton,
+  ref,
+  canvasWidth = 632,
+  canvasHeight = 230
+}) => {
+  const canvasRef = React.useRef(null);
+  const containerRef = React.useRef(null);
+  const [isDrawing, setIsDrawing] = React.useState(false);
+  const [isEmpty, setIsEmpty] = React.useState(true);
+  const [signatureData, setSignatureData] = React.useState("");
+  const [isLoadingSignature, setIsLoadingSignature] = React.useState(false);
+  const [isMousePressed, setIsMousePressed] = React.useState(false);
+  const [totalLineLength, setTotalLineLength] = React.useState(0);
+  const [lastPoint, setLastPoint] = React.useState(null);
+  const [strokeLengths, setStrokeLengths] = React.useState([]);
+  const [currentStrokeLength, setCurrentStrokeLength] = React.useState(0);
+  React.useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.strokeStyle = "#000000";
+    ctx.lineWidth = Math.max(1, canvasWidth / 400);
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+  }, [canvasWidth]);
+  React.useEffect(() => {
+    const handleGlobalMouseUp = () => {
+      setIsMousePressed(false);
+      if (isDrawing) {
+        stopDrawing();
+      }
+    };
+    document.addEventListener("mouseup", handleGlobalMouseUp);
+    return () => {
+      document.removeEventListener("mouseup", handleGlobalMouseUp);
+    };
+  }, [isDrawing]);
+  const getCanvasCoordinates = React.useCallback((e) => {
+    const canvas = canvasRef.current;
+    if (!canvas) return { x: 0, y: 0 };
+    const rect = canvas.getBoundingClientRect();
+    const scaleX = canvas.width / rect.width;
+    const scaleY = canvas.height / rect.height;
+    return {
+      x: (e.clientX - rect.left) * scaleX,
+      y: (e.clientY - rect.top) * scaleY
+    };
+  }, []);
+  const calculateDistance = React.useCallback((point1, point2) => {
+    return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2));
+  }, []);
+  const startDrawing = React.useCallback(
+    (e) => {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const { x, y } = getCanvasCoordinates(e);
+      setIsDrawing(true);
+      setIsMousePressed(true);
+      setIsEmpty(false);
+      setLastPoint({ x, y });
+      setCurrentStrokeLength(0);
+      ctx.beginPath();
+      ctx.moveTo(x, y);
+    },
+    [getCanvasCoordinates]
+  );
+  const draw = React.useCallback(
+    (e) => {
+      if (!isDrawing) return;
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const { x, y } = getCanvasCoordinates(e);
+      const currentPoint = { x, y };
+      if (lastPoint) {
+        const distance = calculateDistance(lastPoint, currentPoint);
+        if (distance > 0.5) {
+          setCurrentStrokeLength((prev) => prev + distance);
+          setTotalLineLength((prev) => prev + distance);
+        }
+      }
+      ctx.lineTo(x, y);
+      ctx.stroke();
+      setLastPoint(currentPoint);
+      const data = canvas.toDataURL();
+      setSignatureData(data);
+      onChangeSignature?.();
+    },
+    [isDrawing, getCanvasCoordinates, calculateDistance, lastPoint, onChangeSignature]
+  );
+  const stopDrawing = React.useCallback(() => {
+    if (isDrawing && currentStrokeLength > 0) {
+      setStrokeLengths((prev) => [...prev, currentStrokeLength]);
+    }
+    setIsDrawing(false);
+    setLastPoint(null);
+  }, [isDrawing, currentStrokeLength]);
+  const handleMouseEnter = React.useCallback(
+    (e) => {
+      if (isMousePressed && !isDrawing) {
+        const canvas = canvasRef.current;
+        if (!canvas) return;
+        const ctx = canvas.getContext("2d");
+        if (!ctx) return;
+        const { x, y } = getCanvasCoordinates(e);
+        setIsDrawing(true);
+        setLastPoint({ x, y });
+        ctx.beginPath();
+        ctx.moveTo(x, y);
+      }
+    },
+    [isMousePressed, isDrawing, getCanvasCoordinates]
+  );
+  const handleMouseLeave = React.useCallback(() => {
+    if (isDrawing) {
+      setIsDrawing(false);
+      setLastPoint(null);
+    }
+  }, [isDrawing]);
+  const clearSignature = React.useCallback(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+    setIsEmpty(true);
+    setSignatureData("");
+    setTotalLineLength(0);
+    setLastPoint(null);
+    setStrokeLengths([]);
+    setCurrentStrokeLength(0);
+  }, [canvasWidth, canvasHeight]);
+  const loadSignatureToCanvas = React.useCallback(
+    (imageDataURL) => {
+      return new Promise((resolve, reject) => {
+        const canvas = canvasRef.current;
+        if (!canvas) {
+          reject(new Error("Canvas not found"));
+          return;
+        }
+        const ctx = canvas.getContext("2d");
+        if (!ctx) {
+          reject(new Error("Canvas context not found"));
+          return;
+        }
+        const img = new Image();
+        img.onload = () => {
+          ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+          ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight);
+          setIsEmpty(false);
+          setSignatureData(imageDataURL);
+          setTotalLineLength(0);
+          setStrokeLengths([]);
+          setCurrentStrokeLength(0);
+          setLastPoint(null);
+          resolve();
+        };
+        img.onerror = () => {
+          reject(new Error("Failed to load signature image"));
+        };
+        img.src = imageDataURL;
+      });
+    },
+    [canvasWidth, canvasHeight]
+  );
+  const validateForm = React.useCallback(() => {
+    return !(!signatureData || isEmpty);
+  }, [signatureData, isEmpty]);
+  const getSignatureDataObject = React.useCallback(() => {
+    if (!signatureData || isEmpty) {
+      return null;
+    }
+    return {
+      signature: signatureData,
+      totalLineLength: Math.round(totalLineLength),
+      strokeCount: strokeLengths.length,
+      strokeLengths: strokeLengths.map((length) => Math.round(length)),
+      averageStrokeLength: strokeLengths.length > 0 ? Math.round(totalLineLength / strokeLengths.length) : 0
+    };
+  }, [signatureData, isEmpty, totalLineLength, strokeLengths]);
+  const handleSubmit = React.useCallback(() => {
+    if (!validateForm()) return;
+    const data = getSignatureDataObject();
+    if (data) {
+      console.log("\uC81C\uCD9C\uB41C \uB370\uC774\uD130:", data);
+      onSubmit(data);
+    }
+  }, [validateForm, getSignatureDataObject, onSubmit]);
+  const handleReset = React.useCallback(() => {
+    clearSignature();
+    onReset?.();
+  }, [clearSignature, onReset]);
+  const handleRecentSignatureLoad = React.useCallback(async () => {
+    if (!onRecentSignatureLoad) return;
+    try {
+      setIsLoadingSignature(true);
+      const loadedSignature = await onRecentSignatureLoad();
+      if (loadedSignature) {
+        await loadSignatureToCanvas(loadedSignature);
+        console.log("\uCD5C\uADFC \uC11C\uBA85\uC744 \uC131\uACF5\uC801\uC73C\uB85C \uBD88\uB7EC\uC654\uC2B5\uB2C8\uB2E4.");
+      } else {
+        alert("\uBD88\uB7EC\uC62C \uCD5C\uADFC \uC11C\uBA85\uC774 \uC5C6\uC2B5\uB2C8\uB2E4.");
+      }
+    } catch (error2) {
+      console.error("\uCD5C\uADFC \uC11C\uBA85 \uBD88\uB7EC\uC624\uAE30 \uC2E4\uD328:", error2);
+      alert("\uCD5C\uADFC \uC11C\uBA85\uC744 \uBD88\uB7EC\uC624\uB294\uB370 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4.");
+    } finally {
+      setIsLoadingSignature(false);
+    }
+  }, [onRecentSignatureLoad, loadSignatureToCanvas]);
+  React.useImperativeHandle(
+    ref,
+    () => ({
+      submit: handleSubmit,
+      clear: clearSignature,
+      getSignatureData: getSignatureDataObject,
+      isValid: validateForm
+    }),
+    [handleSubmit, clearSignature, getSignatureDataObject, validateForm]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$1("form-label"), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "typo-subtitle3 text-body_1", children: label }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$1("form-label-button-box"), children: [
+        isShowResetButton && /* @__PURE__ */ jsxRuntime.jsx(
+          salesFrontendDesignSystem.Button,
+          {
+            appearance: "filled",
+            variant: "neutral",
+            size: "xsmall",
+            onClick: handleReset,
+            className: "text-nowrap-i",
+            disabled: isEmpty,
+            children: "\uB2E4\uC2DC \uC791\uC131"
+          }
+        ),
+        isShowRecentSignatureButton && /* @__PURE__ */ jsxRuntime.jsx(
+          salesFrontendDesignSystem.Button,
+          {
+            appearance: "filled",
+            variant: "neutral",
+            size: "xsmall",
+            className: "text-nowrap-i",
+            onClick: handleRecentSignatureLoad,
+            disabled: isLoadingSignature,
+            children: isLoadingSignature ? "\uBD88\uB7EC\uC624\uB294 \uC911..." : "\uCD5C\uADFC \uC131\uBA85 \uBD88\uB7EC\uC624\uAE30"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$1("form-signature", error && "is-error"), ref: containerRef, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "canvas",
+      {
+        ref: canvasRef,
+        width: canvasWidth,
+        height: canvasHeight,
+        className: "border border-gray-200 rounded cursor-crosshair bg-white",
+        style: { width: "100%", height: `${canvasHeight}px` },
+        onMouseDown: startDrawing,
+        onMouseMove: draw,
+        onMouseUp: stopDrawing,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave
+      }
+    ) }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$1("error-msg-box"), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$1("error-msg"), children: errorMsg || "\uC11C\uBA85\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694." }) })
+  ] });
+};
+
+const useFormSignature = ({ onSubmit, onError, onClear, minLength = 100 } = {}) => {
+  const signatureRef = React.useRef(null);
+  const [signatureData, setSignatureData] = React.useState(null);
+  const [isError, setIsError] = React.useState(false);
+  const [errorMessage, setErrorMessage] = React.useState("");
+  const [isLoadedFromRecent, setIsLoadedFromRecent] = React.useState(false);
+  const handleSignatureSubmit = React.useCallback(
+    (data) => {
+      setSignatureData(data);
+      setIsError(false);
+      setErrorMessage("");
+      onSubmit?.(data);
+    },
+    [onSubmit]
+  );
+  const submit = React.useCallback(() => {
+    try {
+      if (!signatureRef.current?.isValid()) {
+        setIsError(true);
+        setErrorMessage("\uC11C\uBA85\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694.");
+        return false;
+      }
+      const data = signatureRef.current.getSignatureData();
+      if (!data) {
+        setIsError(true);
+        setErrorMessage("\uC11C\uBA85 \uB370\uC774\uD130\uB97C \uAC00\uC838\uC62C \uC218 \uC5C6\uC2B5\uB2C8\uB2E4.");
+        return false;
+      }
+      if (!isLoadedFromRecent && data.totalLineLength < minLength) {
+        setIsError(true);
+        setErrorMessage(`\uC11C\uBA85\uC744 \uB2E4\uC2DC \uD655\uC778\uD574 \uC8FC\uC138\uC694.`);
+        return false;
+      }
+      setIsError(false);
+      setErrorMessage("");
+      signatureRef.current.submit();
+      return true;
+    } catch (error) {
+      const errorObj = error instanceof Error ? error : new Error("\uC54C \uC218 \uC5C6\uB294 \uC624\uB958\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4.");
+      setIsError(true);
+      setErrorMessage(errorObj.message);
+      onError?.(errorObj);
+      return false;
+    }
+  }, [onError, minLength, isLoadedFromRecent]);
+  const clear = React.useCallback(() => {
+    signatureRef.current?.clear();
+    setSignatureData(null);
+    setIsError(false);
+    setErrorMessage("");
+    setIsLoadedFromRecent(false);
+    onClear?.();
+  }, [onClear]);
+  const loadRecentSignature = React.useCallback(async () => {
+    setIsLoadedFromRecent(true);
+    setIsError(false);
+    setErrorMessage("");
+    return "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyAAAADmCAYAAAAtKeFcAAAAAXNSR0IArs4c6QAAH/dJREFUeF7t3U3vNFlZB+AbeRsYYVQmBsYYwYkxMRFN1I0BGXcaV6zcupeFfgKBLyALXLDR+AlgYeISEFzhQtQQYxBFhTHKxAHD8Cbqc4Yupp6m+9/1cs5dp6qvTp7MzDNd5+U6p0/Vr6ur6lXhRYAAAQIECBAgQIAAgSSBVyXVoxoCBAgQIECAAAECBAiEAGISECBAgAABAgQIECCQJiCApFGriAABAgQIECBAgAABAcQcIECAAAECBAgQIEAgTUAASaNWEQECBAgQIECAAAECAog5QIAAAQIECBAgQIBAmoAAkkatIgIECBAgQIAAAQIEBBBzgAABAgQIECBAgACBNAEBJI1aRQQIECBAgAABAgQICCDmAAECBAgQIECAAAECaQICSBq1iggQIECAAAECBAgQEEDMAQIECBAgQIAAAQIE0gQEkDRqFREgQIAAAQIECBAgIICYAwQIECBAgAABAgQIpAkIIGnUKiJAgAABAgQIECBAQAAxBwgQIECAAAECBAgQSBMQQNKoVUSAAAECBAgQIECAgABiDhAgQIAAAQIECBAgkCYggKRRq4gAAQIECBAgQIAAAQHEHCBAgAABAgQIECBAIE1AAEmjVhEBAgQIECBAgAABAgKIOUCAAAECBAgQIECAQJqAAJJGrSICBAgQIECAAAECBAQQc4AAAQIECBAgQIAAgTQBASSNWkUECBAgQIAAAQIECAgg5gABAgQIECBAgAABAmkCAkgatYoIECBAgAABAgQIEBBAzAECBAgQIECAAAECBNIEBJA0ahURIECAAAECBAgQICCAmAMECBAgQIAAAQIECKQJCCBp1CoiQIAAAQIECBAgQEAAMQcIECBAgAABAgQIEEgTEEDSqFVEgAABAgQIECBAgIAAYg4QIECAAAECBAgQIJAmIICkUauIAAECBAgQIECAAAEBxBwgQIAAAQIECBAgQCBNQABJo1YRAQIECBAgQIAAAQICiDlAgAABAgQIECBAgECagACSRq0iAgQIECBAgAABAgQEEHOAAAECBAgQIECAAIE0AQEkjVpFBAgQIECAAAECBAgIINvPgf87NeGJiPjW9s2p2oKhb+WfP1S1ZIURIECAAAECBAjsUkAA2X7YhoP0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AgQIECBAgMAPCgggZgUBAgQIECBAgAABAmkCAkgatYoIECBAgAABAgQIEBBAzAECBAgQIECAAAECBNIEBJA0ahURIECAAAECBAgQICCAmAMECBAgQIAAAQIECKQJCCBp1CoiQIAAAQIECBAgQEAAMQcIECBAgAABAgQIEEgTEEDSqFVEgAABAgQIECBAgIAAYg4QIECAAAECBAgQIJAmIICkUauIAAECBAgQIECAAAEBxBwgQIAAAQIECBAgQCBNQABJo1YRAQIECBAgQIAAAQICiDlAgAABAgQIECBAgECagACSRq0iAgQIECBAgAABAgQEEHOAAAECBAgQIECAAIE0AQEkjVpFBAgQIECAAAECBAgIIOYAAQIECBAgQIAAAQJpAgJIGrWKCBAgQIAAAQIECBAQQMwBAgQIECBAgAABAgTSBASQNGoVESBAgAABAgQIECAggJgDBAgQIECAAAECBAikCQggadQqIkCAAAECBAgQIEBAADEHCBAgQIAAAQIECBBIExBA0qhVRIAAAQIECBAgQICAAGIOECBAgAABAgQIECCQJiCApFGriAABAgQIECBAgAABAcQcIECAAAECBAgQIEAgTUAASaNWEQECBAgQIECAAAECAog5QIAAAQIECBAgQIBAmoAAkkatIgIECBAgQIAAAQIEBBBzgAABAgQIECBAgACBNAEBJI1aRQQIECBAgAABAgQICCDmAAECBAgQIECAAAECaQICSBq1iggQIECAAAECBAgQEEDMAQIECBAgQIAAAQIE0gQEkDRqFREgQIAAAQIECBAgIICYAwQIECBAgAABAgQIpAkIIGnUKiJAgAABAgQIECBAQAAxBwgQIECAAAECBAgQSBMQQNKoVUSAAAECBAgQIECAgABiDhAgQIAAAQIECBAgkCYggKRRq4gAAQIECBAgQIAAAQHEHCBAgAABAgQIECBAIE1AAEmjVhEBAgQIECBAgAABAgKIOUCAAAECBAgQIECAQJqAAJJGrSICBAgQIECAAAECBAQQc4AAAQIECBAgQIAAgTQBASSNWkUECBAgQIAAAQIECAgg5gABAgQIECBAgAABAmkCAkgatYoIECBAgAABAgQIEBBAzAECBAgQIECAAAECBNIEBJA0ahURIECAAAECBAgQICCAmAMECBAgQIAAAQIECKQJCCBp1CoiQIAAAQIECBAgQEAAMQcIECBAgAABAgQIEEgTEEDSqFVEgAABAgQIECBAgIAAYg4QIECAAAECBAgQIJAmIICkUauIAAECBAgQIECAAAEBxBwgQIAAAQIECBAgQCBNQABJo1YRAQIECBAgQIAAAQICiDlAgAABAgQIECBAgECagACSRq0iAgQIECBAgAABAgQEEHOAAAECBAgQIECAAIE0AQEkjVpFBAgQIECAAAECBAgIIOYAAQIECBAgQIAAAQJpAgJIGrWKCBAgQIAAAQIECBAQQMwBAgQIECBAgAABAgTSBASQNGoVESBAgAABAgQIECAggJgDBAgQIECAAAECBAikCQggadQqIkCAAAECBAgQIEBAADEHCBAgQIAAAQIECBBIExBA0qhVRIAAAQIECBAgQICAAGIOECBAgAABAgQIECCQJiCApFGriAABAgQIECBAgAABAcQcIECAAAECBAgQIEAgTUAASaNWEQECBAgQIECAAAECAog5QIAAAQIECBAgQIBAmoAAkkatIgIECBAgQIAAAQIEBBBzgAABAgQIECBAgACBNAEBJI1aRQQIECBAgAABAgQICCDmAAECBAgQIECAAAECaQICSBq1iggQIECAAAECBAgQEEDMAQIECBAgQIAAAQIE0gQEkDRqFREgQIAAAQIECBAgIICYAwQIECBAgAABAgQIpAkIIGnUKiJAgAABAgQIECBAQAAxBwgQIECAAAECBAgQSBMQQNKoVUSAAAECBAgQIECAgABiDhAgQIAAAQIECBAgkCYggKRRq4gAAQIECBAgQIAAAQHEHCBAgAABAgQIECBAIE1AAEmjVhEBAgQIECBAgAABAgKIOUCAAAECBAgQIECAQJqAAJJGrSICBAgQIECAAAECBAQQc4AAAQIECBAgQIAAgTQBASSNWkUECBAgQIAAAQIECAgg5gABAgQIECBAgAABAmkCAkgatYoIECBAgAABAgQIEBBAzAECBAgQIECAAAECBNIEBJA0ahURIECAAAECBAgQICCAmAMECBAgQIAAAQIECKQJCCBp1CoiQIAAAQIECBAgQEAAMQcIECBAgAABAgQIEEgTEEDSqFVEgAABAgQIECBAgIAAYg4QIECAAAECBAgQIJAmIICkUauIAAECBAgQIECAAAEBxBwgQIAAAQIECBAgQCBNQABJo1YRAQIECBAgQIAAAQICiDlAgAABAgQIECBAgECagACSRq0iAgQIECBAgAABAgQEEHOAAAECBAgQIECAAIE0AQEkjVpFBAgQIECAAAECBAgIIOYAAQIECBAgQIAAAQJpAgJIGrWKCBAgQIAAAQIECBAQQMwBAgQIECBAgAABAgTSBASQNGoVESBAgAABAgQIECDw/zxD0hRoJglmAAAAAElFTkSuQmCC";
+  }, []);
+  const isValid = React.useCallback(() => {
+    const basicValid = signatureRef.current?.isValid() ?? false;
+    if (!basicValid) return false;
+    const data = signatureRef.current?.getSignatureData();
+    if (!data) return false;
+    if (isLoadedFromRecent) return true;
+    return data.totalLineLength >= minLength;
+  }, [minLength, isLoadedFromRecent]);
+  const getSignatureData = React.useCallback(() => {
+    return signatureRef.current?.getSignatureData() ?? null;
+  }, []);
+  const handleSignatureChange = React.useCallback(() => {
+    setIsError(false);
+    setErrorMessage("");
+  }, []);
+  const handleReset = React.useCallback(() => {
+    setSignatureData(null);
+    setIsError(false);
+    setErrorMessage("");
+    setIsLoadedFromRecent(false);
+    onClear?.();
+  }, [onClear]);
+  const getErrorMessage = React.useCallback(() => {
+    return errorMessage;
+  }, [errorMessage]);
+  return {
+    // ref
+    signatureRef,
+    // state
+    signatureData,
+    isError,
+    isLoadedFromRecent,
+    // 최근 서명 불러옴 여부 노출
+    // actions
+    submit,
+    clear,
+    loadRecentSignature,
+    handleSignatureChange,
+    // 일반적인 서명 변경
+    handleReset,
+    // 다시 작성
+    handleSignatureSubmit,
+    // utilities
+    isValid,
+    getSignatureData,
+    getErrorMessage
+  };
+};
+
+const cx = classNames.bind(styles$2);
 const StepIndicator = ({
   items,
   onClickItem,
@@ -331,7 +723,9 @@ const StepIndicator = ({
 exports.DataTable = DataTable;
 exports.FormDatePicker = FormDatePicker;
 exports.FormSegmentGroup = FormSegmentGroup;
+exports.FormSignature = FormSignature;
 exports.FormTextField = FormTextField;
 exports.StepIndicator = StepIndicator;
+exports.useFormSignature = useFormSignature;
 exports.useTable = useTable;
 //# sourceMappingURL=index.cjs.js.map