sales-frontend-components 0.0.36 → 0.0.38

package/dist/index.esm.js

@@ -1,11 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { flexRender, useReactTable, getSortedRowModel, getCoreRowModel, getPaginationRowModel } from '@tanstack/react-table';
 import styles from './data-table/data-table.module.scss';
-import { Table, DatePicker, SegmentGroup, FormField, Button } from 'sales-frontend-design-system';
+import { Table, DatePicker, SegmentGroup, FormField, Button, Icon } from 'sales-frontend-design-system';
 import React, { useState, useRef, useEffect, useCallback, useImperativeHandle } from 'react';
 import { useController } from 'react-hook-form';
 import styles$1 from './form/form-signautre/form-signature.module.scss';
 import styles$2 from './step-indicator/step-indicator.module.scss';
+import styles$3 from './camera/camera.module.scss';
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -98,7 +99,7 @@ function requireBind () {
 var bindExports = requireBind();
 var classNames = /*@__PURE__*/getDefaultExportFromCjs(bindExports);
 
-const cx$2 = classNames.bind(styles);
+const cx$3 = classNames.bind(styles);
 const DataTable = ({ table, isError, isLoading, msgText, ...props }) => {
   return /* @__PURE__ */ jsxs(
     Table,
@@ -113,7 +114,7 @@ const DataTable = ({ table, isError, isLoading, msgText, ...props }) => {
           "th",
           {
             colSpan: header.colSpan,
-            className: cx$2({
+            className: cx$3({
               "is-resizing": header.column.getIsResizing()
               // 3. 리사이징 중일 때 클래스 추가
             }),
@@ -125,7 +126,7 @@ const DataTable = ({ table, isError, isLoading, msgText, ...props }) => {
                 {
                   onMouseDown: header.getResizeHandler(),
                   onTouchStart: header.getResizeHandler(),
-                  className: cx$2("resize-handle")
+                  className: cx$3("resize-handle")
                 }
               )
             ]
@@ -146,7 +147,7 @@ const DataTable = ({ table, isError, isLoading, msgText, ...props }) => {
             },
             cell.id
           )) }, row.id)
-        )) : /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { className: cx$2("feedback-cell"), colSpan: table.getVisibleLeafColumns().length, children: isLoading ? /* @__PURE__ */ jsx("div", { children: "Loading..." }) : /* @__PURE__ */ jsx("div", { children: msgText || (isError ? "Error" : "No data") }) }) }) })
+        )) : /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { className: cx$3("feedback-cell"), colSpan: table.getVisibleLeafColumns().length, children: isLoading ? /* @__PURE__ */ jsx("div", { children: "Loading..." }) : /* @__PURE__ */ jsx("div", { children: msgText || (isError ? "Error" : "No data") }) }) }) })
       ]
     }
   );
@@ -295,7 +296,7 @@ const FormTextField = ({
   );
 };
 
