sales-frontend-components 0.0.36 → 0.0.38

package/dist/camera/camera.module.scss

@@ -0,0 +1,187 @@
+@use 'sales-frontend-design-system/design-system-context' as *;
+
+.content-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.step-content {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.step-description {
+  color: colors(text-body_3);
+
+  @include apply-typography(body2);
+}
+
+.description {
+  line-height: 1.6;
+  color: colors(text-body_3);
+
+  @include apply-typography(body2);
+}
+
+.form-field-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.error {
+  margin-top: 0.25rem;
+  color: colors(additional-semantic_2);
+
+  @include apply-typography(body2);
+}
+
+.error-caption {
+  margin-top: 0.25rem;
+  color: colors(additional-semantic_2);
+
+  @include apply-typography(caption);
+}
+
+// 서류 첨부 스텝 스타일
+.document-complete-content {
+  display: flex;
+  flex-direction: column;
+  gap: margin(title-xlarge);
+}
+
+.photo-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: margin(divider-xsmall);
+}
+
+.photo-single {
+  display: flex;
+}
+
+.single-photo-item {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 1;
+  overflow: hidden;
+  border-radius: radius-basic(xlarge);
+}
+
+.photo-item {
+  position: relative;
+  aspect-ratio: 1;
+  overflow: hidden;
+  border-radius: radius-basic(xlarge);
+}
+
+.photo-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background-color: #f5f5f5;
+  border: 1px solid colors(border-neutral_4);
+  border-radius: radius-basic(xlarge);
+
+  .photo-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: radius-basic(xlarge);
+  }
+}
+
+.photo-content {
+  color: colors(text-body_3);
+
+  @include apply-typography(body2);
+}
+
+.remove-button {
+  position: absolute;
+  top: padding(medium);
+  right: padding(medium);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  font-size: 1.25rem;
+  line-height: 1;
+  color: colors(surface-neutral);
+  cursor: pointer;
+  background-color: colors(text-neutral_1);
+  border: none;
+  border-radius: 50%;
+}
+
+.add-photo-item {
+  .add-photo-button {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: padding(xxxsmall);
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    color: colors(text-body);
+    cursor: pointer;
+    background-color: colors(background-neutral);
+    border: 1px solid colors(border-neutral_3);
+    border-radius: radius-basic(xlarge);
+
+    @include apply-typography(body3);
+
+    &:hover {
+      background-color: colors(surface-neutral_2);
+    }
+
+    // 카메라 아이콘 크기 조정
+    svg {
+      width: 40px;
+      height: 40px;
+    }
+  }
+}
+
+.add-photo-button-single {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: padding(xxxsmall);
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: colors(text-body);
+  cursor: pointer;
+  background-color: colors(background-neutral);
+  border: 1px solid colors(border-neutral_3);
+  border-radius: radius-basic(xlarge);
+
+  @include apply-typography(body3);
+
+  &:hover {
+    background-color: colors(surface-neutral_2);
+  }
+
+  // 카메라 아이콘 크기 조정
+  svg {
+    width: 40px;
+    height: 40px;
+  }
+}
+
+.photo-count {
+  color: colors(text-body);
+
+  @include apply-typography(body3);
+}
+
+.photo-count-number {
+  color: colors(text-primary);
+}

package/dist/index.cjs.js

@@ -8,6 +8,7 @@ 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');
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -100,7 +101,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__ */ jsxRuntime.jsxs(
     salesFrontendDesignSystem.Table,
@@ -115,7 +116,7 @@ const DataTable = ({ table, isError, isLoading, msgText, ...props }) => {
           "th",
           {
             colSpan: header.colSpan,
-            className: cx$2({
+            className: cx$3({
               "is-resizing": header.column.getIsResizing()
               // 3. 리사이징 중일 때 클래스 추가
             }),
@@ -127,7 +128,7 @@ const DataTable = ({ table, isError, isLoading, msgText, ...props }) => {
                 {
                   onMouseDown: header.getResizeHandler(),
                   onTouchStart: header.getResizeHandler(),
-                  className: cx$2("resize-handle")
+                  className: cx$3("resize-handle")
                 }
               )
             ]
@@ -148,7 +149,7 @@ const DataTable = ({ table, isError, isLoading, msgText, ...props }) => {
             },
             cell.id
           )) }, row.id)
