pds-dev-kit-web-test 2.7.116 → 2.7.118

package/dist/src/sub/DynamicLayout/CompositionRenderer/Composition.js

@@ -57,7 +57,7 @@ var parseStylePropBorder_1 = __importDefault(require("../sections/CustomSection/
 var parseStylePropShadow_1 = __importDefault(require("../sections/CustomSection/util/stylePropParsers/parseStylePropShadow"));
 var types_1 = require("../sections/CustomSection/util/stylePropParsers/types");
 var CompositionBackground_1 = __importDefault(require("./CompositionBackground"));
-var FlexGridItemForCCB_1 = __importDefault(require("./FlexGridItemForCCB"));
+var FlexGridItem_1 = __importDefault(require("./FlexGridItem"));
 var Composition = (0, react_1.forwardRef)(function CustomSection(props, ref) {
     var _a, _b, _c, _d, _e;
     var _f = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _f.device, editingSectionId = _f.editingSectionId, mode = _f.mode, shortcutKeyMode = _f.shortcutKeyMode, sectionActionHandler = _f.sectionActionHandler, queryData = _f.queryData;
@@ -213,7 +213,7 @@ var Composition = (0, react_1.forwardRef)(function CustomSection(props, ref) {
                                 // fontSize: `${baseFontSize}px`
                             } }, { children: (_e = props.componentBlocks) === null || _e === void 0 ? void 0 : _e.map(function (cb, index) {
                                 var _a;
-                                return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(FlexGridItemForCCB_1.default, { cb: cb, index: index, device: device, rowHeight: rowHeight, zIndex: (_a = zOrders === null || zOrders === void 0 ? void 0 : zOrders[device === 'DESKTOP' ? 'desktop' : 'mobile'][cb.id]) !== null && _a !== void 0 ? _a : 0 }) }, cb.id));
+                                return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(FlexGridItem_1.default, { cb: cb, index: index, device: device, rowHeight: rowHeight, zIndex: (_a = zOrders === null || zOrders === void 0 ? void 0 : zOrders[device === 'DESKTOP' ? 'desktop' : 'mobile'][cb.id]) !== null && _a !== void 0 ? _a : 0 }) }, cb.id));
                             }) })) })) })) })) })) }));
 });
 var MOCK_BORDER = {

package/dist/src/sub/DynamicLayout/CompositionRenderer/FlexGridItem.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { ComponentBlock } from '../sections/CustomSection/types';
-import type { CB_PLACEMENT_PROP_SPECS, Device } from '../sections/CustomSection/util/types';
+import type { Device } from '../sections/CustomSection/util/types';
 type Props = {
     cb: ComponentBlock;
     index: number;
@@ -9,8 +9,6 @@ type Props = {
     zIndex: number;
     showPinned?: boolean;
     style?: React.CSSProperties;
-    isParentGroupPinned: boolean;
 };
-declare function FlexGridItem({ cb, index, device, rowHeight, zIndex, showPinned, style, isParentGroupPinned }: Props): JSX.Element;
-export declare function getGridAreaFromCB(props: CB_PLACEMENT_PROP_SPECS, device: Device): string;
+declare function FlexGridItem({ cb, index, device, rowHeight, zIndex, showPinned, style }: Props): JSX.Element;
 export default FlexGridItem;

package/dist/src/sub/DynamicLayout/CompositionRenderer/FlexGridItem.js

@@ -18,20 +18,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getGridAreaFromCB = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var styled_components_1 = __importDefault(require("styled-components"));
-var ComponentBlockMatcherWithCCB_1 = __importDefault(require("../sections/CustomSection/components/ComponentBlock/ComponentBlockMatcherWithCCB"));
+var ComponentBlockMatcher_1 = __importDefault(require("../sections/CustomSection/components/ComponentBlock/ComponentBlockMatcher"));
+require("./ComponentBlockMatcher");
 var gap = 10;
 function FlexGridItem(_a) {
-    var cb = _a.cb, index = _a.index, device = _a.device, rowHeight = _a.rowHeight, zIndex = _a.zIndex, showPinned = _a.showPinned, style = _a.style, isParentGroupPinned = _a.isParentGroupPinned;
+    var cb = _a.cb, index = _a.index, device = _a.device, rowHeight = _a.rowHeight, zIndex = _a.zIndex, showPinned = _a.showPinned, style = _a.style;
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     var defaultHeight = getMaxHeight(cb.jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT, device, rowHeight);
     var gridArea = getGridAreaFromCB(cb.jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT, device);
-    var _b = (0, react_1.useState)(false), isCBPinned = _b[0], setIsCBPinned = _b[1];
-    var isPinned = isParentGroupPinned || isCBPinned;
-    return ((0, jsx_runtime_1.jsxs)(GridItem, __assign({ style: __assign({ zIndex: zIndex, gridArea: gridArea, position: 'relative', maxHeight: isPinned ? defaultHeight : 'none' }, style) }, { children: [showPinned && ((0, jsx_runtime_1.jsx)(S_Pinned, { children: isCBPinned ? ((0, jsx_runtime_1.jsx)("button", __assign({ type: "button", disabled: isParentGroupPinned, onClick: function () { return setIsCBPinned(false); } }, { children: "H\uACE0\uC815\uB428 \uD83D\uDCCC" }))) : ((0, jsx_runtime_1.jsx)("button", __assign({ disabled: isParentGroupPinned, type: "button", onClick: function () { return setIsCBPinned(true); } }, { children: "H\uB298\uC5B4\uB0A8 \uD83E\uDEB1" }))) })), (0, jsx_runtime_1.jsx)(ComponentBlockMatcherWithCCB_1.default, { rowHeight: rowHeight, cbProps: cb, device: device, index: index })] })));
+    var _b = (0, react_1.useState)(false), isPinned = _b[0], setIsPinned = _b[1];
+    return ((0, jsx_runtime_1.jsxs)(GridItem, __assign({ style: __assign({ zIndex: zIndex, gridArea: gridArea, position: 'relative', maxHeight: isPinned ? defaultHeight : 'none' }, style) }, { children: [showPinned && ((0, jsx_runtime_1.jsx)(S_Pinned, { children: isPinned ? ((0, jsx_runtime_1.jsx)("button", __assign({ type: "button", onClick: function () { return setIsPinned(false); } }, { children: "H\uACE0\uC815\uB428 \uD83D\uDCCC" }))) : ((0, jsx_runtime_1.jsx)("button", __assign({ type: "button", onClick: function () { return setIsPinned(true); } }, { children: "H\uB298\uC5B4\uB0A8 \uD83E\uDEB1" }))) })), (0, jsx_runtime_1.jsx)(ComponentBlockMatcher_1.default, { rowHeight: rowHeight, cbProps: cb, device: device, index: index })] })));
 }
 var S_Pinned = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  pointer-events: auto;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 9999999;\n"], ["\n  pointer-events: auto;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 9999999;\n"])));
 var GridItem = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: auto;\n  word-break: break-word;\n"], ["\n  height: auto;\n  word-break: break-word;\n"])));
@@ -66,6 +65,5 @@ function getGridAreaFromCB(props, device) {
     var colEnd = colsMobile + colStart;
     return "".concat(rowStart, " / ").concat(colStart, " / ").concat(rowEnd, " / ").concat(colEnd);
 }
-exports.getGridAreaFromCB = getGridAreaFromCB;
 exports.default = FlexGridItem;
 var templateObject_1, templateObject_2;

package/dist/src/sub/DynamicLayout/GridAutoRowEditor/GridAutoRowEditor.js

@@ -55,6 +55,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var group_1 = require("publ-echo-test/dist/lib/GridLayoutEditor/group");
 var renderHelpers_1 = require("publ-echo-test/dist/lib/GridLayoutEditor/utils/renderHelpers");
 require("publ-echo/dist/lib/GridItem/OutsideClickHandler");
+var group_2 = require("publ-echo/dist/lib/GridLayoutEditor/group");
 var react_1 = __importStar(require("react"));
 var ErrorBoundary_1 = require("../../DynamicLayout/components/Section/ErrorBoundary");
 var dynamicLayoutContext_1 = require("../../DynamicLayout/dynamicLayoutContext");
@@ -65,7 +66,6 @@ var gleStyles_1 = require("../gleStyles");
 var useResizableObserver_1 = require("../sections/CustomSection/hooks/useResizableObserver");
 var util_1 = require("../sections/CustomSection/util");
 var parseSectionPadding_1 = __importDefault(require("../sections/CustomSection/util/layoutPropParsers/parseSectionPadding"));
-var groupUtils_1 = __importDefault(require("../utils/groupUtils"));
 var GRID_CELL_MIN = 24;
 var DESKTOP_GRID_COLS = 24;
 var MOBILE_GRID_COLS = 8;
@@ -77,15 +77,16 @@ var GLE_MIN_WIDTH_MOBILE_PX = "".concat(GRID_CELL_MIN * MOBILE_GRID_COLS, "px");
 //   queryData: QueryData;
 // };
 var GridAutoRowEditor = (0, react_1.forwardRef)(function CustomSection(props, ref) {
-    var _a = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _a.device, editingSectionId = _a.editingSectionId, mode = _a.mode, shortcutKeyMode = _a.shortcutKeyMode, sectionActionHandler = _a.sectionActionHandler, queryData = _a.queryData;
+    var _a, _b;
+    var _c = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _c.device, editingSectionId = _c.editingSectionId, mode = _c.mode, shortcutKeyMode = _c.shortcutKeyMode, sectionActionHandler = _c.sectionActionHandler, queryData = _c.queryData;
     var componentBlocks = props.componentBlocks, jsonProperties = props.jsonProperties;
-    var _b = jsonProperties, _c = _b.data, CB_PLACEMENT_PROP_SECTION = _c.CB_PLACEMENT_PROP_SECTION, CB_LAYOUT_PROP_PADDING = _c.CB_LAYOUT_PROP_PADDING, zOrders = _b.zOrders;
+    var _d = jsonProperties, _e = _d.data, CB_PLACEMENT_PROP_SECTION = _e.CB_PLACEMENT_PROP_SECTION, CB_LAYOUT_PROP_PADDING = _e.CB_LAYOUT_PROP_PADDING, zOrders = _d.zOrders;
     var layouts = (0, util_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : [], zOrders);
     var containerRef = (0, react_1.useRef)(null);
     var size = (0, useResizableObserver_1.useResizeObserver)({ ref: containerRef, box: 'border-box' });
-    var _d = (0, react_1.useState)(null), selectedCB = _d[0], setSelectedCB = _d[1];
+    var _f = (0, react_1.useState)(null), selectedCB = _f[0], setSelectedCB = _f[1];
     var gleRef = (0, react_1.useRef)(null);
-    var _e = (0, react_1.useState)([]), selectedRows = _e[0], setSelectedRows = _e[1]; // 빈 배열로 초기화
+    var _g = (0, react_1.useState)([]), selectedRows = _g[0], setSelectedRows = _g[1]; // 빈 배열로 초기화
     var isMobile = device === 'MOBILE';
     var isEditMode = mode === 'EDIT';
     // const layoutByDevice = device === 'DESKTOP' ? 'lg' : 'sm';
@@ -143,10 +144,10 @@ var GridAutoRowEditor = (0, react_1.forwardRef)(function CustomSection(props, re
             setSelectedCB('BULK');
         }
     }, [selectedCB, shortcutKeyMode, sectionActionHandler, setSelectedCB]);
-    var _f = (0, util_1.parseCustomSectionPlacement)({
+    var _h = (0, util_1.parseCustomSectionPlacement)({
         isMobile: isMobile,
         customSectionProps: CB_PLACEMENT_PROP_SECTION
-    }), width = _f.width, minHeight = _f.minHeight, isFullWidth = _f.isFullWidth;
+    }), width = _h.width, minHeight = _h.minHeight, isFullWidth = _h.isFullWidth;
     var customSectionStyles = {
         minHeight: "".concat(minHeight, "vh"),
         width: '100%',
@@ -205,25 +206,13 @@ var GridAutoRowEditor = (0, react_1.forwardRef)(function CustomSection(props, re
         return 16;
     })();
     var pedigree = jsonProperties === null || jsonProperties === void 0 ? void 0 : jsonProperties.pedigree;
-    // const [editingGroupBlock, setEditingGroupBlock] = useState<string>('ROOT');
-    // const editableCBIds = findDirectChildrenCbIds(pedigree, 'ROOT');
-    // const groupblocks = findGroupBlocks(pedigree, editingGroupBlock) ?? [];
-    // const handleGroupBlockDoubleClick = (blockId: string) => {
-    //   setEditingGroupBlock(blockId);
-    // };
-    var _g = (0, react_1.useState)([]), pinnedGBs = _g[0], setPinnedGBs = _g[1];
-    // const pinnedChildrens = pinnedGBs.map((gbId) => findAllChildrenCbIds(pedigree, gbId)).flat();
-    // const currentDepthCbs = props.componentBlocks?.filter((cb) => {
-    //   return editableCBIds.includes(cb.id);
-    // });
-    var onToggleGBPinned = function (gbId) {
-        setPinnedGBs(function (prev) {
-            if (prev.includes(gbId)) {
-                return prev.filter(function (id) { return id !== gbId; });
-            }
-            return __spreadArray(__spreadArray([], prev, true), [gbId], false);
-        });
+    var _j = (0, react_1.useState)('ROOT'), editingGroupBlock = _j[0], setEditingGroupBlock = _j[1];
+    var editableCBIds = (0, group_2.findDirectChildrenCbIds)(pedigree, editingGroupBlock);
+    var groupblocks = (_a = (0, group_1.findGroupBlocks)(pedigree, editingGroupBlock)) !== null && _a !== void 0 ? _a : [];
+    var handleGroupBlockDoubleClick = function (blockId) {
+        setEditingGroupBlock(blockId);
     };
+    console.log(editingGroupBlock);
     return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(dynamicLayoutContext_1.dynamicLayoutContext.Provider, __assign({ value: {
                 device: device,
                 mode: mode,
@@ -270,26 +259,19 @@ var GridAutoRowEditor = (0, react_1.forwardRef)(function CustomSection(props, re
                                                 backgroundColor: '#e8e1e189',
                                                 border: '1px solid #6b666688'
                                             }, "data-row": rIdx + 1, "data-col": cIdx + 1 }, "bg-grid-item-".concat(rIdx + 1, "-").concat(cIdx + 1))); }) }), "bg-grid-row-".concat(rIdx + 1)));
-                                }), pedigree.children.map(function (child) { return ((0, jsx_runtime_1.jsx)(groupUtils_1.default, { block: child, rowHeight: rowHeight, layoutItems: layouts[device === 'DESKTOP' ? 'lg' : 'sm'], cbs: props.componentBlocks, device: device, selectedRows: selectedRows, pinnedGBs: pinnedGBs, onToggleGBPinned: onToggleGBPinned, isEditMode: true }, child.blockId)); })] })) })) })) }) })) }));
+                                }), (_b = props.componentBlocks) === null || _b === void 0 ? void 0 : _b.map(function (cb, index) {
+                                    var _a;
+                                    return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(FlexGridItem_1.default, { cb: cb, index: index, device: device, rowHeight: rowHeight, zIndex: (_a = zOrders === null || zOrders === void 0 ? void 0 : zOrders[device === 'DESKTOP' ? 'desktop' : 'mobile'][cb.id]) !== null && _a !== void 0 ? _a : 0, style: editableCBIds.includes(cb.id)
+                                                ? { pointerEvents: 'none', boxShadow: '0 0 0 3px #e602ff' }
+                                                : { pointerEvents: 'none', opacity: 0.3 }, showPinned: editableCBIds.includes(cb.id) }) }, cb.id));
+                                }), groupblocks.map(function (groupblock, gIdx) {
+                                    return ((0, jsx_runtime_1.jsx)(GroupBlockRender, { block: groupblock, layouts: layouts, pedigree: pedigree, onDoubleClick: function () { return handleGroupBlockDoubleClick(groupblock.blockId); } }, groupblock.blockId));
+                                })] })) })) })) }) })) }));
 });
 function GroupBlockRender(_a) {
-    var block = _a.block, layouts = _a.layouts, pedigree = _a.pedigree, isEditing = _a.isEditing, isPinned = _a.isPinned, componentBlocks = _a.componentBlocks, onTogglePinned = _a.onTogglePinned, onDoubleClick = _a.onDoubleClick, onDoubleClickOutside = _a.onDoubleClickOutside;
+    var block = _a.block, layouts = _a.layouts, pedigree = _a.pedigree, onDoubleClick = _a.onDoubleClick;
     var childrenIds = (0, group_1.findAllChildrenCbIds)(pedigree, block.blockId).map(function (i) { return i.toString(); });
-    var bounding = (0, renderHelpers_1.getBoundingArea)(layouts, childrenIds);
-    (0, react_1.useEffect)(function () {
-        if (!isEditing) {
-            return;
-        }
-        function handleDoubleClickOutside(e) {
-            if (!e.target.closest('.group')) {
-                onDoubleClickOutside();
-            }
-        }
-        document.addEventListener('dblclick', handleDoubleClickOutside);
-        return function () {
-            document.removeEventListener('dblclick', handleDoubleClickOutside);
-        };
-    }, [isEditing]);
+    var bounding = (0, renderHelpers_1.getBoundingArea)(layouts.lg, childrenIds);
     if (!bounding) {
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
     }
@@ -299,25 +281,8 @@ function GroupBlockRender(_a) {
         cols: bounding.w,
         rows: bounding.h
     });
