sales-frontend-components 0.0.50 → 0.0.51

package/dist/index.cjs.js

@@ -6,9 +6,8 @@ var salesFrontendDesignSystem = require('sales-frontend-design-system');
 var styles = require('./data-table/data-table.module.scss');
 var React = require('react');
 var reactHookForm = require('react-hook-form');
-var styles$1 = require('./form/form-signautre/form-signature.module.scss');
-var styles$2 = require('./step-indicator/step-indicator.module.scss');
-var styles$3 = require('./camera/camera.module.scss');
+var styles$1 = require('./step-indicator/step-indicator.module.scss');
+var styles$2 = require('./camera/camera.module.scss');
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -101,7 +100,7 @@ function requireBind () {
 var bindExports = requireBind();
 var classNames = /*@__PURE__*/getDefaultExportFromCjs(bindExports);
 
-const cx$3 = classNames.bind(styles);
+const cx$2 = classNames.bind(styles);
 const DataTable = ({ table, isError, isLoading, msgText, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     salesFrontendDesignSystem.Table,
@@ -116,7 +115,7 @@ const DataTable = ({ table, isError, isLoading, msgText, ...props }) => {
           "th",
           {
             colSpan: header.colSpan,
-            className: cx$3({
+            className: cx$2({
               "is-resizing": header.column.getIsResizing()
               // 3. 리사이징 중일 때 클래스 추가
             }),
@@ -128,7 +127,7 @@ const DataTable = ({ table, isError, isLoading, msgText, ...props }) => {
                 {
                   onMouseDown: header.getResizeHandler(),
                   onTouchStart: header.getResizeHandler(),
-                  className: cx$3("resize-handle")
+                  className: cx$2("resize-handle")
                 }
               )
             ]
@@ -149,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$3("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") }) }) }) })
       ]
     }
   );
@@ -298,432 +297,7 @@ const FormTextField = ({
   );
 };
 
