sales-frontend-components 0.0.63 → 0.0.64

package/dist/index.d.ts

@@ -3,6 +3,7 @@ import { FieldValues, UseControllerProps } from 'react-hook-form';
 import { CheckboxButtonProps, CheckboxProps, DatePickerSingleHtmlProps, DatePickerRangeHtmlProps, SegmentGroupHtmlProps, FormField } from 'sales-frontend-design-system';
 import * as react from 'react';
 import react__default from 'react';
+import { getEnvironmentFromHostname } from 'sales-frontend-utils';
 
 declare const FormCheckboxButton: <TFormValues extends FieldValues>({ name, control, disabled, children, ...props }: Pick<UseControllerProps<TFormValues>, "name" | "control" | "disabled"> & Omit<CheckboxButtonProps, "id">) => react_jsx_runtime.JSX.Element;
 
@@ -150,8 +151,9 @@ declare const testSignatureBase64Data = "data:image/png;base64,iVBORw0KGgoAAAANS
 /**
  * @file 디버그 툴 전체에서 사용되는 공용 TypeScript 타입을 정의합니다.
  */
-/** 실행 환경 (local, dev, stage, prod 등) */
-type Environment = 'local' | 'dev' | 'stage' | 'prod' | 'unknown';
+
+/** 실행 환경 ("local" | "dev" | "stg" | "prd") */
+type Environment = ReturnType<typeof getEnvironmentFromHostname>;
 /** `config.ts`에서 메뉴 아이템을 정의하기 위한 구조 */
 interface MenuItem {
     /** 메뉴의 고유 식별자 (예: 'console-log') */

package/dist/index.esm.js

@@ -5,7 +5,7 @@ import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react'
 import styles from './step-indicator/step-indicator.module.scss';
 import styles$1 from './camera/camera.module.scss';
 import styles$2 from './debug-tool/debug-tool.module.scss';
-import { isClient } from 'sales-frontend-utils';
+import { isClient, getEnvironmentFromHostname } from 'sales-frontend-utils';
 import { useDebugStore } from 'sales-frontend-api';
 import styles$3 from './debug-tool/features/network-log/network-log.module.scss';
 
@@ -1056,8 +1056,34 @@ const SEARCH_SECTIONS = [
   { value: "response", label: "\uC751\uB2F5" },
   { value: "error", label: "\uC5D0\uB7EC" }
 ];
+const 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;
+};
 const NetworkLog = ({ onClose }) => {
-  const { requests, responses, errors, clear } = useDebugStore();
+  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(() => {
@@ -1065,52 +1091,61 @@ const NetworkLog = ({ onClose }) => {
     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 aTime = "startTime" in a ? a.startTime : 0;
-      const bTime = "startTime" in b ? b.startTime : 0;
+      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]);
+  }, [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 log.url?.toLowerCase().includes(lowercasedTerm);
+          return logInfo.url?.toLowerCase().includes(lowercasedTerm);
         case "headers":
-          return "headers" in log && log.headers && JSON.stringify(log.headers)?.toLowerCase().includes(lowercasedTerm);
+          return "headers" in logInfo && logInfo.headers && JSON.stringify(logInfo.headers)?.toLowerCase().includes(lowercasedTerm);
         case "params":
-          return "params" in log && log.params && JSON.stringify(log.params)?.toLowerCase().includes(lowercasedTerm);
+          return "params" in logInfo && logInfo.params && JSON.stringify(logInfo.params)?.toLowerCase().includes(lowercasedTerm);
         case "data":
-          return "data" in log && log.data && log.type === "request" && JSON.stringify(log.data)?.toLowerCase().includes(lowercasedTerm);
+          return "data" in logInfo && logInfo.data && log.type === "request" && JSON.stringify(logInfo.data)?.toLowerCase().includes(lowercasedTerm);
         case "response":
-          return "data" in log && log.data && log.type === "response" && JSON.stringify(log.data)?.toLowerCase().includes(lowercasedTerm);
+          return "data" in logInfo && logInfo.data && log.type === "response" && JSON.stringify(logInfo.data)?.toLowerCase().includes(lowercasedTerm);
         case "error":
-          return log.type === "error" && JSON.stringify(log)?.toLowerCase().includes(lowercasedTerm);
+          return log.type === "error" && JSON.stringify(logInfo)?.toLowerCase().includes(lowercasedTerm);
         case "all":
         default:
-          return JSON.stringify(log).toLowerCase().includes(lowercasedTerm);
+          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 `[REQ] ${log.method.toUpperCase()} ${log.url}`;
+      return `${prefix}[REQ] ${logInfo.method.toUpperCase()} ${logInfo.url}`;
     }
-    if (log.type === "response" && "status" in log) {
-      return `[RES] ${log.method.toUpperCase()} ${log.url} - ${log.status}`;
+    if (log.type === "response" && "status" in logInfo) {
+      return `${prefix}[RES] ${logInfo.method.toUpperCase()} ${logInfo.url} - ${logInfo.status}`;
     }
-    if (log.type === "error" && "message" in log) {
-      return `[ERR] ${log.method.toUpperCase()} ${log.url} - ${log.message}`;
+    if (log.type === "error" && "message" in logInfo) {
+      return `${prefix}[ERR] ${logInfo.method.toUpperCase()} ${logInfo.url} - ${logInfo.message}`;
     }
     return "Unknown Log";
   };
   const renderLogContent = (log) => {
-    return /* @__PURE__ */ jsx("pre", { children: JSON.stringify(log, null, 2) });
+    const logInfo = getLogInfo(log);
+    return /* @__PURE__ */ jsx("pre", { children: JSON.stringify(logInfo, null, 2) });
   };
   return /* @__PURE__ */ jsxs(Modal.Root, { isOpen: true, onClose, modalSize: "full-screen", children: [
     /* @__PURE__ */ jsx(Modal.Overlay, {}),
@@ -1128,8 +1163,13 @@ const NetworkLog = ({ onClose }) => {
               onChange: (e) => setSearchTerm(e.target.value)
             }
           ),
+          /* @__PURE__ */ jsx(Checkbox, { id: "hold-checkbox", checked: isHold, onChange: toggleHold, size: "small", variant: "main", children: "Hold" }),
           /* @__PURE__ */ jsx(Button, { variant: "neutral", appearance: "outline", size: "xsmall", onClick: clear, children: "clear" })
         ] }),
+        isHold && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "row" }, children: [
+          /* @__PURE__ */ jsx(Button, { size: "xsmall", onClick: () => playAllRequests(), variant: "primary", appearance: "outline", children: "REQ Resolve" }),
+          /* @__PURE__ */ jsx(Button, { size: "xsmall", onClick: () => playAllResponses(), variant: "primary", appearance: "outline", children: "RES Resolve" })
+        ] }),
         /* @__PURE__ */ jsx("div", { className: styles$3["log-list"], children: filteredLogs.length === 0 ? /* @__PURE__ */ jsx("p", { children: "\uD45C\uC2DC\uD560 \uB85C\uADF8\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }) : /* @__PURE__ */ jsx(Accordion.Root, { children: filteredLogs.map((log, index) => /* @__PURE__ */ jsxs(Accordion.Item, { children: [
           /* @__PURE__ */ jsx(Accordion.HeaderButton, { children: /* @__PURE__ */ jsx("p", { className: styles$3["log-summary"], children: renderLogSummary(log) }) }),
           /* @__PURE__ */ jsx(Accordion.Content, { variant: "text", children: /* @__PURE__ */ jsx("div", { className: styles$3["log-content"], children: renderLogContent(log) }) })
@@ -1446,21 +1486,11 @@ const menuItems = [
 
 const useEnvironment = () => {
   const [envInfo, setEnvInfo] = useState({
-    env: "unknown"
+    env: "prd"
   });
   useEffect(() => {
     const { hostname } = window.location;
-    let currentEnv = "unknown";
-    if (hostname.includes("localhost") || hostname.includes("127.0.0.1")) {
-      currentEnv = "local";
-    } else if (hostname.includes("dev.")) {
-      currentEnv = "dev";
-    } else if (hostname.includes("stg.")) {
-      currentEnv = "stage";
-    } else {
-      currentEnv = "prod";
-    }
-    setEnvInfo({ env: currentEnv });
+    setEnvInfo({ env: getEnvironmentFromHostname(hostname) });
   }, []);
   return envInfo;
 };
@@ -1477,7 +1507,7 @@ const DebugTool = ({ onLogin, envOverride, menuItemsOverride }) => {
   const menuItems$1 = menuItemsOverride || menuItems;
   const [isMenuOpen, setMenuOpen] = useState(false);
   const [activeFeature, setActiveFeature] = useState(null);
-  const isVisible = ["local", "dev", "stage"].includes(env);
+  const isVisible = ["local", "dev", "stg"].includes(env);
   const handleMenuClick = (itemComponent) => {
     setActiveFeature(() => itemComponent);
     setMenuOpen(false);