sales-frontend-solution 0.0.47 → 0.0.48

package/dist/index.js

@@ -1,10 +1,10 @@
-import React2, { createContext, useState, useEffect, useContext, useRef, useCallback } from 'react';
+import React2, { createContext, useState, useEffect, useContext, useCallback, useRef, useMemo } from 'react';
 import { isClient, getEnvironmentFromHostname, getServicePath, getNlcHostFromEnvironment } from 'sales-frontend-utils';
 import { jsx, Fragment } from 'react/jsx-runtime';
 
-// src/v3-provider.tsx
+// src/features/v3/v3-provider.tsx
 
-// src/utils/load-script.ts
+// src/shared/utils/load-script.ts
 async function loadScript(url) {
   await new Promise((resolve, reject) => {
     const script = document.createElement("script");
@@ -45,7 +45,7 @@ var getServiceUrl = (serviceName) => {
   INPUT_PREFILL_USER: `${getServiceUrl("nlc")}/user-ctfn/ncsr-info-inpt/post`
 });
 
-// src/v3.ts
+// src/features/v3/v3.ts
 var isAndroid = () => {
   return /android/i.test(navigator.userAgent) && !/edge/i.test(navigator.userAgent);
 };
@@ -96,60 +96,102 @@ var useV3 = () => {
   }
   return context;
 };
-var getPath = (service) => {
+
+// src/features/keypad/constants.ts
+var KEYPAD_DEFAULTS = {
+  /** 키패드 너비 (%) */
+  WIDTH: 100,
+  /** 키패드 상단 위치 */
+  POSITION_TOP: 10,
+  /** 뷰 타입 */
+  VIEW_TYPE: "half",
+  /** 닫기 딜레이 */
+  CLOSE_DELAY: 0,
+  /** 숫자 키 행 수 */
+  NUMBER_KEY_ROW_COUNT: 3
+};
+var KEYPAD_SELECTORS = {
+  ALERT: "#xkalert"
+};
+var INPUT_SEPARATOR = ",";
+var MASK_CHAR = "*";
+
+// src/features/keypad/libs/constants.ts
+var KEYPAD_SERVICE_PATH = {
+  XKP: "xkp",
+  NLC: "nlc"
+};
+var KEYPAD_SCRIPTS = {
+  MOBILE: "xkeypad_mobile.js"
+};
+var KEYPAD_STYLES = {
+  MOBILE: "xkp_mobile.css"
+};
+var DEFAULT_KEYPAD_CONFIG = {
+  VERSION: "1.0.5.1",
+  MAX_INPUT_SIZE: 56,
+  TEXT_INPUT_VIEW: 0,
+  TOUCH_OPTION: 0,
+  INPUT_BACKGROUND_COLOR: "#E4E4E4",
+  INPUT_BORDER_STYLE: "1px solid #9E9E9E",
+  INVALID_SESSION_MESSAGE: "\uBCF4\uC548\uC138\uC158\uC774 \uB9CC\uB8CC\uB418\uC5C8\uC2B5\uB2C8\uB2E4.\n'\uD655\uC778'\uC744 \uB204\uB974\uBA74 \uD0A4\uD328\uB4DC\uAC00 \uAC31\uC2E0 \uB429\uB2C8\uB2E4.",
+  INVALID_SESSION_AUTO_REFRESH: true,
+  ENABLE_ACCESSIBILITY: true,
+  USE_CUSTOM_ALERT: false,
+  FUNCTION_KEY_BUTTON_STYLE: "text"
+};
+var getServicePath2 = (service, env) => {
   if (!isClient()) {
     return;
   }
-  const env = getEnvironmentFromHostname(location.hostname);
   const convertedEnv = env === "local" ? "stg" : env;
   return `https://nxl-${convertedEnv !== "prd" ? `${service}-${convertedEnv}` : service}.hanwhalife.com`;
 };
-var XKeyboardMobileInstance = (() => {
-  if (!isClient()) {
-    return null;
-  }
-  const keypadServicePath = `${getPath("xkp")}/xkp/xkscriptservice`;
-  const keypadContentsPath = `${getPath("nlc")}/cnts-files/xkeyboard`;
-  window.XKConfigMobile = {
-    version: "1.0.5.1",
+var getKeypadServicePath = (env) => {
+  return `${getServicePath2(KEYPAD_SERVICE_PATH.XKP, env)}/xkp/xkscriptservice`;
+};
+var getKeypadContentsPath = (env, subPath = "") => {
+  const basePath = `${getServicePath2(KEYPAD_SERVICE_PATH.NLC, env)}/cnts-files/xkeyboard`;
+  return `${basePath}${subPath}`;
+};
+
+// src/features/keypad/libs/config.ts
+var createKeypadConfig = () => {
+  const env = getEnvironmentFromHostname(isClient() ? location.hostname : "");
+  const keypadServicePath = getKeypadServicePath(env);
+  return {
+    version: DEFAULT_KEYPAD_CONFIG.VERSION,
     server: keypadServicePath,
-    contextRoot: `${keypadContentsPath}/js`,
-    cssPath: `${keypadContentsPath}/css/xkp_mobile.css`,
-    logoImgPath: `${keypadContentsPath}/img/logo.png`,
-    inputObjectBackgroundColor: "#E4E4E4",
-    inputObjectBorderStyle: "1px solid #9E9E9E",
-    invalidSessionErrorMessage: "\uBCF4\uC548\uC138\uC158\uC774 \uB9CC\uB8CC\uB418\uC5C8\uC2B5\uB2C8\uB2E4.\n'\uD655\uC778'\uC744 \uB204\uB974\uBA74 \uD0A4\uD328\uB4DC\uAC00 \uAC31\uC2E0 \uB429\uB2C8\uB2E4.",
-    invalidSessionAutoRefresh: true,
-    enableAccessibility: true,
-    useCustomAlert: false,
-    functionKeyButtonStyle: "text",
-    maxInputSize: 56,
-    textInputView: 0,
-    touchOption: 0
+    contextRoot: getKeypadContentsPath(env, "/js"),
+    cssPath: getKeypadContentsPath(env, `/css/${KEYPAD_STYLES.MOBILE}`),
+    logoImgPath: getKeypadContentsPath(env, "/img/logo.png"),
+    inputObjectBackgroundColor: DEFAULT_KEYPAD_CONFIG.INPUT_BACKGROUND_COLOR,
+    inputObjectBorderStyle: DEFAULT_KEYPAD_CONFIG.INPUT_BORDER_STYLE,
+    invalidSessionErrorMessage: DEFAULT_KEYPAD_CONFIG.INVALID_SESSION_MESSAGE,
+    invalidSessionAutoRefresh: DEFAULT_KEYPAD_CONFIG.INVALID_SESSION_AUTO_REFRESH,
+    enableAccessibility: DEFAULT_KEYPAD_CONFIG.ENABLE_ACCESSIBILITY,
+    useCustomAlert: DEFAULT_KEYPAD_CONFIG.USE_CUSTOM_ALERT,
+    functionKeyButtonStyle: DEFAULT_KEYPAD_CONFIG.FUNCTION_KEY_BUTTON_STYLE,
+    maxInputSize: DEFAULT_KEYPAD_CONFIG.MAX_INPUT_SIZE,
+    textInputView: DEFAULT_KEYPAD_CONFIG.TEXT_INPUT_VIEW,
+    touchOption: DEFAULT_KEYPAD_CONFIG.TOUCH_OPTION
   };
-  document.oncontextmenu = () => false;
-  document.ondragstart = () => false;
-  document.onselectstart = () => false;
-  const headTag = document.head;
-  const scriptsToLoad = ["xkeypad_mobile.js"];
-  const urls = scriptsToLoad.map(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (x) => `${window.XKConfigMobile.contextRoot}/${x}`
-  );
-  Promise.all(urls.map((x) => loadScript(x))).then(() => {
-    const existingLink = document.getElementById("xkStyle");
-    if (existingLink?.parentNode) {
-      existingLink.parentNode.removeChild(existingLink);
-    }
-    const linkElement = document.createElement("link");
-    linkElement.id = "xkStyle";
-    linkElement.rel = "stylesheet";
-    linkElement.type = "text/css";
-    linkElement.href = window.XKConfigMobile.cssPath;
-    headTag.appendChild(linkElement);
-  });
+};
+var initializeGlobalConfig = () => {
+  if (isClient() === false) {
+    return null;
+  }
+  const config = createKeypadConfig();
+  window.XKConfigMobile = config;
+  return config;
+};
+
+// src/features/keypad/libs/keypad-manager.ts
+var createKeypadManager = () => {
   const keypads = {};
-  const getKeypad = (name) => keypads[name];
+  const getKeypad = (name) => {
+    return keypads[name];
+  };
   const setKeypad = (name, keypad) => {
     keypads[name] = keypad;
     return keypad;
@@ -166,7 +208,12 @@ var XKeyboardMobileInstance = (() => {
     });
   };
   const newKeypad = (name) => {
-    return setKeypad(name, new window.XKModule());
+    const { XKModule } = window;
+    if (!XKModule) {
+      console.error("[XKeyboard] XKModule\uC774 \uB85C\uB4DC\uB418\uC9C0 \uC54A\uC558\uC2B5\uB2C8\uB2E4.");
+      return void 0;
+    }
+    return setKeypad(name, new XKModule());
   };
   return {
     keypads,
@@ -176,9 +223,166 @@ var XKeyboardMobileInstance = (() => {
     removeKeypad,
     closeAll
   };
+};
+
+// src/features/keypad/libs/script-loader.ts
+var isScriptsLoaded = false;
+var loadingPromise = null;
+var disableDocumentEvents = () => {
+  if (typeof document === "undefined") {
+    return;
+  }
+  document.oncontextmenu = () => false;
+  document.ondragstart = () => false;
+  document.onselectstart = () => false;
+};
+var loadKeypadStyles = (cssPath) => {
+  if (typeof document === "undefined") {
+    return;
+  }
+  const headTag = document.head;
+  const existingLink = document.getElementById("xkStyle");
+  if (existingLink?.parentNode) {
+    existingLink.parentNode.removeChild(existingLink);
+  }
+  const linkElement = document.createElement("link");
+  linkElement.id = "xkStyle";
+  linkElement.rel = "stylesheet";
+  linkElement.type = "text/css";
+  linkElement.href = cssPath;
+  headTag.appendChild(linkElement);
+};
+var loadKeypadScripts = async (config) => {
+  if (isScriptsLoaded) {
+    return;
+  }
+  if (loadingPromise) {
+    return loadingPromise;
+  }
+  loadingPromise = (async () => {
+    try {
+      disableDocumentEvents();
+      const scriptUrl = `${config.contextRoot}/${KEYPAD_SCRIPTS.MOBILE}`;
+      console.log("scriptUrl::", scriptUrl);
+      await loadScript(scriptUrl);
+      loadKeypadStyles(config.cssPath);
+      isScriptsLoaded = true;
+    } catch (error) {
+      loadingPromise = null;
+      throw error;
+    }
+  })();
+  return loadingPromise;
+};
+
+// src/features/keypad/libs/index.ts
+var XKeyboardMobileInstance = (() => {
+  if (isClient() === false) {
+    return null;
+  }
+  const config = initializeGlobalConfig();
+  if (!config) {
+    console.error("[XKeyboard] \uC124\uC815 \uCD08\uAE30\uD654\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4.");
+    return null;
+  }
+  loadKeypadScripts(config).catch((error) => {
+    console.error("[XKeyboard] \uC2A4\uD06C\uB9BD\uD2B8 \uB85C\uB4DC \uC2E4\uD328:", error);
+  });
+  return createKeypadManager();
 })();
 
-// src/types/keypad-message.enum.ts
+// src/features/keypad/libs/keypad-param.ts
+var createKeypadParam = (options) => {
+  const {
+    name,
+    inputRef,
+    keyType,
+    maxLength,
+    numberKeyRowCount,
+    onInputChange,
+    onKeypadClose,
+    keypad,
+    setIsShow,
+    setKeypadId,
+    removeKeypad
+  } = options;
+  return {
+    name: `xk-pad-${name}`,
+    editBox: inputRef,
+    keyType,
+    width: KEYPAD_DEFAULTS.WIDTH,
+    position: { top: KEYPAD_DEFAULTS.POSITION_TOP, left: null },
+    viewType: KEYPAD_DEFAULTS.VIEW_TYPE,
+    closeDelay: KEYPAD_DEFAULTS.CLOSE_DELAY,
+    autoKeyResize: true,
+    isE2E: true,
+    onlyMobile: false,
+    hasPressEffect: true,
+    maxLength,
+    numberKeyRowCount,
+    onInputChange: createInputChangeHandler({
+      maxLength,
+      keypad,
+      setIsShow,
+      setKeypadId,
+      onInputChange
+    }),
+    onKeypadClose: createCloseHandler({
+      name,
+      inputRef,
+      keyType,
+      keypad,
+      setIsShow,
+      setKeypadId,
+      onKeypadClose,
+      removeKeypad
+    })
+  };
+};
+var createInputChangeHandler = (options) => {
+  const { maxLength, keypad, setIsShow, setKeypadId, onInputChange } = options;
+  return (newLength) => {
+    onInputChange(newLength);
+    if (maxLength > 0 && newLength >= maxLength && keypad.isOpend()) {
+      keypad.close();
+      setIsShow(false);
+      setKeypadId(null);
+    }
+  };
+};
+var createCloseHandler = (options) => {
+  const { name, inputRef, keyType, keypad, setIsShow, setKeypadId, onKeypadClose, removeKeypad } = options;
+  return () => {
+    const sessionInfo = keypad.get_sessionInfo();
+    const length = calculateInputLength(sessionInfo.input);
+    const response = {
+      length,
+      element: inputRef,
+      sessionInfo: {
+        input: sessionInfo.input,
+        sessionId: sessionInfo.sessionId,
+        secToken: sessionInfo.secToken
+      },
+      keyType,
+      name
+    };
+    setIsShow(false);
+    setKeypadId(null);
+    onKeypadClose(response);
+    removeKeypad(name);
+  };
+};
+var calculateInputLength = (input) => {
+  if (!input || input.length === 0) {
+    return 0;
+  }
+  if (input.indexOf(INPUT_SEPARATOR) >= 0) {
+    return input.split(INPUT_SEPARATOR).length;
+  }
+  return 0;
+};
+
+// src/features/keypad/types/keypad-message.enum.ts
 var KeypadMessageTypeEnum = /* @__PURE__ */ ((KeypadMessageTypeEnum2) => {
   KeypadMessageTypeEnum2[KeypadMessageTypeEnum2["NotSupportDevice"] = -1] = "NotSupportDevice";
   KeypadMessageTypeEnum2[KeypadMessageTypeEnum2["Already"] = -2] = "Already";
@@ -186,7 +390,7 @@ var KeypadMessageTypeEnum = /* @__PURE__ */ ((KeypadMessageTypeEnum2) => {
 })(KeypadMessageTypeEnum || {});
 var keypad_message_enum_default = KeypadMessageTypeEnum;
 
-// src/types/keypad-mode.enum.ts
+// src/features/keypad/types/keypad-mode.enum.ts
 var KeypadModeEnum = /* @__PURE__ */ ((KeypadModeEnum2) => {
   KeypadModeEnum2["QWERTY_SMART"] = "qwertysmart";
   KeypadModeEnum2["NUMBER"] = "number";
@@ -194,172 +398,143 @@ var KeypadModeEnum = /* @__PURE__ */ ((KeypadModeEnum2) => {
 })(KeypadModeEnum || {});
 var keypad_mode_enum_default = KeypadModeEnum;
 
-// src/utils/uuid.ts
-var uuidv4 = () => {
-  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
-    const r = Math.random() * 16 || 0, v = c === "x" ? r : r && 3 || 8;
-    return v.toString(16);
-  });
-};
-
-// src/hooks/use-keypad.ts
+// src/features/keypad/hooks/use-keypad.tsx
+var keypadCounter = 0;
+var generateKeypadId = () => `kp-${++keypadCounter}`;
 function useKeypad() {
   const [isShow, setIsShow] = useState(false);
+  const [keypadId, setKeypadId] = useState(null);
   const show = useCallback(
-    (inputRef, onInputChange, onKeypadClose, keyType = keypad_mode_enum_default.QWERTY_SMART, maxLength, numberKeyRowCount) => {
-      const name = uuidv4();
+    (inputRef, onInputChange, onKeypadClose, keyType = keypad_mode_enum_default.QWERTY_SMART, maxLength = 0, numberKeyRowCount = KEYPAD_DEFAULTS.NUMBER_KEY_ROW_COUNT) => {
       if (!XKeyboardMobileInstance) {
+        console.warn("[useKeypad] XKeyboardMobileInstance\uAC00 \uCD08\uAE30\uD654\uB418\uC9C0 \uC54A\uC558\uC2B5\uB2C8\uB2E4.");
         return;
       }
-      let keypad = XKeyboardMobileInstance.getKeypad(name);
+      const name = generateKeypadId();
+      const keypad = getOrCreateKeypad(name);
       if (!keypad) {
-        keypad = XKeyboardMobileInstance.newKeypad(name);
-      } else {
-        keypad.refresh();
-      }
-      if (onInputChange && typeof onInputChange === "function") {
-        onInputChange(0);
+        console.error("[useKeypad] \uD0A4\uD328\uB4DC \uC778\uC2A4\uD134\uC2A4 \uC0DD\uC131\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4.");
+        return;
       }
-      const keyPadParam = {
-        name: `xk-pad-${name}`,
-        editBox: inputRef,
+      onInputChange(0);
+      const keyPadParam = createKeypadParam({
+        name,
+        inputRef,
         keyType,
-        width: 100,
-        position: { top: 10, left: null },
-        viewType: "half",
-        closeDelay: 0,
-        autoKeyResize: true,
-        isE2E: true,
-        onlyMobile: false,
-        hasPressEffect: true,
         maxLength,
         numberKeyRowCount,
-        onInputChange: (newLength) => {
-          if (onInputChange && typeof onInputChange === "function") {
-            onInputChange(newLength);
-          }
-          if (!keypad) {
-            return;
-          }
-          if (keyPadParam.maxLength && keyPadParam.maxLength > 0 && newLength >= keyPadParam.maxLength && keypad.isOpend()) {
-            keypad.close();
-            setIsShow(false);
-            return;
-          }
-        },
-        onKeypadClose: () => {
-          if (!keypad) {
-            return;
-          }
-          if (!XKeyboardMobileInstance) {
-            return;
-          }
-          if (onKeypadClose && typeof onKeypadClose === "function") {
-            const sessionInfo = keypad.get_sessionInfo();
-            let length = 0;
-            if (sessionInfo.input && sessionInfo.input.indexOf(",") >= 0) {
-              length = sessionInfo.input.split(",").length;
-            }
-            const res = {
-              length,
-              element: inputRef,
-              sessionInfo: {
-                input: sessionInfo.input,
-                sessionId: sessionInfo.sessionId,
-                secToken: sessionInfo.secToken
-              },
-              keyType,
-              name
-            };
-            setIsShow(false);
-            onKeypadClose(res);
-          }
-          XKeyboardMobileInstance.removeKeypad(name);
-          if (!onKeypadClose) {
-            throw new Error("not found onKeypadClose");
-          }
-          if (typeof onKeypadClose !== "function") {
-            throw new Error("not found onKeypadClose");
-          }
-        }
-      };
-      const aRet = keypad.initialize(keyPadParam);
-      if (aRet === keypad_message_enum_default.NotSupportDevice) {
-        alert("\uC9C0\uC6D0\uD558\uC9C0 \uC54A\uB294 \uAE30\uAE30 \uC785\uB2C8\uB2E4.");
-        return;
-      } else if (aRet === keypad_message_enum_default.Already) {
+        onInputChange,
+        onKeypadClose,
+        keypad,
+        setIsShow,
+        setKeypadId,
+        removeKeypad: (n) => XKeyboardMobileInstance?.removeKeypad(n)
+      });
+      const result = keypad.initialize(keyPadParam);
+      if (!handleInitializeResult(result)) {
+        console.warn("[useKeypad] \uD0A4\uD328\uB4DC \uCD08\uAE30\uD654 \uC2E4\uD328:", result);
         return;
       }
+      setKeypadId(name);
       setIsShow(true);
     },
     []
   );
-  const getValue = (name) => {
+  const getOrCreateKeypad = (name) => {
     if (!XKeyboardMobileInstance) {
-      return;
+      return void 0;
     }
-    const targetKeypad = XKeyboardMobileInstance.keypads[name];
-    if (!targetKeypad) {
-      return null;
+    let keypad = XKeyboardMobileInstance.getKeypad(name);
+    if (!keypad) {
+      keypad = XKeyboardMobileInstance.newKeypad(name);
+    } else {
+      keypad.refresh();
     }
-    return targetKeypad.get_sessionInfo();
+    return keypad;
   };
-  const find = (name) => {
-    if (!XKeyboardMobileInstance) {
-      return;
+  const handleInitializeResult = (result) => {
+    if (result === keypad_message_enum_default.NotSupportDevice) {
+      alert("\uC9C0\uC6D0\uD558\uC9C0 \uC54A\uB294 \uAE30\uAE30 \uC785\uB2C8\uB2E4.");
+      return false;
     }
-    if (name) {
-      return XKeyboardMobileInstance.keypads[name];
-    } else {
-      const keypadIds = Object.keys(XKeyboardMobileInstance.keypads);
-      for (const keypadId of keypadIds) {
-        const targetKeypad = XKeyboardMobileInstance.keypads[keypadId];
-        if (targetKeypad && targetKeypad.isOpen()) {
-          return targetKeypad;
-        }
-      }
+    if (result === keypad_message_enum_default.Already) {
+      return false;
     }
+    return true;
   };
-  const isOpen = (name) => {
-    const targetKeypad = find(name);
-    return !!targetKeypad;
-  };
-  const close = (name) => {
-    const targetKeypad = find(name);
-    if (targetKeypad) {
-      targetKeypad.close();
-      setIsShow(false);
+  const getValue = useCallback((name) => {
+    if (!XKeyboardMobileInstance) {
+      return void 0;
     }
-  };
-  const clear = (name) => {
-    const _xkmodule = find(name);
-    if (_xkmodule) {
-      _xkmodule.clear();
-      setIsShow(false);
+    const targetKeypad = XKeyboardMobileInstance.keypads[name];
+    return targetKeypad?.get_sessionInfo() ?? null;
+  }, []);
+  const find = useCallback((name) => {
+    if (!XKeyboardMobileInstance) {
+      return void 0;
     }
-  };
-  const refresh = (name) => {
-    const targetKeypad = find(name);
-    if (targetKeypad) {
-      targetKeypad.refresh();
+    if (name) {
+      return XKeyboardMobileInstance.keypads[name];
     }
-  };
+    const keypadIds = Object.keys(XKeyboardMobileInstance.keypads);
+    for (const keypadId2 of keypadIds) {
+      const targetKeypad = XKeyboardMobileInstance.keypads[keypadId2];
+      if (targetKeypad?.isOpen()) {
+        return targetKeypad;
+      }
+    }
+    return void 0;
+  }, []);
+  const isOpen = useCallback(
+    (name) => {
+      return !!find(name);
+    },
+    [find]
+  );
+  const close = useCallback(
+    (name) => {
+      const targetKeypad = find(name);
+      if (targetKeypad) {
+        targetKeypad.close();
+        setIsShow(false);
+        setKeypadId(null);
+      }
+    },
+    [find]
+  );
+  const clear = useCallback(
+    (name) => {
+      const targetKeypad = find(name);
+      if (targetKeypad) {
+        targetKeypad.clear();
+        setIsShow(false);
+        setKeypadId(null);
+      }
+    },
+    [find]
+  );
+  const refresh = useCallback(
+    (name) => {
+      const targetKeypad = find(name);
+      targetKeypad?.refresh();
+    },
+    [find]
+  );
   useEffect(() => {
     const handleMouseDown = (event) => {
       if (!XKeyboardMobileInstance) {
         return;
       }
-      const keypadAlertDivTag = document.querySelector("#xkalert");
+      const keypadAlertDivTag = document.querySelector(KEYPAD_SELECTORS.ALERT);
       const keypadDivTag = keypadAlertDivTag?.parentElement;
       if (keypadDivTag && !keypadDivTag.contains(event.target)) {
         XKeyboardMobileInstance.closeAll();
         setIsShow(false);
+        setKeypadId(null);
       }
     };
     document.addEventListener("mousedown", handleMouseDown);
-    return () => {
-      document.removeEventListener("mousedown", handleMouseDown);
-    };
+    return () => document.removeEventListener("mousedown", handleMouseDown);
   }, []);
   return {
     show,
@@ -369,174 +544,354 @@ function useKeypad() {
     getValue,
     isOpen,
     find,
-    isShow
+    isShow,
+    keypadId
   };
 }
-function Keypad({ value, onChange, mode, maxLength, inputElement }) {
-  const { show} = useKeypad();
+var createMaskedValue = (length) => {
+  return "".padStart(length, MASK_CHAR);
+};
+var getInputLength = (input) => {
+  if (!input || input.length === 0) {
+    return 0;
+  }
+  return input.split(INPUT_SEPARATOR).length;
+};
+var KEYPAD_ID_PREFIX = "xk-pad-";
+var findKeypadById = (keypadId) => {
+  const fullId = `${KEYPAD_ID_PREFIX}${keypadId}`;
+  const element = document.getElementById(fullId);
+  if (element && element.offsetHeight > 0) {
+    return element;
+  }
+  return null;
+};
+var waitForKeypadElement = (keypadId) => {
+  return new Promise((resolve) => {
+    const existing = findKeypadById(keypadId);
+    if (existing) {
+      resolve(existing);
+      return;
+    }
+    const fullId = `${KEYPAD_ID_PREFIX}${keypadId}`;
+    const observer = new MutationObserver((_mutations, obs) => {
+      const keypad = document.getElementById(fullId);
+      if (keypad && keypad.offsetHeight > 0) {
+        obs.disconnect();
+        resolve(keypad);
+      }
+    });
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+    setTimeout(() => {
+      observer.disconnect();
+      resolve(null);
+    }, 3e3);
+  });
+};
+var toKeypadRect = (rect) => ({
+  height: rect.height,
+  top: rect.top,
+  bottom: rect.bottom,
+  width: rect.width,
+  left: rect.left,
+  right: rect.right
+});
+function Keypad({
+  value,
+  onChange,
+  mode,
+  maxLength,
+  inputElement,
+  onShow,
+  numberKeyRowCount = KEYPAD_DEFAULTS.NUMBER_KEY_ROW_COUNT,
+  wrapId
+}) {
+  const { show, isShow, keypadId } = useKeypad();
   const inputRef = useRef(null);
   const [maskedValue, setMaskedValue] = useState("");
-  const onCloseBack = useCallback(
+  useEffect(() => {
+    const input = inputRef.current;
+    if (!input) {
+      return;
+    }
+    if (isShow && keypadId) {
+      waitForKeypadElement(keypadId).then((keypadElement) => {
+        if (keypadElement) {
+          const rect = keypadElement.getBoundingClientRect();
+          const wrap = wrapId && document.getElementById(wrapId);
+          if (wrap) {
+            const inputRect = input.getBoundingClientRect();
+            if (inputRect.bottom > rect.top) {
+              const diff = inputRect.bottom - rect.top;
+              wrap.style.transform = `translateY(-${diff}px)`;
+            }
+          }
+          onShow?.({
+            isShow: true,
+            keypadElement,
+            keypadRect: toKeypadRect(rect),
+            inputElement: input
+          });
+        } else {
+          onShow?.({ isShow: true, keypadElement: null, keypadRect: null, inputElement: input });
+        }
+      });
+    } else {
+      const wrap = wrapId && document.getElementById(wrapId);
+      if (wrap) {
+        wrap.style.transform = "";
+      }
+      onShow?.({ isShow: false, keypadElement: null, keypadRect: null, inputElement: input });
+    }
+  }, [isShow, keypadId, onShow, wrapId]);
+  const handleKeypadClose = useCallback(
     (res) => {
       onChange(res.sessionInfo);
     },
     [onChange]
   );
-  const onChangeBack = useCallback(
+  const handleInputChange = useCallback(
     (length) => {
       if (length === 0) {
         onChange(null);
       }
-      setMaskedValue("".padStart(length, "*"));
+      setMaskedValue(createMaskedValue(length));
     },
-    [onChange, setMaskedValue]
+    [onChange]
   );
-  const handleKeypad = useCallback(() => {
-    show(inputRef.current, onChangeBack, onCloseBack, mode, maxLength, 3);
-  }, [show, inputRef, onChangeBack, onCloseBack, mode, maxLength]);
-  const enhancedOnClick = (existingClickHandler, newClickHandler) => {
-    return () => {
-      if (existingClickHandler) {
-        existingClickHandler();
-      }
-      newClickHandler();
-    };
-  };
-  const cloneElement = React2.cloneElement(inputElement, {
-    ref: inputRef,
-    value: maskedValue,
-    onClick: enhancedOnClick(inputElement.props.onClick, handleKeypad)
-    // iskeypadactive: isShow
-  });
+  const handleOpenKeypad = useCallback(() => {
+    if (!inputRef.current) {
+      console.error("[Keypad] inputRef\uAC00 \uC5F0\uACB0\uB418\uC9C0 \uC54A\uC558\uC2B5\uB2C8\uB2E4.");
+      return;
+    }
+    show(inputRef.current, handleInputChange, handleKeypadClose, mode, maxLength, numberKeyRowCount);
+  }, [show, handleInputChange, handleKeypadClose, mode, maxLength, numberKeyRowCount]);
+  const combinedOnClick = useCallback(() => {
+    inputElement.props.onClick?.();
+    handleOpenKeypad();
+  }, [inputElement.props.onClick, handleOpenKeypad]);
   useEffect(() => {
-    const length = value?.input && value.input.length > 0 ? value.input.split(",").length : 0;
-    setMaskedValue("".padStart(length, "*"));
+    const length = getInputLength(value?.input);
+    setMaskedValue(createMaskedValue(length));
   }, [value]);
   useEffect(() => {
     if (inputRef.current && !(inputRef.current instanceof HTMLInputElement)) {
-      throw new Error("Input \uD0DC\uADF8\uAC00 \uC815\uC758\uB418\uC9C0 \uC54A\uC558\uC2B5\uB2C8\uB2E4.");
+      throw new Error("[Keypad] inputElement\uB294 HTMLInputElement\uB97C \uB80C\uB354\uB9C1\uD574\uC57C \uD569\uB2C8\uB2E4.");
     }
   }, []);
-  return /* @__PURE__ */ jsx(Fragment, { children: cloneElement });
+  const clonedElement = useMemo(
+    () => React2.cloneElement(inputElement, {
+      ref: inputRef,
+      value: maskedValue,
+      onClick: combinedOnClick
+    }),
+    [inputElement, maskedValue, combinedOnClick]
+  );
+  return /* @__PURE__ */ jsx(Fragment, { children: clonedElement });
 }
-function useNxlOne({ bizCode, tmplCode, ncsrInfoUuid, nlcCtfnId, t }) {
-  const buildUrl = useCallback(() => {
-    const baseUrl = getNlcHostFromEnvironment();
-    const targetUrl = new URL("/auth/v1", baseUrl);
-    targetUrl.searchParams.set("bizCode", bizCode);
-    targetUrl.searchParams.set("tmplCode", tmplCode);
-    if (nlcCtfnId) {
-      targetUrl.searchParams.set("nlcCtfnId", nlcCtfnId);
-    }
-    if (t) {
-      targetUrl.searchParams.set("t", t);
-    }
-    if (ncsrInfoUuid) {
-      targetUrl.searchParams.set("ncsrInfoUuid", ncsrInfoUuid);
+
+// src/features/nxl-one/libs/nxl-one.ts
+var NXL_ONE_ENV_URLS = {
+  dev: "https://nxl-nlc-dev.hanwhalife.com",
+  stg: "https://nxl-nlc-stg.hanwhalife.com",
+  //prod: 'https://nxl-nlc.hanwhalife.com',
+  prd: "https://nxl-nlc.hanwhalife.com"
+};
+var NXL_ONE_AUTH_PATH = "/auth/v1";
+var NXL_ONE_DEFAULT_POPUP = {
+  width: 744,
+  height: 720,
+  windowName: "self_cert"
+};
+var NXL_ONE_DEFAULT_IFRAME = {
+  sandbox: "allow-scripts allow-forms allow-same-origin"
+};
+var detectEnvFromUrl = () => {
+  if (typeof window === "undefined") {
+    return "prd";
+  }
+  const { href } = window.location;
+  if (href.includes("localhost") || href.includes("dev")) {
+    return "dev";
+  }
+  if (href.includes("stg")) {
+    return "stg";
+  }
+  return "prd";
+};
+var getBaseUrl = (env) => NXL_ONE_ENV_URLS[env ?? detectEnvFromUrl()];
+var buildAuthUrl = (baseUrl, params, mode) => {
+  const url = new URL(NXL_ONE_AUTH_PATH, baseUrl);
+  url.searchParams.set("bizCode", params.bizCode);
+  url.searchParams.set("tmplCode", params.tmplCode);
+  url.searchParams.set("m", mode);
+  if (params.nlcCtfnId) {
+    url.searchParams.set("nlcCtfnId", params.nlcCtfnId);
+  }
+  if (params.t) {
+    url.searchParams.set("t", params.t);
+  }
+  if (params.ncsrInfoUuid) {
+    url.searchParams.set("ncsrInfoUuid", params.ncsrInfoUuid);
+  }
+  return url.toString();
+};
+var calcPopupCenter = (width, height) => ({
+  left: window.screenX + (window.outerWidth - width) / 2,
+  top: window.screenY + (window.outerHeight - height) / 2
+});
+var NXL_ONE_ERROR_CODES = {
+  /** 팝업이 브라우저에 의해 차단됨 */
+  POPUP_BLOCKED: "POPUP_BLOCKED",
+  /** 사용자가 인증을 취소함 */
+  AUTH_CANCELLED: "AUTH_CANCELLED",
+  /** 인증 실패 */
+  AUTH_FAILED: "AUTH_FAILED",
+  /** 잘못된 응답 */
+  INVALID_RESPONSE: "INVALID_RESPONSE"
+};
+var ERROR_MESSAGES = {
+  POPUP_BLOCKED: "\uD31D\uC5C5\uC774 \uCC28\uB2E8\uB418\uC5C8\uC2B5\uB2C8\uB2E4. \uD31D\uC5C5 \uCC28\uB2E8\uC744 \uD574\uC81C\uD574\uC8FC\uC138\uC694.",
+  AUTH_CANCELLED: "\uC778\uC99D\uC774 \uCDE8\uC18C\uB418\uC5C8\uC2B5\uB2C8\uB2E4.",
+  AUTH_FAILED: "\uC778\uC99D\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4.",
+  INVALID_RESPONSE: "\uC798\uBABB\uB41C \uC751\uB2F5\uC744 \uBC1B\uC558\uC2B5\uB2C8\uB2E4."
+};
+var createNxlOneError = (code, customMessage) => ({
+  code,
+  message: customMessage ?? ERROR_MESSAGES[code]
+});
+var isNxlOneError = (value) => typeof value === "object" && value !== null && "code" in value && "message" in value && Object.values(NXL_ONE_ERROR_CODES).includes(value.code);
+function NxlOneIframe({
+  bizCode,
+  tmplCode,
+  ncsrInfoUuid,
+  nlcCtfnId,
+  env,
+  width = "100%",
+  height = "100%",
+  className,
+  style,
+  allow,
+  sandbox = NXL_ONE_DEFAULT_IFRAME.sandbox,
+  onSuccess,
+  onError,
+  onClose,
+  strictOrigin = true,
+  autoHide = false
+}) {
+  const [visible, setVisible] = useState(true);
+  const callbacksRef = useRef({ onSuccess, onError, onClose });
+  callbacksRef.current = { onSuccess, onError, onClose };
+  const baseUrl = env ? getBaseUrl(env) : getNlcHostFromEnvironment();
+  const targetUrl = useMemo(
+    () => buildAuthUrl(baseUrl, { bizCode, tmplCode, nlcCtfnId, ncsrInfoUuid }, "iframe"),
+    [baseUrl, bizCode, tmplCode, nlcCtfnId, ncsrInfoUuid]
+  );
+  useEffect(() => {
+    const handleMessage = (e) => {
+      if (strictOrigin && e.origin !== baseUrl) {
+        return;
+      }
+      const data = e.data;
+      if (!data?.action) {
+        return;
+      }
+      const { onSuccess: onSuccess2, onError: onError2, onClose: onClose2 } = callbacksRef.current;
+      if (autoHide) {
+        setVisible(false);
+      }
+      switch (data.action) {
+        case "complete":
+          onSuccess2?.(data);
+          break;
+        case "error":
+          onError2?.(data);
+          break;
+        case "close":
+          onClose2(data);
+          break;
+      }
+    };
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, [baseUrl, strictOrigin, autoHide]);
+  if (!visible) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "iframe",
+    {
+      src: targetUrl,
+      width: typeof width === "number" ? `${width}px` : width,
+      height: typeof height === "number" ? `${height}px` : height,
+      className,
+      style: { border: 0, ...style },
+      sandbox,
+      allow
     }
-    return targetUrl;
-  }, [bizCode, tmplCode, t, ncsrInfoUuid, nlcCtfnId]);
+  );
+}
+function useNxlOne({ bizCode, tmplCode, ncsrInfoUuid, nlcCtfnId, env }) {
+  const baseUrl = env ? getBaseUrl(env) : getNlcHostFromEnvironment();
+  const params = useMemo(
+    () => ({ bizCode, tmplCode, nlcCtfnId, ncsrInfoUuid }),
+    [bizCode, tmplCode, nlcCtfnId, ncsrInfoUuid]
+  );
   const redirect = () => {
-    const targetUrl = buildUrl();
-    targetUrl.searchParams.set("m", "redirect");
-    location.href = targetUrl.toString();
+    location.href = buildAuthUrl(baseUrl, params, "redirect");
   };
-  const open = async (options) => {
+  const open = (options) => {
     return new Promise((resolve, reject) => {
-      const targetUrlBuild = buildUrl();
-      targetUrlBuild.searchParams.set("m", "popup");
-      const targetUrl = targetUrlBuild.toString();
-      const width = options && options.popupWidth || 744;
-      const height = options && options.popupHeight || 720;
-      const left = options && options.popupLeft || window.screenX + (window.outerWidth - width) / 2;
-      const top = options && options.popupTop || window.screenX + (window.outerWidth - width) / 2;
-      const popupFeatures = `width=${width},height=${height},left=${left},top=${top}`;
-      const popup = window.open(targetUrlBuild.toString(), options && options.windowName || "self_cert", popupFeatures);
+      const targetUrl = buildAuthUrl(baseUrl, params, "popup");
+      const width = options?.width ?? NXL_ONE_DEFAULT_POPUP.width;
+      const height = options?.height ?? NXL_ONE_DEFAULT_POPUP.height;
+      const center = calcPopupCenter(width, height);
+      const left = options?.left ?? center.left;
+      const top = options?.top ?? center.top;
+      const windowName = options?.windowName ?? NXL_ONE_DEFAULT_POPUP.windowName;
+      const popup = window.open(targetUrl, windowName, `width=${width},height=${height},left=${left},top=${top}`);
       if (!popup) {
-        reject(new Error("\uCC28\uB2E8\uB418\uAC70\uB098 \uC5F4\uB9AC\uC9C0 \uC54A\uC558\uC2B5\uB2C8\uB2E4."));
+        reject(createNxlOneError(NXL_ONE_ERROR_CODES.POPUP_BLOCKED));
         return;
       }
       let isSettled = false;
+      let popupChecker = 0;
+      const cleanup = () => {
+        window.removeEventListener("message", handleMessage);
+        window.clearInterval(popupChecker);
+      };
       const handleMessage = (event) => {
-        if (event.origin !== new URL(targetUrl).origin) {
+        if (event.origin !== baseUrl) {
           return;
         }
-        if (!isSettled) {
-          isSettled = true;
-          if (event.data) {
-            resolve(event.data);
-          } else {
-            reject("\uC778\uC99D\uC774 \uCDE8\uC18C\uB418\uAC70\uB098 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4.");
-          }
-          popup?.close();
-          window.removeEventListener("message", handleMessage);
-        }
-      };
-      window.addEventListener("message", handleMessage);
-    });
-  };
-  const Iframe = function({
-    height = 720,
-    className,
-    style,
-    allow,
-    sandbox = "allow-scripts allow-forms allow-same-origin",
-    onSuccess,
-    onError,
-    onClose,
-    strictOrigin = true
-  }) {
-    const targetUrlBuild = buildUrl();
-    targetUrlBuild.searchParams.set("m", "iframe");
-    const targetUrl = targetUrlBuild.toString();
-    useEffect(() => {
-      if (!onSuccess && !onError) {
-        return;
-      }
-      const handler = (e) => {
-        const baseUrl = getNlcHostFromEnvironment();
-        if (strictOrigin && e.origin !== baseUrl) {
+        if (isSettled) {
           return;
         }
-        const d = e.data;
-        if (d) {
-          if (d.action === "close") {
-            onClose(d);
-            return;
-          } else if (onError && d.action === "error") {
-            onError(d);
-            return;
-          } else if (onSuccess && d.action === "complete") {
-            onSuccess(d);
-            return;
-          }
-        } else if (onError) {
-          onError({
-            action: "error",
-            nlcCtfnId: "",
-            redirectUrl: ""
-          });
+        isSettled = true;
+        cleanup();
+        popup.close();
+        if (event.data) {
+          resolve(event.data);
+        } else {
+          reject(createNxlOneError(NXL_ONE_ERROR_CODES.INVALID_RESPONSE));
         }
       };
-      window.addEventListener("message", handler);
-      return () => window.removeEventListener("message", handler);
-    }, [onClose, onError, onSuccess, strictOrigin]);
-    return /* @__PURE__ */ jsx(
-      "iframe",
-      {
-        src: targetUrl,
-        width: "100%",
-        height: typeof height === "number" ? `${height}px` : height,
-        style: { border: 0, ...style },
-        className,
-        sandbox,
-        ...allow ? { allow } : {}
-      }
-    );
+      popupChecker = window.setInterval(() => {
+        if (popup.closed && !isSettled) {
+          isSettled = true;
+          cleanup();
+          reject(createNxlOneError(NXL_ONE_ERROR_CODES.AUTH_CANCELLED));
+        }
+      }, 300);
+      window.addEventListener("message", handleMessage);
+    });
   };
-  return { redirect, open, Iframe };
+  return { redirect, open };
 }
 
-export { Keypad, keypad_mode_enum_default as KeypadModeEnum, V3Provider, useNxlOne, useV3 };
+export { Keypad, keypad_mode_enum_default as KeypadModeEnum, NXL_ONE_ERROR_CODES, NxlOneIframe, V3Provider, createNxlOneError, isNxlOneError, useKeypad, useNxlOne, useV3 };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map