-const cx$2 = 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$2("form-label"), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "typo-subtitle3 text-body_1", children: label }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$2("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$2("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$2("error-msg-box"), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$2("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$1 = classNames.bind(styles$2);
+const cx$1 = classNames.bind(styles$1);
 const StepIndicator = ({
   items,
   onClickItem,
@@ -755,7 +329,7 @@ const StepIndicator = ({
   ] });
 };
 
-const cx = classNames.bind(styles$3);
+const cx = classNames.bind(styles$2);
 function Attachment({
   photos,
   onAddPhoto,
@@ -995,19 +569,18 @@ const DEFAULT_DOWNLOAD_PROPS = {
   width: 500,
   height: 500
 };
-function usePaint(paintProps = {}) {
+function useCanvasPaint(paintProps = {}) {
   const { pen = { strokeWeight: 5, strokeColor: "black" }, onChange, onStart, onEnd } = paintProps;
-  const canvasRef = React.useRef(null);
+  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(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) {
+    if (!canvasRefState) {
       return;
     }
-    const dataUrl = canvas.toDataURL();
+    const dataUrl = canvasRefState.toDataURL();
     const newHistory = history.slice(0, historyIndex + 1);
     if (newHistory.length >= HISTORY_SIZE) {
       newHistory.shift();
@@ -1016,39 +589,37 @@ function usePaint(paintProps = {}) {
     setHistory(newHistory);
     setHistoryIndex(newHistory.length - 1);
     onChange && onChange();
-  }, [history, historyIndex, onChange]);
+  }, [history, historyIndex, onChange, canvasRefState]);
   const restoreState = React.useCallback(
     (index) => {
-      const canvas = canvasRef.current;
       const context = contextRef.current;
-      if (!canvas || !context || !history[index]) {
+      if (!canvasRefState || !context || !history[index]) {
         return;
       }
       const dataUrl = history[index];
       const img = new Image();
       img.onload = () => {
-        context.clearRect(0, 0, canvas.width, canvas.height);
+        context.clearRect(0, 0, canvasRefState.width, canvasRefState.height);
         context.drawImage(img, 0, 0);
       };
       img.src = dataUrl;
       onChange && onChange();
     },
-    [history, onChange]
+    [history, onChange, canvasRefState]
   );
   React.useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) {
+    if (!canvasRefState) {
       return;
     }
-    const context = canvas.getContext("2d", { willReadFrequently: true });
+    const context = canvasRefState.getContext("2d", { willReadFrequently: true });
     if (!context) {
       return;
     }
     contextRef.current = context;
-    const initialDataUrl = canvas.toDataURL();
+    const initialDataUrl = canvasRefState.toDataURL();
     setHistory([initialDataUrl]);
     setHistoryIndex(0);
-  }, []);
+  }, [canvasRefState]);
   React.useEffect(() => {
     const context = contextRef.current;
     if (context) {
@@ -1056,19 +627,53 @@ function usePaint(paintProps = {}) {
       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 } = event;
+      const { offsetX, offsetY } = pos;
       context.beginPath();
       context.moveTo(offsetX, offsetY);
       setIsPainting(true);
     },
-    [onStart]
+    [onStart, getEventPosition]
   );
   const stopPainting = React.useCallback(() => {
     const context = contextRef.current;
@@ -1082,47 +687,48 @@ function usePaint(paintProps = {}) {
   }, [isPainting, onEnd, saveState]);
   const paint = React.useCallback(
     (event) => {
+      event.preventDefault();
       if (!isPainting || !contextRef.current) {
         return;
       }
-      const { offsetX, offsetY } = event;
+      const pos = getEventPosition(event);
+      if (!pos) {
+        return;
+      }
+      const { offsetX, offsetY } = pos;
       contextRef.current.lineTo(offsetX, offsetY);
       contextRef.current.stroke();
     },
-    [isPainting]
-  );
-  const handleMouseEnter = React.useCallback(
-    (event) => {
-      if (event.buttons === 1 && !isPainting) {
-        startPainting(event);
-      }
-    },
-    [isPainting, startPainting]
+    [isPainting, getEventPosition]
   );
   React.useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) {
+    if (!canvasRefState) {
       return;
     }
-    canvas.addEventListener("mousedown", startPainting);
-    canvas.addEventListener("mouseup", stopPainting);
-    canvas.addEventListener("mousemove", paint);
-    canvas.addEventListener("mouseleave", stopPainting);
-    canvas.addEventListener("mouseenter", handleMouseEnter);
+    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 () => {
-      canvas.removeEventListener("mousedown", startPainting);
-      canvas.removeEventListener("mouseup", stopPainting);
-      canvas.removeEventListener("mousemove", paint);
-      canvas.removeEventListener("mouseleave", stopPainting);
-      canvas.removeEventListener("mouseenter", handleMouseEnter);
+      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, handleMouseEnter]);
+  }, [startPainting, stopPainting, paint, canvasRefState]);
   const clear = () => {
-    const canvas = canvasRef.current;
     const context = contextRef.current;
-    if (canvas && context) {
-      context.clearRect(0, 0, canvas.width, canvas.height);
-      const initialDataUrl = canvas.toDataURL();
+    if (canvasRefState && context) {
+      context.clearRect(0, 0, canvasRefState.width, canvasRefState.height);
+      const initialDataUrl = canvasRefState.toDataURL();
       setHistory([initialDataUrl]);
       setHistoryIndex(0);
       onChange && onChange();
@@ -1143,15 +749,14 @@ function usePaint(paintProps = {}) {
     }
   };
   const loadImage = (base64String) => {
-    const canvas = canvasRef.current;
     const context = contextRef.current;
-    if (!canvas || !context) {
+    if (!canvasRefState || !context) {
       return;
     }
     const img = new Image();
     img.onload = () => {
-      context.clearRect(0, 0, canvas.width, canvas.height);
-      context.drawImage(img, 0, 0, canvas.width, canvas.height);
+      context.clearRect(0, 0, canvasRefState.width, canvasRefState.height);
+      context.drawImage(img, 0, 0, canvasRefState.width, canvasRefState.height);
       saveState();
     };
     img.src = base64String;
@@ -1159,7 +764,7 @@ function usePaint(paintProps = {}) {
   const getBase64String = (imageProps) => {
     const props = { ...DEFAULT_DOWNLOAD_PROPS, ...imageProps };
     const { fileExtendsion, transparent, backgroundColor, width, height } = props;
-    const originalCanvas = canvasRef.current;
+    const originalCanvas = canvasRefState;
     if (!originalCanvas) {
       return;
     }
@@ -1179,7 +784,7 @@ function usePaint(paintProps = {}) {
   const download = (downloadProps) => {
     const props = { ...DEFAULT_DOWNLOAD_PROPS, ...downloadProps };
     const { fileName, fileExtendsion, transparent, backgroundColor, width, height } = props;
-    const originalCanvas = canvasRef.current;
+    const originalCanvas = canvasRefState;
     if (!originalCanvas) {
       return;
     }
@@ -1199,27 +804,49 @@ function usePaint(paintProps = {}) {
       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;
+      }
+    }
+    return true;
+  };
   return {
     clear,
     undo,
     redo,
     loadImage,
     download,
-    canvasRef,
-    getBase64String
+    getBase64String,
+    isCanvasBlank,
+    setCanvasRefState,
+    canvasRefState
   };
 }
 
+const testSignatureBase64Data = "data:image/png;base64,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";
+
 exports.Attachment = Attachment;
 exports.DataTable = DataTable;
 exports.FormDatePicker = FormDatePicker;
 exports.FormSegmentGroup = FormSegmentGroup;
-exports.FormSignature = FormSignature;
 exports.FormTextField = FormTextField;
 exports.StepIndicator = StepIndicator;
 exports.resize = resize;
+exports.testSignatureBase64Data = testSignatureBase64Data;
 exports.useCamera = useCamera;
-exports.useFormSignature = useFormSignature;
-exports.usePaint = usePaint;
+exports.useCanvasPaint = useCanvasPaint;
 exports.useTable = useTable;
 //# sourceMappingURL=index.cjs.js.map