sales-frontend-debug 0.0.35 → 0.0.37
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +107 -75
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +59 -27
- package/dist/index.js.map +1 -1
- package/package.json +4 -4
package/dist/index.cjs
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var React4 = require('react');
|
|
4
4
|
var salesFrontendUtils = require('sales-frontend-utils');
|
|
5
5
|
var salesFrontendStores = require('sales-frontend-stores');
|
|
6
6
|
|
|
7
7
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
8
8
|
|
|
9
|
-
var
|
|
9
|
+
var React4__default = /*#__PURE__*/_interopDefault(React4);
|
|
10
10
|
|
|
11
11
|
// src/debug-tool.tsx
|
|
12
12
|
|
|
@@ -230,18 +230,18 @@ var textareaStyle = {
|
|
|
230
230
|
|
|
231
231
|
// src/components/floating-button.tsx
|
|
232
232
|
var FloatingButton = ({ onClick }) => {
|
|
233
|
-
const [position, setPosition] =
|
|
234
|
-
const [isDragging, setIsDragging] =
|
|
235
|
-
const [isVisible, setIsVisible] =
|
|
236
|
-
const gestureStep =
|
|
237
|
-
const gestureTimeout =
|
|
238
|
-
const globalDragStart =
|
|
239
|
-
const dragHappened =
|
|
240
|
-
const dragStartPos =
|
|
241
|
-
const elementStartPos =
|
|
242
|
-
const clickCount =
|
|
243
|
-
const clickTimeout =
|
|
244
|
-
|
|
233
|
+
const [position, setPosition] = React4.useState({ x: 0, y: 0 });
|
|
234
|
+
const [isDragging, setIsDragging] = React4.useState(false);
|
|
235
|
+
const [isVisible, setIsVisible] = React4.useState(false);
|
|
236
|
+
const gestureStep = React4.useRef(0);
|
|
237
|
+
const gestureTimeout = React4.useRef(null);
|
|
238
|
+
const globalDragStart = React4.useRef(null);
|
|
239
|
+
const dragHappened = React4.useRef(false);
|
|
240
|
+
const dragStartPos = React4.useRef({ x: 0, y: 0 });
|
|
241
|
+
const elementStartPos = React4.useRef({ x: 0, y: 0 });
|
|
242
|
+
const clickCount = React4.useRef(0);
|
|
243
|
+
const clickTimeout = React4.useRef(null);
|
|
244
|
+
React4.useEffect(() => {
|
|
245
245
|
const handleGlobalMouseDown = (e) => {
|
|
246
246
|
globalDragStart.current = { x: e.clientX, y: e.clientY };
|
|
247
247
|
};
|
|
@@ -287,7 +287,7 @@ var FloatingButton = ({ onClick }) => {
|
|
|
287
287
|
}
|
|
288
288
|
};
|
|
289
289
|
}, []);
|
|
290
|
-
|
|
290
|
+
React4.useEffect(() => {
|
|
291
291
|
const handleGlobalClick = () => {
|
|
292
292
|
clickCount.current += 1;
|
|
293
293
|
if (clickCount.current === 1) {
|
|
@@ -353,7 +353,7 @@ var FloatingButton = ({ onClick }) => {
|
|
|
353
353
|
display: isVisible ? "flex" : "none"
|
|
354
354
|
// Hide until activated
|
|
355
355
|
};
|
|
356
|
-
return /* @__PURE__ */
|
|
356
|
+
return /* @__PURE__ */ React4__default.default.createElement("button", { style: buttonStyle, onMouseDown: handleMouseDown, onClick: handleClick }, "DEBUG");
|
|
357
357
|
};
|
|
358
358
|
var floating_button_default = FloatingButton;
|
|
359
359
|
var cookieClient = {
|
|
@@ -393,8 +393,8 @@ var cookieClient = {
|
|
|
393
393
|
}
|
|
394
394
|
};
|
|
395
395
|
var useStorage = (storageType) => {
|
|
396
|
-
const [items, setItems] =
|
|
397
|
-
const loadItems =
|
|
396
|
+
const [items, setItems] = React4.useState([]);
|
|
397
|
+
const loadItems = React4.useCallback(() => {
|
|
398
398
|
const newItems = [];
|
|
399
399
|
if (storageType === "localStorage") {
|
|
400
400
|
for (let i = 0; i < localStorage.length; i++) {
|
|
@@ -415,10 +415,10 @@ var useStorage = (storageType) => {
|
|
|
415
415
|
}
|
|
416
416
|
setItems(newItems);
|
|
417
417
|
}, [storageType]);
|
|
418
|
-
|
|
418
|
+
React4.useEffect(() => {
|
|
419
419
|
loadItems();
|
|
420
420
|
}, [loadItems]);
|
|
421
|
-
const setItem =
|
|
421
|
+
const setItem = React4.useCallback(
|
|
422
422
|
(key, value) => {
|
|
423
423
|
if (storageType === "localStorage") {
|
|
424
424
|
localStorage.setItem(key, value);
|
|
@@ -429,7 +429,7 @@ var useStorage = (storageType) => {
|
|
|
429
429
|
},
|
|
430
430
|
[storageType, loadItems]
|
|
431
431
|
);
|
|
432
|
-
const removeItem =
|
|
432
|
+
const removeItem = React4.useCallback(
|
|
433
433
|
(key) => {
|
|
434
434
|
if (storageType === "localStorage") {
|
|
435
435
|
localStorage.removeItem(key);
|
|
@@ -498,7 +498,7 @@ var MenuPanel = ({ menuItems: menuItems2, onMenuItemClick, onClose, serviceCode
|
|
|
498
498
|
"dsp-debug-mode-env": cookieClient.getCookie("dsp-debug-mode-env")
|
|
499
499
|
});
|
|
500
500
|
};
|
|
501
|
-
return /* @__PURE__ */
|
|
501
|
+
return /* @__PURE__ */ React4__default.default.createElement(React4__default.default.Fragment, null, /* @__PURE__ */ React4__default.default.createElement("div", { style: modalOverlayStyle, onClick: onClose }), /* @__PURE__ */ React4__default.default.createElement("div", { style: debugMenuPanelStyle }, /* @__PURE__ */ React4__default.default.createElement("div", { style: panelHeaderStyle }, /* @__PURE__ */ React4__default.default.createElement("h2", { style: h2Style }, "Debug Menu"), /* @__PURE__ */ React4__default.default.createElement("button", { onClick: onClose }, "X")), /* @__PURE__ */ React4__default.default.createElement("ul", null, menuItems2.map((item) => /* @__PURE__ */ React4__default.default.createElement("li", { key: item.id, onClick: () => onMenuItemClick(item.component), style: menuItemStyle }, item.label))), serviceCode === "dsp" && /* @__PURE__ */ React4__default.default.createElement(React4__default.default.Fragment, null, /* @__PURE__ */ React4__default.default.createElement("div", { style: panelHeaderStyle }, /* @__PURE__ */ React4__default.default.createElement("h2", { style: h2Style }, "\uD3FC\uD329\uD130")), /* @__PURE__ */ React4__default.default.createElement("ul", null, /* @__PURE__ */ React4__default.default.createElement("li", { style: menuItemStyle, onClick: () => handleFormFactor("tablet") }, "Tablet"), /* @__PURE__ */ React4__default.default.createElement("li", { style: menuItemStyle, onClick: () => handleFormFactor("phone") }, "Phone"), /* @__PURE__ */ React4__default.default.createElement("li", { style: menuItemStyle, onClick: () => handleFormFactor("pc") }, "PC")), /* @__PURE__ */ React4__default.default.createElement("div", { style: panelHeaderStyle }, /* @__PURE__ */ React4__default.default.createElement("h2", { style: h2Style }, "API\uD638\uC2A4\uD2B8")), /* @__PURE__ */ React4__default.default.createElement("ul", null, /* @__PURE__ */ React4__default.default.createElement("li", { style: menuItemStyle, onClick: () => handleHost("local") }, "local"), /* @__PURE__ */ React4__default.default.createElement("li", { style: menuItemStyle, onClick: () => handleHost("dev") }, "dev"), /* @__PURE__ */ React4__default.default.createElement("li", { style: menuItemStyle, onClick: () => handleHost("stg") }, "stg")), /* @__PURE__ */ React4__default.default.createElement("div", { style: panelHeaderStyle }, /* @__PURE__ */ React4__default.default.createElement("h2", { style: h2Style }, "\uCD08\uAE30\uD654")), /* @__PURE__ */ React4__default.default.createElement("ul", null, /* @__PURE__ */ React4__default.default.createElement("li", { style: menuItemStyle }, /* @__PURE__ */ React4__default.default.createElement("button", { onClick: handleDeleteHostCookie }, "Host \uC0AD\uC81C")), /* @__PURE__ */ React4__default.default.createElement("li", { style: menuItemStyle }, /* @__PURE__ */ React4__default.default.createElement("button", { onClick: handleDeleteCustomCookie }, "\uCEE4\uC2A4\uD140(x-channel-) \uC0AD\uC81C")), /* @__PURE__ */ React4__default.default.createElement("li", { style: menuItemStyle }, /* @__PURE__ */ React4__default.default.createElement("button", { onClick: handleDeleteTokenCookie }, "\uD1A0\uD070 \uC0AD\uC81C"))))));
|
|
502
502
|
};
|
|
503
503
|
var menu_panel_default = MenuPanel;
|
|
504
504
|
var globalLogs = [];
|
|
@@ -544,14 +544,14 @@ var restoreConsoleLog = () => {
|
|
|
544
544
|
isConsoleOverridden = false;
|
|
545
545
|
};
|
|
546
546
|
var useConsoleLog = () => {
|
|
547
|
-
const [logs, setLogs] =
|
|
548
|
-
|
|
547
|
+
const [logs, setLogs] = React4.useState(globalLogs);
|
|
548
|
+
React4.useEffect(() => {
|
|
549
549
|
listeners.push(setLogs);
|
|
550
550
|
return () => {
|
|
551
551
|
listeners = listeners.filter((l) => l !== setLogs);
|
|
552
552
|
};
|
|
553
553
|
}, []);
|
|
554
|
-
const clearLogs =
|
|
554
|
+
const clearLogs = React4.useCallback(() => {
|
|
555
555
|
globalLogs = [];
|
|
556
556
|
listeners.forEach((listener) => listener([]));
|
|
557
557
|
}, []);
|
|
@@ -574,35 +574,35 @@ var LogMessage = ({ entry }) => {
|
|
|
574
574
|
return String(part);
|
|
575
575
|
});
|
|
576
576
|
const style = { ...logMessageStyle, ...logTypeStyles[entry.type] };
|
|
577
|
-
return /* @__PURE__ */
|
|
577
|
+
return /* @__PURE__ */ React4__default.default.createElement("pre", { style }, messageParts.join(" "));
|
|
578
578
|
};
|
|
579
579
|
var ConsoleLogPanel = ({ onClose }) => {
|
|
580
580
|
const { logs, clearLogs } = useConsoleLog();
|
|
581
|
-
const [filter, setFilter] =
|
|
582
|
-
const logContainerRef =
|
|
583
|
-
const filteredLogs =
|
|
581
|
+
const [filter, setFilter] = React4.useState("all");
|
|
582
|
+
const logContainerRef = React4.useRef(null);
|
|
583
|
+
const filteredLogs = React4.useMemo(() => {
|
|
584
584
|
if (filter === "all") {
|
|
585
585
|
return logs;
|
|
586
586
|
}
|
|
587
587
|
return logs.filter((log) => log.type === filter);
|
|
588
588
|
}, [logs, filter]);
|
|
589
|
-
|
|
589
|
+
React4.useEffect(() => {
|
|
590
590
|
if (logContainerRef.current) {
|
|
591
591
|
logContainerRef.current.scrollTop = logContainerRef.current.scrollHeight;
|
|
592
592
|
}
|
|
593
593
|
}, [filteredLogs]);
|
|
594
594
|
const segmentOptions = ["all", "log", "warn", "error"];
|
|
595
|
-
return /* @__PURE__ */
|
|
595
|
+
return /* @__PURE__ */ React4__default.default.createElement(React4__default.default.Fragment, null, /* @__PURE__ */ React4__default.default.createElement("div", { style: modalOverlayStyle, onClick: onClose }), /* @__PURE__ */ React4__default.default.createElement("div", { style: debugFeaturePanelStyle }, /* @__PURE__ */ React4__default.default.createElement("div", { style: panelHeaderStyle }, /* @__PURE__ */ React4__default.default.createElement("h2", { style: h2Style }, "Console Logs"), /* @__PURE__ */ React4__default.default.createElement("button", { onClick: onClose }, "X")), /* @__PURE__ */ React4__default.default.createElement("div", { style: panelToolbarStyle }, /* @__PURE__ */ React4__default.default.createElement("div", null, segmentOptions.map((option) => /* @__PURE__ */ React4__default.default.createElement("button", { key: option, onClick: () => setFilter(option), disabled: filter === option }, option.charAt(0).toUpperCase() + option.slice(1)))), /* @__PURE__ */ React4__default.default.createElement("button", { onClick: clearLogs, style: clearButtonStyle }, "Clear")), /* @__PURE__ */ React4__default.default.createElement("div", { style: logListContainerStyle, ref: logContainerRef }, filteredLogs.map((log) => /* @__PURE__ */ React4__default.default.createElement("div", { key: log.id, style: logItemStyle }, /* @__PURE__ */ React4__default.default.createElement("span", { style: logTimestampStyle }, log.timestamp), /* @__PURE__ */ React4__default.default.createElement(LogMessage, { entry: log }))))));
|
|
596
596
|
};
|
|
597
597
|
var console_log_panel_default = ConsoleLogPanel;
|
|
598
598
|
var LoginPanel = ({ onClose, onLogin }) => {
|
|
599
|
-
const [selectedTypeId, setSelectedTypeId] =
|
|
600
|
-
const [formData, setFormData] =
|
|
601
|
-
const [mode, setMode] =
|
|
602
|
-
const [stepValidationOff, SetStepValidationOff] =
|
|
599
|
+
const [selectedTypeId, setSelectedTypeId] = React4.useState(loginTypes[0]?.id || "");
|
|
600
|
+
const [formData, setFormData] = React4.useState({});
|
|
601
|
+
const [mode, setMode] = React4.useState(cookieClient.getCookie("dsp-debug-mode") === "on");
|
|
602
|
+
const [stepValidationOff, SetStepValidationOff] = React4.useState(
|
|
603
603
|
cookieClient.getCookie("Debug-Step-Validation-Off") === "true"
|
|
604
604
|
);
|
|
605
|
-
const selectedType =
|
|
605
|
+
const selectedType = React4.useMemo(() => loginTypes.find((t) => t.id === selectedTypeId), [selectedTypeId]);
|
|
606
606
|
const handleInputChange = (e) => {
|
|
607
607
|
const { name, value } = e.target;
|
|
608
608
|
setFormData((prev) => ({ ...prev, [name]: value }));
|
|
@@ -634,10 +634,26 @@ var LoginPanel = ({ onClose, onLogin }) => {
|
|
|
634
634
|
SetStepValidationOff(false);
|
|
635
635
|
}
|
|
636
636
|
};
|
|
637
|
-
|
|
637
|
+
const handleTermsPathPolyNo = (e) => {
|
|
638
|
+
const val = e.target.value.trim();
|
|
639
|
+
if (!val) {
|
|
640
|
+
cookieClient.deleteCookie("Debug-Terms-PolyNo");
|
|
641
|
+
} else {
|
|
642
|
+
cookieClient.setCookie("Debug-Terms-PolyNo", val, { path: "/" });
|
|
643
|
+
}
|
|
644
|
+
};
|
|
645
|
+
const handleTermsPathSaleDate = (e) => {
|
|
646
|
+
const val = e.target.value.trim();
|
|
647
|
+
if (!val) {
|
|
648
|
+
cookieClient.deleteCookie("Debug-Terms-SaleDate");
|
|
649
|
+
} else {
|
|
650
|
+
cookieClient.setCookie("Debug-Terms-SaleDate", val, { path: "/" });
|
|
651
|
+
}
|
|
652
|
+
};
|
|
653
|
+
React4.useEffect(() => {
|
|
638
654
|
setFormData({});
|
|
639
655
|
}, [selectedType]);
|
|
640
|
-
return /* @__PURE__ */
|
|
656
|
+
return /* @__PURE__ */ React4__default.default.createElement(React4__default.default.Fragment, null, /* @__PURE__ */ React4__default.default.createElement("div", { style: modalOverlayStyle, onClick: onClose }), /* @__PURE__ */ React4__default.default.createElement("div", { style: debugFeaturePanelStyle }, /* @__PURE__ */ React4__default.default.createElement("div", { style: panelHeaderStyle }, /* @__PURE__ */ React4__default.default.createElement("h2", { style: h2Style }, "\uAC04\uD3B8 \uB85C\uADF8\uC778"), /* @__PURE__ */ React4__default.default.createElement("button", { onClick: onClose }, "X")), /* @__PURE__ */ React4__default.default.createElement("form", { style: loginFormContainerStyle, onSubmit: handleSubmit }, /* @__PURE__ */ React4__default.default.createElement("div", null, /* @__PURE__ */ React4__default.default.createElement("ul", { style: { listStyleType: "circle" } }, /* @__PURE__ */ React4__default.default.createElement("li", null, /* @__PURE__ */ React4__default.default.createElement("label", { htmlFor: "debug-on" }, "Debug On"), /* @__PURE__ */ React4__default.default.createElement("input", { type: "checkbox", id: "debug-on", onChange: handleDebugOn, checked: mode }), /* @__PURE__ */ React4__default.default.createElement("ul", { style: { listStyleType: "square", paddingLeft: "20px" } }, /* @__PURE__ */ React4__default.default.createElement("li", null, "(\uCFE0\uD0A4\uC5D0 \uC14B\uD305\uB41C \uD1A0\uD070\uAC12\uC73C\uB85C \uD5E4\uB354\uB97C \uC0DD\uC131\uD569\uB2C8\uB2E4. \uAC04\uD3B8\uB85C\uADF8\uC778 \uC0AC\uC6A9\uC2DC \uD544\uC218\uCCB4\uD06C)"))), /* @__PURE__ */ React4__default.default.createElement("li", null, /* @__PURE__ */ React4__default.default.createElement("label", { htmlFor: "step-validation-off" }, "\uC11C\uC2DD Validation Off"), /* @__PURE__ */ React4__default.default.createElement(
|
|
641
657
|
"input",
|
|
642
658
|
{
|
|
643
659
|
type: "checkbox",
|
|
@@ -645,7 +661,23 @@ var LoginPanel = ({ onClose, onLogin }) => {
|
|
|
645
661
|
onChange: handleStepValidationOff,
|
|
646
662
|
checked: stepValidationOff
|
|
647
663
|
}
|
|
648
|
-
), /* @__PURE__ */
|
|
664
|
+
), /* @__PURE__ */ React4__default.default.createElement("ul", { style: { listStyleType: "square", paddingLeft: "20px" } }, /* @__PURE__ */ React4__default.default.createElement("li", null, "(\uC11C\uC2DD \uB2E8\uACC4 \uC774\uB3D9\uC2DC, validation\uC744 \uB044\uACE0 \uBBF8\uC791\uC131 \uB2E8\uACC4\uB3C4 \uC774\uB3D9\uAC00\uB2A5\uD558\uB3C4\uB85D \uD569\uB2C8\uB2E4.)"))), /* @__PURE__ */ React4__default.default.createElement("li", null, /* @__PURE__ */ React4__default.default.createElement("label", { htmlFor: "terms-path-poly-no" }, "\uC57D\uAD00 polyNo"), /* @__PURE__ */ React4__default.default.createElement(
|
|
665
|
+
"input",
|
|
666
|
+
{
|
|
667
|
+
type: "text",
|
|
668
|
+
id: "terms-path-poly-no",
|
|
669
|
+
onChange: handleTermsPathPolyNo,
|
|
670
|
+
placeholder: "polyNo,saleDate\uB458\uB2E4\uC785\uB825"
|
|
671
|
+
}
|
|
672
|
+
)), /* @__PURE__ */ React4__default.default.createElement("li", null, /* @__PURE__ */ React4__default.default.createElement("label", { htmlFor: "terms-path-sale-date" }, "\uC57D\uAD00 saleDate"), /* @__PURE__ */ React4__default.default.createElement(
|
|
673
|
+
"input",
|
|
674
|
+
{
|
|
675
|
+
type: "text",
|
|
676
|
+
id: "terms-path-sale-date",
|
|
677
|
+
onChange: handleTermsPathSaleDate,
|
|
678
|
+
placeholder: "polyNo,saleDate\uB458\uB2E4\uC785\uB825"
|
|
679
|
+
}
|
|
680
|
+
), /* @__PURE__ */ React4__default.default.createElement("br", null), /* @__PURE__ */ React4__default.default.createElement("strong", null, "\uC57D\uAD00\uD655\uC778\uD6C4 \uD574\uB2F9\uCFE0\uD0A4 \uBC18\uB4DC\uC2DC \uC0AD\uC81C"))), /* @__PURE__ */ React4__default.default.createElement("br", null), " ", /* @__PURE__ */ React4__default.default.createElement("br", null), /* @__PURE__ */ React4__default.default.createElement("label", { htmlFor: "login-type-select" }, "\uB85C\uADF8\uC778 \uC720\uD615"), /* @__PURE__ */ React4__default.default.createElement("select", { id: "login-type-select", value: selectedTypeId, onChange: (e) => setSelectedTypeId(e.target.value) }, loginTypes.map((type) => /* @__PURE__ */ React4__default.default.createElement("option", { key: type.id, value: type.id }, type.label)))), selectedType?.fields.map((field) => /* @__PURE__ */ React4__default.default.createElement("div", { key: field.name }, /* @__PURE__ */ React4__default.default.createElement("label", { htmlFor: field.name }, field.label), /* @__PURE__ */ React4__default.default.createElement(
|
|
649
681
|
"input",
|
|
650
682
|
{
|
|
651
683
|
type: field.type,
|
|
@@ -656,7 +688,7 @@ var LoginPanel = ({ onClose, onLogin }) => {
|
|
|
656
688
|
onChange: handleInputChange,
|
|
657
689
|
required: true
|
|
658
690
|
}
|
|
659
|
-
))), /* @__PURE__ */
|
|
691
|
+
))), /* @__PURE__ */ React4__default.default.createElement("div", { style: formActionsStyle }, /* @__PURE__ */ React4__default.default.createElement("button", { type: "submit" }, "\uB85C\uADF8\uC778")))));
|
|
660
692
|
};
|
|
661
693
|
var login_panel_default = LoginPanel;
|
|
662
694
|
var SEARCH_SECTIONS = [
|
|
@@ -696,9 +728,9 @@ var NetworkLog = ({ onClose }) => {
|
|
|
696
728
|
playAllRequests,
|
|
697
729
|
playAllResponses
|
|
698
730
|
} = salesFrontendStores.useDebugStore();
|
|
699
|
-
const [searchTerm, setSearchTerm] =
|
|
700
|
-
const [searchSection, setSearchSection] =
|
|
701
|
-
const allLogs =
|
|
731
|
+
const [searchTerm, setSearchTerm] = React4.useState("");
|
|
732
|
+
const [searchSection, setSearchSection] = React4.useState(SEARCH_SECTIONS[0]?.value);
|
|
733
|
+
const allLogs = React4.useMemo(() => {
|
|
702
734
|
const logs = [];
|
|
703
735
|
requests.forEach((req) => logs.push({ ...req, type: "request" }));
|
|
704
736
|
responses.forEach((res) => logs.push({ ...res, type: "response" }));
|
|
@@ -715,7 +747,7 @@ var NetworkLog = ({ onClose }) => {
|
|
|
715
747
|
});
|
|
716
748
|
return logs;
|
|
717
749
|
}, [requests, responses, errors, heldRequests, heldResponses, heldErrors]);
|
|
718
|
-
const filteredLogs =
|
|
750
|
+
const filteredLogs = React4.useMemo(() => {
|
|
719
751
|
if (!searchTerm) {
|
|
720
752
|
return allLogs;
|
|
721
753
|
}
|
|
@@ -757,9 +789,9 @@ var NetworkLog = ({ onClose }) => {
|
|
|
757
789
|
};
|
|
758
790
|
const renderLogContent = (log) => {
|
|
759
791
|
const logInfo = getLogInfo(log);
|
|
760
|
-
return /* @__PURE__ */
|
|
792
|
+
return /* @__PURE__ */ React4__default.default.createElement("pre", null, JSON.stringify(logInfo, null, 2));
|
|
761
793
|
};
|
|
762
|
-
return /* @__PURE__ */
|
|
794
|
+
return /* @__PURE__ */ React4__default.default.createElement(React4__default.default.Fragment, null, /* @__PURE__ */ React4__default.default.createElement("div", { style: modalOverlayStyle, onClick: onClose }), /* @__PURE__ */ React4__default.default.createElement("div", { style: debugFeaturePanelStyle }, /* @__PURE__ */ React4__default.default.createElement("div", { style: panelHeaderStyle }, /* @__PURE__ */ React4__default.default.createElement("h2", { style: h2Style }, "\uB124\uD2B8\uC6CC\uD06C \uB85C\uADF8"), /* @__PURE__ */ React4__default.default.createElement("button", { onClick: onClose }, "X")), /* @__PURE__ */ React4__default.default.createElement("div", { style: networkLogContainerStyle }, /* @__PURE__ */ React4__default.default.createElement("div", { style: searchContainerStyle }, /* @__PURE__ */ React4__default.default.createElement("select", { value: searchSection, onChange: (e) => setSearchSection(e.target.value) }, SEARCH_SECTIONS.map((option) => /* @__PURE__ */ React4__default.default.createElement("option", { key: option.value, value: option.value }, option.label))), /* @__PURE__ */ React4__default.default.createElement(
|
|
763
795
|
"input",
|
|
764
796
|
{
|
|
765
797
|
type: "text",
|
|
@@ -768,7 +800,7 @@ var NetworkLog = ({ onClose }) => {
|
|
|
768
800
|
onChange: (e) => setSearchTerm(e.target.value),
|
|
769
801
|
style: flex1Style
|
|
770
802
|
}
|
|
771
|
-
), /* @__PURE__ */
|
|
803
|
+
), /* @__PURE__ */ React4__default.default.createElement("label", null, /* @__PURE__ */ React4__default.default.createElement("input", { type: "checkbox", id: "hold-checkbox", checked: isHold, onChange: toggleHold }), "Hold"), /* @__PURE__ */ React4__default.default.createElement("button", { onClick: clear }, "clear")), isHold && /* @__PURE__ */ React4__default.default.createElement("div", { style: holdButtonsContainerStyle }, /* @__PURE__ */ React4__default.default.createElement("button", { onClick: () => playAllRequests() }, "REQ Resolve"), /* @__PURE__ */ React4__default.default.createElement("button", { onClick: () => playAllResponses() }, "RES Resolve")), /* @__PURE__ */ React4__default.default.createElement("div", { style: logListStyle }, filteredLogs.length === 0 ? /* @__PURE__ */ React4__default.default.createElement("p", null, "\uD45C\uC2DC\uD560 \uB85C\uADF8\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.") : /* @__PURE__ */ React4__default.default.createElement("div", null, filteredLogs.map((log, index) => /* @__PURE__ */ React4__default.default.createElement("details", { key: index }, /* @__PURE__ */ React4__default.default.createElement("summary", { style: logSummaryStyle }, renderLogSummary(log)), /* @__PURE__ */ React4__default.default.createElement("div", { style: logContentStyle }, renderLogContent(log)))))))));
|
|
772
804
|
};
|
|
773
805
|
var network_log_default = NetworkLog;
|
|
774
806
|
var URL_MAP = {
|
|
@@ -784,7 +816,7 @@ var URL_MAP = {
|
|
|
784
816
|
none: ""
|
|
785
817
|
};
|
|
786
818
|
var PageNavigationPanel = ({ onClose }) => {
|
|
787
|
-
const [url, setUrl] =
|
|
819
|
+
const [url, setUrl] = React4.useState("");
|
|
788
820
|
const handleNavigate = () => {
|
|
789
821
|
if (url) {
|
|
790
822
|
self.location.href = url;
|
|
@@ -798,7 +830,7 @@ var PageNavigationPanel = ({ onClose }) => {
|
|
|
798
830
|
setUrl("");
|
|
799
831
|
}
|
|
800
832
|
};
|
|
801
|
-
return /* @__PURE__ */
|
|
833
|
+
return /* @__PURE__ */ React4__default.default.createElement(React4__default.default.Fragment, null, /* @__PURE__ */ React4__default.default.createElement("div", { style: modalOverlayStyle, onClick: onClose }), /* @__PURE__ */ React4__default.default.createElement("div", { style: debugFeaturePanelStyle }, /* @__PURE__ */ React4__default.default.createElement("div", { style: panelHeaderStyle }, /* @__PURE__ */ React4__default.default.createElement("h2", { style: h2Style }, "\uD398\uC774\uC9C0 \uC774\uB3D9"), /* @__PURE__ */ React4__default.default.createElement("button", { onClick: onClose }, "X")), /* @__PURE__ */ React4__default.default.createElement("div", { style: pageNavigationContentStyle }, /* @__PURE__ */ React4__default.default.createElement("select", { onChange: handleUrlTypeChange }, /* @__PURE__ */ React4__default.default.createElement("option", null, "\uC120\uD0DD"), /* @__PURE__ */ React4__default.default.createElement("option", { value: "FP_1" }, "FP-\uC785\uB825\uB2E8\uACC4_\uC2DC\uC791\uD558\uAE30"), /* @__PURE__ */ React4__default.default.createElement("option", { value: "FP_2" }, "FP-\uC785\uB825\uB2E8\uACC4_2"), /* @__PURE__ */ React4__default.default.createElement("option", { value: "FP_3" }, "FP-\uC785\uB825\uB2E8\uACC4_3"), /* @__PURE__ */ React4__default.default.createElement("option", { value: "FP_4" }, "FP-\uC785\uB825\uB2E8\uACC4_4"), /* @__PURE__ */ React4__default.default.createElement("option", { value: "FP_5" }, "FP-\uC785\uB825\uB2E8\uACC4_5"), /* @__PURE__ */ React4__default.default.createElement("option", { value: "CUST_1" }, "\uACE0\uAC1D-\uC785\uB825\uB2E8\uACC4_1"), /* @__PURE__ */ React4__default.default.createElement("option", { value: "CUST_2" }, "\uACE0\uAC1D-\uC785\uB825\uB2E8\uACC4_2"), /* @__PURE__ */ React4__default.default.createElement("option", { value: "CUST_3" }, "\uACE0\uAC1D-\uC785\uB825\uB2E8\uACC4_3"), /* @__PURE__ */ React4__default.default.createElement("option", { value: "CUST_4" }, "\uACE0\uAC1D-\uC785\uB825\uB2E8\uACC4_4"), /* @__PURE__ */ React4__default.default.createElement("option", { value: "none" }, "\uC9C1\uC811\uC785\uB825")), /* @__PURE__ */ React4__default.default.createElement(
|
|
802
834
|
"input",
|
|
803
835
|
{
|
|
804
836
|
type: "text",
|
|
@@ -807,7 +839,7 @@ var PageNavigationPanel = ({ onClose }) => {
|
|
|
807
839
|
placeholder: "\uC774\uB3D9\uD560 URL\uC744 \uC785\uB825\uD558\uC138\uC694 (\uC608: /main)",
|
|
808
840
|
style: flex1Style
|
|
809
841
|
}
|
|
810
|
-
), /* @__PURE__ */
|
|
842
|
+
), /* @__PURE__ */ React4__default.default.createElement("button", { onClick: handleNavigate }, "\uC774\uB3D9"))));
|
|
811
843
|
};
|
|
812
844
|
var page_navigation_panel_default = PageNavigationPanel;
|
|
813
845
|
var logTypeStyles2 = {
|
|
@@ -833,11 +865,11 @@ var ResultMessage = ({ log }) => {
|
|
|
833
865
|
});
|
|
834
866
|
const prefix = log.type === "return" ? "\u21A9 " : "";
|
|
835
867
|
const style = { ...logMessageStyle, ...logTypeStyles2[log.type] };
|
|
836
|
-
return /* @__PURE__ */
|
|
868
|
+
return /* @__PURE__ */ React4__default.default.createElement("pre", { style }, prefix, messageParts.join(" "));
|
|
837
869
|
};
|
|
838
870
|
var ScriptExecutorPanel = ({ onClose }) => {
|
|
839
|
-
const [code, setCode] =
|
|
840
|
-
const [results, setResults] =
|
|
871
|
+
const [code, setCode] = React4.useState('// \uC5EC\uAE30\uC5D0 \uC2E4\uD589\uD560 \uCF54\uB4DC\uB97C \uC785\uB825\uD558\uC138\uC694\nconsole.log("Hello, World!");');
|
|
872
|
+
const [results, setResults] = React4.useState([]);
|
|
841
873
|
const addResult = (type, ...args) => {
|
|
842
874
|
setResults((prevResults) => [
|
|
843
875
|
...prevResults,
|
|
@@ -880,7 +912,7 @@ var ScriptExecutorPanel = ({ onClose }) => {
|
|
|
880
912
|
const handleClear = () => {
|
|
881
913
|
setResults([]);
|
|
882
914
|
};
|
|
883
|
-
return /* @__PURE__ */
|
|
915
|
+
return /* @__PURE__ */ React4__default.default.createElement(React4__default.default.Fragment, null, /* @__PURE__ */ React4__default.default.createElement("div", { style: modalOverlayStyle, onClick: onClose }), /* @__PURE__ */ React4__default.default.createElement("div", { style: { ...debugFeaturePanelStyle, ...scriptExecutorContentStyle } }, /* @__PURE__ */ React4__default.default.createElement("div", { style: panelHeaderStyle }, /* @__PURE__ */ React4__default.default.createElement("h2", { style: h2Style }, "\uC2A4\uD06C\uB9BD\uD2B8 \uC2E4\uD589"), /* @__PURE__ */ React4__default.default.createElement("button", { onClick: onClose }, "X")), /* @__PURE__ */ React4__default.default.createElement("div", { style: scriptExecutorContentStyle }, /* @__PURE__ */ React4__default.default.createElement("div", { style: scriptInputSectionStyle }, /* @__PURE__ */ React4__default.default.createElement(
|
|
884
916
|
"textarea",
|
|
885
917
|
{
|
|
886
918
|
style: scriptTextareaStyle,
|
|
@@ -888,22 +920,22 @@ var ScriptExecutorPanel = ({ onClose }) => {
|
|
|
888
920
|
onChange: (e) => setCode(e.target.value),
|
|
889
921
|
spellCheck: "false"
|
|
890
922
|
}
|
|
891
|
-
), /* @__PURE__ */
|
|
923
|
+
), /* @__PURE__ */ React4__default.default.createElement("div", { style: scriptActionsStyle }, /* @__PURE__ */ React4__default.default.createElement("button", { onClick: handleExecute }, "\uC2E4\uD589 (\u25B6)"), /* @__PURE__ */ React4__default.default.createElement("button", { onClick: handleClear }, "\uACB0\uACFC \uC9C0\uC6B0\uAE30"))), /* @__PURE__ */ React4__default.default.createElement("div", { style: scriptOutputSectionStyle }, /* @__PURE__ */ React4__default.default.createElement("div", { style: panelHeaderStyle }, /* @__PURE__ */ React4__default.default.createElement("h3", { style: h3Style }, "\uACB0\uACFC")), /* @__PURE__ */ React4__default.default.createElement("div", { style: logListContainerStyle }, results.map((log) => /* @__PURE__ */ React4__default.default.createElement("div", { key: log.id, style: logItemStyle }, /* @__PURE__ */ React4__default.default.createElement("span", { style: logTimestampStyle }, log.timestamp), /* @__PURE__ */ React4__default.default.createElement(ResultMessage, { log }))))))));
|
|
892
924
|
};
|
|
893
925
|
var script_executor_panel_default = ScriptExecutorPanel;
|
|
894
926
|
var ValueDisplay = ({ value }) => {
|
|
895
927
|
try {
|
|
896
928
|
const parsed = JSON.parse(value);
|
|
897
929
|
if (typeof parsed === "object" && parsed !== null) {
|
|
898
|
-
return /* @__PURE__ */
|
|
930
|
+
return /* @__PURE__ */ React4__default.default.createElement("pre", { style: logContentStyle }, JSON.stringify(parsed, null, 2));
|
|
899
931
|
}
|
|
900
932
|
} catch (e) {
|
|
901
933
|
}
|
|
902
|
-
return /* @__PURE__ */
|
|
934
|
+
return /* @__PURE__ */ React4__default.default.createElement("div", { style: logContentStyle }, value);
|
|
903
935
|
};
|
|
904
936
|
var EditableRow = ({ item, onSave, onRemove }) => {
|
|
905
|
-
const [isEditing, setIsEditing] =
|
|
906
|
-
const [value, setValue] =
|
|
937
|
+
const [isEditing, setIsEditing] = React4.useState(false);
|
|
938
|
+
const [value, setValue] = React4.useState(item.value);
|
|
907
939
|
const handleSave = () => {
|
|
908
940
|
onSave(item.key, value);
|
|
909
941
|
setIsEditing(false);
|
|
@@ -912,12 +944,12 @@ var EditableRow = ({ item, onSave, onRemove }) => {
|
|
|
912
944
|
setValue(item.value);
|
|
913
945
|
setIsEditing(true);
|
|
914
946
|
};
|
|
915
|
-
return /* @__PURE__ */
|
|
947
|
+
return /* @__PURE__ */ React4__default.default.createElement("details", null, /* @__PURE__ */ React4__default.default.createElement("summary", null, item.key), /* @__PURE__ */ React4__default.default.createElement("div", null, isEditing ? /* @__PURE__ */ React4__default.default.createElement("button", { onClick: handleSave }, "Save") : /* @__PURE__ */ React4__default.default.createElement("button", { onClick: handleEdit }, "Edit"), /* @__PURE__ */ React4__default.default.createElement("button", { onClick: () => onRemove(item.key) }, "Remove"), isEditing ? /* @__PURE__ */ React4__default.default.createElement("textarea", { value, onChange: (e) => setValue(e.target.value), style: textareaStyle }) : /* @__PURE__ */ React4__default.default.createElement(ValueDisplay, { value: item.value })));
|
|
916
948
|
};
|
|
917
949
|
var StoragePanel = ({ onClose, storageType }) => {
|
|
918
950
|
const { items, setItem, removeItem } = useStorage(storageType);
|
|
919
|
-
const [filter, setFilter] =
|
|
920
|
-
const filteredItems =
|
|
951
|
+
const [filter, setFilter] = React4.useState("");
|
|
952
|
+
const filteredItems = React4.useMemo(() => {
|
|
921
953
|
if (!filter) {
|
|
922
954
|
return items;
|
|
923
955
|
}
|
|
@@ -925,7 +957,7 @@ var StoragePanel = ({ onClose, storageType }) => {
|
|
|
925
957
|
(item) => item.key.toLowerCase().includes(filter.toLowerCase()) || item.value.toLowerCase().includes(filter.toLowerCase())
|
|
926
958
|
);
|
|
927
959
|
}, [items, filter]);
|
|
928
|
-
return /* @__PURE__ */
|
|
960
|
+
return /* @__PURE__ */ React4__default.default.createElement(React4__default.default.Fragment, null, /* @__PURE__ */ React4__default.default.createElement("div", { style: modalOverlayStyle, onClick: onClose }), /* @__PURE__ */ React4__default.default.createElement("div", { style: debugFeaturePanelStyle }, /* @__PURE__ */ React4__default.default.createElement("div", { style: panelHeaderStyle }, /* @__PURE__ */ React4__default.default.createElement("h2", { style: h2Style }, storageType === "localStorage" ? "Local Storage" : "Cookies"), /* @__PURE__ */ React4__default.default.createElement("button", { onClick: onClose }, "X")), /* @__PURE__ */ React4__default.default.createElement("div", { style: panelToolbarStyle }, /* @__PURE__ */ React4__default.default.createElement(
|
|
929
961
|
"input",
|
|
930
962
|
{
|
|
931
963
|
type: "text",
|
|
@@ -934,7 +966,7 @@ var StoragePanel = ({ onClose, storageType }) => {
|
|
|
934
966
|
onChange: (e) => setFilter(e.target.value),
|
|
935
967
|
style: storageSearchInputStyle
|
|
936
968
|
}
|
|
937
|
-
)), /* @__PURE__ */
|
|
969
|
+
)), /* @__PURE__ */ React4__default.default.createElement("div", { style: storageTableContainerStyle }, filteredItems.map((item) => /* @__PURE__ */ React4__default.default.createElement(EditableRow, { key: item.key, item, onSave: setItem, onRemove: removeItem })))));
|
|
938
970
|
};
|
|
939
971
|
var storage_panel_default = StoragePanel;
|
|
940
972
|
|
|
@@ -974,13 +1006,13 @@ var menuItems = [
|
|
|
974
1006
|
id: "local-storage",
|
|
975
1007
|
label: "\uB85C\uCEEC \uC2A4\uD1A0\uB9AC\uC9C0 \uAD00\uB9AC",
|
|
976
1008
|
// StoragePanel은 재사용 가능한 컴포넌트이므로, props를 통해 어떤 스토리지를 다룰지 지정합니다.
|
|
977
|
-
component: (props) => /* @__PURE__ */
|
|
1009
|
+
component: (props) => /* @__PURE__ */ React4__default.default.createElement(storage_panel_default, { ...props, storageType: "localStorage" }),
|
|
978
1010
|
display: true
|
|
979
1011
|
},
|
|
980
1012
|
{
|
|
981
1013
|
id: "cookie-management",
|
|
982
1014
|
label: "\uCFE0\uD0A4 \uAD00\uB9AC",
|
|
983
|
-
component: (props) => /* @__PURE__ */
|
|
1015
|
+
component: (props) => /* @__PURE__ */ React4__default.default.createElement(storage_panel_default, { ...props, storageType: "cookie" }),
|
|
984
1016
|
display: true
|
|
985
1017
|
},
|
|
986
1018
|
{
|
|
@@ -1004,10 +1036,10 @@ var menuItems = [
|
|
|
1004
1036
|
}
|
|
1005
1037
|
];
|
|
1006
1038
|
var useEnvironment = () => {
|
|
1007
|
-
const [envInfo, setEnvInfo] =
|
|
1039
|
+
const [envInfo, setEnvInfo] = React4.useState({
|
|
1008
1040
|
env: "prd"
|
|
1009
1041
|
});
|
|
1010
|
-
|
|
1042
|
+
React4.useEffect(() => {
|
|
1011
1043
|
const { hostname } = window.location;
|
|
1012
1044
|
setEnvInfo({ env: salesFrontendUtils.getEnvironmentFromHostname(hostname) });
|
|
1013
1045
|
}, []);
|
|
@@ -1021,7 +1053,7 @@ var DebugTool = ({
|
|
|
1021
1053
|
menuItemsOverride,
|
|
1022
1054
|
serviceCode = "etc"
|
|
1023
1055
|
}) => {
|
|
1024
|
-
|
|
1056
|
+
React4.useEffect(() => {
|
|
1025
1057
|
initializeConsoleLogOverride();
|
|
1026
1058
|
return () => {
|
|
1027
1059
|
restoreConsoleLog();
|
|
@@ -1030,8 +1062,8 @@ var DebugTool = ({
|
|
|
1030
1062
|
const environment = useEnvironment();
|
|
1031
1063
|
const env = envOverride || environment.env;
|
|
1032
1064
|
const menuItems2 = menuItemsOverride || menuItems;
|
|
1033
|
-
const [isMenuOpen, setMenuOpen] =
|
|
1034
|
-
const [activeFeature, setActiveFeature] =
|
|
1065
|
+
const [isMenuOpen, setMenuOpen] = React4.useState(false);
|
|
1066
|
+
const [activeFeature, setActiveFeature] = React4.useState(null);
|
|
1035
1067
|
const isVisible = ["local", "dev", "stg"].includes(env);
|
|
1036
1068
|
const handleMenuClick = (itemComponent) => {
|
|
1037
1069
|
setActiveFeature(() => itemComponent);
|
|
@@ -1056,9 +1088,9 @@ var DebugTool = ({
|
|
|
1056
1088
|
);
|
|
1057
1089
|
if (activeFeature) {
|
|
1058
1090
|
const FeatureComponent = activeFeature;
|
|
1059
|
-
return /* @__PURE__ */
|
|
1091
|
+
return /* @__PURE__ */ React4__default.default.createElement(FeatureComponent, { onClose: handleCloseFeature, onLogin });
|
|
1060
1092
|
}
|
|
1061
|
-
return /* @__PURE__ */
|
|
1093
|
+
return /* @__PURE__ */ React4__default.default.createElement(
|
|
1062
1094
|
"div",
|
|
1063
1095
|
{
|
|
1064
1096
|
style: {
|
|
@@ -1068,8 +1100,8 @@ var DebugTool = ({
|
|
|
1068
1100
|
zIndex: 9999
|
|
1069
1101
|
}
|
|
1070
1102
|
},
|
|
1071
|
-
/* @__PURE__ */
|
|
1072
|
-
isMenuOpen && /* @__PURE__ */
|
|
1103
|
+
/* @__PURE__ */ React4__default.default.createElement(floating_button_default, { onClick: toggleMenu }),
|
|
1104
|
+
isMenuOpen && /* @__PURE__ */ React4__default.default.createElement(
|
|
1073
1105
|
menu_panel_default,
|
|
1074
1106
|
{
|
|
1075
1107
|
menuItems: availableMenuItems,
|