-    var children = componentBlocks === null || componentBlocks === void 0 ? void 0 : componentBlocks.filter(function (cb) { return childrenIds.includes(cb.id.toString()); });
-    if (childrenIds.length === 0) {
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "\uB529\uD06C\uADF8\uB8F9" });
-    }
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: {
-            gridArea: gridArea,
-            position: 'relative',
-            width: '100%',
-            height: '100%'
-        }, onDoubleClick: onDoubleClick }, { children: [!isEditing && ((0, jsx_runtime_1.jsx)(S_Pinned, { children: isPinned ? ((0, jsx_runtime_1.jsx)("button", __assign({ type: "button", onClick: onTogglePinned }, { children: "(\uADF8\uB8F9)H\uACE0\uC815\uB428 \uD83D\uDCCC" }))) : ((0, jsx_runtime_1.jsx)("button", __assign({ type: "button", onClick: onTogglePinned }, { children: "(\uADF8\uB8F9)H\uB298\uC5B4\uB0A8 \uD83E\uDEB1" }))) })), (0, jsx_runtime_1.jsx)("div", { className: "group", style: {
-                    position: 'absolute',
-                    top: 0,
-                    left: 0,
-                    right: 0,
-                    bottom: 0,
-                    boxShadow: '0 0 0 3px #e602ff'
-                } }), children === null || children === void 0 ? void 0 : children.map(function (cb, index) { return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(FlexGridItem_1.default, { cb: cb, index: index, device: "DESKTOP", rowHeight: 50, zIndex: 0, style: { pointerEvents: 'none', opacity: isEditing ? 1 : 0.3 }, showPinned: isEditing, isParentGroupPinned: isPinned }) }, cb.id)); })] })));
+    return ((0, jsx_runtime_1.jsx)("div", { className: "group", style: { gridArea: gridArea, boxShadow: '0 0 0 3px #e602ff' }, onDoubleClick: onDoubleClick }));
 }
