sales-frontend-components 2.0.4 → 2.0.5

package/dist/index.cjs.js

@@ -227,18 +227,6 @@ var _MessageEventManager = class _MessageEventManager2 {
 };
 __publicField(_MessageEventManager, "instance");
 var MessageEventManager = _MessageEventManager;
-function getCanvasExportFileInfo(imageUrl) {
-  const ext = imageUrl.split(".").pop()?.split("?")[0]?.toLowerCase();
-  switch (ext) {
-    case "jpg":
-    case "jpeg":
-      return { contentType: "image/jpeg", fileExt: "jpg" };
-    case "webp":
-      return { contentType: "image/webp", fileExt: "webp" };
-    default:
-      return { contentType: "image/png", fileExt: "png" };
-  }
-}
 function base64ToBlob(base64String, contentType = "") {
   const regex = /^data:([a-zA-Z0-9/+.-]+);base64,/;
   const matches = base64String.match(regex);
@@ -355,9 +343,9 @@ async function imageUrlToFileWithCanvas(imageUrl) {
       }
       try {
         ctx.drawImage(newImage, 0, 0);
-        const { contentType, fileExt } = getCanvasExportFileInfo(imageUrl);
-        const dataUrl = canvas.toDataURL(contentType);
-        const blob = base64ToBlob(dataUrl, contentType);
+        const dataUrl = canvas.toDataURL();
+        const blob = base64ToBlob(dataUrl);
+        const fileExt = getExt(blob) ?? "png";
         resolve(blobToFile(blob, `image.${fileExt}`));
       } catch (error) {
         reject(
@@ -4565,7 +4553,7 @@ function resize(image, options = { ext: "jpeg", filesize: maxImageSize }) {
   });
 }
 
-const genImageId = () => `camera-${Date.now()}-${Math.random()}`;
+const genImageId$1 = () => `camera-${Date.now()}-${Math.random()}`;
 function useCamera({
   onChange,
   resize: resizeOption = {
@@ -4593,7 +4581,7 @@ function useCamera({
   };
   const imageHandler = async (file) => {
     const newPhoto = {
-      id: genImageId(),
+      id: genImageId$1(),
       src: URL.createObjectURL(resizeOption ? await resize(file, resizeOption) : file),
       name: `\uC11C\uB958\uC0AC\uC9C4_${attachedPhotos.length + 1}`
     };
@@ -4653,11 +4641,172 @@ function useCamera({
     const imageIndex = attachedPhotos.findIndex((image) => image.id === imageId);
     if (imageIndex > -1) {
       const item = attachedPhotos.splice(imageIndex, 1);
-      item[0] && URL.revokeObjectURL(item[0].src);
+      if (item[0]) {
+        URL.revokeObjectURL(item[0].src);
+      }
+      setAttachedPhotos([...attachedPhotos]);
+      if (onDelete) {
+        onDelete(imageId);
+      }
+    }
+  };
+  const deleteAllImages = () => {
+    attachedPhotos.forEach((image) => {
+      URL.revokeObjectURL(image.src);
+      if (onDelete) {
+        onDelete(image.id);
+      }
+    });
+    setAttachedPhotos([]);
+  };
+  const CameraComponent = () => /* @__PURE__ */ jsxRuntime.jsx(
+    Attachment,
+    {
+      show: !!show,
+      onAddPhoto: onClick,
+      onRemovePhoto: deleteImage,
+      photos: attachedPhotos,
+      type,
+      buttonText
+    }
+  );
+  React9.useEffect(() => {
+    return () => {
+      attachedPhotos.forEach((image) => {
+        URL.revokeObjectURL(image.src);
+      });
+    };
+  }, []);
+  return {
+    onClick,
+    getImage: findImage,
+    deleteImage,
+    deleteAllImages,
+    attachedPhotos,
+    Attachment: CameraComponent,
+    addImage: (data) => {
+      setAttachedPhotos([
+        ...attachedPhotos,
+        ...data.map((item) => {
+          let blobUrl = "";
+          if (item.data instanceof Blob) {
+            blobUrl = URL.createObjectURL(item.data);
+          } else if (typeof item.data === "string") {
+            blobUrl = URL.createObjectURL(base64ToBlob(item.data));
+          }
+          const newPhoto = {
+            id: genImageId$1(),
+            src: blobUrl,
+            name: item.name || `\uC11C\uB958\uC0AC\uC9C4_${attachedPhotos.length + 1}`
+          };
+          return newPhoto;
+        })
+      ]);
+    }
+  };
+}
+
+const genImageId = () => `camera-${Date.now()}-${Math.random()}`;
+function useCameraV2({
+  onChange,
+  resize: resizeOption = {
+    processType: "mixed",
+    resizeRatio: 5,
+    width: 1920,
+    // 300kb
+    filesize: 300 * 1024,
+    ext: "jpeg"
+  },
+  cameraOnly,
+  onDelete,
+  show,
+  type = "multiple",
+  buttonText,
+  initData,
+  useNativeCamera = false,
+  responseFileType,
+  convertType = "canvas"
+}) {
+  const convertedInitData = initData?.map((data, index) => ({ ...data, id: String(index + 1) }));
+  const [attachedPhotos, setAttachedPhotos] = React9.useState(convertedInitData || []);
+  const findImage = async (imageId) => {
+    const photo = attachedPhotos.find((image) => image.id === imageId);
+    if (!photo) {
+      throw new Error("[use-camera-v2] : Image not found");
+    }
+    const file = await imageUrlToFile(photo?.src, convertType);
+    const convertedPhoto = {
+      ...photo,
+      src: URL.createObjectURL(resizeOption ? await resize(file, resizeOption) : file)
+    };
+    return convertedPhoto;
+  };
+  const imageHandler = async (uri) => {
+    const newPhoto = {
+      id: genImageId(),
+      src: uri,
+      name: `\uC11C\uB958\uC0AC\uC9C4_${attachedPhotos.length + 1}`
+    };
+    if (type === "single") {
+      setAttachedPhotos([newPhoto]);
+    } else {
+      setAttachedPhotos([...attachedPhotos, newPhoto]);
+    }
+    if (onChange) {
+      const file = await imageUrlToFile(uri, convertType);
+      onChange(file);
+    }
+  };
+  const onClick = () => {
+    if (useNativeCamera) {
+      salesFrontendBridge.Bridge.native.documentCapture({ responseFileType }).then(async ({ uri }) => {
+        imageHandler(uri);
+      });
+    } else {
+      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) {
+            await imageHandler(URL.createObjectURL(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);
+      if (item[0]) {
+        URL.revokeObjectURL(item[0].src);
+      }
       setAttachedPhotos([...attachedPhotos]);
-      onDelete && onDelete(imageId);
+      if (onDelete) {
+        onDelete(imageId);
+      }
     }
   };
+  const deleteAllImages = () => {
+    attachedPhotos.forEach((image) => {
+      URL.revokeObjectURL(image.src);
+      if (onDelete) {
+        onDelete(image.id);
+      }
+    });
+    setAttachedPhotos([]);
+  };
   const CameraComponent = () => /* @__PURE__ */ jsxRuntime.jsx(
     Attachment,
     {
@@ -4680,6 +4829,7 @@ function useCamera({
     onClick,
     getImage: findImage,
     deleteImage,
+    deleteAllImages,
     attachedPhotos,
     Attachment: CameraComponent,
     addImage: (data) => {
@@ -7140,6 +7290,7 @@ exports.testSignatureBase64Data = testSignatureBase64Data;
 exports.useAddressComponent = useAddressComponent;
 exports.useBankStockSearch = useBankStockSearch;
 exports.useCamera = useCamera;
+exports.useCameraV2 = useCameraV2;
 exports.useCanvasPaint = useCanvasPaint;
 exports.useCustomerSearch = useCustomerSearch;
 exports.useDownloader = useDownloader;

package/dist/index.d.ts

@@ -103,83 +103,93 @@ interface StepIndicatorProps {
 
 declare const StepIndicator: ({ items, onClickItem, currentIndex, defaultValue, dotCount, isLoading }: StepIndicatorProps) => react_jsx_runtime.JSX.Element;
 
+/**
+ * 카메라 훅이 화면에 표시하는 첨부 이미지 메타데이터입니다.
+ * 실제 업로드용 원본 `File` 자체가 아니라, 목록 렌더링과 삭제 처리를 위한 식별자/미리보기 정보를 담습니다.
+ */
 interface AttachedPhoto {
+    /** 첨부 이미지를 고유하게 식별하는 값입니다. 삭제, 교체, 정렬 시 기준 키로 사용합니다. */
     id: string;
+    /** 썸네일 또는 미리보기에 사용할 이미지 URL입니다. `blob:` URL, data URL, 원격 URL 등이 들어올 수 있습니다. */
     src: string;
+    /** 화면에 함께 표시할 파일명입니다. 없으면 UI에서 이름 표시를 생략할 수 있습니다. */
     name?: string;
 }
+/**
+ * `useCamera` 훅 동작을 제어하는 옵션입니다.
+ * 호출부에서 첨부 UI 노출 방식, 카메라 실행 방식, 변환/리사이즈 정책을 함께 정의할 때 사용합니다.
+ */
 interface cameraOptions {
+    /**
+     * 화면 첫 렌더링 시 미리 보여줄 기존 첨부 이미지 목록입니다.
+     * `id`는 훅 내부에서 자동 생성하므로 호출부에서는 `src`, `name`만 전달하면 됩니다.
+     */
     initData?: Omit<AttachedPhoto, 'id'>[];
+    /** `Attachment` 컴포넌트를 즉시 노출할지 여부입니다. 별도 버튼으로 열고 싶다면 `false`를 사용합니다. */
     show: boolean;
+    /** 첨부 UI 표시 형태입니다. 단일 첨부, 다중 첨부, 선형 레이아웃 중 하나를 선택합니다. */
     type: cameraItemType;
-    onChange: (file: File) => void;
-    onDelete: (id: string) => void;
+    /** 새 사진이 추가된 직후 호출되는 콜백입니다. 리사이즈 전 원본 `File`을 전달받아 후속 업로드 처리에 사용합니다. */
+    onChange?: (file: File) => void;
+    /** 사용자가 기존 첨부 사진을 삭제했을 때 호출되는 콜백입니다. 전달값은 삭제된 사진의 `id`입니다. */
+    onDelete?: (id: string) => void;
+    /** 앱 환경에서 브리지 기반 네이티브 카메라/문서 캡처를 사용할지 여부입니다. */
     useNativeCamera?: boolean;
+    /** 웹 `input[type="file"]` 사용 시 앨범/파일 선택 없이 카메라 촬영만 허용할지 여부입니다. */
     cameraOnly: boolean;
+    /** 기본 첨부 버튼 문구를 덮어쓸 때 사용하는 텍스트입니다. */
     buttonText?: string;
-    responseFileType?: 'base64' | 'scheme';
-    convertType?: 'fetch' | 'xhr' | 'canvas';
-    resize: {
+    /**
+     * 네이티브 캡처 결과의 응답 형식입니다.
+     * `scheme`은 파일/커스텀 스킴 URI를, `base64`는 Base64 문자열을 반환하도록 요청합니다.
+     */
+    responseFileType: 'base64' | 'scheme';
+    /**
+     * 이미지 URL을 `File`로 바꿀 때 사용할 변환 방식입니다.
+     * `fetch`, `xhr`, `canvas` 중 환경 제약과 호환성에 맞는 전략을 선택할 수 있습니다.
+     */
+    convertType: 'fetch' | 'xhr' | 'canvas';
+    /** 첨부 후 이미지 크기와 용량을 줄이기 위한 리사이즈 옵션입니다. */
+    resize?: {
+        /** 반복 축소 시 한 번에 줄일 비율입니다. `5`면 매 반복마다 약 5%씩 축소합니다. */
         resizeRatio?: number;
+        /** 어떤 기준으로 축소할지 결정합니다. 품질만, 픽셀 크기만, 또는 둘 다 조합해 처리할 수 있습니다. */
         processType?: 'quality' | 'px' | 'mixed';
+        /** 최종 목표 너비(px)입니다. 높이만 없는 경우 원본 비율을 유지해 자동 계산합니다. */
         width?: number;
+        /** 최종 목표 높이(px)입니다. 너비만 없는 경우 원본 비율을 유지해 자동 계산합니다. */
         height?: number;
+        /** 최종 목표 파일 크기(byte)입니다. 예: `300 * 1024`는 약 300KB입니다. */
         filesize?: number;
+        /** 출력 이미지 확장자입니다. 일반적으로 `jpeg` 또는 `png`를 사용합니다. */
         ext?: string;
     };
 }
 type cameraItemType = 'single' | 'multiple' | 'linear';
-
 interface AddImageInfo {
     data: Blob | string;
     name?: string;
 }
-/**
- * @param options Partial<cameraOptions>
- * initData
- * 화면최초 로딩시 초기값
- *
- * show
- * boolean
- * 화면진입시, Attachment 컴포넌트 노출여부, 별도의 버튼을 통해 호출할 경우 false.
- *
- * type
- * 'single' | 'multiple' | 'linear'  Attachment 컴포넌트 타입
- *
- * onChange
- * (file: File) => void;
- *
- * onDelete
- * (id: string) => void;
- *
- * useNativeCamera
- * boolean
- * 앱환경에서, 네이티브의 카메라를 호출할경우 사용
- *
- * cameraOnly
- * boolean
- * useNativeCamera가 false인 경우에만 사용
- *
- * buttonText
- * string
- * Attachment 컴포넌트에 버튼을 표시할 경우에만 사용
- *
- * resize
- * 이미지가 입력된후 리사이즈를 할경우에만 사용
- * resize: {
- *     width?: number;
- *     height?: number;
- *     filesize?: number;
- *     ext?: string;
- *   };
- *
- * responseFileType fetch로 이미지자원을 가져올때 ios이슈가 있어서,
- * scheme, base64 두가지 타입으로 설정가능하도록 변경됨
- */
+
 declare function useCamera({ onChange, resize: resizeOption, cameraOnly, onDelete, show, type, buttonText, initData, useNativeCamera, responseFileType, convertType }?: Partial<cameraOptions>): {
     onClick: () => void;
     getImage: (imageId: string) => AttachedPhoto | undefined;
     deleteImage: (imageId: string) => void;
+    deleteAllImages: () => void;
+    attachedPhotos: AttachedPhoto[];
+    Attachment: () => react_jsx_runtime.JSX.Element;
+    addImage: (data: AddImageInfo[]) => void;
+};
+
+declare function useCameraV2({ onChange, resize: resizeOption, cameraOnly, onDelete, show, type, buttonText, initData, useNativeCamera, responseFileType, convertType }: cameraOptions): {
+    onClick: () => void;
+    getImage: (imageId: string) => Promise<{
+        src: string;
+        id: string;
+        name?: string;
+    }>;
+    deleteImage: (imageId: string) => void;
+    deleteAllImages: () => void;
     attachedPhotos: AttachedPhoto[];
     Attachment: () => react_jsx_runtime.JSX.Element;
     addImage: (data: AddImageInfo[]) => void;
@@ -1007,5 +1017,5 @@ interface UseTermsReturn<T> {
  */
 declare function useTerms<T extends object>(initialValue: T): UseTermsReturn<T>;
 
-export { AUTH_TEMPLATE_CODES, Attachment, BANK_STOCK_ICON_LIST, BANK_STOCK_SEARCH_MODAL_TABS, BankStockSearchModal, CustomerSearch, CustomerSearchModal, DeaCustomerSearchModal, DudDownload, DudUpload, EmployeeSearchModal, GtmIframe, HookFormCheckbox, HookFormCheckboxButton, HookFormDatePickerRenew, HookFormDateRangePickerRenew, HookFormSearchJobField, HookFormSegmentGroup, HookFormSelect, HookFormTextField, JobVehicleSearchModal, OrganizationSearchModal, RATING_DATA, RIV_SEARCH_PARAM_MAP, RivModalIframe, StepIndicator, TermsCancerCollectQR, TermsCancerMarketing, TermsCancerProvideQR, TermsCancerSystem, TermsCheckboxButton, TermsDesign, TermsExecution, TermsLoan, TermsMarketing, TermsMarketingCollectQR, TermsMarketingProviderQR, TermsMobileCard, TermsRadio, TermsRatingBar, TermsSignature, TermsTransfer, VERIFICATION_CODES, highlightOnSearchKeyword, resize, testSignatureBase64Data, useAddressComponent, useBankStockSearch, useCamera, useCanvasPaint, useCustomerSearch, useDownloader, useJobSearchModal, useJobVehicleSearch, useJobVehicleSearchModal, useNationalityComponent, useNxlOneModal, useRemoteIdentityVerification, useRemoteIdentityVerificationIframe, useSearchAddress, useSearchNationality, useSearchVisa, useTerms, useVisaComponent };
+export { AUTH_TEMPLATE_CODES, Attachment, BANK_STOCK_ICON_LIST, BANK_STOCK_SEARCH_MODAL_TABS, BankStockSearchModal, CustomerSearch, CustomerSearchModal, DeaCustomerSearchModal, DudDownload, DudUpload, EmployeeSearchModal, GtmIframe, HookFormCheckbox, HookFormCheckboxButton, HookFormDatePickerRenew, HookFormDateRangePickerRenew, HookFormSearchJobField, HookFormSegmentGroup, HookFormSelect, HookFormTextField, JobVehicleSearchModal, OrganizationSearchModal, RATING_DATA, RIV_SEARCH_PARAM_MAP, RivModalIframe, StepIndicator, TermsCancerCollectQR, TermsCancerMarketing, TermsCancerProvideQR, TermsCancerSystem, TermsCheckboxButton, TermsDesign, TermsExecution, TermsLoan, TermsMarketing, TermsMarketingCollectQR, TermsMarketingProviderQR, TermsMobileCard, TermsRadio, TermsRatingBar, TermsSignature, TermsTransfer, VERIFICATION_CODES, highlightOnSearchKeyword, resize, testSignatureBase64Data, useAddressComponent, useBankStockSearch, useCamera, useCameraV2, useCanvasPaint, useCustomerSearch, useDownloader, useJobSearchModal, useJobVehicleSearch, useJobVehicleSearchModal, useNationalityComponent, useNxlOneModal, useRemoteIdentityVerification, useRemoteIdentityVerificationIframe, useSearchAddress, useSearchNationality, useSearchVisa, useTerms, useVisaComponent };
 export type { AddImageInfo, AttachedPhoto, AttachmentProps, AuthCodeSet, AuthStep, BankStockSearchModalProps, BaseTermsProps, CustomerSearchProps, DownloadProps, DownloadTargetInfo, DownloaderProps, FormFactor, HookFormCheckboxButtonProps, HookFormCheckboxProps, HookFormDatePickerRenewProps, HookFormDateRangePickerRenewProps, HookFormSearchJobFieldProps, HookFormSegmentGroupProps, HookFormSelectProps, HookFormTextFieldProps, InitSearchParams, PaintProps, Pen, RemoteIdentityVerificationSuccess, RivModalIframeProps, RivModalIframeReturnProps, RivUrlParams, SearchInputProps, StepIndicatorProps, StepItem, TermsCancerMarketingData, TermsCancerMarketingProps, TermsCancerSystemData, TermsCancerSystemDataProps, TermsDesignData, TermsDesignProps, TermsExecutionData, TermsExecutionProps, TermsLoanData, TermsLoanDataProps, TermsMarketingData, TermsMarketingProps, TermsRadioOption, TermsRatingType, TermsSignatureData, UseRemoteIdentityVerificationProps, UseTermsReturn, Vehicle, VerificationResponse, cameraItemType, cameraOptions };

package/dist/index.esm.js

@@ -225,18 +225,6 @@ var _MessageEventManager = class _MessageEventManager2 {
 };
 __publicField(_MessageEventManager, "instance");
 var MessageEventManager = _MessageEventManager;
-function getCanvasExportFileInfo(imageUrl) {
-  const ext = imageUrl.split(".").pop()?.split("?")[0]?.toLowerCase();
-  switch (ext) {
-    case "jpg":
-    case "jpeg":
-      return { contentType: "image/jpeg", fileExt: "jpg" };
-    case "webp":
-      return { contentType: "image/webp", fileExt: "webp" };
-    default:
-      return { contentType: "image/png", fileExt: "png" };
-  }
-}
 function base64ToBlob(base64String, contentType = "") {
   const regex = /^data:([a-zA-Z0-9/+.-]+);base64,/;
   const matches = base64String.match(regex);
@@ -353,9 +341,9 @@ async function imageUrlToFileWithCanvas(imageUrl) {
       }
       try {
         ctx.drawImage(newImage, 0, 0);
-        const { contentType, fileExt } = getCanvasExportFileInfo(imageUrl);
-        const dataUrl = canvas.toDataURL(contentType);
-        const blob = base64ToBlob(dataUrl, contentType);
+        const dataUrl = canvas.toDataURL();
+        const blob = base64ToBlob(dataUrl);
+        const fileExt = getExt(blob) ?? "png";
         resolve(blobToFile(blob, `image.${fileExt}`));
       } catch (error) {
         reject(
@@ -4563,7 +4551,7 @@ function resize(image, options = { ext: "jpeg", filesize: maxImageSize }) {
   });
 }
 
-const genImageId = () => `camera-${Date.now()}-${Math.random()}`;
+const genImageId$1 = () => `camera-${Date.now()}-${Math.random()}`;
 function useCamera({
   onChange,
   resize: resizeOption = {
@@ -4591,7 +4579,7 @@ function useCamera({
   };
   const imageHandler = async (file) => {
     const newPhoto = {
-      id: genImageId(),
+      id: genImageId$1(),
       src: URL.createObjectURL(resizeOption ? await resize(file, resizeOption) : file),
       name: `\uC11C\uB958\uC0AC\uC9C4_${attachedPhotos.length + 1}`
     };
@@ -4651,11 +4639,172 @@ function useCamera({
     const imageIndex = attachedPhotos.findIndex((image) => image.id === imageId);
     if (imageIndex > -1) {
       const item = attachedPhotos.splice(imageIndex, 1);
-      item[0] && URL.revokeObjectURL(item[0].src);
+      if (item[0]) {
+        URL.revokeObjectURL(item[0].src);
+      }
+      setAttachedPhotos([...attachedPhotos]);
+      if (onDelete) {
+        onDelete(imageId);
+      }
+    }
+  };
+  const deleteAllImages = () => {
+    attachedPhotos.forEach((image) => {
+      URL.revokeObjectURL(image.src);
+      if (onDelete) {
+        onDelete(image.id);
+      }
+    });
+    setAttachedPhotos([]);
+  };
+  const CameraComponent = () => /* @__PURE__ */ jsx(
+    Attachment,
+    {
+      show: !!show,
+      onAddPhoto: onClick,
+      onRemovePhoto: deleteImage,
+      photos: attachedPhotos,
+      type,
+      buttonText
+    }
+  );
+  useEffect(() => {
+    return () => {
+      attachedPhotos.forEach((image) => {
+        URL.revokeObjectURL(image.src);
+      });
+    };
+  }, []);
+  return {
+    onClick,
+    getImage: findImage,
+    deleteImage,
+    deleteAllImages,
+    attachedPhotos,
+    Attachment: CameraComponent,
+    addImage: (data) => {
+      setAttachedPhotos([
+        ...attachedPhotos,
+        ...data.map((item) => {
+          let blobUrl = "";
+          if (item.data instanceof Blob) {
+            blobUrl = URL.createObjectURL(item.data);
+          } else if (typeof item.data === "string") {
+            blobUrl = URL.createObjectURL(base64ToBlob(item.data));
+          }
+          const newPhoto = {
+            id: genImageId$1(),
+            src: blobUrl,
+            name: item.name || `\uC11C\uB958\uC0AC\uC9C4_${attachedPhotos.length + 1}`
+          };
+          return newPhoto;
+        })
+      ]);
+    }
+  };
+}
+
+const genImageId = () => `camera-${Date.now()}-${Math.random()}`;
+function useCameraV2({
+  onChange,
+  resize: resizeOption = {
+    processType: "mixed",
+    resizeRatio: 5,
+    width: 1920,
+    // 300kb
+    filesize: 300 * 1024,
+    ext: "jpeg"
+  },
+  cameraOnly,
+  onDelete,
+  show,
+  type = "multiple",
+  buttonText,
+  initData,
+  useNativeCamera = false,
+  responseFileType,
+  convertType = "canvas"
+}) {
+  const convertedInitData = initData?.map((data, index) => ({ ...data, id: String(index + 1) }));
+  const [attachedPhotos, setAttachedPhotos] = useState(convertedInitData || []);
+  const findImage = async (imageId) => {
+    const photo = attachedPhotos.find((image) => image.id === imageId);
+    if (!photo) {
+      throw new Error("[use-camera-v2] : Image not found");
+    }
+    const file = await imageUrlToFile(photo?.src, convertType);
+    const convertedPhoto = {
+      ...photo,
+      src: URL.createObjectURL(resizeOption ? await resize(file, resizeOption) : file)
+    };
+    return convertedPhoto;
+  };
+  const imageHandler = async (uri) => {
+    const newPhoto = {
+      id: genImageId(),
+      src: uri,
+      name: `\uC11C\uB958\uC0AC\uC9C4_${attachedPhotos.length + 1}`
+    };
+    if (type === "single") {
+      setAttachedPhotos([newPhoto]);
+    } else {
+      setAttachedPhotos([...attachedPhotos, newPhoto]);
+    }
+    if (onChange) {
+      const file = await imageUrlToFile(uri, convertType);
+      onChange(file);
+    }
+  };
+  const onClick = () => {
+    if (useNativeCamera) {
+      Bridge.native.documentCapture({ responseFileType }).then(async ({ uri }) => {
+        imageHandler(uri);
+      });
+    } else {
+      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) {
+            await imageHandler(URL.createObjectURL(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);
+      if (item[0]) {
+        URL.revokeObjectURL(item[0].src);
+      }
       setAttachedPhotos([...attachedPhotos]);
-      onDelete && onDelete(imageId);
+      if (onDelete) {
+        onDelete(imageId);
+      }
     }
   };
+  const deleteAllImages = () => {
+    attachedPhotos.forEach((image) => {
+      URL.revokeObjectURL(image.src);
+      if (onDelete) {
+        onDelete(image.id);
+      }
+    });
+    setAttachedPhotos([]);
+  };
   const CameraComponent = () => /* @__PURE__ */ jsx(
     Attachment,
     {
@@ -4678,6 +4827,7 @@ function useCamera({
     onClick,
     getImage: findImage,
     deleteImage,
+    deleteAllImages,
     attachedPhotos,
     Attachment: CameraComponent,
     addImage: (data) => {
@@ -7089,4 +7239,4 @@ function useTerms(initialValue) {
   };
 }
 
-export { AUTH_TEMPLATE_CODES, Attachment, BANK_STOCK_ICON_LIST, BANK_STOCK_SEARCH_MODAL_TABS, BankStockSearchModal, CustomerSearch, CustomerSearchModal, DeaCustomerSearchModal, DudDownload, DudUpload, EmployeeSearchModal, GtmIframe, HookFormCheckbox, HookFormCheckboxButton, HookFormDatePickerRenew, HookFormDateRangePickerRenew, HookFormSearchJobField, HookFormSegmentGroup, HookFormSelect, HookFormTextField, JobVehicleSearchModal, OrganizationSearchModal, RATING_DATA, RIV_SEARCH_PARAM_MAP, RivModalIframe, StepIndicator, TermsCancerCollectQR, TermsCancerMarketing, TermsCancerProvideQR, TermsCancerSystem, TermsCheckboxButton, TermsDesign, TermsExecution, TermsLoan, TermsMarketing, TermsMarketingCollectQR, TermsMarketingProviderQR, TermsMobileCard, TermsRadio, TermsRatingBar, TermsSignature, TermsTransfer, VERIFICATION_CODES, highlightOnSearchKeyword, resize, testSignatureBase64Data, useAddressComponent, useBankStockSearch, useCamera, useCanvasPaint, useCustomerSearch, useDownloader, useJobSearchModal, useJobVehicleSearch, useJobVehicleSearchModal, useNationalityComponent, useNxlOneModal, useRemoteIdentityVerification, useRemoteIdentityVerificationIframe, useSearchAddress, useSearchNationality, useSearchVisa, useTerms, useVisaComponent };
+export { AUTH_TEMPLATE_CODES, Attachment, BANK_STOCK_ICON_LIST, BANK_STOCK_SEARCH_MODAL_TABS, BankStockSearchModal, CustomerSearch, CustomerSearchModal, DeaCustomerSearchModal, DudDownload, DudUpload, EmployeeSearchModal, GtmIframe, HookFormCheckbox, HookFormCheckboxButton, HookFormDatePickerRenew, HookFormDateRangePickerRenew, HookFormSearchJobField, HookFormSegmentGroup, HookFormSelect, HookFormTextField, JobVehicleSearchModal, OrganizationSearchModal, RATING_DATA, RIV_SEARCH_PARAM_MAP, RivModalIframe, StepIndicator, TermsCancerCollectQR, TermsCancerMarketing, TermsCancerProvideQR, TermsCancerSystem, TermsCheckboxButton, TermsDesign, TermsExecution, TermsLoan, TermsMarketing, TermsMarketingCollectQR, TermsMarketingProviderQR, TermsMobileCard, TermsRadio, TermsRatingBar, TermsSignature, TermsTransfer, VERIFICATION_CODES, highlightOnSearchKeyword, resize, testSignatureBase64Data, useAddressComponent, useBankStockSearch, useCamera, useCameraV2, useCanvasPaint, useCustomerSearch, useDownloader, useJobSearchModal, useJobVehicleSearch, useJobVehicleSearchModal, useNationalityComponent, useNxlOneModal, useRemoteIdentityVerification, useRemoteIdentityVerificationIframe, useSearchAddress, useSearchNationality, useSearchVisa, useTerms, useVisaComponent };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sales-frontend-components",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "private": false,
   "type": "module",
   "main": "dist/index.cjs.js",
@@ -45,12 +45,12 @@
     "sales-frontend-stores": "0.0.15",
     "sales-frontend-typescript-config": "0.0.2",
     "sales-frontend-assets": "0.0.27",
-    "sales-frontend-api": "0.0.179",
-    "sales-frontend-design-system": "0.2.3",
-    "sales-frontend-bridge": "0.0.119",
-    "sales-frontend-hooks": "0.0.180",
-    "sales-frontend-solution": "0.0.59",
-    "sales-frontend-debug": "0.0.77",
+    "sales-frontend-api": "0.0.180",
+    "sales-frontend-design-system": "0.2.4",
+    "sales-frontend-bridge": "0.0.120",
+    "sales-frontend-hooks": "0.0.181",
+    "sales-frontend-solution": "0.0.60",
+    "sales-frontend-debug": "0.0.78",
     "sales-frontend-vitest-config": "0.0.3"
   },
   "peerDependencies": {
@@ -58,19 +58,19 @@
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "react-hook-form": "^7.58.1",
-    "sales-frontend-api": "0.0.179",
+    "sales-frontend-api": "0.0.180",
     "sales-frontend-assets": "0.0.27",
     "sales-frontend-stores": "0.0.15",
-    "sales-frontend-design-system": "0.2.3",
-    "sales-frontend-bridge": "0.0.119",
-    "sales-frontend-hooks": "0.0.180",
-    "sales-frontend-solution": "0.0.59"
+    "sales-frontend-design-system": "0.2.4",
+    "sales-frontend-bridge": "0.0.120",
+    "sales-frontend-hooks": "0.0.181",
+    "sales-frontend-solution": "0.0.60"
   },
   "dependencies": {
     "classnames": "^2.5.1",
     "dayjs": "^1.11.13",
-    "sales-frontend-utils": "0.0.71",
-    "sales-frontend-debug": "0.0.77"
+    "sales-frontend-utils": "0.0.72",
+    "sales-frontend-debug": "0.0.78"
   },
   "scripts": {
     "lint": "eslint . --max-warnings 0",

package/dist/sample/sample.module.scss

@@ -1,25 +0,0 @@
-.container {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 16px;
-}
-
-.title {
-  font-size: 16px;
-  font-weight: 600;
-}
-
-.count {
-  font-size: 14px;
-  color: #666;
-}
-
-.button {
-  padding: 8px 16px;
-  color: #fff;
-  cursor: pointer;
-  background-color: #007bff;
-  border: none;
-  border-radius: 4px;
-}