-const cx$1 = classNames.bind(styles$1);
+const cx$2 = classNames.bind(styles$1);
 const FormSignature = ({
   label,
   error,
@@ -530,9 +531,9 @@ const FormSignature = ({
     [handleSubmit, clearSignature, getSignatureDataObject, validateForm]
   );
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs("div", { className: cx$1("form-label"), children: [
+    /* @__PURE__ */ jsxs("div", { className: cx$2("form-label"), children: [
       /* @__PURE__ */ jsx("label", { className: "typo-subtitle3 text-body_1", children: label }),
-      /* @__PURE__ */ jsxs("div", { className: cx$1("form-label-button-box"), children: [
+      /* @__PURE__ */ jsxs("div", { className: cx$2("form-label-button-box"), children: [
         isShowResetButton && /* @__PURE__ */ jsx(
           Button,
           {
@@ -559,7 +560,7 @@ const FormSignature = ({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: cx$1("form-signature", error && "is-error"), ref: containerRef, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: cx$2("form-signature", error && "is-error"), ref: containerRef, children: /* @__PURE__ */ jsx(
       "canvas",
       {
         ref: canvasRef,
@@ -574,7 +575,7 @@ const FormSignature = ({
         onMouseLeave: handleMouseLeave
       }
     ) }),
-    error && /* @__PURE__ */ jsx("div", { className: cx$1("error-msg-box"), children: /* @__PURE__ */ jsx("span", { className: cx$1("error-msg"), children: errorMsg || "\uC11C\uBA85\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694." }) })
+    error && /* @__PURE__ */ jsx("div", { className: cx$2("error-msg-box"), children: /* @__PURE__ */ jsx("span", { className: cx$2("error-msg"), children: errorMsg || "\uC11C\uBA85\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694." }) })
   ] });
 };
 
@@ -686,7 +687,7 @@ const useFormSignature = ({ onSubmit, onError, onClear, minLength = 100 } = {})
   };
 };
 
-const cx = classNames.bind(styles$2);
+const cx$1 = classNames.bind(styles$2);
 const StepIndicator = ({
   items,
   onClickItem,
@@ -702,21 +703,232 @@ const StepIndicator = ({
       }
     });
   }, [items, defaultValue]);
-  return /* @__PURE__ */ jsxs("div", { className: cx("stepper-layout"), children: [
-    /* @__PURE__ */ jsx("div", { className: cx("stepper"), children: items.map((item, idx) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+  return /* @__PURE__ */ jsxs("div", { className: cx$1("stepper-layout"), children: [
+    /* @__PURE__ */ jsx("div", { className: cx$1("stepper"), children: items.map((item, idx) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: cx("circle", (defaultValue === item.value || current === idx) && "active"),
+          className: cx$1("circle", (defaultValue === item.value || current === idx) && "active"),
           onClick: () => onClickItem?.(item),
-          children: item.isCompleted || idx < current ? /* @__PURE__ */ jsx("span", { className: cx("completed") }) : ++idx
+          children: item.isCompleted || idx < current ? /* @__PURE__ */ jsx("span", { className: cx$1("completed") }) : ++idx
         }
       ),
-      idx < items.length && Array.from({ length: dotCount }).map((_, dotIdx) => /* @__PURE__ */ jsx("span", { className: cx("dot") }, `dot-${idx}-${dotIdx}`))
+      idx < items.length && Array.from({ length: dotCount }).map((_, dotIdx) => /* @__PURE__ */ jsx("span", { className: cx$1("dot") }, `dot-${idx}-${dotIdx}`))
     ] }, `num-${idx}`)) }),
-    /* @__PURE__ */ jsx("ul", { className: cx("step-labels"), children: items.map((item, idx) => /* @__PURE__ */ jsx("li", { className: cx((defaultValue === item.value || current === idx) && "active"), children: /* @__PURE__ */ jsx("span", { children: item.label ?? item.value }) }, `label-${idx}`)) })
+    /* @__PURE__ */ jsx("ul", { className: cx$1("step-labels"), children: items.map((item, idx) => /* @__PURE__ */ jsx("li", { className: cx$1((defaultValue === item.value || current === idx) && "active"), children: /* @__PURE__ */ jsx("span", { children: item.label ?? item.value }) }, `label-${idx}`)) })
   ] });
 };
 
-export { DataTable, FormDatePicker, FormSegmentGroup, FormSignature, FormTextField, StepIndicator, useFormSignature, useTable };
+const cx = classNames.bind(styles$3);
+function Attachement({ photos, onAddPhoto, onRemovePhoto, show, type = "multiple" }) {
+  const handleAddPhoto = () => {
+    onAddPhoto();
+  };
+  const handleRemovePhoto = (id) => {
+    onRemovePhoto(id);
+  };
+  const renderPhotoSingle = () => {
+    if (photos.length === 0) {
+      return /* @__PURE__ */ jsx("div", { className: cx("single-photo-item", "add-photo-item"), children: /* @__PURE__ */ jsxs("button", { className: cx("add-photo-button-single"), onClick: handleAddPhoto, children: [
+        /* @__PURE__ */ jsx(Icon, { name: "illust/camera" }),
+        /* @__PURE__ */ jsx("span", { children: "\uC0AC\uC9C4 \uCCA8\uBD80\uD558\uAE30" })
+      ] }) });
+    }
+    return photos.map((photo) => /* @__PURE__ */ jsxs("div", { className: cx("single-photo-item"), children: [
+      /* @__PURE__ */ jsx("div", { className: cx("photo-placeholder"), children: /* @__PURE__ */ jsx("img", { src: photo.src, alt: photo.name, className: cx("photo-image") }) }),
+      /* @__PURE__ */ jsx("button", { className: cx("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__ */ jsx("div", { className: cx("photo-item", "add-photo-item"), children: /* @__PURE__ */ jsxs("button", { className: cx("add-photo-button"), onClick: handleAddPhoto, children: [
+          /* @__PURE__ */ jsx(Icon, { name: "camera", src: `${IMG_PREFIX}/dsp/assets/icons/illust/camera.svg` }),
+          /* @__PURE__ */ jsx("span", { children: "\uCCA8\uBD80\uD558\uAE30" }),
+          /* @__PURE__ */ jsxs("span", { className: cx("photo-count"), children: [
+            "(",
+            /* @__PURE__ */ jsx("span", { className: cx("photo-count-number"), children: photos.length }),
+            "/",
+            maxPhotos,
+            ")"
+          ] })
+        ] }) }, "add-photo")
+      );
+    }
+    photos.forEach((photo) => {
+      gridItems.push(
+        /* @__PURE__ */ jsxs("div", { className: cx("photo-item"), children: [
+          /* @__PURE__ */ jsx("div", { className: cx("photo-placeholder"), children: /* @__PURE__ */ jsx("img", { src: photo.src, alt: photo.name, className: cx("photo-image") }) }),
+          /* @__PURE__ */ jsx("button", { className: cx("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__ */ jsx("div", { className: cx("photo-single"), children: renderPhotoSingle() });
+  }
+  return /* @__PURE__ */ jsx("div", { className: cx("photo-grid"), 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
+        );
+      }
+    };
+    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 genImageId = () => `camera-${Date.now()}-${Math.random()}`;
+function useCamera({
+  onChange,
+  resize: resizeOption,
+  cameraOnly,
+  onDelete,
+  show,
+  type = "multiple"
+} = {}) {
+  const [attachedPhotos, setAttachedPhotos] = 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.files;
+      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}`
+          };
+          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);
+      URL.revokeObjectURL(item[0].src);
+      setAttachedPhotos([...attachedPhotos]);
+      onDelete && onDelete(imageId);
+    }
+  };
+  const CameraComponent = useCallback(() => {
+    return /* @__PURE__ */ jsx(Attachement, { show: true, onAddPhoto: onClick, onRemovePhoto: deleteImage, photos: attachedPhotos, type });
+  }, [attachedPhotos, onClick, deleteImage, show]);
+  useEffect(() => {
+    return () => {
+      attachedPhotos.forEach((image) => {
+        URL.revokeObjectURL(image.src);
+      });
+    };
+  }, []);
+  return {
+    onClick,
+    getImage: findImage,
+    deleteImage,
+    attachedPhotos,
+    Attachment: CameraComponent
+  };
+}
+
+export { Attachement, DataTable, FormDatePicker, FormSegmentGroup, FormSignature, FormTextField, StepIndicator, resize, useCamera, useFormSignature, useTable };
 //# sourceMappingURL=index.esm.js.map