-var S_Pinned = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  pointer-events: auto;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 9999999;\n"], ["\n  pointer-events: auto;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 9999999;\n"])));
 function getGridAreaFromGroup(position) {
     var x = position.x, y = position.y, cols = position.cols, rows = position.rows;
     var colStart = clamp(x + 1, 1, Math.max(1, 25 - cols));
@@ -338,7 +303,7 @@ function getGridAreaFromGroup(position) {
 function clamp(num, min, max) {
     return Math.max(Math.min(num, max), min);
 }
-var GridContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: grid; /* Space between grid items */\n  gap: 10px;\n  grid-auto-rows: minmax(", ", auto);\n  grid-template-columns: repeat(", ", 1fr);\n\n  grid-template-rows: ", "; /* \uBC30\uC5F4\uC744 \uACF5\uBC31\uC73C\uB85C \uAD6C\uBD84\uB41C \uBB38\uC790\uC5F4\uB85C \uD569\uCE69\uB2C8\uB2E4. */\n  padding: 10px 10px;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .bg-grid-item {\n    transition: background-color 0.2s ease;\n  }\n\n  /* 1. \uAE30\uBCF8 \uD638\uBC84 (\uC120\uD0DD\uB418\uC9C0 \uC54A\uC558\uC744 \uB54C) */\n  .bg-grid-row:not(.selected):hover > .bg-grid-item {\n    background-color: #90ee90 !important; /* \uC5F0\uB450\uC0C9 */\n  }\n\n  /* 2. 'selected' \uD074\uB798\uC2A4\uAC00 \uBD99\uC740 \uD589\uC758 \uC544\uC774\uD15C (\uC120\uD0DD\uB428) */\n  .bg-grid-row.selected > .bg-grid-item {\n    background-color: #90ee90 !important; /* \uC5F0\uB450\uC0C9 */\n  }\n\n  /* 3. \uC120\uD0DD\uB41C \uD589\uC5D0 \uD638\uBC84\uD588\uC744 \uB54C */\n  .bg-grid-row.selected:hover > .bg-grid-item {\n    background-color: #ffc0cb !important; /* \uD551\uD06C\uC0C9 */\n  }\n"], ["\n  display: grid; /* Space between grid items */\n  gap: 10px;\n  grid-auto-rows: minmax(", ", auto);\n  grid-template-columns: repeat(", ", 1fr);\n\n  grid-template-rows: ", "; /* \uBC30\uC5F4\uC744 \uACF5\uBC31\uC73C\uB85C \uAD6C\uBD84\uB41C \uBB38\uC790\uC5F4\uB85C \uD569\uCE69\uB2C8\uB2E4. */\n  padding: 10px 10px;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .bg-grid-item {\n    transition: background-color 0.2s ease;\n  }\n\n  /* 1. \uAE30\uBCF8 \uD638\uBC84 (\uC120\uD0DD\uB418\uC9C0 \uC54A\uC558\uC744 \uB54C) */\n  .bg-grid-row:not(.selected):hover > .bg-grid-item {\n    background-color: #90ee90 !important; /* \uC5F0\uB450\uC0C9 */\n  }\n\n  /* 2. 'selected' \uD074\uB798\uC2A4\uAC00 \uBD99\uC740 \uD589\uC758 \uC544\uC774\uD15C (\uC120\uD0DD\uB428) */\n  .bg-grid-row.selected > .bg-grid-item {\n    background-color: #90ee90 !important; /* \uC5F0\uB450\uC0C9 */\n  }\n\n  /* 3. \uC120\uD0DD\uB41C \uD589\uC5D0 \uD638\uBC84\uD588\uC744 \uB54C */\n  .bg-grid-row.selected:hover > .bg-grid-item {\n    background-color: #ffc0cb !important; /* \uD551\uD06C\uC0C9 */\n  }\n"])), function (props) { return "".concat(props.rowHeight, "px"); }, function (props) { return props.cols; }, function (props) {
+var GridContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid; /* Space between grid items */\n  gap: 10px;\n  grid-auto-rows: minmax(", ", auto);\n  grid-template-columns: repeat(", ", 1fr);\n\n  grid-template-rows: ", "; /* \uBC30\uC5F4\uC744 \uACF5\uBC31\uC73C\uB85C \uAD6C\uBD84\uB41C \uBB38\uC790\uC5F4\uB85C \uD569\uCE69\uB2C8\uB2E4. */\n  padding: 10px 10px;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .bg-grid-item {\n    transition: background-color 0.2s ease;\n  }\n\n  /* 1. \uAE30\uBCF8 \uD638\uBC84 (\uC120\uD0DD\uB418\uC9C0 \uC54A\uC558\uC744 \uB54C) */\n  .bg-grid-row:not(.selected):hover > .bg-grid-item {\n    background-color: #90ee90 !important; /* \uC5F0\uB450\uC0C9 */\n  }\n\n  /* 2. 'selected' \uD074\uB798\uC2A4\uAC00 \uBD99\uC740 \uD589\uC758 \uC544\uC774\uD15C (\uC120\uD0DD\uB428) */\n  .bg-grid-row.selected > .bg-grid-item {\n    background-color: #90ee90 !important; /* \uC5F0\uB450\uC0C9 */\n  }\n\n  /* 3. \uC120\uD0DD\uB41C \uD589\uC5D0 \uD638\uBC84\uD588\uC744 \uB54C */\n  .bg-grid-row.selected:hover > .bg-grid-item {\n    background-color: #ffc0cb !important; /* \uD551\uD06C\uC0C9 */\n  }\n"], ["\n  display: grid; /* Space between grid items */\n  gap: 10px;\n  grid-auto-rows: minmax(", ", auto);\n  grid-template-columns: repeat(", ", 1fr);\n\n  grid-template-rows: ", "; /* \uBC30\uC5F4\uC744 \uACF5\uBC31\uC73C\uB85C \uAD6C\uBD84\uB41C \uBB38\uC790\uC5F4\uB85C \uD569\uCE69\uB2C8\uB2E4. */\n  padding: 10px 10px;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .bg-grid-item {\n    transition: background-color 0.2s ease;\n  }\n\n  /* 1. \uAE30\uBCF8 \uD638\uBC84 (\uC120\uD0DD\uB418\uC9C0 \uC54A\uC558\uC744 \uB54C) */\n  .bg-grid-row:not(.selected):hover > .bg-grid-item {\n    background-color: #90ee90 !important; /* \uC5F0\uB450\uC0C9 */\n  }\n\n  /* 2. 'selected' \uD074\uB798\uC2A4\uAC00 \uBD99\uC740 \uD589\uC758 \uC544\uC774\uD15C (\uC120\uD0DD\uB428) */\n  .bg-grid-row.selected > .bg-grid-item {\n    background-color: #90ee90 !important; /* \uC5F0\uB450\uC0C9 */\n  }\n\n  /* 3. \uC120\uD0DD\uB41C \uD589\uC5D0 \uD638\uBC84\uD588\uC744 \uB54C */\n  .bg-grid-row.selected:hover > .bg-grid-item {\n    background-color: #ffc0cb !important; /* \uD551\uD06C\uC0C9 */\n  }\n"])), function (props) { return "".concat(props.rowHeight, "px"); }, function (props) { return props.cols; }, function (props) {
     // 전체 행 개수만큼 배열을 생성하여 각 행의 CSS 값을 정의합니다.
     return Array.from({ length: props.sectionRow })
         .map(function (_, index) {
@@ -350,7 +315,7 @@ var GridContainer = styled_components_1.default.div(templateObject_2 || (templat
     )
         .join(' ');
 });
-var S_SectionWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+var S_SectionWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
 exports.default = react_1.default.memo(GridAutoRowEditor);
 function getDefensiveFontSize(device, width) {
     if (device === 'MOBILE') {
@@ -358,4 +323,4 @@ function getDefensiveFontSize(device, width) {
     }
     return width * (0.0000246 * width - 0.01618);
 }
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1, templateObject_2;

package/dist/src/sub/DynamicLayout/mock_componentBlocks.d.ts

@@ -178,8 +178,6 @@ export declare const MOCK_COMPONENT_BLOCKS: ({
             };
             CB_CONTENT_PROP_TEXT: {
                 CB_CONTENT_PROP_TEXT_SPEC_TEXT: string;
-                CB_CONTENT_PROP_TEXT_SPEC_PREFIX?: undefined;
-                CB_CONTENT_PROP_TEXT_SPEC_SUFFIX?: undefined;
             };
             CB_CONTENT_PROP_VISIBILITY: {
                 CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP: boolean;
@@ -390,137 +388,6 @@ export declare const MOCK_COMPONENT_BLOCKS: ({
             };
             CB_CONTENT_PROP_TEXT: {
                 CB_CONTENT_PROP_TEXT_SPEC_TEXT: string;
-                CB_CONTENT_PROP_TEXT_SPEC_PREFIX: string;
-                CB_CONTENT_PROP_TEXT_SPEC_SUFFIX: string;
-            };
-            CB_CONTENT_PROP_VISIBILITY: {
-                CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP: boolean;
-                CB_CONTENT_PROP_VISIBILITY_SPEC_MOBILEWEB: boolean;
-            };
-            CB_EFFECT_PROP_ENTANIM: {
-                CB_EFFECT_PROP_ENTANIM_SPEC_DURATION: number;
-                'CB_EFFECT_PROP_ENTANIM_SPEC_DURATION:MOBILE': null;
-                CB_EFFECT_PROP_ENTANIM_SPEC_REPEAT: number;
-                'CB_EFFECT_PROP_ENTANIM_SPEC_REPEAT:MOBILE': null;
-                CB_EFFECT_PROP_ENTANIM_SPEC_TFUNC: string;
-                'CB_EFFECT_PROP_ENTANIM_SPEC_TFUNC:MOBILE': null;
-                CB_EFFECT_PROP_ENTANIM_SPEC_TYPE: string;
-                'CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE': null;
-            };
-            CB_EFFECT_PROP_HOVERANIM: {
-                CB_EFFECT_PROP_HOVERANIM_SPEC_DURATION: number;
-                'CB_EFFECT_PROP_HOVERANIM_SPEC_DURATION:MOBILE': null;
-                CB_EFFECT_PROP_HOVERANIM_SPEC_REPEAT: number;
-                'CB_EFFECT_PROP_HOVERANIM_SPEC_REPEAT:MOBILE': null;
-                CB_EFFECT_PROP_HOVERANIM_SPEC_TFUNC: string;
-                'CB_EFFECT_PROP_HOVERANIM_SPEC_TFUNC:MOBILE': null;
-                CB_EFFECT_PROP_HOVERANIM_SPEC_TYPE: string;
-                'CB_EFFECT_PROP_HOVERANIM_SPEC_TYPE:MOBILE': null;
-            };
-            CB_LAYOUT_PROP_PADDING: {
-                CB_LAYOUT_PROP_PADDING_SPEC_FIX: boolean;
-                'CB_LAYOUT_PROP_PADDING_SPEC_FIX:MOBILE': null;
-                CB_LAYOUT_PROP_PADDING_SPEC_PADDING: {
-                    bottom: number;
-                    left: number;
-                    right: number;
-                    top: number;
-                };
-                'CB_LAYOUT_PROP_PADDING_SPEC_PADDING:MOBILE': {
-                    bottom: number;
-                    left: number;
-                    right: number;
-                    top: number;
-                };
-            };
-            CB_PLACEMENT_PROP_PLACEMENT: {
-                CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS: number;
-                'CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS:MOBILE': number;
-                CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS: number;
-                'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE': number;
-                CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX: number;
-                'CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX:MOBILE': number;
-                CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY: number;
-                'CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY:MOBILE': number;
-                CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX: number;
-                'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX:MOBILE': number;
-            };
-            CB_STYLE_PROP_OPACITY: {
-                CB_STYLE_PROP_OPACITY_SPEC_OPACITY: number;
-                'CB_STYLE_PROP_OPACITY_SPEC_OPACITY:HOVER': null;
-                'CB_STYLE_PROP_OPACITY_SPEC_OPACITY:MOBILE': null;
-                'CB_STYLE_PROP_OPACITY_SPEC_OPACITY:MOBILE:HOVER': null;
-            };
-            CB_STYLE_PROP_TEXT: {
-                CB_STYLE_PROP_TEXT_SPEC_COLOR: string;
-                'CB_STYLE_PROP_TEXT_SPEC_COLOR:HOVER': null;
-                'CB_STYLE_PROP_TEXT_SPEC_COLOR:MOBILE': null;
-                'CB_STYLE_PROP_TEXT_SPEC_COLOR:MOBILE:HOVER': null;
-                CB_STYLE_PROP_TEXT_SPEC_HORIZONTAL: string;
-                'CB_STYLE_PROP_TEXT_SPEC_HORIZONTAL:HOVER': null;
-                'CB_STYLE_PROP_TEXT_SPEC_HORIZONTAL:MOBILE': null;
-                'CB_STYLE_PROP_TEXT_SPEC_HORIZONTAL:MOBILE:HOVER': null;
-                CB_STYLE_PROP_TEXT_SPEC_LETTERSPACING: number;
-                'CB_STYLE_PROP_TEXT_SPEC_LETTERSPACING:HOVER': null;
-                'CB_STYLE_PROP_TEXT_SPEC_LETTERSPACING:MOBILE': null;
-                'CB_STYLE_PROP_TEXT_SPEC_LETTERSPACING:MOBILE:HOVER': null;
-                CB_STYLE_PROP_TEXT_SPEC_LINEHEIGHT: number;
-                'CB_STYLE_PROP_TEXT_SPEC_LINEHEIGHT:HOVER': null;
-                'CB_STYLE_PROP_TEXT_SPEC_LINEHEIGHT:MOBILE': null;
-                'CB_STYLE_PROP_TEXT_SPEC_LINEHEIGHT:MOBILE:HOVER': null;
-                CB_STYLE_PROP_TEXT_SPEC_SIZE: number;
-                'CB_STYLE_PROP_TEXT_SPEC_SIZE:HOVER': null;
-                'CB_STYLE_PROP_TEXT_SPEC_SIZE:MOBILE': null;
-                'CB_STYLE_PROP_TEXT_SPEC_SIZE:MOBILE:HOVER': null;
-                CB_STYLE_PROP_TEXT_SPEC_TYPEFACE: string;
-                'CB_STYLE_PROP_TEXT_SPEC_TYPEFACE:HOVER': null;
-                'CB_STYLE_PROP_TEXT_SPEC_TYPEFACE:MOBILE': null;
-                'CB_STYLE_PROP_TEXT_SPEC_TYPEFACE:MOBILE:HOVER': null;
-                CB_STYLE_PROP_TEXT_SPEC_VERTICAL: string;
-                'CB_STYLE_PROP_TEXT_SPEC_VERTICAL:HOVER': null;
-                'CB_STYLE_PROP_TEXT_SPEC_VERTICAL:MOBILE': null;
-                'CB_STYLE_PROP_TEXT_SPEC_VERTICAL:MOBILE:HOVER': null;
-                CB_STYLE_PROP_TEXT_SPEC_WEIGHT: number;
-                'CB_STYLE_PROP_TEXT_SPEC_WEIGHT:HOVER': null;
-                'CB_STYLE_PROP_TEXT_SPEC_WEIGHT:MOBILE': null;
-                'CB_STYLE_PROP_TEXT_SPEC_WEIGHT:MOBILE:HOVER': null;
-            };
-            CB_CONTENT_PROP_IMAGE?: undefined;
-            CB_STYLE_PROP_BORDER?: undefined;
-            CB_STYLE_PROP_IMAGE?: undefined;
-            CB_STYLE_PROP_SHADOW?: undefined;
-            CB_STYLE_PROP_COLOR?: undefined;
-        };
-        minVersion: string;
-        version: string;
-    };
-    queryableDefinitionPreset: string;
-    queryableTapSrc: string;
-    updatedAt: string;
-} | {
-    availablePlugins: never[];
-    blockId: string;
-    componentBlockCode: string;
-    componentBlockType: string;
-    dynamicLayoutSectionId: number;
-    id: number;
-    insertedAt: string;
-    jsonProperties: {
-        currentVersion: string;
-        data: {
-            CB_CONTENT_PROP_CLINK: {
-                CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC: string;
-                CB_CONTENT_PROP_CLINK_SPEC_NEWTAB: boolean;
-                CB_CONTENT_PROP_CLINK_SPEC_SRC: string;
-                CB_CONTENT_PROP_CLINK_SPEC_TYPE: string;
-            };
-            CB_CONTENT_PROP_HOVER: {
-                CB_CONTENT_PROP_HOVER_SPEC_MUSE: boolean;
-            };
-            CB_CONTENT_PROP_TEXT: {
-                CB_CONTENT_PROP_TEXT_SPEC_TEXT: string;
-                CB_CONTENT_PROP_TEXT_SPEC_PREFIX?: undefined;
-                CB_CONTENT_PROP_TEXT_SPEC_SUFFIX?: undefined;
             };
             CB_CONTENT_PROP_VISIBILITY: {
                 CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP: boolean;
@@ -806,8 +673,6 @@ export declare const MOCK_COMPONENT_BLOCKS: ({
             };
             CB_CONTENT_PROP_TEXT: {
                 CB_CONTENT_PROP_TEXT_SPEC_TEXT: string;
-                CB_CONTENT_PROP_TEXT_SPEC_PREFIX?: undefined;
-                CB_CONTENT_PROP_TEXT_SPEC_SUFFIX?: undefined;
             };
             CB_CONTENT_PROP_VISIBILITY: {
                 CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP: boolean;

package/dist/src/sub/DynamicLayout/mock_componentBlocks.js

@@ -1171,9 +1171,7 @@ exports.MOCK_COMPONENT_BLOCKS = [
                     CB_CONTENT_PROP_HOVER_SPEC_MUSE: true
                 },
                 CB_CONTENT_PROP_TEXT: {
-                    CB_CONTENT_PROP_TEXT_SPEC_TEXT: "Today's Book Highlight",
-                    CB_CONTENT_PROP_TEXT_SPEC_PREFIX: '[Prefix]',
-                    CB_CONTENT_PROP_TEXT_SPEC_SUFFIX: '[Suffix]'
+                    CB_CONTENT_PROP_TEXT_SPEC_TEXT: "Today's Book Highlight"
                 },
                 CB_CONTENT_PROP_VISIBILITY: {
                     CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP: true,

package/dist/src/sub/DynamicLayout/mocks.js

@@ -1,9 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MOCK_SECTIONS = void 0;
+require("./mock_componentBlocks");
 var mock_contentsCarousel_1 = require("./mock_contentsCarousel");
 var mock_contentsList_1 = require("./mock_contentsList");
 var mock_slideBanner_1 = require("./mock_slideBanner");
+require("./mock_video");
+require("./types");
 exports.MOCK_SECTIONS = [
     {
         administrativeTitle: 'Daily Pages',

package/dist/src/sub/DynamicLayout/sections/CustomSection/CustomSection.js

@@ -60,7 +60,7 @@ var dynamicLayoutContext_1 = require("../../../DynamicLayout/dynamicLayoutContex
 var gleStyles_1 = require("../../../DynamicLayout/gleStyles");
 var styled_components_1 = __importDefault(require("styled-components"));
 var components_1 = require("../../components");
-var ComponentBlockMatcherWithCCB_1 = __importDefault(require("./components/ComponentBlock/ComponentBlockMatcherWithCCB"));
+var ComponentBlockMatcher_1 = __importDefault(require("./components/ComponentBlock/ComponentBlockMatcher"));
 var S_HiddenCover_1 = require("./components/ComponentBlock/componentBlocks/components/S_HiddenCover");
 var clsx_1 = require("./newUtils/clsx");
 var group_2 = require("./newUtils/group");
@@ -1084,7 +1084,7 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
                                             e.stopPropagation();
                                             e.preventDefault();
                                             onContextMenuCB(matchedCB.id, e);
-                                        } }, { children: (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(ComponentBlockMatcherWithCCB_1.default, { cbProps: matchedCB, device: device, rowHeight: rowHeight, index: index }) }) })) }), each.i));
+                                        } }, { children: (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(ComponentBlockMatcher_1.default, { cbProps: matchedCB, device: device, rowHeight: rowHeight, index: index }) }) })) }), each.i));
                             }) })) })) }))] })) }));
 });
 function isLayoutPlacementSame(current, prev) {

package/dist/src/sub/DynamicLayout/sections/CustomSection/FlexGridItem.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { ComponentBlock } from './types';
+import { type ComponentBlock } from './types';
 import type { Device } from './util/types';
 type Props = {
     cb: ComponentBlock;

package/dist/src/sub/DynamicLayout/sections/CustomSection/FlexGridItem.js

@@ -20,7 +20,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
-var ComponentBlockMatcherWithCCB_1 = __importDefault(require("./components/ComponentBlock/ComponentBlockMatcherWithCCB"));
+var ComponentBlockMatcher_1 = __importDefault(require("./components/ComponentBlock/ComponentBlockMatcher"));
 var types_1 = require("./types");
 var gap = 10;
 function FlexGridItem(_a) {
@@ -32,7 +32,7 @@ function FlexGridItem(_a) {
     return ((0, jsx_runtime_1.jsx)(GridItem, __assign({ "data-cb-id": cb.id, style: __assign({ zIndex: zIndex, gridArea: gridArea }, (isRichText && {
             minHeight: 0,
             overflowY: 'scroll'
-        })) }, { children: (0, jsx_runtime_1.jsx)(ComponentBlockMatcherWithCCB_1.default, { rowHeight: rowHeight, cbProps: cb, device: device, index: index }) })));
+        })) }, { children: (0, jsx_runtime_1.jsx)(ComponentBlockMatcher_1.default, { rowHeight: rowHeight, cbProps: cb, device: device, index: index }) })));
 }
 var GridItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: auto;\n  word-break: break-word;\n"], ["\n  height: auto;\n  word-break: break-word;\n"])));
 function getMaxHeight(props, device, rowHeight) {

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsList/ContentsList.js

@@ -19,7 +19,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable @typescript-eslint/no-unused-vars */
 var react_1 = require("react");
 var CustomSectionBackgroundMedia_1 = require("../../../../../../../DynamicLayout/components/Section/components/CustomSectionBackgroundMedia");
 var createCompositions_1 = require("../../../../../../../DynamicLayout/CompositionRenderer/createCompositions");

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/SlideBanner/components/CustomPagination.js

@@ -137,13 +137,15 @@ var body2Regular = (0, styled_components_1.css)(templateObject_4 || (templateObj
     var theme = _a.theme;
     return theme.desktopLineHeight.body2;
 });
-// const sysTextWhite = css`
-//   color: ${({ theme }) => theme.ui_cpnt_textlabel_sys_white};
-// `;
-// const sysTextBlack = css`
-//   color: ${({ theme }) => theme.ui_cpnt_textlabel_sys_black};
-// `;
-var S_TextLabel = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+var sysTextWhite = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textlabel_sys_white;
+});
+var sysTextBlack = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textlabel_sys_black;
+});
+var S_TextLabel = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
     var styleTheme = _a.styleTheme;
     return styleTheme &&
         {
@@ -151,24 +153,24 @@ var S_TextLabel = styled_components_1.default.div(templateObject_5 || (templateO
             body2Regular: body2Regular
         }[styleTheme];
 });
