hia-frontend-debug-tool 0.0.1

package/dist/index.cjs

@@ -0,0 +1,1381 @@
+'use strict';
+
+var React2 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var hiaFrontendUtils = require('hia-frontend-utils');
+var zustand = require('zustand');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React2__default = /*#__PURE__*/_interopDefault(React2);
+
+// src/debug-tool.tsx
+
+// src/styles/styles.ts
+var debugFloatingButtonStyle = {
+  position: "fixed",
+  right: "10px",
+  bottom: "80px",
+  borderRadius: "50%",
+  backgroundColor: "#f0f0f0",
+  border: "1px solid #ccc",
+  padding: "8px 12px",
+  fontWeight: "bold",
+  zIndex: 9999
+};
+var debugMenuPanelStyle = {
+  position: "fixed",
+  right: "20px",
+  bottom: "90px",
+  display: "flex",
+  flexDirection: "column",
+  maxHeight: "400px",
+  backgroundColor: "#ffffff",
+  border: "1px solid #e0e0e0",
+  borderRadius: "8px",
+  boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
+  zIndex: 1e4,
+  overflowY: "auto"
+};
+var panelHeaderStyle = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: "10px 15px",
+  backgroundColor: "#f5f5f5",
+  borderBottom: "1px solid #e0e0e0",
+  flexShrink: 0
+};
+var h2Style = {
+  margin: 0,
+  fontSize: "16px"
+};
+var modalOverlayStyle = {
+  position: "fixed",
+  top: 0,
+  left: 0,
+  width: "100%",
+  height: "100%",
+  backgroundColor: "rgba(0, 0, 0, 0.5)",
+  zIndex: 9999
+};
+var debugFeaturePanelStyle = {
+  margin: "20px",
+  position: "fixed",
+  top: 0,
+  left: 0,
+  width: "calc(100% - 40px)",
+  height: "calc(100% - 40px)",
+  backgroundColor: "#ffffff",
+  zIndex: 10001,
+  display: "flex",
+  flexDirection: "column"
+};
+var panelToolbarStyle = {
+  display: "flex",
+  alignItems: "center",
+  padding: "10px",
+  borderBottom: "1px solid #e0e0e0",
+  gap: "8px",
+  flexShrink: 0
+};
+var logListContainerStyle = {
+  flex: 1,
+  padding: "10px",
+  overflowY: "auto",
+  fontFamily: "monospace",
+  fontSize: "12px",
+  backgroundColor: "#ffffff"
+};
+var logItemStyle = {
+  display: "flex",
+  alignItems: "flex-start",
+  padding: "4px 0",
+  borderBottom: "1px solid #e0e0e0"
+};
+var logTimestampStyle = {
+  marginRight: "10px",
+  color: "#888888"
+};
+var logMessageStyle = {
+  margin: 0,
+  wordBreak: "break-all",
+  whiteSpace: "pre-wrap"
+};
+var logTypeStyles = {
+  log: { color: "#333333" },
+  info: { color: "#007bff" },
+  warn: { color: "#ffc107" },
+  error: { color: "#dc3545" },
+  debug: { color: "#6c757d" },
+  return: { color: "#8a2be2" }
+};
+var loginFormContainerStyle = {
+  display: "flex",
+  flex: 1,
+  flexDirection: "column",
+  gap: "15px",
+  padding: "20px",
+  overflowY: "auto"
+};
+var formActionsStyle = {
+  display: "flex",
+  justifyContent: "flex-start",
+  marginTop: "10px"
+};
+var searchContainerStyle = {
+  display: "flex",
+  gap: "8px",
+  marginBottom: "16px",
+  alignItems: "center"
+};
+var logListStyle = {
+  overflowY: "auto"
+};
+var logSummaryStyle = {
+  wordBreak: "break-all",
+  margin: 0,
+  cursor: "pointer"
+};
+var logContentStyle = {
+  padding: "8px",
+  wordBreak: "break-all",
+  whiteSpace: "pre-wrap",
+  backgroundColor: "#f5f5f5",
+  borderRadius: "4px"
+};
+var pageNavigationContentStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "10px",
+  padding: "20px"
+};
+var h3Style = {
+  margin: 0,
+  fontSize: "16px"
+};
+var scriptExecutorContentStyle = {
+  display: "flex",
+  flex: 1,
+  flexDirection: "column",
+  overflow: "hidden"
+};
+var scriptInputSectionStyle = {
+  display: "flex",
+  flex: 1,
+  flexDirection: "column",
+  minHeight: "150px",
+  borderBottom: "1px solid #e0e0e0"
+};
+var scriptTextareaStyle = {
+  flex: 1,
+  width: "100%",
+  padding: "10px",
+  fontFamily: "monospace",
+  fontSize: "14px",
+  resize: "none",
+  outline: "none",
+  border: "none"
+};
+var scriptActionsStyle = {
+  display: "flex",
+  justifyContent: "flex-end",
+  gap: "8px",
+  padding: "8px",
+  borderTop: "1px solid #e0e0e0"
+};
+var scriptOutputSectionStyle = {
+  display: "flex",
+  flex: 1,
+  flexDirection: "column",
+  overflow: "hidden"
+};
+var storageSearchInputStyle = {
+  width: "100%",
+  padding: "8px",
+  border: "1px solid #ccc",
+  borderRadius: "4px"
+};
+var storageTableContainerStyle = {
+  flex: 1,
+  overflowY: "auto",
+  padding: "10px"
+};
+var menuItemStyle = {
+  cursor: "pointer",
+  padding: "8px 12px"
+};
+var clearButtonStyle = {
+  marginLeft: "auto"
+};
+var networkLogContainerStyle = {
+  padding: "10px",
+  display: "flex",
+  flexDirection: "column",
+  flex: 1,
+  overflow: "hidden"
+};
+var flex1Style = {
+  flex: 1
+};
+var holdButtonsContainerStyle = {
+  display: "flex",
+  flexDirection: "row",
+  gap: "8px",
+  marginBottom: "10px"
+};
+var textareaStyle = {
+  width: "100%",
+  minHeight: "80px"
+};
+var FloatingButton = ({ onClick }) => {
+  const [position, setPosition] = React2.useState({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = React2.useState(false);
+  const [isVisible, setIsVisible] = React2.useState(false);
+  const gestureStep = React2.useRef(0);
+  const gestureTimeout = React2.useRef(null);
+  const globalDragStart = React2.useRef(null);
+  const dragHappened = React2.useRef(false);
+  const dragStartPos = React2.useRef({ x: 0, y: 0 });
+  const elementStartPos = React2.useRef({ x: 0, y: 0 });
+  const clickCount = React2.useRef(0);
+  const clickTimeout = React2.useRef(null);
+  React2.useEffect(() => {
+    const handleGlobalMouseDown = (e) => {
+      globalDragStart.current = { x: e.clientX, y: e.clientY };
+    };
+    const handleGlobalMouseUp = (e) => {
+      if (!globalDragStart.current) {
+        return;
+      }
+      const dx = e.clientX - globalDragStart.current.x;
+      const dy = e.clientY - globalDragStart.current.y;
+      const absDx = Math.abs(dx);
+      const absDy = Math.abs(dy);
+      const THRESHOLD = 200;
+      if (dy > THRESHOLD && absDy > absDx) {
+        if (gestureStep.current === 0) {
+          gestureStep.current = 1;
+          if (gestureTimeout.current) {
+            clearTimeout(gestureTimeout.current);
+          }
+          gestureTimeout.current = setTimeout(() => {
+            gestureStep.current = 0;
+          }, 2e3);
+        }
+      } else if (dx > THRESHOLD && absDx > absDy) {
+        if (gestureStep.current === 1) {
+          setIsVisible((prev) => !prev);
+          gestureStep.current = 0;
+          if (gestureTimeout.current) {
+            clearTimeout(gestureTimeout.current);
+          }
+        } else {
+          gestureStep.current = 0;
+        }
+      }
+      globalDragStart.current = null;
+    };
+    window.addEventListener("mousedown", handleGlobalMouseDown);
+    window.addEventListener("mouseup", handleGlobalMouseUp);
+    return () => {
+      window.removeEventListener("mousedown", handleGlobalMouseDown);
+      window.removeEventListener("mouseup", handleGlobalMouseUp);
+      if (gestureTimeout.current) {
+        clearTimeout(gestureTimeout.current);
+      }
+    };
+  }, []);
+  React2.useEffect(() => {
+    const handleGlobalClick = () => {
+      clickCount.current += 1;
+      if (clickCount.current === 1) {
+        clickTimeout.current = setTimeout(() => {
+          clickCount.current = 0;
+        }, 3e3);
+      }
+      if (clickCount.current >= 10) {
+        setIsVisible((prev) => !prev);
+        clickCount.current = 0;
+        if (clickTimeout.current) {
+          clearTimeout(clickTimeout.current);
+        }
+      }
+    };
+    window.addEventListener("click", handleGlobalClick);
+    return () => {
+      window.removeEventListener("click", handleGlobalClick);
+      if (clickTimeout.current) {
+        clearTimeout(clickTimeout.current);
+      }
+    };
+  }, []);
+  const handleMouseDown = (e) => {
+    if (e.button !== 0) {
+      return;
+    }
+    dragHappened.current = false;
+    setIsDragging(true);
+    dragStartPos.current = { x: e.clientX, y: e.clientY };
+    elementStartPos.current = { ...position };
+    const handleMouseMove = (event) => {
+      const dx = event.clientX - dragStartPos.current.x;
+      const dy = event.clientY - dragStartPos.current.y;
+      if (!dragHappened.current && (Math.abs(dx) > 5 || Math.abs(dy) > 5)) {
+        dragHappened.current = true;
+      }
+      setPosition({
+        x: elementStartPos.current.x + dx,
+        y: elementStartPos.current.y + dy
+      });
+    };
+    const handleMouseUp = () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+      setIsDragging(false);
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+  };
+  const handleClick = (e) => {
+    if (dragHappened.current) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+    onClick();
+  };
+  const buttonStyle = {
+    ...debugFloatingButtonStyle,
+    transform: `translate(${position.x}px, ${position.y}px)`,
+    cursor: isDragging ? "grabbing" : "grab",
+    display: isVisible ? "flex" : "none"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: buttonStyle, onMouseDown: handleMouseDown, onClick: handleClick, children: "DEBUG" });
+};
+var floating_button_default = FloatingButton;
+
+// src/utils/cookie.ts
+function getCookie(name) {
+  if (typeof document === "undefined") {
+    return "";
+  }
+  const match = document.cookie.match(new RegExp(`(?:^|; )${name.replace(/([.$?*|{}()[\]\\/+^])/g, "\\$1")}=([^;]*)`));
+  return match ? decodeURIComponent(match[1] ?? "") : "";
+}
+function setCookie(name, value, days) {
+  if (typeof document === "undefined") {
+    return;
+  }
+  let expires = "";
+  document.cookie = `${name}=${encodeURIComponent(value)}${expires}; path=/`;
+}
+function deleteCookie(name) {
+  if (typeof document === "undefined") {
+    return;
+  }
+  document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
+}
+function ChangeHost() {
+  const handleHost = (host) => {
+    setCookie("hia-debug-mode-env", host);
+    alert(`\uD638\uC2A4\uD2B8\uAC00 \uBCC0\uACBD\uB418\uC5C8\uC2B5\uB2C8\uB2E4. :${host}`);
+    console.log("\uD638\uC2A4\uD2B8\uAC00 \uBCC0\uACBD\uB418\uC5C8\uC2B5\uB2C8\uB2E4.", {
+      "hia-debug-mode-env": getCookie("hia-debug-mode-env")
+    });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: panelHeaderStyle, children: /* @__PURE__ */ jsxRuntime.jsx("h2", { style: h2Style, children: "API \uD638\uC2A4\uD2B8" }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("ul", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("li", { style: menuItemStyle, onClick: () => handleHost("local"), children: "local" }),
+      /* @__PURE__ */ jsxRuntime.jsx("li", { style: menuItemStyle, onClick: () => handleHost("dev"), children: "dev" }),
+      /* @__PURE__ */ jsxRuntime.jsx("li", { style: menuItemStyle, onClick: () => handleHost("stg"), children: "stg" })
+    ] })
+  ] });
+}
+var filterNameCookieKey = "hia-debug-mode-filter-name";
+var filterList = [
+  {
+    key: "console-log",
+    description: "\uCF58\uC194\uB85C\uADF8 on/off"
+  },
+  {
+    key: "http-log",
+    description: "http \uC694\uCCAD/\uC751\uB2F5 \uB85C\uADF8 on/off"
+  },
+  {
+    key: "validation-off",
+    description: "\uC720\uD6A8\uC131\uAC80\uC0AC off"
+  },
+  {
+    key: "data-init-button",
+    description: "\uCD08\uAE30\uD654 \uBC84\uD2BC \uCD94\uAC00"
+  }
+];
+function Filter() {
+  const [filterName, setFilterName] = React2__default.default.useState("");
+  React2.useEffect(() => {
+    const name = getCookie(filterNameCookieKey);
+    setFilterName(name);
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: panelHeaderStyle, children: /* @__PURE__ */ jsxRuntime.jsx("h2", { style: h2Style, children: "\uB514\uBC84\uAE45 \uC635\uC158" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("ul", { children: filterList.map((filter) => /* @__PURE__ */ jsxRuntime.jsxs("li", { style: menuItemStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: filterName.includes(filter.key),
+          onChange: (e) => {
+            if (e.target.checked) {
+              setFilterName((prev) => {
+                const newFilterName = prev ? `${prev},${filter.key}` : filter.key;
+                setCookie(filterNameCookieKey, newFilterName);
+                return newFilterName;
+              });
+            } else {
+              setFilterName((prev) => {
+                if (prev.includes(",")) {
+                  const newFilterName = prev.split(",").filter((item) => item !== filter.key).join(",");
+                  setCookie(filterNameCookieKey, newFilterName);
+                  return newFilterName;
+                } else {
+                  deleteCookie(filterNameCookieKey);
+                  return "";
+                }
+              });
+            }
+          }
+        }
+      ),
+      filter.key,
+      " \u2014 ",
+      filter.description
+    ] }, filter.key)) })
+  ] });
+}
+function FormFactor() {
+  const handleFormFactor = (formFactor) => {
+    setCookie("x-channel-formfactor", formFactor);
+    alert(`\uD3FC\uD329\uD130\uAC00 \uBCC0\uACBD\uB418\uC5C8\uC2B5\uB2C8\uB2E4. :${formFactor}`);
+    console.log("\uD3FC\uD329\uD130\uAC00 \uBCC0\uACBD\uB418\uC5C8\uC2B5\uB2C8\uB2E4.", {
+      "x-channel-formfactor": getCookie("x-channel-formfactor")
+    });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: panelHeaderStyle, children: /* @__PURE__ */ jsxRuntime.jsx("h2", { style: h2Style, children: "\uD3FC\uD329\uD130" }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("ul", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("li", { style: menuItemStyle, onClick: () => handleFormFactor("tablet"), children: "Tablet" }),
+      /* @__PURE__ */ jsxRuntime.jsx("li", { style: menuItemStyle, onClick: () => handleFormFactor("phone"), children: "Phone" }),
+      /* @__PURE__ */ jsxRuntime.jsx("li", { style: menuItemStyle, onClick: () => handleFormFactor("pc"), children: "PC" })
+    ] })
+  ] });
+}
+function InitRefresh() {
+  const handleDeleteHostCookie = () => {
+    deleteCookie("hia-debug-mode-env");
+    alert("\uD638\uC2A4\uD2B8\uAC00 \uC0AD\uC81C\uB418\uC5C8\uC2B5\uB2C8\uB2E4.");
+    console.log("\uD638\uC2A4\uD2B8\uAC00 \uC0AD\uC81C\uB418\uC5C8\uC2B5\uB2C8\uB2E4.", {
+      "hia-debug-mode-env": getCookie("hia-debug-mode-env")
+    });
+  };
+  const handleDeleteTokenCookie = () => {
+    deleteCookie("accessToken");
+    alert("\uD1A0\uD070\uCFE0\uD0A4\uAC00 \uC0AD\uC81C\uB418\uC5C8\uC2B5\uB2C8\uB2E4.");
+    console.log("\uD1A0\uD070\uCFE0\uD0A4\uAC00 \uC0AD\uC81C\uB418\uC5C8\uC2B5\uB2C8\uB2E4.", {
+      accessToken: getCookie("accessToken")
+    });
+  };
+  const handleDeleteCustomCookie = () => {
+    deleteCookie("x-channel-appversion");
+    deleteCookie("x-channel-deviceid");
+    deleteCookie("x-channel-devicemodel");
+    deleteCookie("x-channel-formfactor");
+    deleteCookie("x-channel-loginchannel");
+    deleteCookie("x-channel-logintype");
+    deleteCookie("x-channel-platformname");
+    deleteCookie("x-channel-platformversion");
+    deleteCookie("x-channel-screenid");
+    alert("\uCEE4\uC2A4\uD140\uCFE0\uD0A4\uAC00 \uC0AD\uC81C\uB418\uC5C8\uC2B5\uB2C8\uB2E4.");
+    console.log("\uCEE4\uC2A4\uD140\uCFE0\uD0A4\uAC00 \uC0AD\uC81C\uB418\uC5C8\uC2B5\uB2C8\uB2E4.");
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: panelHeaderStyle, children: /* @__PURE__ */ jsxRuntime.jsx("h2", { style: h2Style, children: "\uCD08\uAE30\uD654" }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("ul", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("li", { style: menuItemStyle, children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => window.location.reload(), children: "\uC0C8\uB85C\uACE0\uCE68" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("li", { style: menuItemStyle, children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: handleDeleteHostCookie, children: "Host \uC0AD\uC81C" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("li", { style: menuItemStyle, children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: handleDeleteCustomCookie, children: "\uCEE4\uC2A4\uD140(x-channel-) \uC0AD\uC81C" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("li", { style: menuItemStyle, children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: handleDeleteTokenCookie, children: "\uD1A0\uD070 \uC0AD\uC81C" }) })
+    ] })
+  ] });
+}
+var MenuPanel = ({ menuItems: menuItems2, onMenuItemClick, onClose, serviceCode }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: modalOverlayStyle, onClick: onClose }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: debugMenuPanelStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: panelHeaderStyle, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { style: h2Style, children: "Debug Menu" }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: onClose, children: "X" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("ul", { children: menuItems2.map((item) => /* @__PURE__ */ jsxRuntime.jsx("li", { onClick: () => onMenuItemClick(item.component), style: menuItemStyle, children: item.label }, item.id)) }),
+      serviceCode === "hia" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Filter, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(FormFactor, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(ChangeHost, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(InitRefresh, {})
+      ] })
+    ] })
+  ] });
+};
+var menu_panel_default = MenuPanel;
+
+// src/debug-utils.ts
+function isDebugByFilterName(name) {
+  const filterNames = getCookie(filterNameCookieKey)?.split(",");
+  return filterNames?.includes(name) ?? false;
+}
+
+// src/features/console-log/use-console-log.ts
+var globalLogs = [];
+var listeners = [];
+var originalConsoleMethods = {};
+var isConsoleOverridden = false;
+var MAX_LOGS = 10;
+var addLog = (type, ...args) => {
+  const newLog = {
+    id: Date.now() + Math.random(),
+    type,
+    timestamp: (/* @__PURE__ */ new Date()).toLocaleTimeString(),
+    message: args
+  };
+  if (globalLogs.length >= MAX_LOGS) {
+    if (!isDebugByFilterName("console-log")) {
+      globalLogs.shift();
+    }
+  }
+  globalLogs = [...globalLogs, newLog];
+  listeners.forEach((listener) => listener([...globalLogs]));
+};
+var initializeConsoleLogOverride = () => {
+  if (!hiaFrontendUtils.isClient() || isConsoleOverridden) {
+    return;
+  }
+  const logTypes = ["log", "info", "warn", "error", "debug"];
+  logTypes.forEach((type) => {
+    originalConsoleMethods[type] = console[type];
+    console[type] = (...args) => {
+      originalConsoleMethods[type]?.apply(console, args);
+      addLog(type, ...args);
+    };
+  });
+  isConsoleOverridden = true;
+};
+var restoreConsoleLog = () => {
+  if (!hiaFrontendUtils.isClient() || !isConsoleOverridden) {
+    return;
+  }
+  const logTypes = ["log", "info", "warn", "error", "debug"];
+  logTypes.forEach((type) => {
+    if (originalConsoleMethods[type]) {
+      console[type] = originalConsoleMethods[type];
+    }
+  });
+  isConsoleOverridden = false;
+};
+var useConsoleLog = () => {
+  const [logs, setLogs] = React2.useState(globalLogs);
+  React2.useEffect(() => {
+    listeners.push(setLogs);
+    return () => {
+      listeners = listeners.filter((l) => l !== setLogs);
+    };
+  }, []);
+  const clearLogs = React2.useCallback(() => {
+    globalLogs = [];
+    listeners.forEach((listener) => listener([]));
+  }, []);
+  return { logs, clearLogs };
+};
+var safeStringify = (obj) => {
+  try {
+    return JSON.stringify(obj, null, 2);
+  } catch (e) {
+    return "[Unserializable Object]";
+  }
+};
+var LogMessage = ({ entry }) => {
+  const messageParts = entry.message.map((part) => {
+    if (typeof part === "object" && part !== null) {
+      return safeStringify(part);
+    }
+    return String(part);
+  });
+  const style = { ...logMessageStyle, ...logTypeStyles[entry.type] };
+  return /* @__PURE__ */ jsxRuntime.jsx("pre", { style, children: messageParts.join(" ") });
+};
+var ConsoleLogPanel = ({ onClose }) => {
+  const { logs, clearLogs } = useConsoleLog();
+  const [filter, setFilter] = React2.useState("all");
+  const logContainerRef = React2.useRef(null);
+  const filteredLogs = React2.useMemo(() => {
+    if (filter === "all") {
+      return logs;
+    }
+    return logs.filter((log) => log.type === filter);
+  }, [logs, filter]);
+  React2.useEffect(() => {
+    if (logContainerRef.current) {
+      logContainerRef.current.scrollTop = logContainerRef.current.scrollHeight;
+    }
+  }, [filteredLogs]);
+  const segmentOptions = ["all", "log", "warn", "error"];
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: modalOverlayStyle, onClick: onClose }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: debugFeaturePanelStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: panelHeaderStyle, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { style: h2Style, children: "Console Logs" }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: onClose, children: "X" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: panelToolbarStyle, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { children: segmentOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => setFilter(option), disabled: filter === option, children: option.charAt(0).toUpperCase() + option.slice(1) }, option)) }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: clearLogs, style: clearButtonStyle, children: "Clear" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: logListContainerStyle, ref: logContainerRef, children: filteredLogs.map((log) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: logItemStyle, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: logTimestampStyle, children: log.timestamp }),
+        /* @__PURE__ */ jsxRuntime.jsx(LogMessage, { entry: log })
+      ] }, log.id)) })
+    ] })
+  ] });
+};
+var console_log_panel_default = ConsoleLogPanel;
+var LoginPanel = ({ onClose, onLogin }) => {
+  const [selectedTypeId, setSelectedTypeId] = React2.useState(loginTypes[0]?.id || "");
+  const [formData, setFormData] = React2.useState({});
+  const selectedType = React2.useMemo(() => loginTypes.find((t) => t.id === selectedTypeId), [selectedTypeId]);
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  };
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (selectedType) {
+      deleteCookie("accessToken");
+      onLogin(selectedType.id, formData);
+      onClose();
+    }
+  };
+  React2.useEffect(() => {
+    setFormData({});
+  }, [selectedType]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: modalOverlayStyle, onClick: onClose }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: debugFeaturePanelStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: panelHeaderStyle, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { style: h2Style, children: "\uAC04\uD3B8 \uB85C\uADF8\uC778" }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: onClose, children: "X" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("form", { style: loginFormContainerStyle, onSubmit: handleSubmit, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "login-type-select", children: "\uB85C\uADF8\uC778 \uC720\uD615" }),
+          /* @__PURE__ */ jsxRuntime.jsx("select", { id: "login-type-select", value: selectedTypeId, onChange: (e) => setSelectedTypeId(e.target.value), children: loginTypes.map((type) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: type.id, children: type.label }, type.id)) })
+        ] }),
+        selectedType?.fields.map((field) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: field.name, children: field.label }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: field.type,
+              id: field.name,
+              name: field.name,
+              placeholder: field.placeholder,
+              value: formData[field.name] || "",
+              onChange: handleInputChange,
+              required: true
+            }
+          )
+        ] }, field.name)),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: formActionsStyle, children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", children: "\uB85C\uADF8\uC778" }) })
+      ] })
+    ] })
+  ] });
+};
+var login_panel_default = LoginPanel;
+var useDebugStore = zustand.create((set, get) => ({
+  requests: [],
+  responses: [],
+  errors: [],
+  heldRequests: [],
+  heldResponses: [],
+  heldErrors: [],
+  isHold: false,
+  addRequest: (request) => set((state) => ({ requests: [...state.requests, request] })),
+  addResponse: (response) => set((state) => ({ responses: [...state.responses, response] })),
+  addError: (error) => set((state) => ({ errors: [...state.errors, error] })),
+  holdRequest: (item) => set((state) => ({ heldRequests: [...state.heldRequests, item] })),
+  holdResponse: (item) => set((state) => ({ heldResponses: [...state.heldResponses, item] })),
+  holdError: (item) => set((state) => ({ heldErrors: [...state.heldErrors, item] })),
+  playAllRequests: () => {
+    const { heldRequests } = get();
+    heldRequests.forEach((item) => item.resolver(void 0));
+    set({ heldRequests: [] });
+  },
+  playAllResponses: () => {
+    const { heldResponses } = get();
+    heldResponses.forEach((item) => item.resolver(void 0));
+    set({ heldResponses: [] });
+  },
+  toggleHold: () => set((state) => ({ isHold: !state.isHold })),
+  clear: () => set({
+    requests: [],
+    responses: [],
+    errors: [],
+    heldRequests: [],
+    heldResponses: [],
+    heldErrors: []
+  })
+}));
+var SEARCH_SECTIONS = [
+  { value: "all", label: "\uC804\uCCB4" },
+  { value: "url", label: "\uC8FC\uC18C" },
+  { value: "headers", label: "\uD5E4\uB354" },
+  { value: "params", label: "\uD30C\uB77C\uBBF8\uD130" },
+  { value: "data", label: "\uC694\uCCAD" },
+  { value: "response", label: "\uC751\uB2F5" },
+  { value: "error", label: "\uC5D0\uB7EC" }
+];
+var getLogInfo = (log) => {
+  if (log.holdStatus === "held") {
+    if ("request" in log) {
+      return log.request;
+    }
+    if ("response" in log) {
+      return log.response;
+    }
+    if ("error" in log) {
+      return log.error;
+    }
+  }
+  return log;
+};
+var NetworkLog = ({ onClose }) => {
+  const {
+    requests,
+    responses,
+    errors,
+    clear,
+    isHold,
+    toggleHold,
+    heldRequests,
+    heldResponses,
+    heldErrors,
+    playAllRequests,
+    playAllResponses
+  } = useDebugStore();
+  const [searchTerm, setSearchTerm] = React2.useState("");
+  const [searchSection, setSearchSection] = React2.useState(SEARCH_SECTIONS[0]?.value);
+  const allLogs = React2.useMemo(() => {
+    const logs = [];
+    requests.forEach((req) => logs.push({ ...req, type: "request" }));
+    responses.forEach((res) => logs.push({ ...res, type: "response" }));
+    errors.forEach((err) => logs.push({ ...err, type: "error" }));
+    heldRequests.forEach((req) => logs.push({ ...req, type: "request", holdStatus: "held" }));
+    heldResponses.forEach((res) => logs.push({ ...res, type: "response", holdStatus: "held" }));
+    heldErrors.forEach((err) => logs.push({ ...err, type: "error", holdStatus: "held" }));
+    logs.sort((a, b) => {
+      const aInfo = getLogInfo(a);
+      const bInfo = getLogInfo(b);
+      const aTime = "startTime" in aInfo ? aInfo.startTime : 0;
+      const bTime = "startTime" in bInfo ? bInfo.startTime : 0;
+      return bTime - aTime;
+    });
+    return logs;
+  }, [requests, responses, errors, heldRequests, heldResponses, heldErrors]);
+  const filteredLogs = React2.useMemo(() => {
+    if (!searchTerm) {
+      return allLogs;
+    }
+    const lowercasedTerm = searchTerm.toLowerCase();
+    return allLogs.filter((log) => {
+      const logInfo = getLogInfo(log);
+      switch (searchSection) {
+        case "url":
+          return logInfo.url?.toLowerCase().includes(lowercasedTerm);
+        case "headers":
+          return "headers" in logInfo && logInfo.headers && JSON.stringify(logInfo.headers)?.toLowerCase().includes(lowercasedTerm);
+        case "params":
+          return "params" in logInfo && logInfo.params && JSON.stringify(logInfo.params)?.toLowerCase().includes(lowercasedTerm);
+        case "data":
+          return "data" in logInfo && logInfo.data && log.type === "request" && JSON.stringify(logInfo.data)?.toLowerCase().includes(lowercasedTerm);
+        case "response":
+          return "data" in logInfo && logInfo.data && log.type === "response" && JSON.stringify(logInfo.data)?.toLowerCase().includes(lowercasedTerm);
+        case "error":
+          return log.type === "error" && JSON.stringify(logInfo)?.toLowerCase().includes(lowercasedTerm);
+        case "all":
+        default:
+          return JSON.stringify(logInfo).toLowerCase().includes(lowercasedTerm);
+      }
+    });
+  }, [allLogs, searchTerm, searchSection]);
+  const renderLogSummary = (log) => {
+    const logInfo = getLogInfo(log);
+    const prefix = log.holdStatus === "held" ? "[HELD] " : "";
+    if (log.type === "request") {
+      return `${prefix}[REQ] ${logInfo.method.toUpperCase()} ${logInfo.url}`;
+    }
+    if (log.type === "response" && "status" in logInfo) {
+      return `${prefix}[RES] ${logInfo.method.toUpperCase()} ${logInfo.url} - ${logInfo.status}`;
+    }
+    if (log.type === "error" && "message" in logInfo) {
+      return `${prefix}[ERR] ${logInfo.method.toUpperCase()} ${logInfo.url} - ${logInfo.message}`;
+    }
+    return "Unknown Log";
+  };
+  const renderLogContent = (log) => {
+    const logInfo = getLogInfo(log);
+    return /* @__PURE__ */ jsxRuntime.jsx("pre", { children: JSON.stringify(logInfo, null, 2) });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: modalOverlayStyle, onClick: onClose }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: debugFeaturePanelStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: panelHeaderStyle, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { style: h2Style, children: "\uB124\uD2B8\uC6CC\uD06C \uB85C\uADF8" }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: onClose, children: "X" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: networkLogContainerStyle, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: searchContainerStyle, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("select", { value: searchSection, onChange: (e) => setSearchSection(e.target.value), children: SEARCH_SECTIONS.map((option) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: option.value, children: option.label }, option.value)) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "text",
+              placeholder: "\uAC80\uC0C9...",
+              value: searchTerm,
+              onChange: (e) => setSearchTerm(e.target.value),
+              style: flex1Style
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", checked: isHold, onChange: toggleHold }),
+            "Hold"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: clear, children: "clear" })
+        ] }),
+        isHold && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: holdButtonsContainerStyle, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => playAllRequests(), children: "REQ Resolve" }),
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => playAllResponses(), children: "RES Resolve" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: logListStyle, children: filteredLogs.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: "\uD45C\uC2DC\uD560 \uB85C\uADF8\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: filteredLogs.map((log, index) => /* @__PURE__ */ jsxRuntime.jsxs("details", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("summary", { style: logSummaryStyle, children: renderLogSummary(log) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: logContentStyle, children: renderLogContent(log) })
+        ] }, index)) }) })
+      ] })
+    ] })
+  ] });
+};
+var network_log_default = NetworkLog;
+var LocationInfo = () => {
+  return Object.keys(location).map((key) => {
+    const val = location[key];
+    if (typeof val === "string") {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        key,
+        ": ",
+        val,
+        " ",
+        val && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => navigator.clipboard.writeText(val), children: "\uBCF5\uC0AC" })
+      ] }, key);
+    }
+  });
+};
+var PageNavigationPanel = ({ onClose }) => {
+  const [url, setUrl] = React2.useState("");
+  const handleNavigate = () => {
+    if (url) {
+      self.location.href = url;
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: modalOverlayStyle, onClick: onClose }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: debugFeaturePanelStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: panelHeaderStyle, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { style: h2Style, children: "\uD398\uC774\uC9C0 \uC815\uBCF4" }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: onClose, children: "X" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: pageNavigationContentStyle, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+        /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+        "\uD398\uC774\uC9C0\uC815\uBCF4 :",
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { whiteSpace: "normal", wordBreak: "break-all" }, children: LocationInfo() }),
+        /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+        /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+        "\uD398\uC774\uC9C0\uC774\uB3D9 :",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "text",
+            value: url,
+            onChange: (e) => setUrl(e.target.value),
+            placeholder: "\uC774\uB3D9\uD560 URL\uC744 \uC785\uB825\uD558\uC138\uC694 (\uC608: /main)",
+            style: flex1Style
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: handleNavigate, children: "\uC774\uB3D9" })
+      ] })
+    ] })
+  ] });
+};
+var page_navigation_panel_default = PageNavigationPanel;
+var logTypeStyles2 = {
+  log: { color: "#333333" },
+  warn: { color: "#ffc107" },
+  error: { color: "#dc3545" },
+  return: { color: "#8a2be2" }
+};
+var safeStringify2 = (obj) => {
+  try {
+    const replacer = (_key, value) => typeof value === "bigint" ? value.toString() : value;
+    return JSON.stringify(obj, replacer, 2);
+  } catch (e) {
+    return "[Unserializable Object]";
+  }
+};
+var ResultMessage = ({ log }) => {
+  const messageParts = log.message.map((part) => {
+    if (typeof part === "object" && part !== null) {
+      return safeStringify2(part);
+    }
+    return String(part);
+  });
+  const prefix = log.type === "return" ? "\u21A9 " : "";
+  const style = { ...logMessageStyle, ...logTypeStyles2[log.type] };
+  return /* @__PURE__ */ jsxRuntime.jsxs("pre", { style, children: [
+    prefix,
+    messageParts.join(" ")
+  ] });
+};
+var ScriptExecutorPanel = ({ onClose }) => {
+  const [code, setCode] = React2.useState('// \uC5EC\uAE30\uC5D0 \uC2E4\uD589\uD560 \uCF54\uB4DC\uB97C \uC785\uB825\uD558\uC138\uC694\nconsole.log("Hello, World!");');
+  const [results, setResults] = React2.useState([]);
+  const addResult = (type, ...args) => {
+    setResults((prevResults) => [
+      ...prevResults,
+      {
+        id: Date.now() + Math.random(),
+        type,
+        timestamp: (/* @__PURE__ */ new Date()).toLocaleTimeString(),
+        message: args
+      }
+    ]);
+  };
+  const handleExecute = () => {
+    const originalConsole = { ...console };
+    const newConsole = {
+      log: (...args) => {
+        originalConsole.log(...args);
+        addResult("log", ...args);
+      },
+      warn: (...args) => {
+        originalConsole.warn(...args);
+        addResult("warn", ...args);
+      },
+      error: (...args) => {
+        originalConsole.error(...args);
+        addResult("error", ...args);
+      }
+    };
+    try {
+      Object.assign(console, newConsole);
+      const result = new Function(code)();
+      if (result !== void 0) {
+        addResult("return", result);
+      }
+    } catch (e) {
+      addResult("error", e.name, e.message);
+    } finally {
+      Object.assign(console, originalConsole);
+    }
+  };
+  const handleClear = () => {
+    setResults([]);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: modalOverlayStyle, onClick: onClose }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { ...debugFeaturePanelStyle, ...scriptExecutorContentStyle }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: panelHeaderStyle, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { style: h2Style, children: "\uC2A4\uD06C\uB9BD\uD2B8 \uC2E4\uD589" }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: onClose, children: "X" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: scriptExecutorContentStyle, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: scriptInputSectionStyle, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "textarea",
+            {
+              style: scriptTextareaStyle,
+              value: code,
+              onChange: (e) => setCode(e.target.value),
+              spellCheck: false
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: scriptActionsStyle, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: handleExecute, children: "\uC2E4\uD589 (\u25B6)" }),
+            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: handleClear, children: "\uACB0\uACFC \uC9C0\uC6B0\uAE30" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: scriptOutputSectionStyle, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: panelHeaderStyle, children: /* @__PURE__ */ jsxRuntime.jsx("h3", { style: h3Style, children: "\uACB0\uACFC" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: logListContainerStyle, children: results.map((log) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: logItemStyle, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: logTimestampStyle, children: log.timestamp }),
+            /* @__PURE__ */ jsxRuntime.jsx(ResultMessage, { log })
+          ] }, log.id)) })
+        ] })
+      ] })
+    ] })
+  ] });
+};
+var script_executor_panel_default = ScriptExecutorPanel;
+var useStorage = (storageType) => {
+  const [items, setItems] = React2.useState([]);
+  const loadItems = React2.useCallback(() => {
+    const newItems = [];
+    if (storageType === "localStorage") {
+      for (let i = 0; i < localStorage.length; i++) {
+        const key = localStorage.key(i);
+        if (key) {
+          newItems.push({ key, value: localStorage.getItem(key) || "" });
+        }
+      }
+    } else {
+      const cookies = document.cookie.split(";");
+      cookies.forEach((cookie) => {
+        const parts = cookie.split("=");
+        const key = parts.shift()?.trim();
+        if (key) {
+          newItems.push({ key, value: decodeURIComponent(parts.join("=")) });
+        }
+      });
+    }
+    setItems(newItems);
+  }, [storageType]);
+  React2.useEffect(() => {
+    loadItems();
+  }, [loadItems]);
+  const setItem = React2.useCallback(
+    (key, value) => {
+      if (storageType === "localStorage") {
+        localStorage.setItem(key, value);
+      } else {
+        setCookie(key, value);
+      }
+      loadItems();
+    },
+    [storageType, loadItems]
+  );
+  const removeItem = React2.useCallback(
+    (key) => {
+      if (storageType === "localStorage") {
+        localStorage.removeItem(key);
+      } else {
+        deleteCookie(key);
+      }
+      loadItems();
+    },
+    [storageType, loadItems]
+  );
+  return { items, setItem, removeItem, loadItems };
+};
+var ValueDisplay = ({ value }) => {
+  try {
+    const parsed = JSON.parse(value);
+    if (typeof parsed === "object" && parsed !== null) {
+      return /* @__PURE__ */ jsxRuntime.jsx("pre", { style: logContentStyle, children: JSON.stringify(parsed, null, 2) });
+    }
+  } catch (e) {
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: logContentStyle, children: value });
+};
+var EditableRow = ({
+  item,
+  onSave,
+  onRemove
+}) => {
+  const [isEditing, setIsEditing] = React2.useState(false);
+  const [value, setValue] = React2.useState(item.value);
+  const handleSave = () => {
+    onSave(item.key, value);
+    setIsEditing(false);
+  };
+  const handleEdit = () => {
+    setValue(item.value);
+    setIsEditing(true);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("details", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("summary", { children: item.key }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      isEditing ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: handleSave, children: "Save" }) : /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: handleEdit, children: "Edit" }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => onRemove(item.key), children: "Remove" }),
+      isEditing ? /* @__PURE__ */ jsxRuntime.jsx("textarea", { value, onChange: (e) => setValue(e.target.value), style: textareaStyle }) : /* @__PURE__ */ jsxRuntime.jsx(ValueDisplay, { value: item.value })
+    ] })
+  ] });
+};
+var StoragePanel = ({ onClose, storageType }) => {
+  const { items, setItem, removeItem } = useStorage(storageType);
+  const [filter, setFilter] = React2.useState("");
+  const filteredItems = React2.useMemo(() => {
+    if (!filter) {
+      return items;
+    }
+    return items.filter(
+      (item) => item.key.toLowerCase().includes(filter.toLowerCase()) || item.value.toLowerCase().includes(filter.toLowerCase())
+    );
+  }, [items, filter]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: modalOverlayStyle, onClick: onClose }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: debugFeaturePanelStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: panelHeaderStyle, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { style: h2Style, children: storageType === "localStorage" ? "Local Storage" : "Cookies" }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: onClose, children: "X" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: panelToolbarStyle, children: /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "text",
+          placeholder: "Search key or value...",
+          value: filter,
+          onChange: (e) => setFilter(e.target.value),
+          style: storageSearchInputStyle
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: storageTableContainerStyle, children: filteredItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(EditableRow, { item, onSave: setItem, onRemove: removeItem }, item.key)) })
+    ] })
+  ] });
+};
+var storage_panel_default = StoragePanel;
+var loginTypes = [
+  {
+    id: "fp",
+    label: "FP \uB85C\uADF8\uC778",
+    fields: [{ name: "employeeId", label: "\uC0AC\uBC88", type: "text", placeholder: "\uC0AC\uBC88\uC744 \uC785\uB825\uD558\uC138\uC694" }]
+  }
+];
+var menuItems = [
+  {
+    id: "network-log",
+    label: "\uB124\uD2B8\uC6CC\uD06C \uB85C\uADF8",
+    component: network_log_default,
+    display: true
+  },
+  {
+    id: "console-log",
+    label: "\uCF58\uC194 \uB85C\uADF8 \uD655\uC778",
+    component: console_log_panel_default,
+    display: true
+  },
+  {
+    id: "local-storage",
+    label: "\uB85C\uCEEC \uC2A4\uD1A0\uB9AC\uC9C0 \uAD00\uB9AC",
+    component: (props) => /* @__PURE__ */ jsxRuntime.jsx(storage_panel_default, { ...props, storageType: "localStorage" }),
+    display: true
+  },
+  {
+    id: "cookie-management",
+    label: "\uCFE0\uD0A4 \uAD00\uB9AC",
+    component: (props) => /* @__PURE__ */ jsxRuntime.jsx(storage_panel_default, { ...props, storageType: "cookie" }),
+    display: true
+  },
+  {
+    id: "quick-login",
+    label: "\uAC04\uD3B8 \uB85C\uADF8\uC778",
+    component: login_panel_default,
+    display: true
+  },
+  {
+    id: "script-executor",
+    label: "\uC2A4\uD06C\uB9BD\uD2B8 \uC2E4\uD589",
+    component: script_executor_panel_default,
+    display: true
+  },
+  {
+    id: "page-navigation",
+    label: "\uD398\uC774\uC9C0 \uC815\uBCF4",
+    component: page_navigation_panel_default,
+    display: true
+  }
+];
+var useEnvironment = () => {
+  const [envInfo, setEnvInfo] = React2.useState({
+    env: "prd"
+  });
+  React2.useEffect(() => {
+    const { hostname } = window.location;
+    setEnvInfo({ env: hiaFrontendUtils.getEnvironmentFromHostname(hostname) });
+  }, []);
+  return envInfo;
+};
+var DebugTool = ({
+  onLogin,
+  envOverride,
+  menuItemsOverride,
+  serviceCode = "etc"
+}) => {
+  React2.useEffect(() => {
+    initializeConsoleLogOverride();
+    return () => {
+      restoreConsoleLog();
+    };
+  }, []);
+  const environment = useEnvironment();
+  const env = envOverride || environment.env;
+  const menuItems2 = menuItemsOverride || menuItems;
+  const [isMenuOpen, setMenuOpen] = React2.useState(false);
+  const [activeFeature, setActiveFeature] = React2.useState(null);
+  const isVisible = ["local", "dev", "stg"].includes(env);
+  const handleMenuClick = (itemComponent) => {
+    setActiveFeature(() => itemComponent);
+    setMenuOpen(false);
+  };
+  const handleCloseFeature = () => {
+    setActiveFeature(null);
+  };
+  if (!isVisible) {
+    return null;
+  }
+  const toggleMenu = () => {
+    setMenuOpen((prev) => !prev);
+    if (!isMenuOpen) {
+      setActiveFeature(null);
+    }
+  };
+  const availableMenuItems = menuItems2.filter(
+    (item) => item.display && (item.id !== "quick-login" || item.id === "quick-login" && onLogin)
+  );
+  if (activeFeature) {
+    const FeatureComponent = activeFeature;
+    return /* @__PURE__ */ jsxRuntime.jsx(FeatureComponent, { onClose: handleCloseFeature, onLogin });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        right: "20px",
+        bottom: "20px",
+        zIndex: 9999
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(floating_button_default, { onClick: toggleMenu }),
+        isMenuOpen && /* @__PURE__ */ jsxRuntime.jsx(
+          menu_panel_default,
+          {
+            menuItems: availableMenuItems,
+            onMenuItemClick: handleMenuClick,
+            onClose: () => setMenuOpen(false),
+            serviceCode
+          }
+        )
+      ]
+    }
+  );
+};
+var MAX_LOGS2 = 20;
+function addRequestLog(config) {
+  if (!hiaFrontendUtils.isClient()) {
+    return;
+  }
+  const env = hiaFrontendUtils.getEnvironmentFromHostname(location.hostname);
+  if (env !== "prd") {
+    const { addRequest, isHold, holdRequest, requests } = useDebugStore.getState();
+    if (requests.length >= MAX_LOGS2) {
+      if (!isDebugByFilterName("http-log")) {
+        requests.shift();
+      }
+    }
+    const startTime = Date.now();
+    const requestInfo = {
+      url: config.url || "",
+      method: config.method || "",
+      headers: config.headers,
+      params: config.params,
+      data: config.data,
+      startTime
+    };
+    if (isHold) {
+      return new Promise((resolver) => {
+        holdRequest({ request: requestInfo, resolver });
+      });
+    } else {
+      addRequest(requestInfo);
+    }
+  }
+}
+function addResponseLog(response) {
+  if (!hiaFrontendUtils.isClient()) {
+    return;
+  }
+  const env = hiaFrontendUtils.getEnvironmentFromHostname(location.hostname);
+  if (env !== "prd") {
+    const { addResponse, isHold, holdResponse, responses } = useDebugStore.getState();
+    if (responses.length >= MAX_LOGS2) {
+      if (!isDebugByFilterName("http-log")) {
+        responses.shift();
+      }
+    }
+    const { config } = response;
+    const responseInfo = {
+      url: config.url || "",
+      method: config.method || "",
+      status: response.status,
+      statusText: response.statusText,
+      headers: response.headers,
+      data: response.data
+    };
+    if (isHold) {
+      return new Promise((resolver) => {
+        holdResponse({ response: responseInfo, resolver });
+      });
+    } else {
+      addResponse(responseInfo);
+    }
+  }
+}
+function addErrorLog(error) {
+  if (!hiaFrontendUtils.isClient()) {
+    return;
+  }
+  const env = hiaFrontendUtils.getEnvironmentFromHostname(location.hostname);
+  if (env !== "prd") {
+    const { addError, isHold, holdError, errors } = useDebugStore.getState();
+    if (errors.length >= MAX_LOGS2) {
+      if (!isDebugByFilterName("http-log")) {
+        errors.shift();
+      }
+    }
+    const { config } = error;
+    const errorInfo = {
+      url: config?.url || "",
+      method: config?.method || "",
+      message: error.message,
+      config: error.config,
+      response: error.response ? {
+        url: error.response.config?.url || "",
+        method: error.response.config?.method || "",
+        status: error.response.status,
+        statusText: error.response.statusText,
+        headers: error.response.headers,
+        data: error.response.data
+      } : void 0
+    };
+    if (isHold) {
+      return new Promise((resolver) => {
+        holdError({ error: errorInfo, resolver });
+      });
+    } else {
+      addError(errorInfo);
+    }
+  }
+}
+
+exports.DebugTool = DebugTool;
+exports.addErrorLog = addErrorLog;
+exports.addRequestLog = addRequestLog;
+exports.addResponseLog = addResponseLog;
+exports.isDebugByFilterName = isDebugByFilterName;