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

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 FlexGridItem_1 = __importDefault(require("./FlexGridItem"));
+var FlexGridItemForCCB_1 = __importDefault(require("./FlexGridItemForCCB"));
 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)(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));
+                                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));
                             }) })) })) })) })) })) }));
 });
 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 { Device } from '../sections/CustomSection/util/types';
+import type { CB_PLACEMENT_PROP_SPECS, Device } from '../sections/CustomSection/util/types';
 type Props = {
     cb: ComponentBlock;
     index: number;
@@ -9,6 +9,8 @@ type Props = {
     zIndex: number;
     showPinned?: boolean;
     style?: React.CSSProperties;
+    isParentGroupPinned: boolean;
 };
-declare function FlexGridItem({ cb, index, device, rowHeight, zIndex, showPinned, style }: Props): JSX.Element;
+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;
 export default FlexGridItem;

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

@@ -18,19 +18,20 @@ 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 ComponentBlockMatcher_1 = __importDefault(require("../sections/CustomSection/components/ComponentBlock/ComponentBlockMatcher"));
-require("./ComponentBlockMatcher");
+var ComponentBlockMatcherWithCCB_1 = __importDefault(require("../sections/CustomSection/components/ComponentBlock/ComponentBlockMatcherWithCCB"));
 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;
+    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;
     // 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 _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 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"])));
@@ -65,5 +66,6 @@ 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/CompositionRenderer/FlexGridItemForCCB.d.ts

@@ -0,0 +1,14 @@
+/// <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

@@ -0,0 +1,68 @@
+"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/GridAutoRowEditor/GridAutoRowEditor.js

@@ -55,7 +55,6 @@ 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");
@@ -66,6 +65,7 @@ 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,16 +77,15 @@ 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, _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 _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 componentBlocks = props.componentBlocks, jsonProperties = props.jsonProperties;
-    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 _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 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 _f = (0, react_1.useState)(null), selectedCB = _f[0], setSelectedCB = _f[1];
+    var _d = (0, react_1.useState)(null), selectedCB = _d[0], setSelectedCB = _d[1];
     var gleRef = (0, react_1.useRef)(null);
-    var _g = (0, react_1.useState)([]), selectedRows = _g[0], setSelectedRows = _g[1]; // 빈 배열로 초기화
+    var _e = (0, react_1.useState)([]), selectedRows = _e[0], setSelectedRows = _e[1]; // 빈 배열로 초기화
     var isMobile = device === 'MOBILE';
     var isEditMode = mode === 'EDIT';
     // const layoutByDevice = device === 'DESKTOP' ? 'lg' : 'sm';
@@ -144,10 +143,10 @@ var GridAutoRowEditor = (0, react_1.forwardRef)(function CustomSection(props, re
             setSelectedCB('BULK');
         }
     }, [selectedCB, shortcutKeyMode, sectionActionHandler, setSelectedCB]);
-    var _h = (0, util_1.parseCustomSectionPlacement)({
+    var _f = (0, util_1.parseCustomSectionPlacement)({
         isMobile: isMobile,
         customSectionProps: CB_PLACEMENT_PROP_SECTION
-    }), width = _h.width, minHeight = _h.minHeight, isFullWidth = _h.isFullWidth;
+    }), width = _f.width, minHeight = _f.minHeight, isFullWidth = _f.isFullWidth;
     var customSectionStyles = {
         minHeight: "".concat(minHeight, "vh"),
         width: '100%',
@@ -206,13 +205,25 @@ var GridAutoRowEditor = (0, react_1.forwardRef)(function CustomSection(props, re
         return 16;
     })();
     var pedigree = jsonProperties === null || jsonProperties === void 0 ? void 0 : jsonProperties.pedigree;
-    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);
+    // 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);
+        });
     };