-var verticalDivider = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  height: 16px;\n  width: 1px;\n"], ["\n  height: 16px;\n  width: 1px;\n"])));
-var horizontalDivider = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  height: 1px;\n  width: 100%;\n"], ["\n  height: 1px;\n  width: 100%;\n"])));
-var S_Divider = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background-color: ", ";\n  opacity: 0.6;\n  ", ";\n"], ["\n  background-color: ", ";\n  opacity: 0.6;\n  ", ";\n"])), function (_a) {
+var verticalDivider = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  height: 16px;\n  width: 1px;\n"], ["\n  height: 16px;\n  width: 1px;\n"])));
+var horizontalDivider = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  height: 1px;\n  width: 100%;\n"], ["\n  height: 1px;\n  width: 100%;\n"])));
+var S_Divider = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  background-color: ", ";\n  opacity: 0.6;\n  ", ";\n"], ["\n  background-color: ", ";\n  opacity: 0.6;\n  ", ";\n"])), function (_a) {
     var color = _a.color;
     return color;
 }, function (_a) {
     var type = _a.type;
     return (type === 'VERTICAL' ? verticalDivider : horizontalDivider);
 });
-var S_Dot = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 50%;\n  cursor: pointer;\n  height: 8px;\n  width: 8px;\n"], ["\n  background-color: ", ";\n  border-radius: 50%;\n  cursor: pointer;\n  height: 8px;\n  width: 8px;\n"])), function (_a) {
+var S_Dot = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 50%;\n  cursor: pointer;\n  height: 8px;\n  width: 8px;\n"], ["\n  background-color: ", ";\n  border-radius: 50%;\n  cursor: pointer;\n  height: 8px;\n  width: 8px;\n"])), function (_a) {
     var color = _a.color;
     return color;
 });
