sales-frontend-debug 0.0.8 → 0.0.10
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 +86 -65
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +47 -26
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
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
|
|
|
@@ -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] = React4.useState({ x: 0, y: 0 });
|
|
233
|
+
const [isDragging, setIsDragging] = React4.useState(false);
|
|
234
|
+
const dragHappened = React4.useRef(false);
|
|
235
|
+
const dragStartPos = React4.useRef({ x: 0, y: 0 });
|
|
236
|
+
const elementStartPos = React4.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__ */ React4__default.default.createElement(
|
|
278
278
|
"button",
|
|
279
279
|
{
|
|
280
280
|
style: buttonStyle,
|
|
@@ -286,7 +286,7 @@ var FloatingButton = ({ onClick }) => {
|
|
|
286
286
|
};
|
|
287
287
|
var floating_button_default = FloatingButton;
|
|
288
288
|
var MenuPanel = ({ menuItems: menuItems2, onMenuItemClick, onClose }) => {
|
|
289
|
-
return /* @__PURE__ */
|
|
289
|
+
return /* @__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))));
|
|
290
290
|
};
|
|
291
291
|
var menu_panel_default = MenuPanel;
|
|
292
292
|
var globalLogs = [];
|
|
@@ -332,14 +332,14 @@ var restoreConsoleLog = () => {
|
|
|
332
332
|
isConsoleOverridden = false;
|
|
333
333
|
};
|
|
334
334
|
var useConsoleLog = () => {
|
|
335
|
-
const [logs, setLogs] =
|
|
336
|
-
|
|
335
|
+
const [logs, setLogs] = React4.useState(globalLogs);
|
|
336
|
+
React4.useEffect(() => {
|
|
337
337
|
listeners.push(setLogs);
|
|
338
338
|
return () => {
|
|
339
339
|
listeners = listeners.filter((l) => l !== setLogs);
|
|
340
340
|
};
|
|
341
341
|
}, []);
|
|
342
|
-
const clearLogs =
|
|
342
|
+
const clearLogs = React4.useCallback(() => {
|
|
343
343
|
globalLogs = [];
|
|
344
344
|
listeners.forEach((listener) => listener([]));
|
|
345
345
|
}, []);
|
|
@@ -362,25 +362,25 @@ var LogMessage = ({ entry }) => {
|
|
|
362
362
|
return String(part);
|
|
363
363
|
});
|
|
364
364
|
const style = { ...logMessageStyle, ...logTypeStyles[entry.type] };
|
|
365
|
-
return /* @__PURE__ */
|
|
365
|
+
return /* @__PURE__ */ React4__default.default.createElement("pre", { style }, messageParts.join(" "));
|
|
366
366
|
};
|
|
367
367
|
var ConsoleLogPanel = ({ onClose }) => {
|
|
368
368
|
const { logs, clearLogs } = useConsoleLog();
|
|
369
|
-
const [filter, setFilter] =
|
|
370
|
-
const logContainerRef =
|
|
371
|
-
const filteredLogs =
|
|
369
|
+
const [filter, setFilter] = React4.useState("all");
|
|
370
|
+
const logContainerRef = React4.useRef(null);
|
|
371
|
+
const filteredLogs = React4.useMemo(() => {
|
|
372
372
|
if (filter === "all") {
|
|
373
373
|
return logs;
|
|
374
374
|
}
|
|
375
375
|
return logs.filter((log) => log.type === filter);
|
|
376
376
|
}, [logs, filter]);
|
|
377
|
-
|
|
377
|
+
React4.useEffect(() => {
|
|
378
378
|
if (logContainerRef.current) {
|
|
379
379
|
logContainerRef.current.scrollTop = logContainerRef.current.scrollHeight;
|
|
380
380
|
}
|
|
381
381
|
}, [filteredLogs]);
|
|
382
382
|
const segmentOptions = ["all", "log", "warn", "error"];
|
|
383
|
-
return /* @__PURE__ */
|
|
383
|
+
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 }))))));
|
|
384
384
|
};
|
|
385
385
|
var console_log_panel_default = ConsoleLogPanel;
|
|
386
386
|
var cookieClient = {
|
|
@@ -420,8 +420,8 @@ var cookieClient = {
|
|
|
420
420
|
}
|
|
421
421
|
};
|
|
422
422
|
var useStorage = (storageType) => {
|
|
423
|
-
const [items, setItems] =
|
|
424
|
-
const loadItems =
|
|
423
|
+
const [items, setItems] = React4.useState([]);
|
|
424
|
+
const loadItems = React4.useCallback(() => {
|
|
425
425
|
const newItems = [];
|
|
426
426
|
if (storageType === "localStorage") {
|
|
427
427
|
for (let i = 0; i < localStorage.length; i++) {
|
|
@@ -442,10 +442,10 @@ var useStorage = (storageType) => {
|
|
|
442
442
|
}
|
|
443
443
|
setItems(newItems);
|
|
444
444
|
}, [storageType]);
|
|
445
|
-
|
|
445
|
+
React4.useEffect(() => {
|
|
446
446
|
loadItems();
|
|
447
447
|
}, [loadItems]);
|
|
448
|
-
const setItem =
|
|
448
|
+
const setItem = React4.useCallback(
|
|
449
449
|
(key, value) => {
|
|
450
450
|
if (storageType === "localStorage") {
|
|
451
451
|
localStorage.setItem(key, value);
|
|
@@ -456,7 +456,7 @@ var useStorage = (storageType) => {
|
|
|
456
456
|
},
|
|
457
457
|
[storageType, loadItems]
|
|
458
458
|
);
|
|
459
|
-
const removeItem =
|
|
459
|
+
const removeItem = React4.useCallback(
|
|
460
460
|
(key) => {
|
|
461
461
|
if (storageType === "localStorage") {
|
|
462
462
|
localStorage.removeItem(key);
|
|
@@ -472,10 +472,13 @@ var useStorage = (storageType) => {
|
|
|
472
472
|
|
|
473
473
|
// src/features/login-dsp/login-panel.tsx
|
|
474
474
|
var LoginPanel = ({ onClose, onLogin }) => {
|
|
475
|
-
const [selectedTypeId, setSelectedTypeId] =
|
|
476
|
-
const [formData, setFormData] =
|
|
477
|
-
const [mode, setMode] =
|
|
478
|
-
const
|
|
475
|
+
const [selectedTypeId, setSelectedTypeId] = React4.useState(loginTypes[0]?.id || "");
|
|
476
|
+
const [formData, setFormData] = React4.useState({});
|
|
477
|
+
const [mode, setMode] = React4.useState(cookieClient.getCookie("dsp-debug-mode") === "on");
|
|
478
|
+
const [stepValidationOff, SetStepValidationOff] = React4.useState(
|
|
479
|
+
cookieClient.getCookie("Debug-Step-Validation-Off") === "true"
|
|
480
|
+
);
|
|
481
|
+
const selectedType = React4.useMemo(() => loginTypes.find((t) => t.id === selectedTypeId), [selectedTypeId]);
|
|
479
482
|
const handleInputChange = (e) => {
|
|
480
483
|
const { name, value } = e.target;
|
|
481
484
|
setFormData((prev) => ({ ...prev, [name]: value }));
|
|
@@ -497,10 +500,28 @@ var LoginPanel = ({ onClose, onLogin }) => {
|
|
|
497
500
|
setMode(false);
|
|
498
501
|
}
|
|
499
502
|
};
|
|
500
|
-
|
|
503
|
+
const handleStepValidationOff = (e) => {
|
|
504
|
+
const checkbox = e.target;
|
|
505
|
+
if (checkbox.checked) {
|
|
506
|
+
cookieClient.setCookie("Debug-Step-Validation-Off", "true", { path: "/" });
|
|
507
|
+
SetStepValidationOff(true);
|
|
508
|
+
} else {
|
|
509
|
+
cookieClient.setCookie("Debug-Step-Validation-Off", "false", { path: "/" });
|
|
510
|
+
SetStepValidationOff(false);
|
|
511
|
+
}
|
|
512
|
+
};
|
|
513
|
+
React4.useEffect(() => {
|
|
501
514
|
setFormData({});
|
|
502
515
|
}, [selectedType]);
|
|
503
|
-
return /* @__PURE__ */
|
|
516
|
+
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(
|
|
517
|
+
"input",
|
|
518
|
+
{
|
|
519
|
+
type: "checkbox",
|
|
520
|
+
id: "step-validation-off",
|
|
521
|
+
onChange: handleStepValidationOff,
|
|
522
|
+
checked: stepValidationOff
|
|
523
|
+
}
|
|
524
|
+
), /* @__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("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(
|
|
504
525
|
"input",
|
|
505
526
|
{
|
|
506
527
|
type: field.type,
|
|
@@ -511,7 +532,7 @@ var LoginPanel = ({ onClose, onLogin }) => {
|
|
|
511
532
|
onChange: handleInputChange,
|
|
512
533
|
required: true
|
|
513
534
|
}
|
|
514
|
-
))), /* @__PURE__ */
|
|
535
|
+
))), /* @__PURE__ */ React4__default.default.createElement("div", { style: formActionsStyle }, /* @__PURE__ */ React4__default.default.createElement("button", { type: "submit" }, "\uB85C\uADF8\uC778")))));
|
|
515
536
|
};
|
|
516
537
|
var login_panel_default = LoginPanel;
|
|
517
538
|
var SEARCH_SECTIONS = [
|
|
@@ -551,9 +572,9 @@ var NetworkLog = ({ onClose }) => {
|
|
|
551
572
|
playAllRequests,
|
|
552
573
|
playAllResponses
|
|
553
574
|
} = salesFrontendStores.useDebugStore();
|
|
554
|
-
const [searchTerm, setSearchTerm] =
|
|
555
|
-
const [searchSection, setSearchSection] =
|
|
556
|
-
const allLogs =
|
|
575
|
+
const [searchTerm, setSearchTerm] = React4.useState("");
|
|
576
|
+
const [searchSection, setSearchSection] = React4.useState(SEARCH_SECTIONS[0]?.value);
|
|
577
|
+
const allLogs = React4.useMemo(() => {
|
|
557
578
|
const logs = [];
|
|
558
579
|
requests.forEach((req) => logs.push({ ...req, type: "request" }));
|
|
559
580
|
responses.forEach((res) => logs.push({ ...res, type: "response" }));
|
|
@@ -570,7 +591,7 @@ var NetworkLog = ({ onClose }) => {
|
|
|
570
591
|
});
|
|
571
592
|
return logs;
|
|
572
593
|
}, [requests, responses, errors, heldRequests, heldResponses, heldErrors]);
|
|
573
|
-
const filteredLogs =
|
|
594
|
+
const filteredLogs = React4.useMemo(() => {
|
|
574
595
|
if (!searchTerm) {
|
|
575
596
|
return allLogs;
|
|
576
597
|
}
|
|
@@ -612,9 +633,9 @@ var NetworkLog = ({ onClose }) => {
|
|
|
612
633
|
};
|
|
613
634
|
const renderLogContent = (log) => {
|
|
614
635
|
const logInfo = getLogInfo(log);
|
|
615
|
-
return /* @__PURE__ */
|
|
636
|
+
return /* @__PURE__ */ React4__default.default.createElement("pre", null, JSON.stringify(logInfo, null, 2));
|
|
616
637
|
};
|
|
617
|
-
return /* @__PURE__ */
|
|
638
|
+
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(
|
|
618
639
|
"input",
|
|
619
640
|
{
|
|
620
641
|
type: "text",
|
|
@@ -623,17 +644,17 @@ var NetworkLog = ({ onClose }) => {
|
|
|
623
644
|
onChange: (e) => setSearchTerm(e.target.value),
|
|
624
645
|
style: flex1Style
|
|
625
646
|
}
|
|
626
|
-
), /* @__PURE__ */
|
|
647
|
+
), /* @__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)))))))));
|
|
627
648
|
};
|
|
628
649
|
var network_log_default = NetworkLog;
|
|
629
650
|
var PageNavigationPanel = ({ onClose }) => {
|
|
630
|
-
const [url, setUrl] =
|
|
651
|
+
const [url, setUrl] = React4.useState("");
|
|
631
652
|
const handleNavigate = () => {
|
|
632
653
|
if (url) {
|
|
633
654
|
self.location.href = url;
|
|
634
655
|
}
|
|
635
656
|
};
|
|
636
|
-
return /* @__PURE__ */
|
|
657
|
+
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(
|
|
637
658
|
"input",
|
|
638
659
|
{
|
|
639
660
|
type: "text",
|
|
@@ -642,7 +663,7 @@ var PageNavigationPanel = ({ onClose }) => {
|
|
|
642
663
|
placeholder: "\uC774\uB3D9\uD560 URL\uC744 \uC785\uB825\uD558\uC138\uC694 (\uC608: /main)",
|
|
643
664
|
style: flex1Style
|
|
644
665
|
}
|
|
645
|
-
), /* @__PURE__ */
|
|
666
|
+
), /* @__PURE__ */ React4__default.default.createElement("button", { onClick: handleNavigate }, "\uC774\uB3D9"))));
|
|
646
667
|
};
|
|
647
668
|
var page_navigation_panel_default = PageNavigationPanel;
|
|
648
669
|
var logTypeStyles2 = {
|
|
@@ -668,11 +689,11 @@ var ResultMessage = ({ log }) => {
|
|
|
668
689
|
});
|
|
669
690
|
const prefix = log.type === "return" ? "\u21A9 " : "";
|
|
670
691
|
const style = { ...logMessageStyle, ...logTypeStyles2[log.type] };
|
|
671
|
-
return /* @__PURE__ */
|
|
692
|
+
return /* @__PURE__ */ React4__default.default.createElement("pre", { style }, prefix, messageParts.join(" "));
|
|
672
693
|
};
|
|
673
694
|
var ScriptExecutorPanel = ({ onClose }) => {
|
|
674
|
-
const [code, setCode] =
|
|
675
|
-
const [results, setResults] =
|
|
695
|
+
const [code, setCode] = React4.useState('// \uC5EC\uAE30\uC5D0 \uC2E4\uD589\uD560 \uCF54\uB4DC\uB97C \uC785\uB825\uD558\uC138\uC694\nconsole.log("Hello, World!");');
|
|
696
|
+
const [results, setResults] = React4.useState([]);
|
|
676
697
|
const addResult = (type, ...args) => {
|
|
677
698
|
setResults((prevResults) => [
|
|
678
699
|
...prevResults,
|
|
@@ -715,7 +736,7 @@ var ScriptExecutorPanel = ({ onClose }) => {
|
|
|
715
736
|
const handleClear = () => {
|
|
716
737
|
setResults([]);
|
|
717
738
|
};
|
|
718
|
-
return /* @__PURE__ */
|
|
739
|
+
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(
|
|
719
740
|
"textarea",
|
|
720
741
|
{
|
|
721
742
|
style: scriptTextareaStyle,
|
|
@@ -723,22 +744,22 @@ var ScriptExecutorPanel = ({ onClose }) => {
|
|
|
723
744
|
onChange: (e) => setCode(e.target.value),
|
|
724
745
|
spellCheck: "false"
|
|
725
746
|
}
|
|
726
|
-
), /* @__PURE__ */
|
|
747
|
+
), /* @__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 }))))))));
|
|
727
748
|
};
|
|
728
749
|
var script_executor_panel_default = ScriptExecutorPanel;
|
|
729
750
|
var ValueDisplay = ({ value }) => {
|
|
730
751
|
try {
|
|
731
752
|
const parsed = JSON.parse(value);
|
|
732
753
|
if (typeof parsed === "object" && parsed !== null) {
|
|
733
|
-
return /* @__PURE__ */
|
|
754
|
+
return /* @__PURE__ */ React4__default.default.createElement("pre", { style: logContentStyle }, JSON.stringify(parsed, null, 2));
|
|
734
755
|
}
|
|
735
756
|
} catch (e) {
|
|
736
757
|
}
|
|
737
|
-
return /* @__PURE__ */
|
|
758
|
+
return /* @__PURE__ */ React4__default.default.createElement("div", { style: logContentStyle }, value);
|
|
738
759
|
};
|
|
739
760
|
var EditableRow = ({ item, onSave, onRemove }) => {
|
|
740
|
-
const [isEditing, setIsEditing] =
|
|
741
|
-
const [value, setValue] =
|
|
761
|
+
const [isEditing, setIsEditing] = React4.useState(false);
|
|
762
|
+
const [value, setValue] = React4.useState(item.value);
|
|
742
763
|
const handleSave = () => {
|
|
743
764
|
onSave(item.key, value);
|
|
744
765
|
setIsEditing(false);
|
|
@@ -747,12 +768,12 @@ var EditableRow = ({ item, onSave, onRemove }) => {
|
|
|
747
768
|
setValue(item.value);
|
|
748
769
|
setIsEditing(true);
|
|
749
770
|
};
|
|
750
|
-
return /* @__PURE__ */
|
|
771
|
+
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 })));
|
|
751
772
|
};
|
|
752
773
|
var StoragePanel = ({ onClose, storageType }) => {
|
|
753
774
|
const { items, setItem, removeItem } = useStorage(storageType);
|
|
754
|
-
const [filter, setFilter] =
|
|
755
|
-
const filteredItems =
|
|
775
|
+
const [filter, setFilter] = React4.useState("");
|
|
776
|
+
const filteredItems = React4.useMemo(() => {
|
|
756
777
|
if (!filter) {
|
|
757
778
|
return items;
|
|
758
779
|
}
|
|
@@ -760,7 +781,7 @@ var StoragePanel = ({ onClose, storageType }) => {
|
|
|
760
781
|
(item) => item.key.toLowerCase().includes(filter.toLowerCase()) || item.value.toLowerCase().includes(filter.toLowerCase())
|
|
761
782
|
);
|
|
762
783
|
}, [items, filter]);
|
|
763
|
-
return /* @__PURE__ */
|
|
784
|
+
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(
|
|
764
785
|
"input",
|
|
765
786
|
{
|
|
766
787
|
type: "text",
|
|
@@ -769,7 +790,7 @@ var StoragePanel = ({ onClose, storageType }) => {
|
|
|
769
790
|
onChange: (e) => setFilter(e.target.value),
|
|
770
791
|
style: storageSearchInputStyle
|
|
771
792
|
}
|
|
772
|
-
)), /* @__PURE__ */
|
|
793
|
+
)), /* @__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 })))));
|
|
773
794
|
};
|
|
774
795
|
var storage_panel_default = StoragePanel;
|
|
775
796
|
|
|
@@ -809,13 +830,13 @@ var menuItems = [
|
|
|
809
830
|
id: "local-storage",
|
|
810
831
|
label: "\uB85C\uCEEC \uC2A4\uD1A0\uB9AC\uC9C0 \uAD00\uB9AC",
|
|
811
832
|
// StoragePanel은 재사용 가능한 컴포넌트이므로, props를 통해 어떤 스토리지를 다룰지 지정합니다.
|
|
812
|
-
component: (props) => /* @__PURE__ */
|
|
833
|
+
component: (props) => /* @__PURE__ */ React4__default.default.createElement(storage_panel_default, { ...props, storageType: "localStorage" }),
|
|
813
834
|
display: true
|
|
814
835
|
},
|
|
815
836
|
{
|
|
816
837
|
id: "cookie-management",
|
|
817
838
|
label: "\uCFE0\uD0A4 \uAD00\uB9AC",
|
|
818
|
-
component: (props) => /* @__PURE__ */
|
|
839
|
+
component: (props) => /* @__PURE__ */ React4__default.default.createElement(storage_panel_default, { ...props, storageType: "cookie" }),
|
|
819
840
|
display: true
|
|
820
841
|
},
|
|
821
842
|
{
|
|
@@ -839,10 +860,10 @@ var menuItems = [
|
|
|
839
860
|
}
|
|
840
861
|
];
|
|
841
862
|
var useEnvironment = () => {
|
|
842
|
-
const [envInfo, setEnvInfo] =
|
|
863
|
+
const [envInfo, setEnvInfo] = React4.useState({
|
|
843
864
|
env: "prd"
|
|
844
865
|
});
|
|
845
|
-
|
|
866
|
+
React4.useEffect(() => {
|
|
846
867
|
const { hostname } = window.location;
|
|
847
868
|
setEnvInfo({ env: salesFrontendUtils.getEnvironmentFromHostname(hostname) });
|
|
848
869
|
}, []);
|
|
@@ -851,7 +872,7 @@ var useEnvironment = () => {
|
|
|
851
872
|
|
|
852
873
|
// src/debug-tool.tsx
|
|
853
874
|
var DebugTool = ({ onLogin, envOverride, menuItemsOverride }) => {
|
|
854
|
-
|
|
875
|
+
React4.useEffect(() => {
|
|
855
876
|
initializeConsoleLogOverride();
|
|
856
877
|
return () => {
|
|
857
878
|
restoreConsoleLog();
|
|
@@ -860,8 +881,8 @@ var DebugTool = ({ onLogin, envOverride, menuItemsOverride }) => {
|
|
|
860
881
|
const environment = useEnvironment();
|
|
861
882
|
const env = envOverride || environment.env;
|
|
862
883
|
const menuItems2 = menuItemsOverride || menuItems;
|
|
863
|
-
const [isMenuOpen, setMenuOpen] =
|
|
864
|
-
const [activeFeature, setActiveFeature] =
|
|
884
|
+
const [isMenuOpen, setMenuOpen] = React4.useState(false);
|
|
885
|
+
const [activeFeature, setActiveFeature] = React4.useState(null);
|
|
865
886
|
const isVisible = ["local", "dev", "stg"].includes(env);
|
|
866
887
|
const handleMenuClick = (itemComponent) => {
|
|
867
888
|
setActiveFeature(() => itemComponent);
|
|
@@ -886,9 +907,9 @@ var DebugTool = ({ onLogin, envOverride, menuItemsOverride }) => {
|
|
|
886
907
|
);
|
|
887
908
|
if (activeFeature) {
|
|
888
909
|
const FeatureComponent = activeFeature;
|
|
889
|
-
return /* @__PURE__ */
|
|
910
|
+
return /* @__PURE__ */ React4__default.default.createElement(FeatureComponent, { onClose: handleCloseFeature, onLogin });
|
|
890
911
|
}
|
|
891
|
-
return /* @__PURE__ */
|
|
912
|
+
return /* @__PURE__ */ React4__default.default.createElement(
|
|
892
913
|
"div",
|
|
893
914
|
{
|
|
894
915
|
style: {
|
|
@@ -898,8 +919,8 @@ var DebugTool = ({ onLogin, envOverride, menuItemsOverride }) => {
|
|
|
898
919
|
zIndex: 9999
|
|
899
920
|
}
|
|
900
921
|
},
|
|
901
|
-
/* @__PURE__ */
|
|
902
|
-
isMenuOpen && /* @__PURE__ */
|
|
922
|
+
/* @__PURE__ */ React4__default.default.createElement(floating_button_default, { onClick: toggleMenu }),
|
|
923
|
+
isMenuOpen && /* @__PURE__ */ React4__default.default.createElement(
|
|
903
924
|
menu_panel_default,
|
|
904
925
|
{
|
|
905
926
|
menuItems: availableMenuItems,
|