-    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,
@@ -259,19 +270,26 @@ 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)));
-                                }), (_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));
-                                })] })) })) })) }) })) }));
+                                }), 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)); })] })) })) })) }) })) }));
 });
 function GroupBlockRender(_a) {
-    var block = _a.block, layouts = _a.layouts, pedigree = _a.pedigree, onDoubleClick = _a.onDoubleClick;
+    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 childrenIds = (0, group_1.findAllChildrenCbIds)(pedigree, block.blockId).map(function (i) { return i.toString(); });
-    var bounding = (0, renderHelpers_1.getBoundingArea)(layouts.lg, childrenIds);
+    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]);
     if (!bounding) {
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
     }
@@ -281,8 +299,25 @@ function GroupBlockRender(_a) {
         cols: bounding.w,
         rows: bounding.h
     });
-    return ((0, jsx_runtime_1.jsx)("div", { className: "group", style: { gridArea: gridArea, boxShadow: '0 0 0 3px #e602ff' }, onDoubleClick: onDoubleClick }));
+    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)); })] })));
 }
+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));
@@ -303,7 +338,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_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) {
+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) {
     // 전체 행 개수만큼 배열을 생성하여 각 행의 CSS 값을 정의합니다.
     return Array.from({ length: props.sectionRow })
         .map(function (_, index) {
@@ -315,7 +350,7 @@ var GridContainer = styled_components_1.default.div(templateObject_1 || (templat
     )
         .join(' ');
 });
-var S_SectionWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+var S_SectionWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
 exports.default = react_1.default.memo(GridAutoRowEditor);
 function getDefensiveFontSize(device, width) {
     if (device === 'MOBILE') {
@@ -323,4 +358,4 @@ function getDefensiveFontSize(device, width) {
     }
     return width * (0.0000246 * width - 0.01618);
 }
-var templateObject_1, templateObject_2;
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -178,6 +178,8 @@ 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;
@@ -388,6 +390,137 @@ 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;
@@ -673,6 +806,8 @@ 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,7 +1171,9 @@ 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_TEXT: "Today's Book Highlight",
+                    CB_CONTENT_PROP_TEXT_SPEC_PREFIX: '[Prefix]',
+                    CB_CONTENT_PROP_TEXT_SPEC_SUFFIX: '[Suffix]'
                 },
                 CB_CONTENT_PROP_VISIBILITY: {
                     CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP: true,

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

@@ -1,12 +1,9 @@
 "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 ComponentBlockMatcher_1 = __importDefault(require("./components/ComponentBlock/ComponentBlockMatcher"));
+var ComponentBlockMatcherWithCCB_1 = __importDefault(require("./components/ComponentBlock/ComponentBlockMatcherWithCCB"));
 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)(ComponentBlockMatcher_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)(ComponentBlockMatcherWithCCB_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 ComponentBlockMatcher_1 = __importDefault(require("./components/ComponentBlock/ComponentBlockMatcher"));
+var ComponentBlockMatcherWithCCB_1 = __importDefault(require("./components/ComponentBlock/ComponentBlockMatcherWithCCB"));
 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)(ComponentBlockMatcher_1.default, { rowHeight: rowHeight, cbProps: cb, device: device, index: index }) })));