-var S_Bar = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  background-color: ", ";\n  cursor: pointer;\n  height: 2px;\n  width: 40px;\n"], ["\n  background-color: ", ";\n  cursor: pointer;\n  height: 2px;\n  width: 40px;\n"])), function (_a) {
+var S_Bar = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  background-color: ", ";\n  cursor: pointer;\n  height: 2px;\n  width: 40px;\n"], ["\n  background-color: ", ";\n  cursor: pointer;\n  height: 2px;\n  width: 40px;\n"])), function (_a) {
     var color = _a.color;
     return color;
 });
-var S_Pointer = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  cursor: ", ";\n  height: 16px;\n  opacity: ", ";\n"], ["\n  cursor: ", ";\n  height: 16px;\n  opacity: ", ";\n"])), function (_a) {
+var S_Pointer = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  cursor: ", ";\n  height: 16px;\n  opacity: ", ";\n"], ["\n  cursor: ", ";\n  height: 16px;\n  opacity: ", ";\n"])), function (_a) {
     var disabled = _a.disabled;
     return (disabled ? 'not-allowed' : 'pointer');
 }, function (_a) {
@@ -176,4 +178,4 @@ var S_Pointer = styled_components_1.default.div(templateObject_11 || (templateOb
     return (disabled ? 0.4 : 1);
 });
 exports.default = exports.CustomPagination;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Text/Text.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type { CB_TEXT_PROPERTIES_TYPE, IndexForIntersection } from '../../../../util/types';
 type Props = CB_TEXT_PROPERTIES_TYPE & IndexForIntersection;
-export default function Text(props: Props): JSX.Element;
-export {};
+declare function Text(props: Props): JSX.Element;
+export default Text;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Text/Text.js

@@ -32,7 +32,7 @@ var textSpecFormatOptions_1 = require("./textSpecFormatOptions");
 function Text(props) {
     var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
     var queryContext = (0, compositionQueryContext_1.useCCBQueryPath)();
-    var index = props.index, _b = props.CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CLINK_SPEC_SRC = _b.CB_CONTENT_PROP_CLINK_SPEC_SRC, CB_CONTENT_PROP_CLINK_SPEC_TYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_TYPE, CB_CONTENT_PROP_CLINK_SPEC_NEWTAB = _b.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB, CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC = _b.CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC, CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE, CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA = _b.CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM, _c = props.CB_CONTENT_PROP_TEXT, CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE = _c.CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE, CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA = _c.CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA, CB_CONTENT_PROP_TEXT_SPEC_SUFFIX = _c.CB_CONTENT_PROP_TEXT_SPEC_SUFFIX, CB_CONTENT_PROP_TEXT_SPEC_PREFIX = _c.CB_CONTENT_PROP_TEXT_SPEC_PREFIX;
+    var index = props.index, _b = props.CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CLINK_SPEC_SRC = _b.CB_CONTENT_PROP_CLINK_SPEC_SRC, CB_CONTENT_PROP_CLINK_SPEC_TYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_TYPE, CB_CONTENT_PROP_CLINK_SPEC_NEWTAB = _b.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB, CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC = _b.CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC, CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE, CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA = _b.CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM, _c = props.CB_CONTENT_PROP_TEXT, CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE = _c.CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE, CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA = _c.CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA;
     var cLinkValue = function () {
         if (CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE === 'DATA' ||
             CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE === 'DELEGATEDDATA') {
@@ -115,27 +115,16 @@ function Text(props) {
         }
         return props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT;
     };
-    var getTruncatedText = function (text) {
-        var maxLength = props.CB_STYLE_PROP_TEXT.CB_STYLE_PROP_TEXT_SPEC_ELLIPSIS;
-        if (!maxLength) {
-            return text;
-        }
-        if (text.length > maxLength) {
-            return "".concat(text.slice(0, maxLength), "...");
-        }
-        return text;
-    };
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ style: {
                     height: '100%',
                     display: 'flex',
                     alignItems: textStyle.alignItems
-                }, ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsxs)(S_CB_Box_1.S_CB_Box, __assign({ onMouseEnter: function (e) {
+                }, ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_Box_1.S_CB_Box, __assign({ onMouseEnter: function (e) {
                         e.currentTarget.classList.add('hovered');
                     }, onMouseLeave: function (e) {
                         e.currentTarget.classList.remove('hovered');
-                    }, className: "cb-layout-box cb-text", normalStyle: __assign(__assign(__assign(__assign(__assign({}, textStyle), propsStyle), layoutStyle), effectCssProperties), { whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: CLINKCursor, height: 'fit-content', minWidth: "calc(2ch + ".concat(layoutStyle.paddingLeft, " + ").concat(layoutStyle.paddingRight, ")") }), hoverStyle: __assign(__assign(__assign({}, textHoverStyle), propsHoverStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }), onClick: onClickCLINK }, { children: [CB_CONTENT_PROP_TEXT_SPEC_PREFIX, textValue() === 'ERROR' ? 'EDITOR:FALLBACK_TEXT' : getTruncatedText(textValue()), CB_CONTENT_PROP_TEXT_SPEC_SUFFIX] })) }))] }));
+                    }, className: "cb-layout-box cb-text", normalStyle: __assign(__assign(__assign(__assign(__assign({}, textStyle), propsStyle), layoutStyle), effectCssProperties), { whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: CLINKCursor, height: 'fit-content', minWidth: "calc(2ch + ".concat(layoutStyle.paddingLeft, " + ").concat(layoutStyle.paddingRight, ")") }), hoverStyle: __assign(__assign(__assign({}, textHoverStyle), propsHoverStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }), onClick: onClickCLINK }, { children: textValue() === 'ERROR' ? 'EDITOR:FALLBACK_TEXT' : textValue() })) }))] }));
 }
