sales-frontend-debug 0.0.29 → 0.0.31
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 +88 -69
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +2 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +48 -30
- package/dist/index.js.map +1 -1
- package/package.json +5 -5
package/dist/index.cjs
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var React2 = 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 React2__default = /*#__PURE__*/_interopDefault(React2);
|
|
10
10
|
|
|
11
11
|
// src/debug-tool.tsx
|
|
12
12
|
|
|
@@ -229,11 +229,11 @@ var textareaStyle = {
|
|
|
229
229
|
|
|
230
230
|
// src/components/floating-button.tsx
|
|
231
231
|
var FloatingButton = ({ onClick }) => {
|
|
232
|
-
const [position, setPosition] =
|
|
233
|
-
const [isDragging, setIsDragging] =
|
|
234
|
-
const dragHappened =
|
|
235
|
-
const dragStartPos =
|
|
236
|
-
const elementStartPos =
|
|
232
|
+
const [position, setPosition] = React2.useState({ x: 0, y: 0 });
|
|
233
|
+
const [isDragging, setIsDragging] = React2.useState(false);
|
|
234
|
+
const dragHappened = React2.useRef(false);
|
|
235
|
+
const dragStartPos = React2.useRef({ x: 0, y: 0 });
|
|
236
|
+
const elementStartPos = React2.useRef({ x: 0, y: 0 });
|
|
237
237
|
const handleMouseDown = (e) => {
|
|
238
238
|
if (e.button !== 0) {
|
|
239
239
|
return;
|
|
@@ -274,7 +274,7 @@ var FloatingButton = ({ onClick }) => {
|
|
|
274
274
|
transform: `translate(${position.x}px, ${position.y}px)`,
|
|
275
275
|
cursor: isDragging ? "grabbing" : "grab"
|
|
276
276
|
};
|
|
277
|
-
return /* @__PURE__ */
|
|
277
|
+
return /* @__PURE__ */ React2__default.default.createElement(
|
|
278
278
|
"button",
|
|
279
279
|
{
|
|
280
280
|
style: buttonStyle,
|
|
@@ -322,8 +322,8 @@ var cookieClient = {
|
|
|
322
322
|
}
|
|
323
323
|
};
|
|
324
324
|
var useStorage = (storageType) => {
|
|
325
|
-
const [items, setItems] =
|
|
326
|
-
const loadItems =
|
|
325
|
+
const [items, setItems] = React2.useState([]);
|
|
326
|
+
const loadItems = React2.useCallback(() => {
|
|
327
327
|
const newItems = [];
|
|
328
328
|
if (storageType === "localStorage") {
|
|
329
329
|
for (let i = 0; i < localStorage.length; i++) {
|
|
@@ -344,10 +344,10 @@ var useStorage = (storageType) => {
|
|
|
344
344
|
}
|
|
345
345
|
setItems(newItems);
|
|
346
346
|
}, [storageType]);
|
|
347
|
-
|
|
347
|
+
React2.useEffect(() => {
|
|
348
348
|
loadItems();
|
|
349
349
|
}, [loadItems]);
|
|
350
|
-
const setItem =
|
|
350
|
+
const setItem = React2.useCallback(
|
|
351
351
|
(key, value) => {
|
|
352
352
|
if (storageType === "localStorage") {
|
|
353
353
|
localStorage.setItem(key, value);
|
|
@@ -358,7 +358,7 @@ var useStorage = (storageType) => {
|
|
|
358
358
|
},
|
|
359
359
|
[storageType, loadItems]
|
|
360
360
|
);
|
|
361
|
-
const removeItem =
|
|
361
|
+
const removeItem = React2.useCallback(
|
|
362
362
|
(key) => {
|
|
363
363
|
if (storageType === "localStorage") {
|
|
364
364
|
localStorage.removeItem(key);
|
|
@@ -399,6 +399,13 @@ var MenuPanel = ({ menuItems: menuItems2, onMenuItemClick, onClose, serviceCode
|
|
|
399
399
|
"x-channel-business-work-division-code": cookieClient.getCookie("x-channel-business-work-division-code")
|
|
400
400
|
});
|
|
401
401
|
};
|
|
402
|
+
const handleDeleteHostCookie = () => {
|
|
403
|
+
cookieClient.deleteCookie("dsp-debug-mode-env");
|
|
404
|
+
alert("\uD638\uC2A4\uD2B8\uAC00 \uC0AD\uC81C\uB418\uC5C8\uC2B5\uB2C8\uB2E4.");
|
|
405
|
+
console.log("\uD638\uC2A4\uD2B8\uAC00 \uC0AD\uC81C\uB418\uC5C8\uC2B5\uB2C8\uB2E4.", {
|
|
406
|
+
"dsp-debug-mode-env": cookieClient.getCookie("dsp-debug-mode-env")
|
|
407
|
+
});
|
|
408
|
+
};
|
|
402
409
|
const handleDeleteTokenCookie = () => {
|
|
403
410
|
cookieClient.deleteCookie("accessToken");
|
|
404
411
|
alert("\uD1A0\uD070\uCFE0\uD0A4\uAC00 \uC0AD\uC81C\uB418\uC5C8\uC2B5\uB2C8\uB2E4.");
|
|
@@ -413,7 +420,14 @@ var MenuPanel = ({ menuItems: menuItems2, onMenuItemClick, onClose, serviceCode
|
|
|
413
420
|
"x-channel-formfactor": cookieClient.getCookie("x-channel-formfactor")
|
|
414
421
|
});
|
|
415
422
|
};
|
|
416
|
-
|
|
423
|
+
const handleHost = (host) => {
|
|
424
|
+
cookieClient.setCookie("dsp-debug-mode-env", host);
|
|
425
|
+
alert(`\uD638\uC2A4\uD2B8\uAC00 \uBCC0\uACBD\uB418\uC5C8\uC2B5\uB2C8\uB2E4.:${host}`);
|
|
426
|
+
console.log("\uD638\uC2A4\uD2B8\uAC00 \uBCC0\uACBD\uB418\uC5C8\uC2B5\uB2C8\uB2E4.", {
|
|
427
|
+
"dsp-debug-mode-env": cookieClient.getCookie("dsp-debug-mode-env")
|
|
428
|
+
});
|
|
429
|
+
};
|
|
430
|
+
return /* @__PURE__ */ React2__default.default.createElement(React2__default.default.Fragment, null, /* @__PURE__ */ React2__default.default.createElement("div", { style: modalOverlayStyle, onClick: onClose }), /* @__PURE__ */ React2__default.default.createElement("div", { style: debugMenuPanelStyle }, /* @__PURE__ */ React2__default.default.createElement("div", { style: panelHeaderStyle }, /* @__PURE__ */ React2__default.default.createElement("h2", { style: h2Style }, "Debug Menu"), /* @__PURE__ */ React2__default.default.createElement("button", { onClick: onClose }, "X")), /* @__PURE__ */ React2__default.default.createElement("ul", null, menuItems2.map((item) => /* @__PURE__ */ React2__default.default.createElement("li", { key: item.id, onClick: () => onMenuItemClick(item.component), style: menuItemStyle }, item.label))), serviceCode === "dsp" && /* @__PURE__ */ React2__default.default.createElement(React2__default.default.Fragment, null, /* @__PURE__ */ React2__default.default.createElement("div", { style: panelHeaderStyle }, /* @__PURE__ */ React2__default.default.createElement("h2", { style: h2Style }, "\uD3FC\uD329\uD130")), /* @__PURE__ */ React2__default.default.createElement("ul", null, /* @__PURE__ */ React2__default.default.createElement("li", { style: menuItemStyle, onClick: () => handleFormFactor("tablet") }, "Tablet"), /* @__PURE__ */ React2__default.default.createElement("li", { style: menuItemStyle, onClick: () => handleFormFactor("phone") }, "Phone"), /* @__PURE__ */ React2__default.default.createElement("li", { style: menuItemStyle, onClick: () => handleFormFactor("pc") }, "PC")), /* @__PURE__ */ React2__default.default.createElement("div", { style: panelHeaderStyle }, /* @__PURE__ */ React2__default.default.createElement("h2", { style: h2Style }, "API\uD638\uC2A4\uD2B8")), /* @__PURE__ */ React2__default.default.createElement("ul", null, /* @__PURE__ */ React2__default.default.createElement("li", { style: menuItemStyle, onClick: () => handleHost("local") }, "local"), /* @__PURE__ */ React2__default.default.createElement("li", { style: menuItemStyle, onClick: () => handleHost("dev") }, "dev"), /* @__PURE__ */ React2__default.default.createElement("li", { style: menuItemStyle, onClick: () => handleHost("stg") }, "stg")), /* @__PURE__ */ React2__default.default.createElement("div", { style: panelHeaderStyle }, /* @__PURE__ */ React2__default.default.createElement("h2", { style: h2Style }, "\uCD08\uAE30\uD654")), /* @__PURE__ */ React2__default.default.createElement("ul", null, /* @__PURE__ */ React2__default.default.createElement("li", { style: menuItemStyle }, /* @__PURE__ */ React2__default.default.createElement("button", { onClick: handleDeleteHostCookie }, "Host \uC0AD\uC81C")), /* @__PURE__ */ React2__default.default.createElement("li", { style: menuItemStyle }, /* @__PURE__ */ React2__default.default.createElement("button", { onClick: handleDeleteCustomCookie }, "\uCEE4\uC2A4\uD140(x-channel-) \uC0AD\uC81C")), /* @__PURE__ */ React2__default.default.createElement("li", { style: menuItemStyle }, /* @__PURE__ */ React2__default.default.createElement("button", { onClick: handleDeleteTokenCookie }, "\uD1A0\uD070 \uC0AD\uC81C"))))));
|
|
417
431
|
};
|
|
418
432
|
var menu_panel_default = MenuPanel;
|
|
419
433
|
var globalLogs = [];
|
|
@@ -459,14 +473,14 @@ var restoreConsoleLog = () => {
|
|
|
459
473
|
isConsoleOverridden = false;
|
|
460
474
|
};
|
|
461
475
|
var useConsoleLog = () => {
|
|
462
|
-
const [logs, setLogs] =
|
|
463
|
-
|
|
476
|
+
const [logs, setLogs] = React2.useState(globalLogs);
|
|
477
|
+
React2.useEffect(() => {
|
|
464
478
|
listeners.push(setLogs);
|
|
465
479
|
return () => {
|
|
466
480
|
listeners = listeners.filter((l) => l !== setLogs);
|
|
467
481
|
};
|
|
468
482
|
}, []);
|
|
469
|
-
const clearLogs =
|
|
483
|
+
const clearLogs = React2.useCallback(() => {
|
|
470
484
|
globalLogs = [];
|
|
471
485
|
listeners.forEach((listener) => listener([]));
|
|
472
486
|
}, []);
|
|
@@ -489,35 +503,35 @@ var LogMessage = ({ entry }) => {
|
|
|
489
503
|
return String(part);
|
|
490
504
|
});
|
|
491
505
|
const style = { ...logMessageStyle, ...logTypeStyles[entry.type] };
|
|
492
|
-
return /* @__PURE__ */
|
|
506
|
+
return /* @__PURE__ */ React2__default.default.createElement("pre", { style }, messageParts.join(" "));
|
|
493
507
|
};
|
|
494
508
|
var ConsoleLogPanel = ({ onClose }) => {
|
|
495
509
|
const { logs, clearLogs } = useConsoleLog();
|
|
496
|
-
const [filter, setFilter] =
|
|
497
|
-
const logContainerRef =
|
|
498
|
-
const filteredLogs =
|
|
510
|
+
const [filter, setFilter] = React2.useState("all");
|
|
511
|
+
const logContainerRef = React2.useRef(null);
|
|
512
|
+
const filteredLogs = React2.useMemo(() => {
|
|
499
513
|
if (filter === "all") {
|
|
500
514
|
return logs;
|
|
501
515
|
}
|
|
502
516
|
return logs.filter((log) => log.type === filter);
|
|
503
517
|
}, [logs, filter]);
|
|
504
|
-
|
|
518
|
+
React2.useEffect(() => {
|
|
505
519
|
if (logContainerRef.current) {
|
|
506
520
|
logContainerRef.current.scrollTop = logContainerRef.current.scrollHeight;
|
|
507
521
|
}
|
|
508
522
|
}, [filteredLogs]);
|
|
509
523
|
const segmentOptions = ["all", "log", "warn", "error"];
|
|
510
|
-
return /* @__PURE__ */
|
|
524
|
+
return /* @__PURE__ */ React2__default.default.createElement(React2__default.default.Fragment, null, /* @__PURE__ */ React2__default.default.createElement("div", { style: modalOverlayStyle, onClick: onClose }), /* @__PURE__ */ React2__default.default.createElement("div", { style: debugFeaturePanelStyle }, /* @__PURE__ */ React2__default.default.createElement("div", { style: panelHeaderStyle }, /* @__PURE__ */ React2__default.default.createElement("h2", { style: h2Style }, "Console Logs"), /* @__PURE__ */ React2__default.default.createElement("button", { onClick: onClose }, "X")), /* @__PURE__ */ React2__default.default.createElement("div", { style: panelToolbarStyle }, /* @__PURE__ */ React2__default.default.createElement("div", null, segmentOptions.map((option) => /* @__PURE__ */ React2__default.default.createElement("button", { key: option, onClick: () => setFilter(option), disabled: filter === option }, option.charAt(0).toUpperCase() + option.slice(1)))), /* @__PURE__ */ React2__default.default.createElement("button", { onClick: clearLogs, style: clearButtonStyle }, "Clear")), /* @__PURE__ */ React2__default.default.createElement("div", { style: logListContainerStyle, ref: logContainerRef }, filteredLogs.map((log) => /* @__PURE__ */ React2__default.default.createElement("div", { key: log.id, style: logItemStyle }, /* @__PURE__ */ React2__default.default.createElement("span", { style: logTimestampStyle }, log.timestamp), /* @__PURE__ */ React2__default.default.createElement(LogMessage, { entry: log }))))));
|
|
511
525
|
};
|
|
512
526
|
var console_log_panel_default = ConsoleLogPanel;
|
|
513
527
|
var LoginPanel = ({ onClose, onLogin }) => {
|
|
514
|
-
const [selectedTypeId, setSelectedTypeId] =
|
|
515
|
-
const [formData, setFormData] =
|
|
516
|
-
const [mode, setMode] =
|
|
517
|
-
const [stepValidationOff, SetStepValidationOff] =
|
|
528
|
+
const [selectedTypeId, setSelectedTypeId] = React2.useState(loginTypes[0]?.id || "");
|
|
529
|
+
const [formData, setFormData] = React2.useState({});
|
|
530
|
+
const [mode, setMode] = React2.useState(cookieClient.getCookie("dsp-debug-mode") === "on");
|
|
531
|
+
const [stepValidationOff, SetStepValidationOff] = React2.useState(
|
|
518
532
|
cookieClient.getCookie("Debug-Step-Validation-Off") === "true"
|
|
519
533
|
);
|
|
520
|
-
const selectedType =
|
|
534
|
+
const selectedType = React2.useMemo(() => loginTypes.find((t) => t.id === selectedTypeId), [selectedTypeId]);
|
|
521
535
|
const handleInputChange = (e) => {
|
|
522
536
|
const { name, value } = e.target;
|
|
523
537
|
setFormData((prev) => ({ ...prev, [name]: value }));
|
|
@@ -549,10 +563,10 @@ var LoginPanel = ({ onClose, onLogin }) => {
|
|
|
549
563
|
SetStepValidationOff(false);
|
|
550
564
|
}
|
|
551
565
|
};
|
|
552
|
-
|
|
566
|
+
React2.useEffect(() => {
|
|
553
567
|
setFormData({});
|
|
554
568
|
}, [selectedType]);
|
|
555
|
-
return /* @__PURE__ */
|
|
569
|
+
return /* @__PURE__ */ React2__default.default.createElement(React2__default.default.Fragment, null, /* @__PURE__ */ React2__default.default.createElement("div", { style: modalOverlayStyle, onClick: onClose }), /* @__PURE__ */ React2__default.default.createElement("div", { style: debugFeaturePanelStyle }, /* @__PURE__ */ React2__default.default.createElement("div", { style: panelHeaderStyle }, /* @__PURE__ */ React2__default.default.createElement("h2", { style: h2Style }, "\uAC04\uD3B8 \uB85C\uADF8\uC778"), /* @__PURE__ */ React2__default.default.createElement("button", { onClick: onClose }, "X")), /* @__PURE__ */ React2__default.default.createElement("form", { style: loginFormContainerStyle, onSubmit: handleSubmit }, /* @__PURE__ */ React2__default.default.createElement("div", null, /* @__PURE__ */ React2__default.default.createElement("ul", { style: { listStyleType: "circle" } }, /* @__PURE__ */ React2__default.default.createElement("li", null, /* @__PURE__ */ React2__default.default.createElement("label", { htmlFor: "debug-on" }, "Debug On"), /* @__PURE__ */ React2__default.default.createElement("input", { type: "checkbox", id: "debug-on", onChange: handleDebugOn, checked: mode }), /* @__PURE__ */ React2__default.default.createElement("ul", { style: { listStyleType: "square", paddingLeft: "20px" } }, /* @__PURE__ */ React2__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__ */ React2__default.default.createElement("li", null, /* @__PURE__ */ React2__default.default.createElement("label", { htmlFor: "step-validation-off" }, "\uC11C\uC2DD Validation Off"), /* @__PURE__ */ React2__default.default.createElement(
|
|
556
570
|
"input",
|
|
557
571
|
{
|
|
558
572
|
type: "checkbox",
|
|
@@ -560,7 +574,7 @@ var LoginPanel = ({ onClose, onLogin }) => {
|
|
|
560
574
|
onChange: handleStepValidationOff,
|
|
561
575
|
checked: stepValidationOff
|
|
562
576
|
}
|
|
563
|
-
), /* @__PURE__ */
|
|
577
|
+
), /* @__PURE__ */ React2__default.default.createElement("ul", { style: { listStyleType: "square", paddingLeft: "20px" } }, /* @__PURE__ */ React2__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__ */ React2__default.default.createElement("br", null), " ", /* @__PURE__ */ React2__default.default.createElement("br", null), /* @__PURE__ */ React2__default.default.createElement("label", { htmlFor: "login-type-select" }, "\uB85C\uADF8\uC778 \uC720\uD615"), /* @__PURE__ */ React2__default.default.createElement("select", { id: "login-type-select", value: selectedTypeId, onChange: (e) => setSelectedTypeId(e.target.value) }, loginTypes.map((type) => /* @__PURE__ */ React2__default.default.createElement("option", { key: type.id, value: type.id }, type.label)))), selectedType?.fields.map((field) => /* @__PURE__ */ React2__default.default.createElement("div", { key: field.name }, /* @__PURE__ */ React2__default.default.createElement("label", { htmlFor: field.name }, field.label), /* @__PURE__ */ React2__default.default.createElement(
|
|
564
578
|
"input",
|
|
565
579
|
{
|
|
566
580
|
type: field.type,
|
|
@@ -571,7 +585,7 @@ var LoginPanel = ({ onClose, onLogin }) => {
|
|
|
571
585
|
onChange: handleInputChange,
|
|
572
586
|
required: true
|
|
573
587
|
}
|
|
574
|
-
))), /* @__PURE__ */
|
|
588
|
+
))), /* @__PURE__ */ React2__default.default.createElement("div", { style: formActionsStyle }, /* @__PURE__ */ React2__default.default.createElement("button", { type: "submit" }, "\uB85C\uADF8\uC778")))));
|
|
575
589
|
};
|
|
576
590
|
var login_panel_default = LoginPanel;
|
|
577
591
|
var SEARCH_SECTIONS = [
|
|
@@ -611,9 +625,9 @@ var NetworkLog = ({ onClose }) => {
|
|
|
611
625
|
playAllRequests,
|
|
612
626
|
playAllResponses
|
|
613
627
|
} = salesFrontendStores.useDebugStore();
|
|
614
|
-
const [searchTerm, setSearchTerm] =
|
|
615
|
-
const [searchSection, setSearchSection] =
|
|
616
|
-
const allLogs =
|
|
628
|
+
const [searchTerm, setSearchTerm] = React2.useState("");
|
|
629
|
+
const [searchSection, setSearchSection] = React2.useState(SEARCH_SECTIONS[0]?.value);
|
|
630
|
+
const allLogs = React2.useMemo(() => {
|
|
617
631
|
const logs = [];
|
|
618
632
|
requests.forEach((req) => logs.push({ ...req, type: "request" }));
|
|
619
633
|
responses.forEach((res) => logs.push({ ...res, type: "response" }));
|
|
@@ -630,7 +644,7 @@ var NetworkLog = ({ onClose }) => {
|
|
|
630
644
|
});
|
|
631
645
|
return logs;
|
|
632
646
|
}, [requests, responses, errors, heldRequests, heldResponses, heldErrors]);
|
|
633
|
-
const filteredLogs =
|
|
647
|
+
const filteredLogs = React2.useMemo(() => {
|
|
634
648
|
if (!searchTerm) {
|
|
635
649
|
return allLogs;
|
|
636
650
|
}
|
|
@@ -672,9 +686,9 @@ var NetworkLog = ({ onClose }) => {
|
|
|
672
686
|
};
|
|
673
687
|
const renderLogContent = (log) => {
|
|
674
688
|
const logInfo = getLogInfo(log);
|
|
675
|
-
return /* @__PURE__ */
|
|
689
|
+
return /* @__PURE__ */ React2__default.default.createElement("pre", null, JSON.stringify(logInfo, null, 2));
|
|
676
690
|
};
|
|
677
|
-
return /* @__PURE__ */
|
|
691
|
+
return /* @__PURE__ */ React2__default.default.createElement(React2__default.default.Fragment, null, /* @__PURE__ */ React2__default.default.createElement("div", { style: modalOverlayStyle, onClick: onClose }), /* @__PURE__ */ React2__default.default.createElement("div", { style: debugFeaturePanelStyle }, /* @__PURE__ */ React2__default.default.createElement("div", { style: panelHeaderStyle }, /* @__PURE__ */ React2__default.default.createElement("h2", { style: h2Style }, "\uB124\uD2B8\uC6CC\uD06C \uB85C\uADF8"), /* @__PURE__ */ React2__default.default.createElement("button", { onClick: onClose }, "X")), /* @__PURE__ */ React2__default.default.createElement("div", { style: networkLogContainerStyle }, /* @__PURE__ */ React2__default.default.createElement("div", { style: searchContainerStyle }, /* @__PURE__ */ React2__default.default.createElement("select", { value: searchSection, onChange: (e) => setSearchSection(e.target.value) }, SEARCH_SECTIONS.map((option) => /* @__PURE__ */ React2__default.default.createElement("option", { key: option.value, value: option.value }, option.label))), /* @__PURE__ */ React2__default.default.createElement(
|
|
678
692
|
"input",
|
|
679
693
|
{
|
|
680
694
|
type: "text",
|
|
@@ -683,7 +697,7 @@ var NetworkLog = ({ onClose }) => {
|
|
|
683
697
|
onChange: (e) => setSearchTerm(e.target.value),
|
|
684
698
|
style: flex1Style
|
|
685
699
|
}
|
|
686
|
-
), /* @__PURE__ */
|
|
700
|
+
), /* @__PURE__ */ React2__default.default.createElement("label", null, /* @__PURE__ */ React2__default.default.createElement("input", { type: "checkbox", id: "hold-checkbox", checked: isHold, onChange: toggleHold }), "Hold"), /* @__PURE__ */ React2__default.default.createElement("button", { onClick: clear }, "clear")), isHold && /* @__PURE__ */ React2__default.default.createElement("div", { style: holdButtonsContainerStyle }, /* @__PURE__ */ React2__default.default.createElement("button", { onClick: () => playAllRequests() }, "REQ Resolve"), /* @__PURE__ */ React2__default.default.createElement("button", { onClick: () => playAllResponses() }, "RES Resolve")), /* @__PURE__ */ React2__default.default.createElement("div", { style: logListStyle }, filteredLogs.length === 0 ? /* @__PURE__ */ React2__default.default.createElement("p", null, "\uD45C\uC2DC\uD560 \uB85C\uADF8\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.") : /* @__PURE__ */ React2__default.default.createElement("div", null, filteredLogs.map((log, index) => /* @__PURE__ */ React2__default.default.createElement("details", { key: index }, /* @__PURE__ */ React2__default.default.createElement("summary", { style: logSummaryStyle }, renderLogSummary(log)), /* @__PURE__ */ React2__default.default.createElement("div", { style: logContentStyle }, renderLogContent(log)))))))));
|
|
687
701
|
};
|
|
688
702
|
var network_log_default = NetworkLog;
|
|
689
703
|
var URL_MAP = {
|
|
@@ -699,7 +713,7 @@ var URL_MAP = {
|
|
|
699
713
|
none: ""
|
|
700
714
|
};
|
|
701
715
|
var PageNavigationPanel = ({ onClose }) => {
|
|
702
|
-
const [url, setUrl] =
|
|
716
|
+
const [url, setUrl] = React2.useState("");
|
|
703
717
|
const handleNavigate = () => {
|
|
704
718
|
if (url) {
|
|
705
719
|
self.location.href = url;
|
|
@@ -713,7 +727,7 @@ var PageNavigationPanel = ({ onClose }) => {
|
|
|
713
727
|
setUrl("");
|
|
714
728
|
}
|
|
715
729
|
};
|
|
716
|
-
return /* @__PURE__ */
|
|
730
|
+
return /* @__PURE__ */ React2__default.default.createElement(React2__default.default.Fragment, null, /* @__PURE__ */ React2__default.default.createElement("div", { style: modalOverlayStyle, onClick: onClose }), /* @__PURE__ */ React2__default.default.createElement("div", { style: debugFeaturePanelStyle }, /* @__PURE__ */ React2__default.default.createElement("div", { style: panelHeaderStyle }, /* @__PURE__ */ React2__default.default.createElement("h2", { style: h2Style }, "\uD398\uC774\uC9C0 \uC774\uB3D9"), /* @__PURE__ */ React2__default.default.createElement("button", { onClick: onClose }, "X")), /* @__PURE__ */ React2__default.default.createElement("div", { style: pageNavigationContentStyle }, /* @__PURE__ */ React2__default.default.createElement("select", { onChange: handleUrlTypeChange }, /* @__PURE__ */ React2__default.default.createElement("option", null, "\uC120\uD0DD"), /* @__PURE__ */ React2__default.default.createElement("option", { value: "FP_1" }, "FP-\uC785\uB825\uB2E8\uACC4_\uC2DC\uC791\uD558\uAE30"), /* @__PURE__ */ React2__default.default.createElement("option", { value: "FP_2" }, "FP-\uC785\uB825\uB2E8\uACC4_2"), /* @__PURE__ */ React2__default.default.createElement("option", { value: "FP_3" }, "FP-\uC785\uB825\uB2E8\uACC4_3"), /* @__PURE__ */ React2__default.default.createElement("option", { value: "FP_4" }, "FP-\uC785\uB825\uB2E8\uACC4_4"), /* @__PURE__ */ React2__default.default.createElement("option", { value: "FP_5" }, "FP-\uC785\uB825\uB2E8\uACC4_5"), /* @__PURE__ */ React2__default.default.createElement("option", { value: "CUST_1" }, "\uACE0\uAC1D-\uC785\uB825\uB2E8\uACC4_1"), /* @__PURE__ */ React2__default.default.createElement("option", { value: "CUST_2" }, "\uACE0\uAC1D-\uC785\uB825\uB2E8\uACC4_2"), /* @__PURE__ */ React2__default.default.createElement("option", { value: "CUST_3" }, "\uACE0\uAC1D-\uC785\uB825\uB2E8\uACC4_3"), /* @__PURE__ */ React2__default.default.createElement("option", { value: "CUST_4" }, "\uACE0\uAC1D-\uC785\uB825\uB2E8\uACC4_4"), /* @__PURE__ */ React2__default.default.createElement("option", { value: "none" }, "\uC9C1\uC811\uC785\uB825")), /* @__PURE__ */ React2__default.default.createElement(
|
|
717
731
|
"input",
|
|
718
732
|
{
|
|
719
733
|
type: "text",
|
|
@@ -722,7 +736,7 @@ var PageNavigationPanel = ({ onClose }) => {
|
|
|
722
736
|
placeholder: "\uC774\uB3D9\uD560 URL\uC744 \uC785\uB825\uD558\uC138\uC694 (\uC608: /main)",
|
|
723
737
|
style: flex1Style
|
|
724
738
|
}
|
|
725
|
-
), /* @__PURE__ */
|
|
739
|
+
), /* @__PURE__ */ React2__default.default.createElement("button", { onClick: handleNavigate }, "\uC774\uB3D9"))));
|
|
726
740
|
};
|
|
727
741
|
var page_navigation_panel_default = PageNavigationPanel;
|
|
728
742
|
var logTypeStyles2 = {
|
|
@@ -748,11 +762,11 @@ var ResultMessage = ({ log }) => {
|
|
|
748
762
|
});
|
|
749
763
|
const prefix = log.type === "return" ? "\u21A9 " : "";
|
|
750
764
|
const style = { ...logMessageStyle, ...logTypeStyles2[log.type] };
|
|
751
|
-
return /* @__PURE__ */
|
|
765
|
+
return /* @__PURE__ */ React2__default.default.createElement("pre", { style }, prefix, messageParts.join(" "));
|
|
752
766
|
};
|
|
753
767
|
var ScriptExecutorPanel = ({ onClose }) => {
|
|
754
|
-
const [code, setCode] =
|
|
755
|
-
const [results, setResults] =
|
|
768
|
+
const [code, setCode] = React2.useState('// \uC5EC\uAE30\uC5D0 \uC2E4\uD589\uD560 \uCF54\uB4DC\uB97C \uC785\uB825\uD558\uC138\uC694\nconsole.log("Hello, World!");');
|
|
769
|
+
const [results, setResults] = React2.useState([]);
|
|
756
770
|
const addResult = (type, ...args) => {
|
|
757
771
|
setResults((prevResults) => [
|
|
758
772
|
...prevResults,
|
|
@@ -795,7 +809,7 @@ var ScriptExecutorPanel = ({ onClose }) => {
|
|
|
795
809
|
const handleClear = () => {
|
|
796
810
|
setResults([]);
|
|
797
811
|
};
|
|
798
|
-
return /* @__PURE__ */
|
|
812
|
+
return /* @__PURE__ */ React2__default.default.createElement(React2__default.default.Fragment, null, /* @__PURE__ */ React2__default.default.createElement("div", { style: modalOverlayStyle, onClick: onClose }), /* @__PURE__ */ React2__default.default.createElement("div", { style: { ...debugFeaturePanelStyle, ...scriptExecutorContentStyle } }, /* @__PURE__ */ React2__default.default.createElement("div", { style: panelHeaderStyle }, /* @__PURE__ */ React2__default.default.createElement("h2", { style: h2Style }, "\uC2A4\uD06C\uB9BD\uD2B8 \uC2E4\uD589"), /* @__PURE__ */ React2__default.default.createElement("button", { onClick: onClose }, "X")), /* @__PURE__ */ React2__default.default.createElement("div", { style: scriptExecutorContentStyle }, /* @__PURE__ */ React2__default.default.createElement("div", { style: scriptInputSectionStyle }, /* @__PURE__ */ React2__default.default.createElement(
|
|
799
813
|
"textarea",
|
|
800
814
|
{
|
|
801
815
|
style: scriptTextareaStyle,
|
|
@@ -803,22 +817,22 @@ var ScriptExecutorPanel = ({ onClose }) => {
|
|
|
803
817
|
onChange: (e) => setCode(e.target.value),
|
|
804
818
|
spellCheck: "false"
|
|
805
819
|
}
|
|
806
|
-
), /* @__PURE__ */
|
|
820
|
+
), /* @__PURE__ */ React2__default.default.createElement("div", { style: scriptActionsStyle }, /* @__PURE__ */ React2__default.default.createElement("button", { onClick: handleExecute }, "\uC2E4\uD589 (\u25B6)"), /* @__PURE__ */ React2__default.default.createElement("button", { onClick: handleClear }, "\uACB0\uACFC \uC9C0\uC6B0\uAE30"))), /* @__PURE__ */ React2__default.default.createElement("div", { style: scriptOutputSectionStyle }, /* @__PURE__ */ React2__default.default.createElement("div", { style: panelHeaderStyle }, /* @__PURE__ */ React2__default.default.createElement("h3", { style: h3Style }, "\uACB0\uACFC")), /* @__PURE__ */ React2__default.default.createElement("div", { style: logListContainerStyle }, results.map((log) => /* @__PURE__ */ React2__default.default.createElement("div", { key: log.id, style: logItemStyle }, /* @__PURE__ */ React2__default.default.createElement("span", { style: logTimestampStyle }, log.timestamp), /* @__PURE__ */ React2__default.default.createElement(ResultMessage, { log }))))))));
|
|
807
821
|
};
|
|
808
822
|
var script_executor_panel_default = ScriptExecutorPanel;
|
|
809
823
|
var ValueDisplay = ({ value }) => {
|
|
810
824
|
try {
|
|
811
825
|
const parsed = JSON.parse(value);
|
|
812
826
|
if (typeof parsed === "object" && parsed !== null) {
|
|
813
|
-
return /* @__PURE__ */
|
|
827
|
+
return /* @__PURE__ */ React2__default.default.createElement("pre", { style: logContentStyle }, JSON.stringify(parsed, null, 2));
|
|
814
828
|
}
|
|
815
829
|
} catch (e) {
|
|
816
830
|
}
|
|
817
|
-
return /* @__PURE__ */
|
|
831
|
+
return /* @__PURE__ */ React2__default.default.createElement("div", { style: logContentStyle }, value);
|
|
818
832
|
};
|
|
819
833
|
var EditableRow = ({ item, onSave, onRemove }) => {
|
|
820
|
-
const [isEditing, setIsEditing] =
|
|
821
|
-
const [value, setValue] =
|
|
834
|
+
const [isEditing, setIsEditing] = React2.useState(false);
|
|
835
|
+
const [value, setValue] = React2.useState(item.value);
|
|
822
836
|
const handleSave = () => {
|
|
823
837
|
onSave(item.key, value);
|
|
824
838
|
setIsEditing(false);
|
|
@@ -827,12 +841,12 @@ var EditableRow = ({ item, onSave, onRemove }) => {
|
|
|
827
841
|
setValue(item.value);
|
|
828
842
|
setIsEditing(true);
|
|
829
843
|
};
|
|
830
|
-
return /* @__PURE__ */
|
|
844
|
+
return /* @__PURE__ */ React2__default.default.createElement("details", null, /* @__PURE__ */ React2__default.default.createElement("summary", null, item.key), /* @__PURE__ */ React2__default.default.createElement("div", null, isEditing ? /* @__PURE__ */ React2__default.default.createElement("button", { onClick: handleSave }, "Save") : /* @__PURE__ */ React2__default.default.createElement("button", { onClick: handleEdit }, "Edit"), /* @__PURE__ */ React2__default.default.createElement("button", { onClick: () => onRemove(item.key) }, "Remove"), isEditing ? /* @__PURE__ */ React2__default.default.createElement("textarea", { value, onChange: (e) => setValue(e.target.value), style: textareaStyle }) : /* @__PURE__ */ React2__default.default.createElement(ValueDisplay, { value: item.value })));
|
|
831
845
|
};
|
|
832
846
|
var StoragePanel = ({ onClose, storageType }) => {
|
|
833
847
|
const { items, setItem, removeItem } = useStorage(storageType);
|
|
834
|
-
const [filter, setFilter] =
|
|
835
|
-
const filteredItems =
|
|
848
|
+
const [filter, setFilter] = React2.useState("");
|
|
849
|
+
const filteredItems = React2.useMemo(() => {
|
|
836
850
|
if (!filter) {
|
|
837
851
|
return items;
|
|
838
852
|
}
|
|
@@ -840,7 +854,7 @@ var StoragePanel = ({ onClose, storageType }) => {
|
|
|
840
854
|
(item) => item.key.toLowerCase().includes(filter.toLowerCase()) || item.value.toLowerCase().includes(filter.toLowerCase())
|
|
841
855
|
);
|
|
842
856
|
}, [items, filter]);
|
|
843
|
-
return /* @__PURE__ */
|
|
857
|
+
return /* @__PURE__ */ React2__default.default.createElement(React2__default.default.Fragment, null, /* @__PURE__ */ React2__default.default.createElement("div", { style: modalOverlayStyle, onClick: onClose }), /* @__PURE__ */ React2__default.default.createElement("div", { style: debugFeaturePanelStyle }, /* @__PURE__ */ React2__default.default.createElement("div", { style: panelHeaderStyle }, /* @__PURE__ */ React2__default.default.createElement("h2", { style: h2Style }, storageType === "localStorage" ? "Local Storage" : "Cookies"), /* @__PURE__ */ React2__default.default.createElement("button", { onClick: onClose }, "X")), /* @__PURE__ */ React2__default.default.createElement("div", { style: panelToolbarStyle }, /* @__PURE__ */ React2__default.default.createElement(
|
|
844
858
|
"input",
|
|
845
859
|
{
|
|
846
860
|
type: "text",
|
|
@@ -849,7 +863,7 @@ var StoragePanel = ({ onClose, storageType }) => {
|
|
|
849
863
|
onChange: (e) => setFilter(e.target.value),
|
|
850
864
|
style: storageSearchInputStyle
|
|
851
865
|
}
|
|
852
|
-
)), /* @__PURE__ */
|
|
866
|
+
)), /* @__PURE__ */ React2__default.default.createElement("div", { style: storageTableContainerStyle }, filteredItems.map((item) => /* @__PURE__ */ React2__default.default.createElement(EditableRow, { key: item.key, item, onSave: setItem, onRemove: removeItem })))));
|
|
853
867
|
};
|
|
854
868
|
var storage_panel_default = StoragePanel;
|
|
855
869
|
|
|
@@ -889,13 +903,13 @@ var menuItems = [
|
|
|
889
903
|
id: "local-storage",
|
|
890
904
|
label: "\uB85C\uCEEC \uC2A4\uD1A0\uB9AC\uC9C0 \uAD00\uB9AC",
|
|
891
905
|
// StoragePanel은 재사용 가능한 컴포넌트이므로, props를 통해 어떤 스토리지를 다룰지 지정합니다.
|
|
892
|
-
component: (props) => /* @__PURE__ */
|
|
906
|
+
component: (props) => /* @__PURE__ */ React2__default.default.createElement(storage_panel_default, { ...props, storageType: "localStorage" }),
|
|
893
907
|
display: true
|
|
894
908
|
},
|
|
895
909
|
{
|
|
896
910
|
id: "cookie-management",
|
|
897
911
|
label: "\uCFE0\uD0A4 \uAD00\uB9AC",
|
|
898
|
-
component: (props) => /* @__PURE__ */
|
|
912
|
+
component: (props) => /* @__PURE__ */ React2__default.default.createElement(storage_panel_default, { ...props, storageType: "cookie" }),
|
|
899
913
|
display: true
|
|
900
914
|
},
|
|
901
915
|
{
|
|
@@ -919,10 +933,10 @@ var menuItems = [
|
|
|
919
933
|
}
|
|
920
934
|
];
|
|
921
935
|
var useEnvironment = () => {
|
|
922
|
-
const [envInfo, setEnvInfo] =
|
|
936
|
+
const [envInfo, setEnvInfo] = React2.useState({
|
|
923
937
|
env: "prd"
|
|
924
938
|
});
|
|
925
|
-
|
|
939
|
+
React2.useEffect(() => {
|
|
926
940
|
const { hostname } = window.location;
|
|
927
941
|
setEnvInfo({ env: salesFrontendUtils.getEnvironmentFromHostname(hostname) });
|
|
928
942
|
}, []);
|
|
@@ -936,7 +950,7 @@ var DebugTool = ({
|
|
|
936
950
|
menuItemsOverride,
|
|
937
951
|
serviceCode = "etc"
|
|
938
952
|
}) => {
|
|
939
|
-
|
|
953
|
+
React2.useEffect(() => {
|
|
940
954
|
initializeConsoleLogOverride();
|
|
941
955
|
return () => {
|
|
942
956
|
restoreConsoleLog();
|
|
@@ -945,8 +959,8 @@ var DebugTool = ({
|
|
|
945
959
|
const environment = useEnvironment();
|
|
946
960
|
const env = envOverride || environment.env;
|
|
947
961
|
const menuItems2 = menuItemsOverride || menuItems;
|
|
948
|
-
const [isMenuOpen, setMenuOpen] =
|
|
949
|
-
const [activeFeature, setActiveFeature] =
|
|
962
|
+
const [isMenuOpen, setMenuOpen] = React2.useState(false);
|
|
963
|
+
const [activeFeature, setActiveFeature] = React2.useState(null);
|
|
950
964
|
const isVisible = ["local", "dev", "stg"].includes(env);
|
|
951
965
|
const handleMenuClick = (itemComponent) => {
|
|
952
966
|
setActiveFeature(() => itemComponent);
|
|
@@ -971,9 +985,9 @@ var DebugTool = ({
|
|
|
971
985
|
);
|
|
972
986
|
if (activeFeature) {
|
|
973
987
|
const FeatureComponent = activeFeature;
|
|
974
|
-
return /* @__PURE__ */
|
|
988
|
+
return /* @__PURE__ */ React2__default.default.createElement(FeatureComponent, { onClose: handleCloseFeature, onLogin });
|
|
975
989
|
}
|
|
976
|
-
return /* @__PURE__ */
|
|
990
|
+
return /* @__PURE__ */ React2__default.default.createElement(
|
|
977
991
|
"div",
|
|
978
992
|
{
|
|
979
993
|
style: {
|
|
@@ -983,8 +997,8 @@ var DebugTool = ({
|
|
|
983
997
|
zIndex: 9999
|
|
984
998
|
}
|
|
985
999
|
},
|
|
986
|
-
/* @__PURE__ */
|
|
987
|
-
isMenuOpen && /* @__PURE__ */
|
|
1000
|
+
/* @__PURE__ */ React2__default.default.createElement(floating_button_default, { onClick: toggleMenu }),
|
|
1001
|
+
isMenuOpen && /* @__PURE__ */ React2__default.default.createElement(
|
|
988
1002
|
menu_panel_default,
|
|
989
1003
|
{
|
|
990
1004
|
menuItems: availableMenuItems,
|
|
@@ -1070,14 +1084,19 @@ function addErrorLog(error) {
|
|
|
1070
1084
|
|
|
1071
1085
|
// src/debug-utils.ts
|
|
1072
1086
|
function isDebugStepValidationOff() {
|
|
1073
|
-
const
|
|
1074
|
-
return
|
|
1087
|
+
const debugStepValidationOff = cookieClient.getCookie("Debug-Step-Validation-Off") === "true";
|
|
1088
|
+
return debugStepValidationOff;
|
|
1089
|
+
}
|
|
1090
|
+
function isDebugMode() {
|
|
1091
|
+
const debugMode = cookieClient.getCookie("dsp-debug-mode") === "on";
|
|
1092
|
+
return debugMode;
|
|
1075
1093
|
}
|
|
1076
1094
|
|
|
1077
1095
|
exports.DebugTool = DebugTool;
|
|
1078
1096
|
exports.addErrorLog = addErrorLog;
|
|
1079
1097
|
exports.addRequestLog = addRequestLog;
|
|
1080
1098
|
exports.addResponseLog = addResponseLog;
|
|
1099
|
+
exports.isDebugMode = isDebugMode;
|
|
1081
1100
|
exports.isDebugStepValidationOff = isDebugStepValidationOff;
|
|
1082
1101
|
//# sourceMappingURL=index.cjs.map
|
|
1083
1102
|
//# sourceMappingURL=index.cjs.map
|