sales-frontend-debug 0.0.2

package/dist/index.js

@@ -0,0 +1,1141 @@
+import React5, { useEffect, useState, useMemo, useRef, useCallback } from 'react';
+import { getEnvironmentFromHostname, isClient } from 'sales-frontend-utils';
+import { useDebugStore } from 'sales-frontend-stores';
+
+// src/debug-tool.tsx
+var debugFloatingButtonStyle = {
+  position: "fixed",
+  right: "10px",
+  bottom: "80px",
+  borderRadius: "50%",
+  backgroundColor: "#f0f0f0",
+  border: "1px solid #ccc",
+  padding: "8px 12px",
+  fontWeight: "bold",
+  zIndex: 9999
+};
+var FloatingButton = ({ onClick }) => {
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = useState(false);
+  const dragHappened = useRef(false);
+  const dragStartPos = useRef({ x: 0, y: 0 });
+  const elementStartPos = useRef({ x: 0, y: 0 });
+  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"
+  };
+  return /* @__PURE__ */ React5.createElement(
+    "button",
+    {
+      style: buttonStyle,
+      onMouseDown: handleMouseDown,
+      onClick: handleClick
+    },
+    "DEBUG"
+  );
+};
+var floating_button_default = FloatingButton;
+var debugMenuPanelStyle = {
+  position: "fixed",
+  right: "20px",
+  bottom: "90px",
+  display: "flex",
+  flexDirection: "column",
+  maxHeight: "500px",
+  backgroundColor: "#ffffff",
+  border: "1px solid #e0e0e0",
+  borderRadius: "8px",
+  boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
+  zIndex: 9999
+};
+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 MenuPanel = ({ menuItems: menuItems2, onMenuItemClick, onClose }) => {
+  return /* @__PURE__ */ React5.createElement("div", { style: debugMenuPanelStyle }, /* @__PURE__ */ React5.createElement("div", { style: panelHeaderStyle }, /* @__PURE__ */ React5.createElement("h2", { style: h2Style }, "Debug Menu"), /* @__PURE__ */ React5.createElement("button", { onClick: onClose }, "X")), /* @__PURE__ */ React5.createElement("ul", null, menuItems2.map((item) => /* @__PURE__ */ React5.createElement(
+    "li",
+    {
+      key: item.id,
+      onClick: () => onMenuItemClick(item.component),
+      style: { cursor: "pointer", padding: "8px 12px" }
+    },
+    item.label
+  ))));
+};
+var menu_panel_default = MenuPanel;
+var globalLogs = [];
+var listeners = [];
+var originalConsoleMethods = {};
+var isConsoleOverridden = false;
+var addLog = (type, ...args) => {
+  const newLog = {
+    id: Date.now() + Math.random(),
+    type,
+    timestamp: (/* @__PURE__ */ new Date()).toLocaleTimeString(),
+    message: args
+  };
+  globalLogs = [...globalLogs, newLog];
+  listeners.forEach((listener) => listener([...globalLogs]));
+};
+var initializeConsoleLogOverride = () => {
+  if (!isClient() || isConsoleOverridden) {
+    return;
+  }
+  const logTypes = ["log", "info", "warn", "error", "debug"];
+  logTypes.forEach((type) => {
+    originalConsoleMethods[type] = console[type];
+    console[type] = (...args) => {
+      if (originalConsoleMethods[type]) {
+        originalConsoleMethods[type]?.apply(console, args);
+      }
+      addLog(type, ...args);
+    };
+  });
+  isConsoleOverridden = true;
+};
+var restoreConsoleLog = () => {
+  if (!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] = useState(globalLogs);
+  useEffect(() => {
+    listeners.push(setLogs);
+    return () => {
+      listeners = listeners.filter((l) => l !== setLogs);
+    };
+  }, []);
+  const clearLogs = useCallback(() => {
+    globalLogs = [];
+    listeners.forEach((listener) => listener([]));
+  }, []);
+  return { logs, clearLogs };
+};
+
+// src/features/console-log/console-log-panel.tsx
+var modalOverlayStyle = {
+  position: "fixed",
+  top: 0,
+  left: 0,
+  width: "100vw",
+  height: "100vh",
+  backgroundColor: "rgba(0, 0, 0, 0.5)",
+  zIndex: 1e4
+};
+var debugFeaturePanelStyle = {
+  position: "fixed",
+  top: 0,
+  left: 0,
+  width: "100vw",
+  height: "100vh",
+  backgroundColor: "#ffffff",
+  zIndex: 10001,
+  display: "flex",
+  flexDirection: "column"
+};
+var panelHeaderStyle2 = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: "10px 15px",
+  backgroundColor: "#f5f5f5",
+  borderBottom: "1px solid #e0e0e0",
+  flexShrink: 0
+};
+var h2Style2 = {
+  margin: 0,
+  fontSize: "16px"
+};
+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 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__ */ React5.createElement("pre", { style }, messageParts.join(" "));
+};
+var ConsoleLogPanel = ({ onClose }) => {
+  const { logs, clearLogs } = useConsoleLog();
+  const [filter, setFilter] = useState("all");
+  const logContainerRef = useRef(null);
+  const filteredLogs = useMemo(() => {
+    if (filter === "all") {
+      return logs;
+    }
+    return logs.filter((log) => log.type === filter);
+  }, [logs, filter]);
+  useEffect(() => {
+    if (logContainerRef.current) {
+      logContainerRef.current.scrollTop = logContainerRef.current.scrollHeight;
+    }
+  }, [filteredLogs]);
+  const segmentOptions = ["all", "log", "warn", "error"];
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement("div", { style: modalOverlayStyle, onClick: onClose }), /* @__PURE__ */ React5.createElement("div", { style: debugFeaturePanelStyle }, /* @__PURE__ */ React5.createElement("div", { style: panelHeaderStyle2 }, /* @__PURE__ */ React5.createElement("h2", { style: h2Style2 }, "Console Logs"), /* @__PURE__ */ React5.createElement("button", { onClick: onClose }, "X")), /* @__PURE__ */ React5.createElement("div", { style: panelToolbarStyle }, /* @__PURE__ */ React5.createElement("div", null, segmentOptions.map((option) => /* @__PURE__ */ React5.createElement("button", { key: option, onClick: () => setFilter(option), disabled: filter === option }, option.charAt(0).toUpperCase() + option.slice(1)))), /* @__PURE__ */ React5.createElement("button", { onClick: clearLogs, style: { marginLeft: "auto" } }, "Clear")), /* @__PURE__ */ React5.createElement("div", { style: logListContainerStyle, ref: logContainerRef }, filteredLogs.map((log) => /* @__PURE__ */ React5.createElement("div", { key: log.id, style: logItemStyle }, /* @__PURE__ */ React5.createElement("span", { style: logTimestampStyle }, log.timestamp), /* @__PURE__ */ React5.createElement(LogMessage, { entry: log }))))));
+};
+var console_log_panel_default = ConsoleLogPanel;
+var modalOverlayStyle2 = {
+  position: "fixed",
+  top: 0,
+  left: 0,
+  width: "100vw",
+  height: "100vh",
+  backgroundColor: "rgba(0, 0, 0, 0.5)",
+  zIndex: 1e4
+};
+var debugFeaturePanelStyle2 = {
+  position: "fixed",
+  top: 0,
+  left: 0,
+  width: "100vw",
+  height: "100vh",
+  backgroundColor: "#ffffff",
+  zIndex: 10001,
+  display: "flex",
+  flexDirection: "column"
+};
+var panelHeaderStyle3 = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: "10px 15px",
+  backgroundColor: "#f5f5f5",
+  borderBottom: "1px solid #e0e0e0",
+  flexShrink: 0
+};
+var h2Style3 = {
+  margin: 0,
+  fontSize: "16px"
+};
+var loginFormContainerStyle = {
+  display: "flex",
+  flex: 1,
+  flexDirection: "column",
+  gap: "15px",
+  padding: "20px",
+  overflowY: "auto"
+};
+var formActionsStyle = {
+  display: "flex",
+  justifyContent: "flex-end",
+  marginTop: "10px"
+};
+var LoginPanel = ({ onClose, onLogin }) => {
+  const [selectedTypeId, setSelectedTypeId] = useState(loginTypes[0]?.id || "");
+  const [formData, setFormData] = useState({});
+  const selectedType = 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) {
+      onLogin(selectedType.id, formData);
+      onClose();
+    }
+  };
+  useEffect(() => {
+    setFormData({});
+  }, [selectedType]);
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement("div", { style: modalOverlayStyle2, onClick: onClose }), /* @__PURE__ */ React5.createElement("div", { style: debugFeaturePanelStyle2 }, /* @__PURE__ */ React5.createElement("div", { style: panelHeaderStyle3 }, /* @__PURE__ */ React5.createElement("h2", { style: h2Style3 }, "\uAC04\uD3B8 \uB85C\uADF8\uC778"), /* @__PURE__ */ React5.createElement("button", { onClick: onClose }, "X")), /* @__PURE__ */ React5.createElement("form", { style: loginFormContainerStyle, onSubmit: handleSubmit }, /* @__PURE__ */ React5.createElement("div", null, /* @__PURE__ */ React5.createElement("label", { htmlFor: "login-type-select" }, "\uB85C\uADF8\uC778 \uC720\uD615"), /* @__PURE__ */ React5.createElement(
+    "select",
+    {
+      id: "login-type-select",
+      value: selectedTypeId,
+      onChange: (e) => setSelectedTypeId(e.target.value)
+    },
+    loginTypes.map((type) => /* @__PURE__ */ React5.createElement("option", { key: type.id, value: type.id }, type.label))
+  )), selectedType?.fields.map((field) => /* @__PURE__ */ React5.createElement("div", { key: field.name }, /* @__PURE__ */ React5.createElement("label", { htmlFor: field.name }, field.label), /* @__PURE__ */ React5.createElement(
+    "input",
+    {
+      type: field.type,
+      id: field.name,
+      name: field.name,
+      placeholder: field.placeholder,
+      value: formData[field.name] || "",
+      onChange: handleInputChange,
+      required: true
+    }
+  ))), /* @__PURE__ */ React5.createElement("div", { style: formActionsStyle }, /* @__PURE__ */ React5.createElement("button", { type: "submit" }, "\uB85C\uADF8\uC778")))));
+};
+var login_panel_default = LoginPanel;
+var modalOverlayStyle3 = {
+  position: "fixed",
+  top: 0,
+  left: 0,
+  width: "100vw",
+  height: "100vh",
+  backgroundColor: "rgba(0, 0, 0, 0.5)",
+  zIndex: 1e4
+};
+var debugFeaturePanelStyle3 = {
+  position: "fixed",
+  top: 0,
+  left: 0,
+  width: "100vw",
+  height: "100vh",
+  backgroundColor: "#ffffff",
+  zIndex: 10001,
+  display: "flex",
+  flexDirection: "column"
+};
+var panelHeaderStyle4 = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: "10px 15px",
+  backgroundColor: "#f5f5f5",
+  borderBottom: "1px solid #e0e0e0",
+  flexShrink: 0
+};
+var h2Style4 = {
+  margin: 0,
+  fontSize: "16px"
+};
+var searchContainerStyle = {
+  display: "flex",
+  gap: "8px",
+  marginBottom: "16px",
+  alignItems: "center"
+};
+var logListStyle = {
+  maxHeight: "60vh",
+  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 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] = useState("");
+  const [searchSection, setSearchSection] = useState(SEARCH_SECTIONS[0]?.value);
+  const allLogs = 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 = 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__ */ React5.createElement("pre", null, JSON.stringify(logInfo, null, 2));
+  };
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement("div", { style: modalOverlayStyle3, onClick: onClose }), /* @__PURE__ */ React5.createElement("div", { style: debugFeaturePanelStyle3 }, /* @__PURE__ */ React5.createElement("div", { style: panelHeaderStyle4 }, /* @__PURE__ */ React5.createElement("h2", { style: h2Style4 }, "\uB124\uD2B8\uC6CC\uD06C \uB85C\uADF8"), /* @__PURE__ */ React5.createElement("button", { onClick: onClose }, "X")), /* @__PURE__ */ React5.createElement("div", { style: { padding: "10px", display: "flex", flexDirection: "column", flex: 1, overflow: "hidden" } }, /* @__PURE__ */ React5.createElement("div", { style: searchContainerStyle }, /* @__PURE__ */ React5.createElement("select", { value: searchSection, onChange: (e) => setSearchSection(e.target.value) }, SEARCH_SECTIONS.map((option) => /* @__PURE__ */ React5.createElement("option", { key: option.value, value: option.value }, option.label))), /* @__PURE__ */ React5.createElement(
+    "input",
+    {
+      type: "text",
+      placeholder: "\uAC80\uC0C9...",
+      value: searchTerm,
+      onChange: (e) => setSearchTerm(e.target.value),
+      style: { flex: 1 }
+    }
+  ), /* @__PURE__ */ React5.createElement("label", null, /* @__PURE__ */ React5.createElement("input", { type: "checkbox", id: "hold-checkbox", checked: isHold, onChange: toggleHold }), "Hold"), /* @__PURE__ */ React5.createElement("button", { onClick: clear }, "clear")), isHold && /* @__PURE__ */ React5.createElement("div", { style: { display: "flex", flexDirection: "row", gap: "8px", marginBottom: "10px" } }, /* @__PURE__ */ React5.createElement("button", { onClick: () => playAllRequests() }, "REQ Resolve"), /* @__PURE__ */ React5.createElement("button", { onClick: () => playAllResponses() }, "RES Resolve")), /* @__PURE__ */ React5.createElement("div", { style: logListStyle }, filteredLogs.length === 0 ? /* @__PURE__ */ React5.createElement("p", null, "\uD45C\uC2DC\uD560 \uB85C\uADF8\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.") : /* @__PURE__ */ React5.createElement("div", null, filteredLogs.map((log, index) => /* @__PURE__ */ React5.createElement("details", { key: index }, /* @__PURE__ */ React5.createElement("summary", { style: logSummaryStyle }, renderLogSummary(log)), /* @__PURE__ */ React5.createElement("div", { style: logContentStyle }, renderLogContent(log)))))))));
+};
+var network_log_default = NetworkLog;
+var modalOverlayStyle4 = {
+  position: "fixed",
+  top: 0,
+  left: 0,
+  width: "100vw",
+  height: "100vh",
+  backgroundColor: "rgba(0, 0, 0, 0.5)",
+  zIndex: 1e4
+};
+var debugFeaturePanelStyle4 = {
+  position: "fixed",
+  top: 0,
+  left: 0,
+  width: "100vw",
+  height: "100vh",
+  backgroundColor: "#ffffff",
+  zIndex: 10001,
+  display: "flex",
+  flexDirection: "column"
+};
+var panelHeaderStyle5 = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: "10px 15px",
+  backgroundColor: "#f5f5f5",
+  borderBottom: "1px solid #e0e0e0",
+  flexShrink: 0
+};
+var h2Style5 = {
+  margin: 0,
+  fontSize: "16px"
+};
+var pageNavigationContentStyle = {
+  display: "flex",
+  gap: "10px",
+  alignItems: "center",
+  padding: "20px"
+};
+var PageNavigationPanel = ({ onClose }) => {
+  const [url, setUrl] = useState("");
+  const handleNavigate = () => {
+    if (url) {
+      self.location.href = url;
+    }
+  };
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement("div", { style: modalOverlayStyle4, onClick: onClose }), /* @__PURE__ */ React5.createElement("div", { style: debugFeaturePanelStyle4 }, /* @__PURE__ */ React5.createElement("div", { style: panelHeaderStyle5 }, /* @__PURE__ */ React5.createElement("h2", { style: h2Style5 }, "\uD398\uC774\uC9C0 \uC774\uB3D9"), /* @__PURE__ */ React5.createElement("button", { onClick: onClose }, "X")), /* @__PURE__ */ React5.createElement("div", { style: pageNavigationContentStyle }, /* @__PURE__ */ React5.createElement(
+    "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: { flex: 1 }
+    }
+  ), /* @__PURE__ */ React5.createElement("button", { onClick: handleNavigate }, "\uC774\uB3D9"))));
+};
+var page_navigation_panel_default = PageNavigationPanel;
+var modalOverlayStyle5 = {
+  position: "fixed",
+  top: 0,
+  left: 0,
+  width: "100vw",
+  height: "100vh",
+  backgroundColor: "rgba(0, 0, 0, 0.5)",
+  zIndex: 1e4
+};
+var debugFeaturePanelStyle5 = {
+  position: "fixed",
+  top: 0,
+  left: 0,
+  width: "100vw",
+  height: "100vh",
+  backgroundColor: "#ffffff",
+  zIndex: 10001,
+  display: "flex",
+  flexDirection: "column"
+};
+var panelHeaderStyle6 = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: "10px 15px",
+  backgroundColor: "#f5f5f5",
+  borderBottom: "1px solid #e0e0e0",
+  flexShrink: 0
+};
+var h2Style6 = {
+  margin: 0,
+  fontSize: "16px"
+};
+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 logListContainerStyle2 = {
+  flex: 1,
+  padding: "10px",
+  overflowY: "auto",
+  fontFamily: "monospace",
+  fontSize: "12px",
+  backgroundColor: "#ffffff"
+};
+var logItemStyle2 = {
+  display: "flex",
+  alignItems: "flex-start",
+  padding: "4px 0",
+  borderBottom: "1px solid #e0e0e0"
+};
+var logTimestampStyle2 = {
+  marginRight: "10px",
+  color: "#888888"
+};
+var logMessageStyle2 = {
+  margin: 0,
+  wordBreak: "break-all",
+  whiteSpace: "pre-wrap"
+};
+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 = { ...logMessageStyle2, ...logTypeStyles2[log.type] };
+  return /* @__PURE__ */ React5.createElement("pre", { style }, prefix, messageParts.join(" "));
+};
+var ScriptExecutorPanel = ({ onClose }) => {
+  const [code, setCode] = useState('// \uC5EC\uAE30\uC5D0 \uC2E4\uD589\uD560 \uCF54\uB4DC\uB97C \uC785\uB825\uD558\uC138\uC694\nconsole.log("Hello, World!");');
+  const [results, setResults] = 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__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement("div", { style: modalOverlayStyle5, onClick: onClose }), /* @__PURE__ */ React5.createElement("div", { style: { ...debugFeaturePanelStyle5, ...scriptExecutorContentStyle } }, /* @__PURE__ */ React5.createElement("div", { style: panelHeaderStyle6 }, /* @__PURE__ */ React5.createElement("h2", { style: h2Style6 }, "\uC2A4\uD06C\uB9BD\uD2B8 \uC2E4\uD589"), /* @__PURE__ */ React5.createElement("button", { onClick: onClose }, "X")), /* @__PURE__ */ React5.createElement("div", { style: scriptExecutorContentStyle }, /* @__PURE__ */ React5.createElement("div", { style: scriptInputSectionStyle }, /* @__PURE__ */ React5.createElement(
+    "textarea",
+    {
+      style: scriptTextareaStyle,
+      value: code,
+      onChange: (e) => setCode(e.target.value),
+      spellCheck: "false"
+    }
+  ), /* @__PURE__ */ React5.createElement("div", { style: scriptActionsStyle }, /* @__PURE__ */ React5.createElement("button", { onClick: handleExecute }, "\uC2E4\uD589 (\u25B6)"), /* @__PURE__ */ React5.createElement("button", { onClick: handleClear }, "\uACB0\uACFC \uC9C0\uC6B0\uAE30"))), /* @__PURE__ */ React5.createElement("div", { style: scriptOutputSectionStyle }, /* @__PURE__ */ React5.createElement("div", { style: panelHeaderStyle6 }, /* @__PURE__ */ React5.createElement("h3", { style: h3Style }, "\uACB0\uACFC")), /* @__PURE__ */ React5.createElement("div", { style: logListContainerStyle2 }, results.map((log) => /* @__PURE__ */ React5.createElement("div", { key: log.id, style: logItemStyle2 }, /* @__PURE__ */ React5.createElement("span", { style: logTimestampStyle2 }, log.timestamp), /* @__PURE__ */ React5.createElement(ResultMessage, { log }))))))));
+};
+var script_executor_panel_default = ScriptExecutorPanel;
+var setCookie = (name, value) => {
+  document.cookie = `${name}=${encodeURIComponent(value)};path=/`;
+};
+var removeCookie = (name) => {
+  document.cookie = `${name}=;path=/;expires=Thu, 01 Jan 1970 00:00:01 GMT;`;
+};
+var useStorage = (storageType) => {
+  const [items, setItems] = useState([]);
+  const loadItems = 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]);
+  useEffect(() => {
+    loadItems();
+  }, [loadItems]);
+  const setItem = useCallback(
+    (key, value) => {
+      if (storageType === "localStorage") {
+        localStorage.setItem(key, value);
+      } else {
+        setCookie(key, value);
+      }
+      loadItems();
+    },
+    [storageType, loadItems]
+  );
+  const removeItem = useCallback(
+    (key) => {
+      if (storageType === "localStorage") {
+        localStorage.removeItem(key);
+      } else {
+        removeCookie(key);
+      }
+      loadItems();
+    },
+    [storageType, loadItems]
+  );
+  return { items, setItem, removeItem, loadItems };
+};
+
+// src/features/storage/storage-panel.tsx
+var modalOverlayStyle6 = {
+  position: "fixed",
+  top: 0,
+  left: 0,
+  width: "100vw",
+  height: "100vh",
+  backgroundColor: "rgba(0, 0, 0, 0.5)",
+  zIndex: 1e4
+};
+var debugFeaturePanelStyle6 = {
+  position: "fixed",
+  top: 0,
+  left: 0,
+  width: "100vw",
+  height: "100vh",
+  backgroundColor: "#ffffff",
+  zIndex: 10001,
+  display: "flex",
+  flexDirection: "column"
+};
+var panelHeaderStyle7 = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: "10px 15px",
+  backgroundColor: "#f5f5f5",
+  borderBottom: "1px solid #e0e0e0",
+  flexShrink: 0
+};
+var h2Style7 = {
+  margin: 0,
+  fontSize: "16px"
+};
+var panelToolbarStyle2 = {
+  display: "flex",
+  alignItems: "center",
+  padding: "10px",
+  borderBottom: "1px solid #e0e0e0",
+  gap: "8px",
+  flexShrink: 0
+};
+var storageSearchInputStyle = {
+  width: "100%",
+  padding: "8px",
+  border: "1px solid #ccc",
+  borderRadius: "4px"
+};
+var storageTableContainerStyle = {
+  flex: 1,
+  overflowY: "auto",
+  padding: "10px"
+};
+var logContentStyle2 = {
+  padding: "8px",
+  wordBreak: "break-all",
+  whiteSpace: "pre-wrap",
+  backgroundColor: "#f5f5f5",
+  borderRadius: "4px"
+};
+var ValueDisplay = ({ value }) => {
+  try {
+    const parsed = JSON.parse(value);
+    if (typeof parsed === "object" && parsed !== null) {
+      return /* @__PURE__ */ React5.createElement("pre", { style: logContentStyle2 }, JSON.stringify(parsed, null, 2));
+    }
+  } catch (e) {
+  }
+  return /* @__PURE__ */ React5.createElement("div", { style: logContentStyle2 }, value);
+};
+var EditableRow = ({ item, onSave, onRemove }) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [value, setValue] = useState(item.value);
+  const handleSave = () => {
+    onSave(item.key, value);
+    setIsEditing(false);
+  };
+  const handleEdit = () => {
+    setValue(item.value);
+    setIsEditing(true);
+  };
+  return /* @__PURE__ */ React5.createElement("details", null, /* @__PURE__ */ React5.createElement("summary", null, item.key), /* @__PURE__ */ React5.createElement("div", null, isEditing ? /* @__PURE__ */ React5.createElement("button", { onClick: handleSave }, "Save") : /* @__PURE__ */ React5.createElement("button", { onClick: handleEdit }, "Edit"), /* @__PURE__ */ React5.createElement("button", { onClick: () => onRemove(item.key) }, "Remove"), isEditing ? /* @__PURE__ */ React5.createElement("textarea", { value, onChange: (e) => setValue(e.target.value), style: { width: "100%", minHeight: "80px" } }) : /* @__PURE__ */ React5.createElement(ValueDisplay, { value: item.value })));
+};
+var StoragePanel = ({ onClose, storageType }) => {
+  const { items, setItem, removeItem } = useStorage(storageType);
+  const [filter, setFilter] = useState("");
+  const filteredItems = 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__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement("div", { style: modalOverlayStyle6, onClick: onClose }), /* @__PURE__ */ React5.createElement("div", { style: debugFeaturePanelStyle6 }, /* @__PURE__ */ React5.createElement("div", { style: panelHeaderStyle7 }, /* @__PURE__ */ React5.createElement("h2", { style: h2Style7 }, storageType === "localStorage" ? "Local Storage" : "Cookies"), /* @__PURE__ */ React5.createElement("button", { onClick: onClose }, "X")), /* @__PURE__ */ React5.createElement("div", { style: panelToolbarStyle2 }, /* @__PURE__ */ React5.createElement(
+    "input",
+    {
+      type: "text",
+      placeholder: "Search key or value...",
+      value: filter,
+      onChange: (e) => setFilter(e.target.value),
+      style: storageSearchInputStyle
+    }
+  )), /* @__PURE__ */ React5.createElement("div", { style: storageTableContainerStyle }, filteredItems.map((item) => /* @__PURE__ */ React5.createElement(EditableRow, { key: item.key, item, onSave: setItem, onRemove: removeItem })))));
+};
+var storage_panel_default = StoragePanel;
+
+// src/config.tsx
+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" }]
+  },
+  {
+    id: "customer",
+    label: "\uACE0\uAC1D \uB85C\uADF8\uC778",
+    fields: [
+      { name: "name", label: "\uC774\uB984", type: "text", placeholder: "\uC774\uB984" },
+      { name: "phone", label: "\uC804\uD654\uBC88\uD638", type: "tel", placeholder: "\uC804\uD654\uBC88\uD638" },
+      { name: "residentNumber", label: "\uC8FC\uBBFC\uBC88\uD638", type: "text", placeholder: "\uC8FC\uBBFC\uBC88\uD638 \uC55E 7\uC790\uB9AC" },
+      { name: "userId", label: "\uC544\uC774\uB514", type: "text", placeholder: "\uC544\uC774\uB514" },
+      { name: "password", label: "\uBE44\uBC00\uBC88\uD638", type: "password", placeholder: "\uBE44\uBC00\uBC88\uD638" }
+    ]
+  }
+];
+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",
+    // StoragePanel은 재사용 가능한 컴포넌트이므로, props를 통해 어떤 스토리지를 다룰지 지정합니다.
+    component: (props) => /* @__PURE__ */ React5.createElement(storage_panel_default, { ...props, storageType: "localStorage" }),
+    display: true
+  },
+  {
+    id: "cookie-management",
+    label: "\uCFE0\uD0A4 \uAD00\uB9AC",
+    component: (props) => /* @__PURE__ */ React5.createElement(storage_panel_default, { ...props, storageType: "cookie" }),
+    display: true
+  },
+  {
+    id: "quick-login",
+    label: "\uAC04\uD3B8 \uB85C\uADF8\uC778",
+    component: login_panel_default,
+    display: true
+    // 실제 표시는 DebugTool.tsx에서 onLogin prop 존재 여부에 따라 결정됩니다.
+  },
+  {
+    id: "script-executor",
+    label: "\uC2A4\uD06C\uB9BD\uD2B8 \uC2E4\uD589",
+    component: script_executor_panel_default,
+    display: true
+  },
+  {
+    id: "page-navigation",
+    label: "\uD398\uC774\uC9C0 \uC774\uB3D9",
+    component: page_navigation_panel_default,
+    display: true
+  }
+];
+var useEnvironment = () => {
+  const [envInfo, setEnvInfo] = useState({
+    env: "prd"
+  });
+  useEffect(() => {
+    const { hostname } = window.location;
+    setEnvInfo({ env: getEnvironmentFromHostname(hostname) });
+  }, []);
+  return envInfo;
+};
+
+// src/debug-tool.tsx
+var DebugTool = ({ onLogin, envOverride, menuItemsOverride }) => {
+  useEffect(() => {
+    initializeConsoleLogOverride();
+    return () => {
+      restoreConsoleLog();
+    };
+  }, []);
+  const environment = useEnvironment();
+  const env = envOverride || environment.env;
+  const menuItems2 = menuItemsOverride || menuItems;
+  const [isMenuOpen, setMenuOpen] = useState(false);
+  const [activeFeature, setActiveFeature] = 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 && // config에서 display가 true인 항목만 필터링합니다.
+    // 'quick-login' 기능은 onLogin prop이 제공된 경우에만 활성화합니다.
+    (item.id !== "quick-login" || item.id === "quick-login" && onLogin)
+  );
+  if (activeFeature) {
+    const FeatureComponent = activeFeature;
+    return /* @__PURE__ */ React5.createElement(FeatureComponent, { onClose: handleCloseFeature, onLogin });
+  }
+  return /* @__PURE__ */ React5.createElement(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        right: "20px",
+        bottom: "20px",
+        zIndex: 9999
+      }
+    },
+    /* @__PURE__ */ React5.createElement(floating_button_default, { onClick: toggleMenu }),
+    isMenuOpen && /* @__PURE__ */ React5.createElement(
+      menu_panel_default,
+      {
+        menuItems: availableMenuItems,
+        onMenuItemClick: handleMenuClick,
+        onClose: () => setMenuOpen(false)
+      }
+    )
+  );
+};
+function addRequestLog(config) {
+  const env = getEnvironmentFromHostname(location.hostname);
+  if (env !== "prd") {
+    const { addRequest, isHold, holdRequest } = useDebugStore.getState();
+    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) {
+  const env = getEnvironmentFromHostname(location.hostname);
+  if (env !== "prd") {
+    const { addResponse, isHold, holdResponse } = useDebugStore.getState();
+    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) {
+  const env = getEnvironmentFromHostname(location.hostname);
+  if (env !== "prd") {
+    const { addError, isHold, holdError } = useDebugStore.getState();
+    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);
+    }
+  }
+}
+
+export { DebugTool, addErrorLog, addRequestLog, addResponseLog };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map