-exports.default = Text;
 function getTextStyles(props, device) {
     var availableSpecCodes = [
         'CB_STYLE_PROP_TEXT_SPEC_TYPEFACE',
@@ -149,3 +138,4 @@ function getTextStyles(props, device) {
     ];
     return (0, textUtil_1.parseStyleTextToCSSProp)({ availableSpecCodes: availableSpecCodes, props: props, device: device, propKey: 'TEXT' });
 }
+exports.default = Text;

package/dist/src/sub/DynamicLayout/sections/FlexGridCustomSection.js

@@ -37,15 +37,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -58,8 +49,7 @@ var dynamicLayoutContext_1 = require("../../DynamicLayout/dynamicLayoutContext")
 var styled_components_1 = __importDefault(require("styled-components"));
 var components_1 = require("../components");
 var gleStyles_1 = require("../gleStyles");
-var groupUtils_1 = __importDefault(require("../utils/groupUtils"));
-require("./CustomSection/FlexGridItem");
+var FlexGridItem_1 = __importDefault(require("./CustomSection/FlexGridItem"));
 var useResizableObserver_1 = require("./CustomSection/hooks/useResizableObserver");
 var util_1 = require("./CustomSection/util");
 var parseSectionPadding_1 = __importDefault(require("./CustomSection/util/layoutPropParsers/parseSectionPadding"));
@@ -69,12 +59,13 @@ var MOBILE_GRID_COLS = 8;
 var GLE_MIN_WIDTH_DESKTOP_PX = "".concat(GRID_CELL_MIN * DESKTOP_GRID_COLS, "px");
 var GLE_MIN_WIDTH_MOBILE_PX = "".concat(GRID_CELL_MIN * MOBILE_GRID_COLS, "px");
 var FlexGridCustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
-    var _a = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _a.device, editingSectionId = _a.editingSectionId, mode = _a.mode, shortcutKeyMode = _a.shortcutKeyMode, sectionActionHandler = _a.sectionActionHandler;
+    var _a;
+    var _b = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _b.device, editingSectionId = _b.editingSectionId, mode = _b.mode, shortcutKeyMode = _b.shortcutKeyMode, sectionActionHandler = _b.sectionActionHandler;
     var componentBlocks = props.componentBlocks, jsonProperties = props.jsonProperties;
-    var _b = jsonProperties, _c = _b.data, CB_PLACEMENT_PROP_SECTION = _c.CB_PLACEMENT_PROP_SECTION, CB_LAYOUT_PROP_PADDING = _c.CB_LAYOUT_PROP_PADDING, zOrders = _b.zOrders;
+    var _c = jsonProperties, _d = _c.data, CB_PLACEMENT_PROP_SECTION = _d.CB_PLACEMENT_PROP_SECTION, CB_LAYOUT_PROP_PADDING = _d.CB_LAYOUT_PROP_PADDING, zOrders = _c.zOrders;
     var containerRef = (0, react_1.useRef)(null);
     var size = (0, useResizableObserver_1.useResizeObserver)({ ref: containerRef, box: 'border-box' });
-    var _d = (0, react_1.useState)(null), selectedCB = _d[0], setSelectedCB = _d[1];
+    var _e = (0, react_1.useState)(null), selectedCB = _e[0], setSelectedCB = _e[1];
     var gleRef = (0, react_1.useRef)(null);
     var isMobile = device === 'MOBILE';
     var isEditMode = mode === 'EDIT';
@@ -133,10 +124,10 @@ var FlexGridCustomSection = (0, react_1.forwardRef)(function CustomSection(props
             setSelectedCB('BULK');
         }
     }, [selectedCB, shortcutKeyMode, sectionActionHandler, setSelectedCB]);
-    var _e = (0, util_1.parseCustomSectionPlacement)({
+    var _f = (0, util_1.parseCustomSectionPlacement)({
         isMobile: isMobile,
         customSectionProps: CB_PLACEMENT_PROP_SECTION
-    }), width = _e.width, minHeight = _e.minHeight, isFullWidth = _e.isFullWidth;
+    }), width = _f.width, minHeight = _f.minHeight, isFullWidth = _f.isFullWidth;
     var customSectionStyles = {
         minHeight: "".concat(minHeight, "vh"),
         width: '100%',
@@ -194,18 +185,6 @@ var FlexGridCustomSection = (0, react_1.forwardRef)(function CustomSection(props
         }
         return 16;
     })();
-    var pedigree = jsonProperties === null || jsonProperties === void 0 ? void 0 : jsonProperties.pedigree;
-    var layouts = (0, util_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : [], zOrders);
-    var _f = (0, react_1.useState)([]), selectedRows = _f[0], setSelectedRows = _f[1];
-    var _g = (0, react_1.useState)([]), pinnedGBs = _g[0], setPinnedGBs = _g[1];
-    var onToggleGBPinned = function (gbId) {
-        setPinnedGBs(function (prev) {
-            if (prev.includes(gbId)) {
-                return prev.filter(function (id) { return id !== gbId; });
-            }
-            return __spreadArray(__spreadArray([], prev, true), [gbId], false);
-        });
-    };
     return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(gleStyles_1.S_gleStyles, { children: (0, jsx_runtime_1.jsx)(S_SectionWrapper, __assign({ ref: gleRef, "x-dlayout-section-type": "NO_NAME", onClick: onClickSection }, { children: (0, jsx_runtime_1.jsx)(components_1.CustomSection, __assign({}, props, { isMobile: isMobile, overrideStyles: {
                         minHeight: customSectionStyles.minHeight,
                         paddingTop: padding.top,
@@ -217,7 +196,10 @@ var FlexGridCustomSection = (0, react_1.forwardRef)(function CustomSection(props
                             maxWidth: customSectionStyles.maxWidth,
                             minWidth: isMobile ? GLE_MIN_WIDTH_MOBILE_PX : GLE_MIN_WIDTH_DESKTOP_PX,
                             fontSize: "".concat(baseFontSize, "px")
-                        } }, { children: pedigree.children.map(function (child) { return ((0, jsx_runtime_1.jsx)(groupUtils_1.default, { block: child, rowHeight: rowHeight, layoutItems: layouts[device === 'DESKTOP' ? 'lg' : 'sm'], cbs: props.componentBlocks, device: device, selectedRows: selectedRows, pinnedGBs: pinnedGBs, onToggleGBPinned: onToggleGBPinned, isEditMode: false }, child.blockId)); }) })) })) })) }) }));
+                        } }, { children: (_a = props.componentBlocks) === null || _a === void 0 ? void 0 : _a.map(function (cb, index) {
+                            var _a;
+                            return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(FlexGridItem_1.default, { cb: cb, index: index, device: device, rowHeight: rowHeight, zIndex: (_a = zOrders === null || zOrders === void 0 ? void 0 : zOrders[device === 'DESKTOP' ? 'desktop' : 'mobile'][cb.id]) !== null && _a !== void 0 ? _a : 0 }) }, cb.id));
+                        }) })) })) })) }) }));
 });
 var GridContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid; /* Space between grid items */\n  gap: 10px;\n  grid-auto-rows: minmax(", ", auto);\n  grid-template-columns: repeat(", ", 1fr);\n  grid-template-rows: repeat(\n    ", ",\n    minmax(", ", auto)\n  );\n  padding: 10px 10px;\n\n  * {\n    box-sizing: border-box;\n  }\n"], ["\n  display: grid; /* Space between grid items */\n  gap: 10px;\n  grid-auto-rows: minmax(", ", auto);\n  grid-template-columns: repeat(", ", 1fr);\n  grid-template-rows: repeat(\n    ", ",\n    minmax(", ", auto)\n  );\n  padding: 10px 10px;\n\n  * {\n    box-sizing: border-box;\n  }\n"])), function (props) { return "".concat(props.rowHeight, "px"); }, function (props) { return props.cols; }, function (props) { return props.sectionRow; }, function (props) { return "".concat(props.rowHeight, "px"); });
 var S_SectionWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web-test",
