sales-frontend-utils 0.0.53 → 0.0.55

package/dist/utils/canvas-utils.cjs

@@ -1,6 +1,11 @@
 'use strict';
 
 // src/utils/canvas-utils.ts
+var getTextWidth = (text, font, context) => {
+  context.font = font;
+  const metrics = context.measureText(text);
+  return metrics.width;
+};
 var convertTextToImg = ({
   targetStr,
   canvasWidth,
@@ -16,8 +21,9 @@ var convertTextToImg = ({
   if (!ctx) {
     throw new Error("Canvas context\uB97C \uAC00\uC838\uC62C \uC218 \uC5C6\uC2B5\uB2C8\uB2E4.");
   }
+  const font = `${fontWeight ?? "normal"} ${fontSize ?? 75}px ${fontFamily}`;
   const defaultHeight = 150;
-  const calculatedWidth = targetStr.length * 70;
+  const calculatedWidth = getTextWidth(targetStr, font, ctx);
   canvas.width = canvasWidth ?? calculatedWidth;
   canvas.height = canvasHeight ?? defaultHeight;
   if (backgroundColor) {
@@ -26,8 +32,7 @@ var convertTextToImg = ({
   }
   ctx.fillStyle = fontColor ?? "black";
   ctx.textAlign = "center";
-  ctx.font = `${fontWeight ?? "normal"} ${fontSize ?? 75}px ${fontFamily}`;
-  console.log("font", `${fontWeight ?? "normal"} ${fontSize ?? 75}px ${fontFamily}`);
+  ctx.font = font;
   ctx.textBaseline = "middle";
   ctx.fillText(targetStr, canvas.width / 2, canvas.height / 2);
   return canvas.toDataURL();
@@ -66,5 +71,6 @@ function drawImageResizeCentered(base64, size) {
 
 exports.convertTextToImg = convertTextToImg;
 exports.drawImageResizeCentered = drawImageResizeCentered;
+exports.getTextWidth = getTextWidth;
 //# sourceMappingURL=canvas-utils.cjs.map
 //# sourceMappingURL=canvas-utils.cjs.map

package/dist/utils/canvas-utils.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/canvas-utils.ts"],"names":[],"mappings":"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","file":"canvas-utils.cjs","sourcesContent":["interface ConvertTextToImgParams {\n  /** 이미지로 변환할 문자열 */\n  targetStr: string;\n  /** 캔버스 너비 (지정하지 않으면 텍스트 길이에 따라 자동 계산) */\n  canvasWidth?: number;\n  /** 캔버스 높이 (지정하지 않으면 기본값 150px) */\n  canvasHeight?: number;\n  /** 배경색 (지정하지 않으면 투명) */\n  backgroundColor?: string;\n  /** 폰트 크기 (지정하지 않으면 기본값 75px) */\n  fontSize?: number;\n  /** 폰트 색상 (지정하지 않으면 기본값 검정색) */\n  fontColor?: string;\n  /** 폰트 두께 (지정하지 않으면 기본값 bold) */\n  fontWeight?: string;\n  /** 폰트 패밀리 (지정하지 않으면 기본값 ) */\n  fontFamily?: string;\n}\n\n/**\n * 텍스트를 이미지(Base64)로 변환하는 함수\n * @param params - 변환에 필요한 파라미터 객체\n * @returns Base64로 인코딩된 이미지 데이터 URL\n */\nexport const convertTextToImg = ({\n  targetStr,\n  canvasWidth,\n  canvasHeight,\n  backgroundColor,\n  fontColor,\n  fontSize,\n  fontWeight,\n  fontFamily = `'system-ui', 'sans-serif'`\n}: ConvertTextToImgParams): string => {\n  // 1. 메모리에 캔버스 요소 생성\n  const canvas = document.createElement('canvas');\n  const ctx = canvas.getContext('2d');\n\n  if (!ctx) {\n    // 캔버스 컨텍스트를 가져올 수 없는 경우 에러 처리\n    throw new Error('Canvas context를 가져올 수 없습니다.');\n  }\n\n  // 2. 캔버스 크기 설정\n  const defaultHeight = 150;\n  const calculatedWidth = targetStr.length * 70; // 글자 수 기반 너비 계산\n\n  canvas.width = canvasWidth ?? calculatedWidth;\n  canvas.height = canvasHeight ?? defaultHeight;\n\n  // 3. 배경색 처리\n  if (backgroundColor) {\n    ctx.fillStyle = backgroundColor;\n    ctx.fillRect(0, 0, canvas.width, canvas.height);\n  }\n\n  // 4. 텍스트 그리기\n  ctx.fillStyle = fontColor ?? 'black';\n  ctx.textAlign = 'center';\n  ctx.font = `${fontWeight ?? 'normal'} ${fontSize ?? 75}px ${fontFamily}`;\n\n  console.log('font', `${fontWeight ?? 'normal'} ${fontSize ?? 75}px ${fontFamily}`);\n  ctx.textBaseline = 'middle'; // 텍스트를 수직 중앙에 더 잘 맞추기 위해 추가\n\n  // 텍스트를 캔버스 중앙에 그립니다.\n  ctx.fillText(targetStr, canvas.width / 2, canvas.height / 2);\n\n  // 5. Base64 이미지 데이터로 변환하여 반환\n  return canvas.toDataURL(); // 기본적으로 'image/png'\n};\n\nexport function drawImageResizeCentered(base64: string, size: { canvasWidth: number; canvasHeight: number }) {\n  return new Promise((resolve) => {\n    const { canvasHeight, canvasWidth } = size;\n\n    const canvas = document.createElement('canvas');\n    canvas.width = canvasWidth;\n    canvas.height = canvasHeight;\n    const ctx = canvas.getContext('2d');\n\n    const img = new Image();\n    img.src = base64;\n    img.onload = () => {\n      const imageWidth = img.width;\n      const imageHeight = img.height;\n\n      const canvasRatio = canvasWidth / canvasHeight;\n      const imageRatio = imageWidth / imageHeight;\n\n      let newWidth;\n      let newHeight;\n\n      if (imageRatio > canvasRatio) {\n        newWidth = canvasWidth;\n        newHeight = newWidth / imageRatio;\n      } else {\n        newHeight = canvasHeight;\n        newWidth = newHeight * imageRatio;\n      }\n\n      const x = (canvasWidth - newWidth) / 2;\n      const y = (canvasHeight - newHeight) / 2;\n\n      ctx?.clearRect(0, 0, canvasWidth, canvasHeight);\n      ctx?.drawImage(img, x, y, newWidth, newHeight);\n\n      resolve(canvas.toDataURL());\n    };\n  });\n}\n"]}
+{"version":3,"sources":["../../src/utils/canvas-utils.ts"],"names":[],"mappings":"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","file":"canvas-utils.cjs","sourcesContent":["interface ConvertTextToImgParams {\n  /** 이미지로 변환할 문자열 */\n  targetStr: string;\n  /** 캔버스 너비 (지정하지 않으면 텍스트 길이에 따라 자동 계산) */\n  canvasWidth?: number;\n  /** 캔버스 높이 (지정하지 않으면 기본값 150px) */\n  canvasHeight?: number;\n  /** 배경색 (지정하지 않으면 투명) */\n  backgroundColor?: string;\n  /** 폰트 크기 (지정하지 않으면 기본값 75px) */\n  fontSize?: number;\n  /** 폰트 색상 (지정하지 않으면 기본값 검정색) */\n  fontColor?: string;\n  /** 폰트 두께 (지정하지 않으면 기본값 bold) */\n  fontWeight?: string;\n  /** 폰트 패밀리 (지정하지 않으면 기본값 ) */\n  fontFamily?: string;\n}\n\n\n\nexport const getTextWidth = (text: string, font: string, context: CanvasRenderingContext2D) => {\n\n  // 폰트 스타일 설정\n  context.font = font;\n\n  // measureText()를 사용하여 TextMetrics 객체 가져오기\n  const metrics = context.measureText(text);\n\n  // 너비(width) 반환\n  return metrics.width;\n}\n\n\n\n\n/**\n * 텍스트를 이미지(Base64)로 변환하는 함수\n * @param params - 변환에 필요한 파라미터 객체\n * @returns Base64로 인코딩된 이미지 데이터 URL\n */\nexport const convertTextToImg = ({\n  targetStr,\n  canvasWidth,\n  canvasHeight,\n  backgroundColor,\n  fontColor,\n  fontSize,\n  fontWeight,\n  fontFamily = `'system-ui', 'sans-serif'`\n}: ConvertTextToImgParams): string => {\n  // 1. 메모리에 캔버스 요소 생성\n  const canvas = document.createElement('canvas');\n  const ctx = canvas.getContext('2d');\n\n  if (!ctx) {\n    // 캔버스 컨텍스트를 가져올 수 없는 경우 에러 처리\n    throw new Error('Canvas context를 가져올 수 없습니다.');\n  }\n\n  const font = `${fontWeight ?? 'normal'} ${fontSize ?? 75}px ${fontFamily}`;\n\n  // 2. 캔버스 크기 설정\n  const defaultHeight = 150;\n\n  // as-is\n  // const calculatedWidth = targetStr.length * 70; // 글자 수 기반 너비 계산\n\n  const calculatedWidth = getTextWidth(targetStr, font, ctx);\n  canvas.width = canvasWidth ?? calculatedWidth;\n  canvas.height = canvasHeight ?? defaultHeight;\n\n  // 3. 배경색 처리\n  if (backgroundColor) {\n    ctx.fillStyle = backgroundColor;\n    ctx.fillRect(0, 0, canvas.width, canvas.height);\n  }\n\n  // 4. 텍스트 그리기\n  ctx.fillStyle = fontColor ?? 'black';\n  ctx.textAlign = 'center';\n  ctx.font = font;\n  ctx.textBaseline = 'middle'; // 텍스트를 수직 중앙에 더 잘 맞추기 위해 추가\n\n  // 텍스트를 캔버스 중앙에 그립니다.\n  ctx.fillText(targetStr, canvas.width / 2, canvas.height / 2);\n\n  // 5. Base64 이미지 데이터로 변환하여 반환\n  return canvas.toDataURL(); // 기본적으로 'image/png'\n};\n\nexport function drawImageResizeCentered(base64: string, size: { canvasWidth: number; canvasHeight: number }) {\n  return new Promise((resolve) => {\n    const { canvasHeight, canvasWidth } = size;\n\n    const canvas = document.createElement('canvas');\n    canvas.width = canvasWidth;\n    canvas.height = canvasHeight;\n    const ctx = canvas.getContext('2d');\n\n    const img = new Image();\n    img.src = base64;\n    img.onload = () => {\n      const imageWidth = img.width;\n      const imageHeight = img.height;\n\n      const canvasRatio = canvasWidth / canvasHeight;\n      const imageRatio = imageWidth / imageHeight;\n\n      let newWidth;\n      let newHeight;\n\n      if (imageRatio > canvasRatio) {\n        newWidth = canvasWidth;\n        newHeight = newWidth / imageRatio;\n      } else {\n        newHeight = canvasHeight;\n        newWidth = newHeight * imageRatio;\n      }\n\n      const x = (canvasWidth - newWidth) / 2;\n      const y = (canvasHeight - newHeight) / 2;\n\n      ctx?.clearRect(0, 0, canvasWidth, canvasHeight);\n      ctx?.drawImage(img, x, y, newWidth, newHeight);\n\n      resolve(canvas.toDataURL());\n    };\n  });\n}\n"]}

package/dist/utils/canvas-utils.d.cts

@@ -16,6 +16,7 @@ interface ConvertTextToImgParams {
     /** 폰트 패밀리 (지정하지 않으면 기본값 ) */
     fontFamily?: string;
 }
+declare const getTextWidth: (text: string, font: string, context: CanvasRenderingContext2D) => number;
 /**
  * 텍스트를 이미지(Base64)로 변환하는 함수
  * @param params - 변환에 필요한 파라미터 객체
@@ -27,4 +28,4 @@ declare function drawImageResizeCentered(base64: string, size: {
     canvasHeight: number;
 }): Promise<unknown>;
 
-export { convertTextToImg, drawImageResizeCentered };
+export { convertTextToImg, drawImageResizeCentered, getTextWidth };

package/dist/utils/canvas-utils.d.ts

@@ -16,6 +16,7 @@ interface ConvertTextToImgParams {
     /** 폰트 패밀리 (지정하지 않으면 기본값 ) */
     fontFamily?: string;
 }
+declare const getTextWidth: (text: string, font: string, context: CanvasRenderingContext2D) => number;
 /**
  * 텍스트를 이미지(Base64)로 변환하는 함수
  * @param params - 변환에 필요한 파라미터 객체
@@ -27,4 +28,4 @@ declare function drawImageResizeCentered(base64: string, size: {
     canvasHeight: number;
 }): Promise<unknown>;
 
-export { convertTextToImg, drawImageResizeCentered };
+export { convertTextToImg, drawImageResizeCentered, getTextWidth };

package/dist/utils/canvas-utils.js

@@ -1,4 +1,9 @@
 // src/utils/canvas-utils.ts
+var getTextWidth = (text, font, context) => {
+  context.font = font;
+  const metrics = context.measureText(text);
+  return metrics.width;
+};
 var convertTextToImg = ({
   targetStr,
   canvasWidth,
@@ -14,8 +19,9 @@ var convertTextToImg = ({
   if (!ctx) {
     throw new Error("Canvas context\uB97C \uAC00\uC838\uC62C \uC218 \uC5C6\uC2B5\uB2C8\uB2E4.");
   }
+  const font = `${fontWeight ?? "normal"} ${fontSize ?? 75}px ${fontFamily}`;
   const defaultHeight = 150;
-  const calculatedWidth = targetStr.length * 70;
+  const calculatedWidth = getTextWidth(targetStr, font, ctx);
   canvas.width = canvasWidth ?? calculatedWidth;
   canvas.height = canvasHeight ?? defaultHeight;
   if (backgroundColor) {
@@ -24,8 +30,7 @@ var convertTextToImg = ({
   }
   ctx.fillStyle = fontColor ?? "black";
   ctx.textAlign = "center";
-  ctx.font = `${fontWeight ?? "normal"} ${fontSize ?? 75}px ${fontFamily}`;
-  console.log("font", `${fontWeight ?? "normal"} ${fontSize ?? 75}px ${fontFamily}`);
+  ctx.font = font;
   ctx.textBaseline = "middle";
   ctx.fillText(targetStr, canvas.width / 2, canvas.height / 2);
   return canvas.toDataURL();
@@ -62,6 +67,6 @@ function drawImageResizeCentered(base64, size) {
   });
 }
 
-export { convertTextToImg, drawImageResizeCentered };
+export { convertTextToImg, drawImageResizeCentered, getTextWidth };
 //# sourceMappingURL=canvas-utils.js.map
 //# sourceMappingURL=canvas-utils.js.map

package/dist/utils/canvas-utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/canvas-utils.ts"],"names":[],"mappings":"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","file":"canvas-utils.js","sourcesContent":["interface ConvertTextToImgParams {\n  /** 이미지로 변환할 문자열 */\n  targetStr: string;\n  /** 캔버스 너비 (지정하지 않으면 텍스트 길이에 따라 자동 계산) */\n  canvasWidth?: number;\n  /** 캔버스 높이 (지정하지 않으면 기본값 150px) */\n  canvasHeight?: number;\n  /** 배경색 (지정하지 않으면 투명) */\n  backgroundColor?: string;\n  /** 폰트 크기 (지정하지 않으면 기본값 75px) */\n  fontSize?: number;\n  /** 폰트 색상 (지정하지 않으면 기본값 검정색) */\n  fontColor?: string;\n  /** 폰트 두께 (지정하지 않으면 기본값 bold) */\n  fontWeight?: string;\n  /** 폰트 패밀리 (지정하지 않으면 기본값 ) */\n  fontFamily?: string;\n}\n\n/**\n * 텍스트를 이미지(Base64)로 변환하는 함수\n * @param params - 변환에 필요한 파라미터 객체\n * @returns Base64로 인코딩된 이미지 데이터 URL\n */\nexport const convertTextToImg = ({\n  targetStr,\n  canvasWidth,\n  canvasHeight,\n  backgroundColor,\n  fontColor,\n  fontSize,\n  fontWeight,\n  fontFamily = `'system-ui', 'sans-serif'`\n}: ConvertTextToImgParams): string => {\n  // 1. 메모리에 캔버스 요소 생성\n  const canvas = document.createElement('canvas');\n  const ctx = canvas.getContext('2d');\n\n  if (!ctx) {\n    // 캔버스 컨텍스트를 가져올 수 없는 경우 에러 처리\n    throw new Error('Canvas context를 가져올 수 없습니다.');\n  }\n\n  // 2. 캔버스 크기 설정\n  const defaultHeight = 150;\n  const calculatedWidth = targetStr.length * 70; // 글자 수 기반 너비 계산\n\n  canvas.width = canvasWidth ?? calculatedWidth;\n  canvas.height = canvasHeight ?? defaultHeight;\n\n  // 3. 배경색 처리\n  if (backgroundColor) {\n    ctx.fillStyle = backgroundColor;\n    ctx.fillRect(0, 0, canvas.width, canvas.height);\n  }\n\n  // 4. 텍스트 그리기\n  ctx.fillStyle = fontColor ?? 'black';\n  ctx.textAlign = 'center';\n  ctx.font = `${fontWeight ?? 'normal'} ${fontSize ?? 75}px ${fontFamily}`;\n\n  console.log('font', `${fontWeight ?? 'normal'} ${fontSize ?? 75}px ${fontFamily}`);\n  ctx.textBaseline = 'middle'; // 텍스트를 수직 중앙에 더 잘 맞추기 위해 추가\n\n  // 텍스트를 캔버스 중앙에 그립니다.\n  ctx.fillText(targetStr, canvas.width / 2, canvas.height / 2);\n\n  // 5. Base64 이미지 데이터로 변환하여 반환\n  return canvas.toDataURL(); // 기본적으로 'image/png'\n};\n\nexport function drawImageResizeCentered(base64: string, size: { canvasWidth: number; canvasHeight: number }) {\n  return new Promise((resolve) => {\n    const { canvasHeight, canvasWidth } = size;\n\n    const canvas = document.createElement('canvas');\n    canvas.width = canvasWidth;\n    canvas.height = canvasHeight;\n    const ctx = canvas.getContext('2d');\n\n    const img = new Image();\n    img.src = base64;\n    img.onload = () => {\n      const imageWidth = img.width;\n      const imageHeight = img.height;\n\n      const canvasRatio = canvasWidth / canvasHeight;\n      const imageRatio = imageWidth / imageHeight;\n\n      let newWidth;\n      let newHeight;\n\n      if (imageRatio > canvasRatio) {\n        newWidth = canvasWidth;\n        newHeight = newWidth / imageRatio;\n      } else {\n        newHeight = canvasHeight;\n        newWidth = newHeight * imageRatio;\n      }\n\n      const x = (canvasWidth - newWidth) / 2;\n      const y = (canvasHeight - newHeight) / 2;\n\n      ctx?.clearRect(0, 0, canvasWidth, canvasHeight);\n      ctx?.drawImage(img, x, y, newWidth, newHeight);\n\n      resolve(canvas.toDataURL());\n    };\n  });\n}\n"]}
+{"version":3,"sources":["../../src/utils/canvas-utils.ts"],"names":[],"mappings":"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","file":"canvas-utils.js","sourcesContent":["interface ConvertTextToImgParams {\n  /** 이미지로 변환할 문자열 */\n  targetStr: string;\n  /** 캔버스 너비 (지정하지 않으면 텍스트 길이에 따라 자동 계산) */\n  canvasWidth?: number;\n  /** 캔버스 높이 (지정하지 않으면 기본값 150px) */\n  canvasHeight?: number;\n  /** 배경색 (지정하지 않으면 투명) */\n  backgroundColor?: string;\n  /** 폰트 크기 (지정하지 않으면 기본값 75px) */\n  fontSize?: number;\n  /** 폰트 색상 (지정하지 않으면 기본값 검정색) */\n  fontColor?: string;\n  /** 폰트 두께 (지정하지 않으면 기본값 bold) */\n  fontWeight?: string;\n  /** 폰트 패밀리 (지정하지 않으면 기본값 ) */\n  fontFamily?: string;\n}\n\n\n\nexport const getTextWidth = (text: string, font: string, context: CanvasRenderingContext2D) => {\n\n  // 폰트 스타일 설정\n  context.font = font;\n\n  // measureText()를 사용하여 TextMetrics 객체 가져오기\n  const metrics = context.measureText(text);\n\n  // 너비(width) 반환\n  return metrics.width;\n}\n\n\n\n\n/**\n * 텍스트를 이미지(Base64)로 변환하는 함수\n * @param params - 변환에 필요한 파라미터 객체\n * @returns Base64로 인코딩된 이미지 데이터 URL\n */\nexport const convertTextToImg = ({\n  targetStr,\n  canvasWidth,\n  canvasHeight,\n  backgroundColor,\n  fontColor,\n  fontSize,\n  fontWeight,\n  fontFamily = `'system-ui', 'sans-serif'`\n}: ConvertTextToImgParams): string => {\n  // 1. 메모리에 캔버스 요소 생성\n  const canvas = document.createElement('canvas');\n  const ctx = canvas.getContext('2d');\n\n  if (!ctx) {\n    // 캔버스 컨텍스트를 가져올 수 없는 경우 에러 처리\n    throw new Error('Canvas context를 가져올 수 없습니다.');\n  }\n\n  const font = `${fontWeight ?? 'normal'} ${fontSize ?? 75}px ${fontFamily}`;\n\n  // 2. 캔버스 크기 설정\n  const defaultHeight = 150;\n\n  // as-is\n  // const calculatedWidth = targetStr.length * 70; // 글자 수 기반 너비 계산\n\n  const calculatedWidth = getTextWidth(targetStr, font, ctx);\n  canvas.width = canvasWidth ?? calculatedWidth;\n  canvas.height = canvasHeight ?? defaultHeight;\n\n  // 3. 배경색 처리\n  if (backgroundColor) {\n    ctx.fillStyle = backgroundColor;\n    ctx.fillRect(0, 0, canvas.width, canvas.height);\n  }\n\n  // 4. 텍스트 그리기\n  ctx.fillStyle = fontColor ?? 'black';\n  ctx.textAlign = 'center';\n  ctx.font = font;\n  ctx.textBaseline = 'middle'; // 텍스트를 수직 중앙에 더 잘 맞추기 위해 추가\n\n  // 텍스트를 캔버스 중앙에 그립니다.\n  ctx.fillText(targetStr, canvas.width / 2, canvas.height / 2);\n\n  // 5. Base64 이미지 데이터로 변환하여 반환\n  return canvas.toDataURL(); // 기본적으로 'image/png'\n};\n\nexport function drawImageResizeCentered(base64: string, size: { canvasWidth: number; canvasHeight: number }) {\n  return new Promise((resolve) => {\n    const { canvasHeight, canvasWidth } = size;\n\n    const canvas = document.createElement('canvas');\n    canvas.width = canvasWidth;\n    canvas.height = canvasHeight;\n    const ctx = canvas.getContext('2d');\n\n    const img = new Image();\n    img.src = base64;\n    img.onload = () => {\n      const imageWidth = img.width;\n      const imageHeight = img.height;\n\n      const canvasRatio = canvasWidth / canvasHeight;\n      const imageRatio = imageWidth / imageHeight;\n\n      let newWidth;\n      let newHeight;\n\n      if (imageRatio > canvasRatio) {\n        newWidth = canvasWidth;\n        newHeight = newWidth / imageRatio;\n      } else {\n        newHeight = canvasHeight;\n        newWidth = newHeight * imageRatio;\n      }\n\n      const x = (canvasWidth - newWidth) / 2;\n      const y = (canvasHeight - newHeight) / 2;\n\n      ctx?.clearRect(0, 0, canvasWidth, canvasHeight);\n      ctx?.drawImage(img, x, y, newWidth, newHeight);\n\n      resolve(canvas.toDataURL());\n    };\n  });\n}\n"]}

package/dist/utils/key-trigger-utils.cjs

@@ -0,0 +1,98 @@
+'use strict';
+
+// src/utils/key-trigger-utils.ts
+var charFilterEng = (value) => value.replace(/[^a-zA-Z]/g, "");
+var charFilterKor = (value) => value.replace(/[^\uAC00-\uD7AF]/g, "");
+function isOverCharCount(value, count) {
+  const hangulLength = charFilterKor(value).length;
+  const englishLength = charFilterEng(value).length;
+  if (hangulLength + englishLength >= count) {
+    return true;
+  }
+  return false;
+}
+function checkKeys(event, keys) {
+  if (keys.includes(event.key)) {
+    return true;
+  }
+  return false;
+}
+function isEnter(event) {
+  if (checkKeys(event, ["Enter"]) || event.code === "NumpadEnter") {
+    return true;
+  }
+  return false;
+}
+function isBackspace(event) {
+  if (checkKeys(event, ["Backspace"])) {
+    return true;
+  }
+  return false;
+}
+function isArrowUp(event) {
+  if (checkKeys(event, ["ArrowUp"])) {
+    return true;
+  }
+  return false;
+}
+function isArrowDown(event) {
+  if (checkKeys(event, ["ArrowDown"])) {
+    return true;
+  }
+  return false;
+}
+function isArrowLeft(event) {
+  if (checkKeys(event, ["ArrowLeft"])) {
+    return true;
+  }
+  return false;
+}
+function isArrowRight(event) {
+  if (checkKeys(event, ["ArrowRight"])) {
+    return true;
+  }
+  return false;
+}
+function isTab(event) {
+  if (checkKeys(event, ["Tab"])) {
+    return true;
+  }
+  return false;
+}
+function isEscape(event) {
+  if (checkKeys(event, ["Escape"])) {
+    return true;
+  }
+  return false;
+}
+function isOverKorCharCount(value, count) {
+  const hangulLength = charFilterKor(value).length;
+  if (hangulLength > count) {
+    return true;
+  }
+  return false;
+}
+function isOverEngCharCount(value, count) {
+  const englishLength = charFilterEng(value).length;
+  if (englishLength > count) {
+    return true;
+  }
+  return false;
+}
+
+exports.charFilterEng = charFilterEng;
+exports.charFilterKor = charFilterKor;
+exports.checkKeys = checkKeys;
+exports.isArrowDown = isArrowDown;
+exports.isArrowLeft = isArrowLeft;
+exports.isArrowRight = isArrowRight;
+exports.isArrowUp = isArrowUp;
+exports.isBackspace = isBackspace;
+exports.isEnter = isEnter;
+exports.isEscape = isEscape;
+exports.isOverCharCount = isOverCharCount;
+exports.isOverEngCharCount = isOverEngCharCount;
+exports.isOverKorCharCount = isOverKorCharCount;
+exports.isTab = isTab;
+//# sourceMappingURL=key-trigger-utils.cjs.map
+//# sourceMappingURL=key-trigger-utils.cjs.map

package/dist/utils/key-trigger-utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/key-trigger-utils.ts"],"names":[],"mappings":"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","file":"key-trigger-utils.cjs","sourcesContent":["import React from 'react';\n\nexport const charFilterEng = (value: string) => value.replace(/[^a-zA-Z]/g, '');\nexport const charFilterKor = (value: string) => value.replace(/[^\\uAC00-\\uD7AF]/g, '');\n\n/**\n * 영문+한글포함 N글자 이상 입력시 트리거 발생\n */\nexport function isOverCharCount(value: string, count: number) {\n    // value에서 한글만 추출\n    const hangulLength = charFilterKor(value).length;\n\n    // value에서 영문만 추출\n    const englishLength = charFilterEng(value).length;\n\n    //영문 한글 조합일때,  count 이상 일경우, 트리거 발생\n    if (hangulLength + englishLength >= count) {\n        return true;\n    }\n\n    return false;\n}\n\n/**\n * 배열 keys에 포함된 key를 입력시 true 리턴\n * @param event React.KeyboardEvent<HTMLInputElement>\n * @param keys React.KeyboardEvent<HTMLInputElement>['key'][]\n * @returns boolean\n */\nexport function checkKeys(event: React.KeyboardEvent<HTMLInputElement>, keys: React.KeyboardEvent<HTMLInputElement>['key'][]) {\n    if (keys.includes(event.key)) {\n        return true;\n    }\n\n    return false;\n}\n\n/**\n * Enter 키 입력시 트리거 발생\n * 일반 엔터키 +  numberpad 엔터키\n */\nexport function isEnter(event: React.KeyboardEvent<HTMLInputElement>) {\n    if (checkKeys(event, ['Enter']) || event.code === 'NumpadEnter') {\n        return true;\n    }\n\n    return false;\n}\n\n\n/**\n * Backspace 키 입력시 트리거 발생\n */\nexport function isBackspace(event: React.KeyboardEvent<HTMLInputElement>) {\n    if (checkKeys(event, ['Backspace'])) {\n        return true;\n    }\n\n    return false;\n}\n\n/**\n * ArrowUp 키 입력시 트리거 발생\n */\nexport function isArrowUp(event: React.KeyboardEvent<HTMLInputElement>) {\n    if (checkKeys(event, ['ArrowUp'])) {\n        return true;\n    }\n\n    return false;\n}\n\n/**\n * ArrowDown 키 입력시 트리거 발생\n */\nexport function isArrowDown(event: React.KeyboardEvent<HTMLInputElement>) {\n    if (checkKeys(event, ['ArrowDown'])) {\n        return true;\n    }\n\n    return false;\n}\n\n/**\n * ArrowLeft 키 입력시 트리거 발생\n */\nexport function isArrowLeft(event: React.KeyboardEvent<HTMLInputElement>) {\n    if (checkKeys(event, ['ArrowLeft'])) {\n        return true;\n    }\n\n    return false;\n}\n\n/**\n * ArrowRight 키 입력시 트리거 발생\n */\nexport function isArrowRight(event: React.KeyboardEvent<HTMLInputElement>) {\n    if (checkKeys(event, ['ArrowRight'])) {\n        return true;\n    }\n\n    return false;\n}\n\n/**\n * Tab 키 입력시 트리거 발생\n */\nexport function isTab(event: React.KeyboardEvent<HTMLInputElement>) {\n    if (checkKeys(event, ['Tab'])) {\n        return true;\n    }\n\n    return false;\n}\n\n/**\n * Escape 키 입력시 트리거 발생\n */\nexport function isEscape(event: React.KeyboardEvent<HTMLInputElement>) {\n    if (checkKeys(event, ['Escape'])) {\n        return true;\n    }\n\n    return false;\n}\n\n\n/**\n * 한글 N글자 이상 입력시 트리거 발생\n */\nexport function isOverKorCharCount(value: string, count: number) {\n    //value에서 한글만 추출\n    const hangulLength = charFilterKor(value).length;\n\n    //한글 count 초과 일경우, 트리거 발생\n    if (hangulLength > count) {\n        return true;\n    }\n\n    return false;\n}\n\n\n\n/**\n * 영문 N글자 이상 입력시 트리거 발생\n */\nexport function isOverEngCharCount(value: string, count: number) {\n\n    //value에서 영문만 추출\n    const englishLength = charFilterEng(value).length;\n\n    //영문 count 초과 일경우, 트리거 발생\n    if (englishLength > count) {\n        return true;\n    }\n\n    return false;\n}\n"]}

package/dist/utils/key-trigger-utils.d.cts

@@ -0,0 +1,58 @@
+import React from 'react';
+
+declare const charFilterEng: (value: string) => string;
+declare const charFilterKor: (value: string) => string;
+/**
+ * 영문+한글포함 N글자 이상 입력시 트리거 발생
+ */
+declare function isOverCharCount(value: string, count: number): boolean;
+/**
+ * 배열 keys에 포함된 key를 입력시 true 리턴
+ * @param event React.KeyboardEvent<HTMLInputElement>
+ * @param keys React.KeyboardEvent<HTMLInputElement>['key'][]
+ * @returns boolean
+ */
+declare function checkKeys(event: React.KeyboardEvent<HTMLInputElement>, keys: React.KeyboardEvent<HTMLInputElement>['key'][]): boolean;
+/**
+ * Enter 키 입력시 트리거 발생
+ * 일반 엔터키 +  numberpad 엔터키
+ */
+declare function isEnter(event: React.KeyboardEvent<HTMLInputElement>): boolean;
+/**
+ * Backspace 키 입력시 트리거 발생
+ */
+declare function isBackspace(event: React.KeyboardEvent<HTMLInputElement>): boolean;
+/**
+ * ArrowUp 키 입력시 트리거 발생
+ */
+declare function isArrowUp(event: React.KeyboardEvent<HTMLInputElement>): boolean;
+/**
+ * ArrowDown 키 입력시 트리거 발생
+ */
+declare function isArrowDown(event: React.KeyboardEvent<HTMLInputElement>): boolean;
+/**
+ * ArrowLeft 키 입력시 트리거 발생
+ */
+declare function isArrowLeft(event: React.KeyboardEvent<HTMLInputElement>): boolean;
+/**
+ * ArrowRight 키 입력시 트리거 발생
+ */
+declare function isArrowRight(event: React.KeyboardEvent<HTMLInputElement>): boolean;
+/**
+ * Tab 키 입력시 트리거 발생
+ */
+declare function isTab(event: React.KeyboardEvent<HTMLInputElement>): boolean;
+/**
+ * Escape 키 입력시 트리거 발생
+ */
+declare function isEscape(event: React.KeyboardEvent<HTMLInputElement>): boolean;
+/**
+ * 한글 N글자 이상 입력시 트리거 발생
+ */
+declare function isOverKorCharCount(value: string, count: number): boolean;
+/**
+ * 영문 N글자 이상 입력시 트리거 발생
+ */
+declare function isOverEngCharCount(value: string, count: number): boolean;
+
+export { charFilterEng, charFilterKor, checkKeys, isArrowDown, isArrowLeft, isArrowRight, isArrowUp, isBackspace, isEnter, isEscape, isOverCharCount, isOverEngCharCount, isOverKorCharCount, isTab };

package/dist/utils/key-trigger-utils.d.ts

@@ -0,0 +1,58 @@
+import React from 'react';
+
+declare const charFilterEng: (value: string) => string;
+declare const charFilterKor: (value: string) => string;
+/**
+ * 영문+한글포함 N글자 이상 입력시 트리거 발생
+ */
+declare function isOverCharCount(value: string, count: number): boolean;
+/**
+ * 배열 keys에 포함된 key를 입력시 true 리턴
+ * @param event React.KeyboardEvent<HTMLInputElement>
+ * @param keys React.KeyboardEvent<HTMLInputElement>['key'][]
+ * @returns boolean
+ */
+declare function checkKeys(event: React.KeyboardEvent<HTMLInputElement>, keys: React.KeyboardEvent<HTMLInputElement>['key'][]): boolean;
+/**
+ * Enter 키 입력시 트리거 발생
+ * 일반 엔터키 +  numberpad 엔터키
+ */
+declare function isEnter(event: React.KeyboardEvent<HTMLInputElement>): boolean;
+/**
+ * Backspace 키 입력시 트리거 발생
+ */
+declare function isBackspace(event: React.KeyboardEvent<HTMLInputElement>): boolean;
+/**
+ * ArrowUp 키 입력시 트리거 발생
+ */
+declare function isArrowUp(event: React.KeyboardEvent<HTMLInputElement>): boolean;
+/**
+ * ArrowDown 키 입력시 트리거 발생
+ */
+declare function isArrowDown(event: React.KeyboardEvent<HTMLInputElement>): boolean;
+/**
+ * ArrowLeft 키 입력시 트리거 발생
+ */
+declare function isArrowLeft(event: React.KeyboardEvent<HTMLInputElement>): boolean;
+/**
+ * ArrowRight 키 입력시 트리거 발생
+ */
+declare function isArrowRight(event: React.KeyboardEvent<HTMLInputElement>): boolean;
+/**
+ * Tab 키 입력시 트리거 발생
+ */
+declare function isTab(event: React.KeyboardEvent<HTMLInputElement>): boolean;
+/**
+ * Escape 키 입력시 트리거 발생
+ */
+declare function isEscape(event: React.KeyboardEvent<HTMLInputElement>): boolean;
+/**
+ * 한글 N글자 이상 입력시 트리거 발생
+ */
+declare function isOverKorCharCount(value: string, count: number): boolean;
+/**
+ * 영문 N글자 이상 입력시 트리거 발생
+ */
+declare function isOverEngCharCount(value: string, count: number): boolean;
+
+export { charFilterEng, charFilterKor, checkKeys, isArrowDown, isArrowLeft, isArrowRight, isArrowUp, isBackspace, isEnter, isEscape, isOverCharCount, isOverEngCharCount, isOverKorCharCount, isTab };

package/dist/utils/key-trigger-utils.js

@@ -0,0 +1,83 @@
+// src/utils/key-trigger-utils.ts
+var charFilterEng = (value) => value.replace(/[^a-zA-Z]/g, "");
+var charFilterKor = (value) => value.replace(/[^\uAC00-\uD7AF]/g, "");
+function isOverCharCount(value, count) {
+  const hangulLength = charFilterKor(value).length;
+  const englishLength = charFilterEng(value).length;
+  if (hangulLength + englishLength >= count) {
+    return true;
+  }
+  return false;
+}
+function checkKeys(event, keys) {
+  if (keys.includes(event.key)) {
+    return true;
+  }
+  return false;
+}
+function isEnter(event) {
+  if (checkKeys(event, ["Enter"]) || event.code === "NumpadEnter") {
+    return true;
+  }
+  return false;
+}
+function isBackspace(event) {
+  if (checkKeys(event, ["Backspace"])) {
+    return true;
+  }
+  return false;
+}
+function isArrowUp(event) {
+  if (checkKeys(event, ["ArrowUp"])) {
+    return true;
+  }
+  return false;
+}
+function isArrowDown(event) {
+  if (checkKeys(event, ["ArrowDown"])) {
+    return true;
+  }
+  return false;
+}
+function isArrowLeft(event) {
+  if (checkKeys(event, ["ArrowLeft"])) {
+    return true;
+  }
+  return false;
+}
+function isArrowRight(event) {
+  if (checkKeys(event, ["ArrowRight"])) {
+    return true;
+  }
+  return false;
+}
+function isTab(event) {
+  if (checkKeys(event, ["Tab"])) {
+    return true;
+  }
+  return false;
+}
+function isEscape(event) {
+  if (checkKeys(event, ["Escape"])) {
+    return true;
+  }
+  return false;
+}
+function isOverKorCharCount(value, count) {
+  const hangulLength = charFilterKor(value).length;
+  if (hangulLength > count) {
+    return true;
+  }
+  return false;
+}
+function isOverEngCharCount(value, count) {
+  const englishLength = charFilterEng(value).length;
+  if (englishLength > count) {
+    return true;
+  }
+  return false;
+}
+
+export { charFilterEng, charFilterKor, checkKeys, isArrowDown, isArrowLeft, isArrowRight, isArrowUp, isBackspace, isEnter, isEscape, isOverCharCount, isOverEngCharCount, isOverKorCharCount, isTab };
+//# sourceMappingURL=key-trigger-utils.js.map
+//# sourceMappingURL=key-trigger-utils.js.map

package/dist/utils/key-trigger-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/key-trigger-utils.ts"],"names":[],"mappings":";AAEO,IAAM,gBAAgB,CAAC,KAAA,KAAkB,KAAM,CAAA,OAAA,CAAQ,cAAc,EAAE;AACvE,IAAM,gBAAgB,CAAC,KAAA,KAAkB,KAAM,CAAA,OAAA,CAAQ,qBAAqB,EAAE;AAK9E,SAAS,eAAA,CAAgB,OAAe,KAAe,EAAA;AAE1D,EAAM,MAAA,YAAA,GAAe,aAAc,CAAA,KAAK,CAAE,CAAA,MAAA;AAG1C,EAAM,MAAA,aAAA,GAAgB,aAAc,CAAA,KAAK,CAAE,CAAA,MAAA;AAG3C,EAAI,IAAA,YAAA,GAAe,iBAAiB,KAAO,EAAA;AACvC,IAAO,OAAA,IAAA;AAAA;AAGX,EAAO,OAAA,KAAA;AACX;AAQO,SAAS,SAAA,CAAU,OAA8C,IAAsD,EAAA;AAC1H,EAAA,IAAI,IAAK,CAAA,QAAA,CAAS,KAAM,CAAA,GAAG,CAAG,EAAA;AAC1B,IAAO,OAAA,IAAA;AAAA;AAGX,EAAO,OAAA,KAAA;AACX;AAMO,SAAS,QAAQ,KAA8C,EAAA;AAClE,EAAI,IAAA,SAAA,CAAU,OAAO,CAAC,OAAO,CAAC,CAAK,IAAA,KAAA,CAAM,SAAS,aAAe,EAAA;AAC7D,IAAO,OAAA,IAAA;AAAA;AAGX,EAAO,OAAA,KAAA;AACX;AAMO,SAAS,YAAY,KAA8C,EAAA;AACtE,EAAA,IAAI,SAAU,CAAA,KAAA,EAAO,CAAC,WAAW,CAAC,CAAG,EAAA;AACjC,IAAO,OAAA,IAAA;AAAA;AAGX,EAAO,OAAA,KAAA;AACX;AAKO,SAAS,UAAU,KAA8C,EAAA;AACpE,EAAA,IAAI,SAAU,CAAA,KAAA,EAAO,CAAC,SAAS,CAAC,CAAG,EAAA;AAC/B,IAAO,OAAA,IAAA;AAAA;AAGX,EAAO,OAAA,KAAA;AACX;AAKO,SAAS,YAAY,KAA8C,EAAA;AACtE,EAAA,IAAI,SAAU,CAAA,KAAA,EAAO,CAAC,WAAW,CAAC,CAAG,EAAA;AACjC,IAAO,OAAA,IAAA;AAAA;AAGX,EAAO,OAAA,KAAA;AACX;AAKO,SAAS,YAAY,KAA8C,EAAA;AACtE,EAAA,IAAI,SAAU,CAAA,KAAA,EAAO,CAAC,WAAW,CAAC,CAAG,EAAA;AACjC,IAAO,OAAA,IAAA;AAAA;AAGX,EAAO,OAAA,KAAA;AACX;AAKO,SAAS,aAAa,KAA8C,EAAA;AACvE,EAAA,IAAI,SAAU,CAAA,KAAA,EAAO,CAAC,YAAY,CAAC,CAAG,EAAA;AAClC,IAAO,OAAA,IAAA;AAAA;AAGX,EAAO,OAAA,KAAA;AACX;AAKO,SAAS,MAAM,KAA8C,EAAA;AAChE,EAAA,IAAI,SAAU,CAAA,KAAA,EAAO,CAAC,KAAK,CAAC,CAAG,EAAA;AAC3B,IAAO,OAAA,IAAA;AAAA;AAGX,EAAO,OAAA,KAAA;AACX;AAKO,SAAS,SAAS,KAA8C,EAAA;AACnE,EAAA,IAAI,SAAU,CAAA,KAAA,EAAO,CAAC,QAAQ,CAAC,CAAG,EAAA;AAC9B,IAAO,OAAA,IAAA;AAAA;AAGX,EAAO,OAAA,KAAA;AACX;AAMO,SAAS,kBAAA,CAAmB,OAAe,KAAe,EAAA;AAE7D,EAAM,MAAA,YAAA,GAAe,aAAc,CAAA,KAAK,CAAE,CAAA,MAAA;AAG1C,EAAA,IAAI,eAAe,KAAO,EAAA;AACtB,IAAO,OAAA,IAAA;AAAA;AAGX,EAAO,OAAA,KAAA;AACX;AAOO,SAAS,kBAAA,CAAmB,OAAe,KAAe,EAAA;AAG7D,EAAM,MAAA,aAAA,GAAgB,aAAc,CAAA,KAAK,CAAE,CAAA,MAAA;AAG3C,EAAA,IAAI,gBAAgB,KAAO,EAAA;AACvB,IAAO,OAAA,IAAA;AAAA;AAGX,EAAO,OAAA,KAAA;AACX","file":"key-trigger-utils.js","sourcesContent":["import React from 'react';\n\nexport const charFilterEng = (value: string) => value.replace(/[^a-zA-Z]/g, '');\nexport const charFilterKor = (value: string) => value.replace(/[^\\uAC00-\\uD7AF]/g, '');\n\n/**\n * 영문+한글포함 N글자 이상 입력시 트리거 발생\n */\nexport function isOverCharCount(value: string, count: number) {\n    // value에서 한글만 추출\n    const hangulLength = charFilterKor(value).length;\n\n    // value에서 영문만 추출\n    const englishLength = charFilterEng(value).length;\n\n    //영문 한글 조합일때,  count 이상 일경우, 트리거 발생\n    if (hangulLength + englishLength >= count) {\n        return true;\n    }\n\n    return false;\n}\n\n/**\n * 배열 keys에 포함된 key를 입력시 true 리턴\n * @param event React.KeyboardEvent<HTMLInputElement>\n * @param keys React.KeyboardEvent<HTMLInputElement>['key'][]\n * @returns boolean\n */\nexport function checkKeys(event: React.KeyboardEvent<HTMLInputElement>, keys: React.KeyboardEvent<HTMLInputElement>['key'][]) {\n    if (keys.includes(event.key)) {\n        return true;\n    }\n\n    return false;\n}\n\n/**\n * Enter 키 입력시 트리거 발생\n * 일반 엔터키 +  numberpad 엔터키\n */\nexport function isEnter(event: React.KeyboardEvent<HTMLInputElement>) {\n    if (checkKeys(event, ['Enter']) || event.code === 'NumpadEnter') {\n        return true;\n    }\n\n    return false;\n}\n\n\n/**\n * Backspace 키 입력시 트리거 발생\n */\nexport function isBackspace(event: React.KeyboardEvent<HTMLInputElement>) {\n    if (checkKeys(event, ['Backspace'])) {\n        return true;\n    }\n\n    return false;\n}\n\n/**\n * ArrowUp 키 입력시 트리거 발생\n */\nexport function isArrowUp(event: React.KeyboardEvent<HTMLInputElement>) {\n    if (checkKeys(event, ['ArrowUp'])) {\n        return true;\n    }\n\n    return false;\n}\n\n/**\n * ArrowDown 키 입력시 트리거 발생\n */\nexport function isArrowDown(event: React.KeyboardEvent<HTMLInputElement>) {\n    if (checkKeys(event, ['ArrowDown'])) {\n        return true;\n    }\n\n    return false;\n}\n\n/**\n * ArrowLeft 키 입력시 트리거 발생\n */\nexport function isArrowLeft(event: React.KeyboardEvent<HTMLInputElement>) {\n    if (checkKeys(event, ['ArrowLeft'])) {\n        return true;\n    }\n\n    return false;\n}\n\n/**\n * ArrowRight 키 입력시 트리거 발생\n */\nexport function isArrowRight(event: React.KeyboardEvent<HTMLInputElement>) {\n    if (checkKeys(event, ['ArrowRight'])) {\n        return true;\n    }\n\n    return false;\n}\n\n/**\n * Tab 키 입력시 트리거 발생\n */\nexport function isTab(event: React.KeyboardEvent<HTMLInputElement>) {\n    if (checkKeys(event, ['Tab'])) {\n        return true;\n    }\n\n    return false;\n}\n\n/**\n * Escape 키 입력시 트리거 발생\n */\nexport function isEscape(event: React.KeyboardEvent<HTMLInputElement>) {\n    if (checkKeys(event, ['Escape'])) {\n        return true;\n    }\n\n    return false;\n}\n\n\n/**\n * 한글 N글자 이상 입력시 트리거 발생\n */\nexport function isOverKorCharCount(value: string, count: number) {\n    //value에서 한글만 추출\n    const hangulLength = charFilterKor(value).length;\n\n    //한글 count 초과 일경우, 트리거 발생\n    if (hangulLength > count) {\n        return true;\n    }\n\n    return false;\n}\n\n\n\n/**\n * 영문 N글자 이상 입력시 트리거 발생\n */\nexport function isOverEngCharCount(value: string, count: number) {\n\n    //value에서 영문만 추출\n    const englishLength = charFilterEng(value).length;\n\n    //영문 count 초과 일경우, 트리거 발생\n    if (englishLength > count) {\n        return true;\n    }\n\n    return false;\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sales-frontend-utils",
-  "version": "0.0.53",
+  "version": "0.0.55",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",
@@ -138,6 +138,16 @@
         "types": "./dist/utils/ga/index.d.cts",
         "default": "./dist/utils/ga/index.cjs"
       }
+    },
+    "./key-trigger": {
+      "import": {
+        "types": "./dist/utils/key-trigger-utils.d.ts",
+        "default": "./dist/utils/key-trigger-utils.js"
+      },
+      "require": {
+        "types": "./dist/utils/key-trigger-utils.d.cts",
+        "default": "./dist/utils/key-trigger-utils.cjs"
+      }
     }
   },
   "dependencies": {
@@ -145,6 +155,7 @@
   },
   "devDependencies": {
     "@types/node": "^22.14.1",
+    "@types/react": "19.1.0",
     "tsup": "^8.4.0",
     "typescript": "5.8.2",
     "eslint-config-sales-frontend-eslint-config-v8": "^0.0.7",