sales-frontend-components 2.0.2 → 2.0.4

package/dist/index.cjs.js

@@ -227,6 +227,18 @@ 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);
@@ -320,41 +332,46 @@ async function imageUrlToFileFetch(imageUrl) {
   const file = new File([blob], name, { type });
   return file;
 }
-async function imageUrlToFile(imageUrl) {
-  const fileConvertTypeCookieKey = "dsp-debug-mode-file-convert-type";
-  const fileConvertType = getCookie$1(fileConvertTypeCookieKey);
-  if (fileConvertType === "fetch") {
+async function imageUrlToFile(imageUrl, convertType) {
+  if (convertType === "fetch") {
     return await imageUrlToFileFetch(imageUrl);
   }
-  if (fileConvertType === "xhr") {
+  if (convertType === "xhr") {
     return await imageUrlToFileWithXMLHttpRequest(imageUrl);
   }
   return await imageUrlToFileWithCanvas(imageUrl);
 }
 async function imageUrlToFileWithCanvas(imageUrl) {
   const newImage = new Image();
-  newImage.src = imageUrl;
-  newImage.crossOrigin = "Anonymous";
   return new Promise((resolve, reject) => {
     newImage.onload = () => {
       const canvas = document.createElement("canvas");
       canvas.width = newImage.width;
       canvas.height = newImage.height;
       const ctx = canvas.getContext("2d");
-      if (ctx) {
+      if (!ctx) {
+        reject(new Error("Failed to get canvas 2d context."));
+        return;
+      }
+      try {
         ctx.drawImage(newImage, 0, 0);
-        canvas.toBlob((blob) => {
-          if (blob) {
-            const ext = getExt(imageUrl);
-            const file = new File([blob], `image.${ext}`, { type: blob.type });
-            resolve(file);
-          }
-        });
+        const { contentType, fileExt } = getCanvasExportFileInfo(imageUrl);
+        const dataUrl = canvas.toDataURL(contentType);
+        const blob = base64ToBlob(dataUrl, contentType);
+        resolve(blobToFile(blob, `image.${fileExt}`));
+      } catch (error) {
+        reject(
+          new Error(
+            `imageUrlToFileWithCanvas failed for "${imageUrl}". ${error instanceof Error ? error.message : "Unknown error"}`
+          )
+        );
       }
     };
     newImage.onerror = (e) => {
       reject(JSON.stringify(e));
     };
+    newImage.crossOrigin = "Anonymous";
+    newImage.src = imageUrl;
   });
 }
 async function imageUrlToFileWithXMLHttpRequest(imageUrl) {
@@ -727,7 +744,7 @@ const AddressSearchDetailInput = ({
 }) => {
   const { land, road } = selectedStandardizationAddress || {};
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Radio.Root, { name: "address-search-standardization", size: "medium", className: "mb-xxlarge", children: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Radio.Item, { wrapperProps: { className: cx$x("search-result-radio") }, value: "", checked: true, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx$x("search-result"), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Radio.Root, { name: "address-search-standardization", size: "medium", align: "vertical", className: "mb-xxlarge", children: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Radio.Item, { wrapperProps: { className: cx$x("search-result-radio") }, value: "", checked: true, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx$x("search-result"), children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "span",
         {
@@ -2452,7 +2469,7 @@ function DeaCustomerSearchResult({
         /* @__PURE__ */ jsxRuntime.jsx("th", { className: cx$q("th-padding"), children: "\uC8FC\uC18C" })
       ] }) }),
       /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: customerList.length > 0 ? customerList.map((customer, index) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("td", { children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: cx$q("radio-cell"), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "d-flex-center-center", children: /* @__PURE__ */ jsxRuntime.jsx(
           salesFrontendDesignSystem.Radio.Item,
           {
             id: `radio-${index}`,
@@ -2464,7 +2481,7 @@ function DeaCustomerSearchResult({
               onCustomerSelect(customer);
             }
           }
-        ) }),
+        ) }) }),
         /* @__PURE__ */ jsxRuntime.jsx("td", { children: customer.customerId }),
         /* @__PURE__ */ jsxRuntime.jsx("td", { children: customer.customerName }),
         /* @__PURE__ */ jsxRuntime.jsx("td", { children: customer.residentNumber }),
@@ -3006,8 +3023,7 @@ function JobSearchCategory({ filteredJobs, onJobSelect, searchTerm }) {
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: filteredJobs.length }),
       "\uAC74\uC758 \uAC80\uC0C9\uACB0\uACFC"
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.Root, { children: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Radio.Root, { name: "job-selection", size: "small", className: cx$m("job-radio-root"), onToggle: () => {
-    }, children: filteredJobs.map((job, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.Root, { children: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Radio.Root, { name: "job-selection", size: "small", align: "vertical", className: cx$m("job-radio-root"), children: filteredJobs.map((job, index) => /* @__PURE__ */ jsxRuntime.jsxs(
       salesFrontendDesignSystem.Accordion.Item,
       {
         id: `item-${job.occupationIndustryCode}-${index}-accordion`,
@@ -3041,7 +3057,7 @@ const cx$l = classNames.bind(styles$8);
 function JobSearchFavorite({ filteredJobs, onJobSelect }) {
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx$l("popular-jobs"), children: [
     /* @__PURE__ */ jsxRuntime.jsx("p", { children: "\uB9CE\uC774 \uCC3E\uB294 \uC9C1\uC885" }),
-    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.Root, { children: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Radio.Root, { name: "job-selection", size: "small", className: cx$l("job-radio-root"), children: filteredJobs.map((job, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.Root, { children: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Radio.Root, { name: "job-selection", size: "small", align: "vertical", className: cx$l("job-radio-root"), children: filteredJobs.map((job, index) => /* @__PURE__ */ jsxRuntime.jsxs(
       salesFrontendDesignSystem.Accordion.Item,
       {
         id: `item-${job.occupationIndustryCode}-${index}`,
@@ -3085,7 +3101,7 @@ function JobSearchResult({ filteredJobs, onJobSelect, searchTerm }) {
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: filteredJobs.length }),
       "\uAC74\uC758 \uAC80\uC0C9\uACB0\uACFC"
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.Root, { children: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Radio.Root, { name: "job-selection", size: "small", className: cx$k("job-radio-root"), children: filteredJobs.map((job, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+    /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Accordion.Root, { children: /* @__PURE__ */ jsxRuntime.jsx(salesFrontendDesignSystem.Radio.Root, { name: "job-selection", size: "small", align: "vertical", className: cx$k("job-radio-root"), children: filteredJobs.map((job, index) => /* @__PURE__ */ jsxRuntime.jsxs(
       salesFrontendDesignSystem.Accordion.Item,
       {
         id: `item-${job.occupationIndustryCode}`,
@@ -3505,6 +3521,7 @@ function VehicleSearch({ vehicles, onVehicleSelect, selectedVehicle }) {
       {
         name: "vehicle-selection",
         size: "small",
+        align: "vertical",
         className: cx$h("vehicle-radio-root"),
         defaultValue: selectedVehicle?.integrationCodeValue || "",
         children: vehicles.map((vehicle, index) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4566,7 +4583,8 @@ function useCamera({
   buttonText,
   initData,
   useNativeCamera = false,
-  responseFileType
+  responseFileType,
+  convertType = "canvas"
 } = {}) {
   const convertedInitData = initData?.map((data, index) => ({ ...data, id: String(index + 1) }));
   const [attachedPhotos, setAttachedPhotos] = React9.useState(convertedInitData || []);
@@ -4590,7 +4608,7 @@ function useCamera({
   };
   const processImage = async (uri) => {
     if (responseFileType === "scheme") {
-      const file = await imageUrlToFile(uri);
+      const file = await imageUrlToFile(uri, convertType);
       await imageHandler(file);
     } else {
       const file = await base64ToFile(uri, "image.jpg");

package/dist/index.d.ts

@@ -118,6 +118,7 @@ interface cameraOptions {
     cameraOnly: boolean;
     buttonText?: string;
     responseFileType?: 'base64' | 'scheme';
+    convertType?: 'fetch' | 'xhr' | 'canvas';
     resize: {
         resizeRatio?: number;
         processType?: 'quality' | 'px' | 'mixed';
@@ -175,7 +176,7 @@ interface AddImageInfo {
  * responseFileType fetch로 이미지자원을 가져올때 ios이슈가 있어서,
  * scheme, base64 두가지 타입으로 설정가능하도록 변경됨
  */
-declare function useCamera({ onChange, resize: resizeOption, cameraOnly, onDelete, show, type, buttonText, initData, useNativeCamera, responseFileType }?: Partial<cameraOptions>): {
+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;

package/dist/index.esm.js

@@ -225,6 +225,18 @@ 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);
@@ -318,41 +330,46 @@ async function imageUrlToFileFetch(imageUrl) {
   const file = new File([blob], name, { type });
   return file;
 }
-async function imageUrlToFile(imageUrl) {
-  const fileConvertTypeCookieKey = "dsp-debug-mode-file-convert-type";
-  const fileConvertType = getCookie$1(fileConvertTypeCookieKey);
-  if (fileConvertType === "fetch") {
+async function imageUrlToFile(imageUrl, convertType) {
+  if (convertType === "fetch") {
     return await imageUrlToFileFetch(imageUrl);
   }
-  if (fileConvertType === "xhr") {
+  if (convertType === "xhr") {
     return await imageUrlToFileWithXMLHttpRequest(imageUrl);
   }
   return await imageUrlToFileWithCanvas(imageUrl);
 }
 async function imageUrlToFileWithCanvas(imageUrl) {
   const newImage = new Image();
-  newImage.src = imageUrl;
-  newImage.crossOrigin = "Anonymous";
   return new Promise((resolve, reject) => {
     newImage.onload = () => {
       const canvas = document.createElement("canvas");
       canvas.width = newImage.width;
       canvas.height = newImage.height;
       const ctx = canvas.getContext("2d");
-      if (ctx) {
+      if (!ctx) {
+        reject(new Error("Failed to get canvas 2d context."));
+        return;
+      }
+      try {
         ctx.drawImage(newImage, 0, 0);
-        canvas.toBlob((blob) => {
-          if (blob) {
-            const ext = getExt(imageUrl);
-            const file = new File([blob], `image.${ext}`, { type: blob.type });
-            resolve(file);
-          }
-        });
+        const { contentType, fileExt } = getCanvasExportFileInfo(imageUrl);
+        const dataUrl = canvas.toDataURL(contentType);
+        const blob = base64ToBlob(dataUrl, contentType);
+        resolve(blobToFile(blob, `image.${fileExt}`));
+      } catch (error) {
+        reject(
+          new Error(
+            `imageUrlToFileWithCanvas failed for "${imageUrl}". ${error instanceof Error ? error.message : "Unknown error"}`
+          )
+        );
       }
     };
     newImage.onerror = (e) => {
       reject(JSON.stringify(e));
     };
+    newImage.crossOrigin = "Anonymous";
+    newImage.src = imageUrl;
   });
 }
 async function imageUrlToFileWithXMLHttpRequest(imageUrl) {
@@ -725,7 +742,7 @@ const AddressSearchDetailInput = ({
 }) => {
   const { land, road } = selectedStandardizationAddress || {};
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(Radio.Root, { name: "address-search-standardization", size: "medium", className: "mb-xxlarge", children: /* @__PURE__ */ jsx(Radio.Item, { wrapperProps: { className: cx$x("search-result-radio") }, value: "", checked: true, children: /* @__PURE__ */ jsxs("span", { className: cx$x("search-result"), children: [
+    /* @__PURE__ */ jsx(Radio.Root, { name: "address-search-standardization", size: "medium", align: "vertical", className: "mb-xxlarge", children: /* @__PURE__ */ jsx(Radio.Item, { wrapperProps: { className: cx$x("search-result-radio") }, value: "", checked: true, children: /* @__PURE__ */ jsxs("span", { className: cx$x("search-result"), children: [
       /* @__PURE__ */ jsx(
         "span",
         {
@@ -2450,7 +2467,7 @@ function DeaCustomerSearchResult({
         /* @__PURE__ */ jsx("th", { className: cx$q("th-padding"), children: "\uC8FC\uC18C" })
       ] }) }),
       /* @__PURE__ */ jsx("tbody", { children: customerList.length > 0 ? customerList.map((customer, index) => /* @__PURE__ */ jsxs("tr", { children: [
-        /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("td", { className: cx$q("radio-cell"), children: /* @__PURE__ */ jsx("div", { className: "d-flex-center-center", children: /* @__PURE__ */ jsx(
           Radio.Item,
           {
             id: `radio-${index}`,
@@ -2462,7 +2479,7 @@ function DeaCustomerSearchResult({
               onCustomerSelect(customer);
             }
           }
-        ) }),
+        ) }) }),
         /* @__PURE__ */ jsx("td", { children: customer.customerId }),
         /* @__PURE__ */ jsx("td", { children: customer.customerName }),
         /* @__PURE__ */ jsx("td", { children: customer.residentNumber }),
@@ -3004,8 +3021,7 @@ function JobSearchCategory({ filteredJobs, onJobSelect, searchTerm }) {
       /* @__PURE__ */ jsx("span", { className: "text-primary", children: filteredJobs.length }),
       "\uAC74\uC758 \uAC80\uC0C9\uACB0\uACFC"
     ] }),
-    /* @__PURE__ */ jsx(Accordion.Root, { children: /* @__PURE__ */ jsx(Radio.Root, { name: "job-selection", size: "small", className: cx$m("job-radio-root"), onToggle: () => {
-    }, children: filteredJobs.map((job, index) => /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(Accordion.Root, { children: /* @__PURE__ */ jsx(Radio.Root, { name: "job-selection", size: "small", align: "vertical", className: cx$m("job-radio-root"), children: filteredJobs.map((job, index) => /* @__PURE__ */ jsxs(
       Accordion.Item,
       {
         id: `item-${job.occupationIndustryCode}-${index}-accordion`,
@@ -3039,7 +3055,7 @@ const cx$l = classNames.bind(styles$8);
 function JobSearchFavorite({ filteredJobs, onJobSelect }) {
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: cx$l("popular-jobs"), children: [
     /* @__PURE__ */ jsx("p", { children: "\uB9CE\uC774 \uCC3E\uB294 \uC9C1\uC885" }),
-    /* @__PURE__ */ jsx(Accordion.Root, { children: /* @__PURE__ */ jsx(Radio.Root, { name: "job-selection", size: "small", className: cx$l("job-radio-root"), children: filteredJobs.map((job, index) => /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(Accordion.Root, { children: /* @__PURE__ */ jsx(Radio.Root, { name: "job-selection", size: "small", align: "vertical", className: cx$l("job-radio-root"), children: filteredJobs.map((job, index) => /* @__PURE__ */ jsxs(
       Accordion.Item,
       {
         id: `item-${job.occupationIndustryCode}-${index}`,
@@ -3083,7 +3099,7 @@ function JobSearchResult({ filteredJobs, onJobSelect, searchTerm }) {
       /* @__PURE__ */ jsx("span", { className: "text-primary", children: filteredJobs.length }),
       "\uAC74\uC758 \uAC80\uC0C9\uACB0\uACFC"
     ] }),
-    /* @__PURE__ */ jsx(Accordion.Root, { children: /* @__PURE__ */ jsx(Radio.Root, { name: "job-selection", size: "small", className: cx$k("job-radio-root"), children: filteredJobs.map((job, index) => /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(Accordion.Root, { children: /* @__PURE__ */ jsx(Radio.Root, { name: "job-selection", size: "small", align: "vertical", className: cx$k("job-radio-root"), children: filteredJobs.map((job, index) => /* @__PURE__ */ jsxs(
       Accordion.Item,
       {
         id: `item-${job.occupationIndustryCode}`,
@@ -3503,6 +3519,7 @@ function VehicleSearch({ vehicles, onVehicleSelect, selectedVehicle }) {
       {
         name: "vehicle-selection",
         size: "small",
+        align: "vertical",
         className: cx$h("vehicle-radio-root"),
         defaultValue: selectedVehicle?.integrationCodeValue || "",
         children: vehicles.map((vehicle, index) => /* @__PURE__ */ jsxs(
@@ -4564,7 +4581,8 @@ function useCamera({
   buttonText,
   initData,
   useNativeCamera = false,
-  responseFileType
+  responseFileType,
+  convertType = "canvas"
 } = {}) {
   const convertedInitData = initData?.map((data, index) => ({ ...data, id: String(index + 1) }));
   const [attachedPhotos, setAttachedPhotos] = useState(convertedInitData || []);
@@ -4588,7 +4606,7 @@ function useCamera({
   };
   const processImage = async (uri) => {
     if (responseFileType === "scheme") {
-      const file = await imageUrlToFile(uri);
+      const file = await imageUrlToFile(uri, convertType);
       await imageHandler(file);
     } else {
       const file = await base64ToFile(uri, "image.jpg");

package/dist/modal/pre-standard/dea-customer-search-modal/dea-customer-search-modal.module.scss

@@ -89,6 +89,10 @@
       padding: padding(xsmall);
       text-align: center;
 
+      &.radio-cell {
+        padding: padding(xsmall) 0;
+      }
+
       .td-padding {
         display: block;
         padding: padding(xxxsmall) 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sales-frontend-components",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "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.177",
-    "sales-frontend-design-system": "0.2.1",
-    "sales-frontend-bridge": "0.0.117",
-    "sales-frontend-hooks": "0.0.178",
-    "sales-frontend-solution": "0.0.57",
-    "sales-frontend-debug": "0.0.75",
+    "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-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.177",
+    "sales-frontend-api": "0.0.179",
     "sales-frontend-assets": "0.0.27",
     "sales-frontend-stores": "0.0.15",
-    "sales-frontend-design-system": "0.2.1",
-    "sales-frontend-bridge": "0.0.117",
-    "sales-frontend-hooks": "0.0.178",
-    "sales-frontend-solution": "0.0.57"
+    "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"
   },
   "dependencies": {
     "classnames": "^2.5.1",
     "dayjs": "^1.11.13",
-    "sales-frontend-utils": "0.0.69",
-    "sales-frontend-debug": "0.0.75"
+    "sales-frontend-utils": "0.0.71",
+    "sales-frontend-debug": "0.0.77"
   },
   "scripts": {
     "lint": "eslint . --max-warnings 0",