-  "version": "2.7.116",
+  "version": "2.7.118",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",

package/dist/src/sub/DynamicLayout/CompositionRenderer/FlexGridItemForCCB.d.ts

@@ -1,14 +0,0 @@
-/// <reference types="react" />
-import type { ComponentBlock } from '../sections/CustomSection/types';
-import type { Device } from '../sections/CustomSection/util/types';
-type Props = {
-    cb: ComponentBlock;
-    index: number;
-    device: Device;
-    rowHeight: number;
-    zIndex: number;
-    showPinned?: boolean;
-    style?: React.CSSProperties;
-};
-declare function FlexGridItem({ cb, index, device, rowHeight, zIndex, showPinned, style }: Props): JSX.Element;
-export default FlexGridItem;

package/dist/src/sub/DynamicLayout/CompositionRenderer/FlexGridItemForCCB.js

@@ -1,68 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var styled_components_1 = __importDefault(require("styled-components"));
-var ComponentBlockMatcher_1 = __importDefault(require("./ComponentBlockMatcher"));
-var gap = 10;
-function FlexGridItem(_a) {
-    var cb = _a.cb, index = _a.index, device = _a.device, rowHeight = _a.rowHeight, zIndex = _a.zIndex, showPinned = _a.showPinned, style = _a.style;
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    var defaultHeight = getMaxHeight(cb.jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT, device, rowHeight);
-    var gridArea = getGridAreaFromCB(cb.jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT, device);
-    var _b = (0, react_1.useState)(false), isPinned = _b[0], setIsPinned = _b[1];
-    return ((0, jsx_runtime_1.jsxs)(GridItem, __assign({ style: __assign({ zIndex: zIndex, gridArea: gridArea, position: 'relative', maxHeight: isPinned ? defaultHeight : 'none' }, style) }, { children: [showPinned && ((0, jsx_runtime_1.jsx)(S_Pinned, { children: isPinned ? ((0, jsx_runtime_1.jsx)("button", __assign({ type: "button", onClick: function () { return setIsPinned(false); } }, { children: "H\uACE0\uC815\uB428 \uD83D\uDCCC" }))) : ((0, jsx_runtime_1.jsx)("button", __assign({ type: "button", onClick: function () { return setIsPinned(true); } }, { children: "H\uB298\uC5B4\uB0A8 \uD83E\uDEB1" }))) })), (0, jsx_runtime_1.jsx)(ComponentBlockMatcher_1.default, { rowHeight: rowHeight, cbProps: cb, device: device, index: index })] })));
-}
-var S_Pinned = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  pointer-events: auto;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 9999999;\n"], ["\n  pointer-events: auto;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 9999999;\n"])));
-var GridItem = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: auto;\n  word-break: break-word;\n"], ["\n  height: auto;\n  word-break: break-word;\n"])));
-function getMaxHeight(props, device, rowHeight) {
-    if (device === 'DESKTOP') {
-        var CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS = props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS;
-        var height_1 = CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS * rowHeight +
-            (CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS - 1) * gap;
-        return height_1;
-    }
-    var rowsMobile = props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE'];
-    var height = rowsMobile * rowHeight + (rowsMobile - 1) * gap;
-    return height;
-}
-function getGridAreaFromCB(props, device) {
-    var CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX = props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX, CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY = props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY, cols = props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS, rows = props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS;
-    if (device === 'DESKTOP') {
-        var colStart_1 = CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX + 1;
-        var rowStart_1 = CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY + 1;
-        var rowEnd_1 = rows + rowStart_1;
-        var colEnd_1 = cols + colStart_1;
-        // <grid-row-start> / <grid-column-start> / <grid-row-end> / <grid-column-end>;
-        return "".concat(rowStart_1, " / ").concat(colStart_1, " / ").concat(rowEnd_1, " / ").concat(colEnd_1);
-    }
-    var startXMobile = props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX:MOBILE'];
-    var startYMobile = props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY:MOBILE'];
-    var colsMobile = props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS:MOBILE'];
-    var rowsMobile = props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE'];
-    var colStart = startXMobile + 1;
-    var rowStart = startYMobile + 1;
-    var rowEnd = rowsMobile + rowStart;
-    var colEnd = colsMobile + colStart;
-    return "".concat(rowStart, " / ").concat(colStart, " / ").concat(rowEnd, " / ").concat(colEnd);
-}
-exports.default = FlexGridItem;
-var templateObject_1, templateObject_2;

package/dist/src/sub/DynamicLayout/utils/groupUtils.d.ts

@@ -1,24 +0,0 @@
-/// <reference types="react" />
-import type { ComponentBlock } from '../sections/CustomSection/types';
-import type { Device } from '../sections/CustomSection/util/types';
-import type { LayoutItem } from 'publ-echo/dist/lib';
-import type { Block } from 'publ-echo/dist/lib/GridLayoutEditor/group';
-export declare function findAllChildrenCbIds(block: Block, targetGroupId: string): number[];
-export default function RenderPedigreeRecursively({ isEditMode, block, layoutItems, cbs, parentGroupArea, rowHeight, device, selectedRows, pinnedGBs, isParentGroupPinned, onToggleGBPinned }: {
-    isEditMode: boolean;
-    block: Block;
-    layoutItems: LayoutItem[];
-    cbs: ComponentBlock[];
-    rowHeight: number;
-    device: Device;
-    selectedRows: number[];
-    pinnedGBs: string[];
-    onToggleGBPinned: (gbId: string) => void;
-    isParentGroupPinned?: boolean;
-    parentGroupArea?: {
-        rowStart: number;
-        colStart: number;
-        rowEnd: number;
-        colEnd: number;
-    };
-}): JSX.Element;

package/dist/src/sub/DynamicLayout/utils/groupUtils.js