+        })) }, { children: (0, jsx_runtime_1.jsx)(ComponentBlockMatcherWithCCB_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/ContentsCarousel/ContentsCarousel.js

@@ -131,7 +131,9 @@ function ContentsCarousel(props) {
                                 ? contentsCarouselHoverStyle === null || contentsCarouselHoverStyle === void 0 ? void 0 : contentsCarouselHoverStyle.customStyle
                                 : contentsCarouselNormalStyle === null || contentsCarouselNormalStyle === void 0 ? void 0 : contentsCarouselNormalStyle.customStyle }, { children: (0, jsx_runtime_1.jsx)(ContentsCarouselCore_1.default, __assign({ ref: swiperRef, className: "cb-contentscarousel", allowTouchMove: mode !== 'EDIT' ? true : false, onSwiper: onSwiper, onSlideChangeTransitionEnd: onSlideChangeTransitionEnd, onAutoplayTimeLeft: onAutoplayTimeLeft, slidesPerView: 1, styles: isHovered ? contentsCarouselHoverStyle : contentsCarouselNormalStyle, effect: CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE === 'CARD'
                                     ? 'cards'
-                                    : CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE === null || CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE === void 0 ? void 0 : CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE.toLowerCase() }, { children: (0, createCompositions_1.createCompositions)({
+                                    : CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE === 'FADEOUTANDIN'
+                                        ? 'fade'
+                                        : CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE === null || CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE === void 0 ? void 0 : CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE.toLowerCase() }, { children: (0, createCompositions_1.createCompositions)({
                                     valueType: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE,
                                     queryPath: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA,
                                     limit: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_ITEMCOUNTS,

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/hooks/useFlexGridLayout.js

@@ -81,9 +81,9 @@ var useFlexGridLayout = function (_a) {
             OUTSET1: { top: -50, left: ccbLeft },
             OUTSET2: { top: -50, left: "".concat(ccbCenterX, "px"), transform: 'translateX(-50%)' },
             OUTSET3: { top: -50, right: ccbRight },
-            OUTSET4: { top: ccbTop, right: 50 },
-            OUTSET5: { top: "".concat(ccbCenterY, "px"), right: 50, transform: 'translateY(-50%)' },
-            OUTSET6: { bottom: ccbBottom, right: 50 },
+            OUTSET4: { top: ccbTop, right: -50 },
+            OUTSET5: { top: "".concat(ccbCenterY, "px"), right: -50, transform: 'translateY(-50%)' },
+            OUTSET6: { bottom: ccbBottom, right: -50 },
             OUTSET7: { bottom: -50, right: ccbRight },
             OUTSET8: { bottom: -50, left: "".concat(ccbCenterX, "px"), transform: 'translateX(-50%)' },
             OUTSET9: { bottom: -50, left: ccbLeft },

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

@@ -19,6 +19,7 @@ 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/ContentsList/hooks/useFlexGridLayout.js

@@ -81,9 +81,9 @@ var useFlexGridLayout = function (_a) {
             OUTSET1: { top: -50, left: ccbLeft },
             OUTSET2: { top: -50, left: "".concat(ccbCenterX, "px"), transform: 'translateX(-50%)' },
             OUTSET3: { top: -50, right: ccbRight },
-            OUTSET4: { top: ccbTop, right: 50 },
-            OUTSET5: { top: "".concat(ccbCenterY, "px"), right: 50, transform: 'translateY(-50%)' },
-            OUTSET6: { bottom: ccbBottom, right: 50 },
+            OUTSET4: { top: ccbTop, right: -50 },
+            OUTSET5: { top: "".concat(ccbCenterY, "px"), right: -50, transform: 'translateY(-50%)' },
+            OUTSET6: { bottom: ccbBottom, right: -50 },
             OUTSET7: { bottom: -50, right: ccbRight },
             OUTSET8: { bottom: -50, left: "".concat(ccbCenterX, "px"), transform: 'translateX(-50%)' },
             OUTSET9: { bottom: -50, left: ccbLeft },

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

@@ -137,15 +137,13 @@ var body2Regular = (0, styled_components_1.css)(templateObject_4 || (templateObj
     var theme = _a.theme;
     return theme.desktopLineHeight.body2;
 });
-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) {
+// 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 styleTheme = _a.styleTheme;
     return styleTheme &&
         {
@@ -153,24 +151,24 @@ var S_TextLabel = styled_components_1.default.div(templateObject_7 || (templateO
             body2Regular: body2Regular
         }[styleTheme];
 });
-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 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 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_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 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 color = _a.color;
     return color;
 });
-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 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 color = _a.color;
     return color;
 });
-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 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 disabled = _a.disabled;
     return (disabled ? 'not-allowed' : 'pointer');
 }, function (_a) {
@@ -178,4 +176,4 @@ var S_Pointer = styled_components_1.default.div(templateObject_13 || (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, templateObject_12, templateObject_13;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

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;
-declare function Text(props: Props): JSX.Element;
-export default Text;
+export default function Text(props: Props): JSX.Element;
+export {};

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;
+    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 cLinkValue = function () {
         if (CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE === 'DATA' ||
             CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE === 'DELEGATEDDATA') {
@@ -115,16 +115,27 @@ 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.jsx)(S_CB_Box_1.S_CB_Box, __assign({ onMouseEnter: function (e) {
+                }, ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsxs)(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: textValue() === 'ERROR' ? 'EDITOR:FALLBACK_TEXT' : textValue() })) }))] }));
+                    }, 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] })) }))] }));
 }