-        )) : /* @__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") }) }) }) })
+        )) : /* @__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") }) }) }) })
       ]
     }
   );
@@ -297,7 +298,7 @@ const FormTextField = ({
   );
 };
 
-const cx$1 = classNames.bind(styles$1);
+const cx$2 = classNames.bind(styles$1);
 const FormSignature = ({
   label,
   error,
@@ -532,9 +533,9 @@ const FormSignature = ({
     [handleSubmit, clearSignature, getSignatureDataObject, validateForm]
   );
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$1("form-label"), 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$1("form-label-button-box"), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$2("form-label-button-box"), children: [
         isShowResetButton && /* @__PURE__ */ jsxRuntime.jsx(
           salesFrontendDesignSystem.Button,
           {
@@ -561,7 +562,7 @@ const FormSignature = ({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$1("form-signature", error && "is-error"), ref: containerRef, children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$2("form-signature", error && "is-error"), ref: containerRef, children: /* @__PURE__ */ jsxRuntime.jsx(
       "canvas",
       {
         ref: canvasRef,
@@ -576,7 +577,7 @@ const FormSignature = ({
         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." }) })
+    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." }) })
   ] });
 };
 
@@ -688,7 +689,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,
@@ -704,28 +705,242 @@ const StepIndicator = ({
       }
     });
   }, [items, defaultValue]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("stepper-layout"), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx("stepper"), children: items.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$1("stepper-layout"), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx$1("stepper"), children: items.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: cx("completed") }) : ++idx
+          children: item.isCompleted || idx < current ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$1("completed") }) : ++idx
         }
       ),
-      idx < items.length && Array.from({ length: dotCount }).map((_, dotIdx) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx("dot") }, `dot-${idx}-${dotIdx}`))
+      idx < items.length && Array.from({ length: dotCount }).map((_, dotIdx) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx$1("dot") }, `dot-${idx}-${dotIdx}`))
     ] }, `num-${idx}`)) }),
-    /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cx("step-labels"), children: items.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: cx((defaultValue === item.value || current === idx) && "active"), children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.label ?? item.value }) }, `label-${idx}`)) })
+    /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cx$1("step-labels"), children: items.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: cx$1((defaultValue === item.value || current === idx) && "active"), children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.label ?? item.value }) }, `label-${idx}`)) })
   ] });
 };
 
+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__ */ jsxRuntime.jsx("div", { className: cx("single-photo-item", "add-photo-item"), children: /* @__PURE__ */ jsxRuntime.jsxs("button", { className: cx("add-photo-button-single"), onClick: handleAddPhoto, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Icon, { name: "illust/camera" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\uC0AC\uC9C4 \uCCA8\uBD80\uD558\uAE30" })
+      ] }) });
+    }
+    return photos.map((photo) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("single-photo-item"), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx("photo-placeholder"), children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: photo.src, alt: photo.name, className: cx("photo-image") }) }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: cx("photo-item", "add-photo-item"), children: /* @__PURE__ */ jsxRuntime.jsxs("button", { className: cx("add-photo-button"), onClick: handleAddPhoto, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Icon, { name: "camera", src: `${IMG_PREFIX}/dsp/assets/icons/illust/camera.svg` }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\uCCA8\uBD80\uD558\uAE30" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx("photo-count"), children: [
+            "(",
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx("photo-count-number"), children: photos.length }),
+            "/",
+            maxPhotos,
+            ")"
+          ] })
+        ] }) }, "add-photo")
+      );
+    }
+    photos.forEach((photo) => {
+      gridItems.push(
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("photo-item"), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx("photo-placeholder"), children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: photo.src, alt: photo.name, className: cx("photo-image") }) }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: cx("photo-single"), children: renderPhotoSingle() });
+  }
+  return /* @__PURE__ */ jsxRuntime.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] = 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.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 = React.useCallback(() => {
+    return /* @__PURE__ */ jsxRuntime.jsx(Attachement, { show: true, onAddPhoto: onClick, onRemovePhoto: deleteImage, photos: attachedPhotos, type });
+  }, [attachedPhotos, onClick, deleteImage, show]);
+  React.useEffect(() => {
+    return () => {
+      attachedPhotos.forEach((image) => {
+        URL.revokeObjectURL(image.src);
+      });
+    };
+  }, []);
+  return {
+    onClick,
+    getImage: findImage,
+    deleteImage,
+    attachedPhotos,
+    Attachment: CameraComponent
+  };
+}
+
+exports.Attachement = Attachement;
 exports.DataTable = DataTable;
 exports.FormDatePicker = FormDatePicker;
 exports.FormSegmentGroup = FormSegmentGroup;
 exports.FormSignature = FormSignature;
 exports.FormTextField = FormTextField;
 exports.StepIndicator = StepIndicator;
+exports.resize = resize;
+exports.useCamera = useCamera;
 exports.useFormSignature = useFormSignature;
 exports.useTable = useTable;
 //# sourceMappingURL=index.cjs.js.map