@@ -1,224 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.findAllChildrenCbIds = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var renderHelpers_1 = require("publ-echo-test/dist/lib/GridLayoutEditor/utils/renderHelpers");
-var styled_components_1 = __importDefault(require("styled-components"));
-var ErrorBoundary_1 = require("../components/Section/ErrorBoundary");
-var FlexGridItem_1 = __importStar(require("../CompositionRenderer/FlexGridItem"));
-function findAllChildrenCbIds(block, targetGroupId) {
-    // 현재 블록이 target group이면, 모든 하위 컴포넌트 블록 ID를 수집
-    if (block.blockId === targetGroupId) {
-        if (block.type === 'COMPONENT_BLOCK') {
-            return [block.componentBlockId];
-        }
-        // GROUP_BLOCK인 경우 모든 자식들의 ID를 재귀적으로 수집
-        return block.children.reduce(function (acc, child) {
-            return __spreadArray(__spreadArray([], acc, true), findAllChildrenCbIds(child, child.blockId), true);
-        }, []);
-    }
-    // 현재 블록이 target group이 아니고 COMPONENT_BLOCK이면 빈 배열 반환
-    if (block.type === 'COMPONENT_BLOCK') {
-        return [];
-    }
-    // GROUP_BLOCK이면 자식들에 대해 재귀적으로 탐색
-    return block.children.reduce(function (acc, child) {
-        return __spreadArray(__spreadArray([], acc, true), findAllChildrenCbIds(child, targetGroupId), true);
-    }, []);
-}
-exports.findAllChildrenCbIds = findAllChildrenCbIds;
-function RenderPedigreeRecursively(_a) {
-    var isEditMode = _a.isEditMode, block = _a.block, layoutItems = _a.layoutItems, cbs = _a.cbs, parentGroupArea = _a.parentGroupArea, rowHeight = _a.rowHeight, device = _a.device, selectedRows = _a.selectedRows, pinnedGBs = _a.pinnedGBs, _b = _a.isParentGroupPinned, isParentGroupPinned = _b === void 0 ? false : _b, onToggleGBPinned = _a.onToggleGBPinned;
-    var type = block.type;
-    if (type === 'GROUP_BLOCK') {
-        var childrenIds = findAllChildrenCbIds(block, block.blockId).map(function (i) { return i.toString(); });
-        var bounding_1 = (0, renderHelpers_1.getBoundingArea)(layoutItems, childrenIds);
-        if (!bounding_1) {
-            return (0, jsx_runtime_1.jsx)("div", { children: "GROUP: NO BOUNDING AREA" });
-        }
-        var gridArea_1 = getGridAreaFromGroup({
-            x: bounding_1.x,
-            y: bounding_1.y,
-            cols: bounding_1.w,
-            rows: bounding_1.h
-        });
-        var relativeGridArea_1 = parentGroupArea
-            ? calculateRelativeGridArea(gridArea_1, parentGroupArea)
-            : gridArea_1;
-        // 그룹의 시작 행을 기준으로 상대적인 selectedRows 계산
-        var relativeSelectedRows_1 = selectedRows
-            .map(function (row) { return row - gridArea_1.rowStart + 1; })
-            .filter(function (row) { return row >= 0 && row <= bounding_1.h; });
-        var isGBPinned_1 = pinnedGBs.includes(block.blockId);
-        var defaultHeight = getMaxHeight({ cols: bounding_1.w, rows: bounding_1.h, x: bounding_1.x, y: bounding_1.y }, rowHeight);
-        return ((0, jsx_runtime_1.jsxs)(S_GroupItem, __assign({ cols: bounding_1.w, sectionRow: bounding_1.h, isEditMode: isEditMode, rowHeight: rowHeight, selectedRows: relativeSelectedRows_1, style: {
-                gridArea: gridAreaObjToString(relativeGridArea_1),
-                display: 'grid',
-                zIndex: device === 'DESKTOP'
-                    ? block.zOrderDesktopInternal
-                    : block.zOrderMobileInternal,
-                maxHeight: isGBPinned_1 ? defaultHeight : 'none'
-            } }, { children: [isEditMode && ((0, jsx_runtime_1.jsx)(S_Pinned, { children: isGBPinned_1 ? ((0, jsx_runtime_1.jsx)("button", __assign({ type: "button", onClick: function () { return onToggleGBPinned(block.blockId); } }, { children: "H\uACE0\uC815\uB428 \uD83D\uDCCC" }))) : ((0, jsx_runtime_1.jsx)("button", __assign({ type: "button", onClick: function () { return onToggleGBPinned(block.blockId); } }, { children: "H\uB298\uC5B4\uB0A8 \uD83E\uDEB1" }))) })), block.children.map(function (child) { return ((0, jsx_runtime_1.jsx)(RenderPedigreeRecursively, { rowHeight: rowHeight, block: child, layoutItems: layoutItems, cbs: cbs, parentGroupArea: gridArea_1, device: device, selectedRows: relativeSelectedRows_1, pinnedGBs: pinnedGBs, onToggleGBPinned: onToggleGBPinned, isEditMode: isEditMode, isParentGroupPinned: isGBPinned_1 }, child.blockId)); })] })));
-    }
-    // default: TYPE === 'COMPONENT_BLOCK'
-    var cbIndex = cbs.findIndex(function (c) { return c.blockId === block.blockId; });
-    var cb = cbs[cbIndex];
-    if (!cb) {
-        return (0, jsx_runtime_1.jsxs)("div", { children: ["NO CB FOUND FOR ", block.blockId] });
-    }
-    var originalGridAreaString = (0, FlexGridItem_1.getGridAreaFromCB)(cb.jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT, device);
-    var originalGridArea = parseGridArea(originalGridAreaString);
-    // 부모 그룹이 있는 경우, 상대적 위치 계산
-    var relativeGridArea = parentGroupArea
-        ? calculateRelativeGridArea(originalGridArea, parentGroupArea)
-        : originalGridArea;
-    return (
-    // <S_GridItem
-    //   style={{
-    //     gridArea: gridAreaObjToString(relativeGridArea)
-    //   }}
-    //   data-og-grid-area={originalGridAreaString}
-    //   data-rel-grid-area={gridAreaObjToString(relativeGridArea)}
-    // >
-    (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(FlexGridItem_1.default, { cb: cb, index: cbIndex, device: device, rowHeight: rowHeight, zIndex: device === 'DESKTOP'
-                ? block.zOrderDesktopInternal
-                : block.zOrderMobileInternal, style: {
-                gridArea: gridAreaObjToString(relativeGridArea),
-                pointerEvents: isEditMode ? 'none' : 'auto',
-                boxShadow: isEditMode ? '0 0 0 2px red' : ''
-            }, showPinned: isEditMode && !parentGroupArea, isParentGroupPinned: isParentGroupPinned }) }, cb.id)
-    // </S_GridItem>
-    );
-}
-exports.default = RenderPedigreeRecursively;
-var S_Pinned = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  pointer-events: auto;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 9999999;\n"], ["\n  pointer-events: auto;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 9999999;\n"])));
-function clamp(num, min, max) {
-    return Math.max(Math.min(num, max), min);
-}
-function gridAreaObjToString(area) {
-    var rowStart = area.rowStart, colStart = area.colStart, rowEnd = area.rowEnd, colEnd = area.colEnd;
-    return "".concat(rowStart, " / ").concat(colStart, " / ").concat(rowEnd, " / ").concat(colEnd);
-}
-function getGridAreaFromGroup(position) {
-    var x = position.x, y = position.y, cols = position.cols, rows = position.rows;
-    var colStart = clamp(x + 1, 1, Math.max(1, 25 - cols));
-    var rowStart = clamp(y + 1, 1, Infinity);
-    var rowEnd = clamp(rows + rowStart, rowStart + 1, Infinity);
-    var colEnd = clamp(colStart + cols, colStart + 1, 25);
-    return {
-        rowStart: rowStart,
-        colStart: colStart,
-        rowEnd: rowEnd,
-        colEnd: colEnd
-    };
-    // const startXMobile = props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX:MOBILE'];
-    // const startYMobile = props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY:MOBILE'];
-    // const colsMobile = props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS:MOBILE'];
-    // const rowsMobile = props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE'];
-    // const colStart = clamp(startXMobile + 1, 1, Math.max(1, 9 - colsMobile));
-    // const rowStart = clamp(startYMobile + 1, 1, Infinity);
-    // const rowEnd = clamp(rowsMobile + rowStart, rowStart + 1, Infinity);
-    // const colEnd = clamp(colStart + colsMobile, colStart + 1, 9);
-    // return `${rowStart} / ${colStart} / ${rowEnd} / ${colEnd}`;
-}
-/**
- * grid-area 문자열을 파싱하여 객체로 변환합니다.
- * 예: "1 / 2 / 3 / 4" => { rowStart: 1, colStart: 2, rowEnd: 3, colEnd: 4 }
- */
-function parseGridArea(gridArea) {
-    var _a = gridArea
-        .split('/')
-        .map(function (str) { return parseInt(str.trim(), 10); }), rowStart = _a[0], colStart = _a[1], rowEnd = _a[2], colEnd = _a[3];
-    return { rowStart: rowStart, colStart: colStart, rowEnd: rowEnd, colEnd: colEnd };
-}
-/**
- * 부모 그룹 영역을 기준으로 컴포넌트의 상대적 위치를 계산합니다.
- * 예: 부모가 row 21에서 시작하고 컴포넌트가 row 21에 있다면, 상대적으로는 row 1에 위치하게 됩니다.
- */
-function calculateRelativeGridArea(componentArea, parentArea) {
-    return {
-        // 컴포넌트의 시작 위치에서 부모의 시작 위치를 빼서 상대적 위치 계산
-        rowStart: componentArea.rowStart - parentArea.rowStart + 1,
-        colStart: componentArea.colStart - parentArea.colStart + 1,
-        // 상대적 끝 위치도 같은 방식으로 계산
-        rowEnd: componentArea.rowEnd - parentArea.rowStart + 1,
-        colEnd: componentArea.colEnd - parentArea.colStart + 1
-    };
-}
-function getMaxHeight(props, rowHeight) {
-    var gap = 10;
-    var rows = props.rows;
-    var height = rows * rowHeight + (rows - 1) * gap;
-    return height;
-    // if (device === 'DESKTOP') {
-    //   const { rows } = props;
-    //   const height = rows * rowHeight + (rows - 1) * gap;
-    //   return height;
-    // }
-    // const rowsMobile = props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE'];
-    // const height = rowsMobile * rowHeight + (rowsMobile - 1) * gap;
-    // return height;
-}
-var S_GroupItem = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-shadow: ", ";\n  gap: 10px;\n  grid-template-columns: repeat(", ", 1fr);\n  grid-template-rows: ", ";\n  pointer-events: none;\n  position: relative; /* \uBC30\uC5F4\uC744 \uACF5\uBC31\uC73C\uB85C \uAD6C\uBD84\uB41C \uBB38\uC790\uC5F4\uB85C \uD569\uCE69\uB2C8\uB2E4. */\n"], ["\n  box-shadow: ", ";\n  gap: 10px;\n  grid-template-columns: repeat(", ", 1fr);\n  grid-template-rows: ", ";\n  pointer-events: none;\n  position: relative; /* \uBC30\uC5F4\uC744 \uACF5\uBC31\uC73C\uB85C \uAD6C\uBD84\uB41C \uBB38\uC790\uC5F4\uB85C \uD569\uCE69\uB2C8\uB2E4. */\n"])), function (props) { return (props.isEditMode ? '0 0 0 2px blue' : 'none'); }, function (props) { return props.cols; }, function (props) {
-    //     // 전체 행 개수만큼 배열을 생성하여 각 행의 CSS 값을 정의합니다.
-    return Array.from({ length: props.sectionRow })
-        .map(function (_, index) {
-        // props로 받은 selectedRows 배열에 현재 행(index)이 포함되어 있는지 확인합니다.
-        return props.selectedRows.includes(index)
-            ? "minmax(".concat(props.rowHeight, "px, auto)") // 포함되어 있다면 minmax 사용
-            : "".concat(props.rowHeight, "px");
-    } // 포함되어 있지 않다면 고정 높이 사용
-    )
-        .join(' ');
-});
-var templateObject_1, templateObject_2;