+exports.default = Text;
 function getTextStyles(props, device) {
     var availableSpecCodes = [
         'CB_STYLE_PROP_TEXT_SPEC_TYPEFACE',
@@ -138,4 +149,3 @@ 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/CustomSection/util/types.d.ts

@@ -146,7 +146,7 @@ export type CB_CONTENTSCAROUSEL_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
     CB_EFFECT_PROP_CONTENTSCAROUSEL: CB_EFFECT_PROP_CONTENTSCAROUSEL;
 };
 export type CB_EFFECT_PROP_CONTENTSCAROUSEL = {
-    CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE: 'SLIDE' | 'CUBE' | 'FADE' | 'CARD' | 'COVERFLOW' | 'FLIP';
+    CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE: 'SLIDE' | 'CUBE' | 'FADEOUTANDIN' | 'CARD' | 'COVERFLOW' | 'FLIP';
 };
 export type CB_SLIDEBANNER_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
     CB_CONTENT_PROP_SLIDEBANNER: CB_CONTENT_PROP_SLIDEBANNER;

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

@@ -37,6 +37,15 @@ 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 };
 };
@@ -49,7 +58,8 @@ 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 FlexGridItem_1 = __importDefault(require("./CustomSection/FlexGridItem"));
+var groupUtils_1 = __importDefault(require("../utils/groupUtils"));
+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"));
@@ -59,13 +69,12 @@ 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;
-    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 _a = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _a.device, editingSectionId = _a.editingSectionId, mode = _a.mode, shortcutKeyMode = _a.shortcutKeyMode, sectionActionHandler = _a.sectionActionHandler;
     var componentBlocks = props.componentBlocks, jsonProperties = props.jsonProperties;
-    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 _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 containerRef = (0, react_1.useRef)(null);
     var size = (0, useResizableObserver_1.useResizeObserver)({ ref: containerRef, box: 'border-box' });
-    var _e = (0, react_1.useState)(null), selectedCB = _e[0], setSelectedCB = _e[1];
+    var _d = (0, react_1.useState)(null), selectedCB = _d[0], setSelectedCB = _d[1];
     var gleRef = (0, react_1.useRef)(null);
     var isMobile = device === 'MOBILE';
     var isEditMode = mode === 'EDIT';
@@ -124,10 +133,10 @@ var FlexGridCustomSection = (0, react_1.forwardRef)(function CustomSection(props
             setSelectedCB('BULK');
         }
     }, [selectedCB, shortcutKeyMode, sectionActionHandler, setSelectedCB]);
-    var _f = (0, util_1.parseCustomSectionPlacement)({
+    var _e = (0, util_1.parseCustomSectionPlacement)({
         isMobile: isMobile,
         customSectionProps: CB_PLACEMENT_PROP_SECTION
-    }), width = _f.width, minHeight = _f.minHeight, isFullWidth = _f.isFullWidth;
+    }), width = _e.width, minHeight = _e.minHeight, isFullWidth = _e.isFullWidth;
     var customSectionStyles = {
         minHeight: "".concat(minHeight, "vh"),
         width: '100%',
@@ -185,6 +194,18 @@ 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,
@@ -196,10 +217,7 @@ 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: (_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));
-                        }) })) })) })) }) }));
+                        } }, { 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)); }) })) })) })) }) }));
 });
 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/dist/src/sub/DynamicLayout/utils/groupUtils.d.ts

@@ -0,0 +1,24 @@
+/// <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

@@ -0,0 +1,224 @@
+"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;

package/package.json

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