pds-dev-kit-web-test 2.5.706 → 2.5.708

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

@@ -1,55 +1,73 @@
 "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 __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]; } };
+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];
     }
-    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;
+    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 __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];
-        }
+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));
+  }
+  return to.concat(ar || Array.prototype.slice.call(from));
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __importDefault = this && this.__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
 };
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 var jsx_runtime_1 = require("react/jsx-runtime");
 var publ_echo_test_1 = require("publ-echo-test");
 var group_1 = require("publ-echo-test/dist/lib/GridLayoutEditor/group");
@@ -73,1031 +91,1148 @@ 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 CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
-    var _a, _b, _c, _d;
-    var _e = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _e.device, editingSectionId = _e.editingSectionId, mode = _e.mode, shortcutKeyMode = _e.shortcutKeyMode, zoomScale = _e.zoomScale, placementRestriction = _e.placementRestriction, sectionActionHandler = _e.sectionActionHandler;
-    var componentBlocks = props.componentBlocks, jsonProperties = props.jsonProperties;
-    var sectionPedigree = jsonProperties === null || jsonProperties === void 0 ? void 0 : jsonProperties.pedigree;
-    var _f = (0, react_1.useState)(sectionPedigree), pedigreeState = _f[0], setPedigreeState = _f[1];
-    (0, react_1.useEffect)(function () {
-        setPedigreeState(sectionPedigree);
-    }, [sectionPedigree]);
-    var _g = jsonProperties, _h = _g.data, CB_PLACEMENT_PROP_SECTION = _h.CB_PLACEMENT_PROP_SECTION, CB_LAYOUT_PROP_PADDING = _h.CB_LAYOUT_PROP_PADDING, CB_CONTENT_PROP_SECTION = _h.CB_CONTENT_PROP_SECTION, zOrders = _g.zOrders;
-    var colsDesktop = (_a = CB_PLACEMENT_PROP_SECTION.CB_PLACEMENT_PROP_SECTION_SPEC_COLS) !== null && _a !== void 0 ? _a : 24;
-    var colsMobile = (_b = CB_PLACEMENT_PROP_SECTION['CB_PLACEMENT_PROP_SECTION_SPEC_COLS:MOBILE']) !== null && _b !== void 0 ? _b : 8;
-    var _j = (0, react_1.useState)(null), selectedBlockId = _j[0], setSelectedBlockId = _j[1];
-    var gleRef = (0, react_1.useRef)(null);
-    var _k = (0, react_1.useState)(50), rowHeight = _k[0], setRowHeight = _k[1];
-    var _l = (0, react_1.useState)(16), baseFontSize = _l[0], setBaseFontSize = _l[1];
-    var isMobile = device === 'MOBILE';
-    var isEditMode = mode === 'EDIT';
-    var layoutByDevice = device === 'DESKTOP' ? 'lg' : 'sm';
-    var _m = (0, react_1.useState)(function () {
-        var _a = (0, util_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : [], zOrders, placementRestriction), lg = _a.lg, sm = _a.sm;
-        return {
-            lg: lg,
-            sm: sm
-        };
-    }), layouts = _m[0], setLayouts = _m[1];
-    var _o = (0, react_1.useState)('ROOT'), editingGroupBlock = _o[0], setEditingGroupBlock = _o[1];
-    var _p = (0, react_1.useState)([]), bulkBlockIds = _p[0], setBulkBlockIds = _p[1];
-    (0, react_1.useEffect)(function () {
-        if (editingGroupBlock) {
-            var found = (0, group_1.findBlockByBlockId)(sectionPedigree, editingGroupBlock);
-            if (!found) {
-                setEditingGroupBlock('ROOT');
-                return;
-            }
-            if (found.type === 'GROUP_BLOCK' && found.children.length === 0) {
-                setEditingGroupBlock('ROOT');
-                return;
-            }
-        }
-    }, [editingGroupBlock, sectionPedigree]);
-    var newblock = bulkBlockIds.length > 0
-        ? (0, group_1.addBulkToTarget)(pedigreeState, editingGroupBlock, bulkBlockIds)
-        : pedigreeState;
-    (0, react_1.useImperativeHandle)(ref, function () {
-        return {
-            selectCB: function (blockId) {
-                setSelectedBlockId(blockId);
-            },
-            selectCBInBulk: function (blockIds) {
-                setBulkBlockIds(blockIds);
-            },
-            selectGroup: function (groupBlockId) {
-                setBulkBlockIds([]);
-                setSelectedBlockId(groupBlockId);
-            }
-        };
-    }, [componentBlocks]);
-    (0, react_1.useLayoutEffect)(function () {
-        var parsedLayouts = (0, util_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : [], zOrders, placementRestriction);
-        setLayouts(function (prev) {
-            var _a;
-            var _b;
-            var group = (0, group_2.getGroupCB)(prev[layoutByDevice]);
-            var groupedCBIds = (_b = group === null || group === void 0 ? void 0 : group.childrenIds) !== null && _b !== void 0 ? _b : [];
-            var filteredLayout = (0, group_2.filterItemsById)(parsedLayouts[layoutByDevice], groupedCBIds);
-            if (group === null || group === void 0 ? void 0 : group.groupLayouts) {
-                var groupCbs = parsedLayouts[layoutByDevice].filter(function (each) {
-                    return groupedCBIds.includes(each.i);
-                });
-                if (groupCbs.length > 0) {
-                    var newGroupLayout = (0, group_2.getGroupForMultiple)(groupCbs);
-                    filteredLayout.push(newGroupLayout);
-                }
-            }
-            return __assign(__assign({}, prev), (_a = {}, _a[layoutByDevice] = filteredLayout, _a));
+  var _a, _b, _c, _d;
+  var _e = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext),
+    device = _e.device,
+    editingSectionId = _e.editingSectionId,
+    mode = _e.mode,
+    shortcutKeyMode = _e.shortcutKeyMode,
+    zoomScale = _e.zoomScale,
+    placementRestriction = _e.placementRestriction,
+    sectionActionHandler = _e.sectionActionHandler;
+  var componentBlocks = props.componentBlocks,
+    jsonProperties = props.jsonProperties;
+  var sectionPedigree = jsonProperties === null || jsonProperties === void 0 ? void 0 : jsonProperties.pedigree;
+  var _f = (0, react_1.useState)(sectionPedigree),
+    pedigreeState = _f[0],
+    setPedigreeState = _f[1];
+  (0, react_1.useEffect)(function () {
+    setPedigreeState(sectionPedigree);
+  }, [sectionPedigree]);
+  var _g = jsonProperties,
+    _h = _g.data,
+    CB_PLACEMENT_PROP_SECTION = _h.CB_PLACEMENT_PROP_SECTION,
+    CB_LAYOUT_PROP_PADDING = _h.CB_LAYOUT_PROP_PADDING,
+    CB_CONTENT_PROP_SECTION = _h.CB_CONTENT_PROP_SECTION,
+    zOrders = _g.zOrders;
+  var colsDesktop = (_a = CB_PLACEMENT_PROP_SECTION.CB_PLACEMENT_PROP_SECTION_SPEC_COLS) !== null && _a !== void 0 ? _a : 24;
+  var colsMobile = (_b = CB_PLACEMENT_PROP_SECTION['CB_PLACEMENT_PROP_SECTION_SPEC_COLS:MOBILE']) !== null && _b !== void 0 ? _b : 8;
+  var _j = (0, react_1.useState)(null),
+    selectedBlockId = _j[0],
+    setSelectedBlockId = _j[1];
+  var gleRef = (0, react_1.useRef)(null);
+  var _k = (0, react_1.useState)(50),
+    rowHeight = _k[0],
+    setRowHeight = _k[1];
+  var _l = (0, react_1.useState)(16),
+    baseFontSize = _l[0],
+    setBaseFontSize = _l[1];
+  var isMobile = device === 'MOBILE';
+  var isEditMode = mode === 'EDIT';
+  var layoutByDevice = device === 'DESKTOP' ? 'lg' : 'sm';
+  var _m = (0, react_1.useState)(function () {
+      var _a = (0, util_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : [], zOrders, placementRestriction),
+        lg = _a.lg,
+        sm = _a.sm;
+      return {
+        lg: lg,
+        sm: sm
+      };
+    }),
+    layouts = _m[0],
+    setLayouts = _m[1];
+  var _o = (0, react_1.useState)('ROOT'),
+    editingGroupBlock = _o[0],
+    setEditingGroupBlock = _o[1];
+  var _p = (0, react_1.useState)([]),
+    bulkBlockIds = _p[0],
+    setBulkBlockIds = _p[1];
+  (0, react_1.useEffect)(function () {
+    if (editingGroupBlock) {
+      var found = (0, group_1.findBlockByBlockId)(sectionPedigree, editingGroupBlock);
+      if (!found) {
+        setEditingGroupBlock('ROOT');
+        return;
+      }
+      if (found.type === 'GROUP_BLOCK' && found.children.length === 0) {
+        setEditingGroupBlock('ROOT');
+        return;
+      }
+    }
+  }, [editingGroupBlock, sectionPedigree]);
+  var newblock = bulkBlockIds.length > 0 ? (0, group_1.addBulkToTarget)(pedigreeState, editingGroupBlock, bulkBlockIds) : pedigreeState;
+  (0, react_1.useImperativeHandle)(ref, function () {
+    return {
+      selectCB: function (blockId) {
+        setSelectedBlockId(blockId);
+      },
+      selectCBInBulk: function (blockIds) {
+        setBulkBlockIds(blockIds);
+      },
+      selectGroup: function (groupBlockId) {
+        setBulkBlockIds([]);
+        setSelectedBlockId(groupBlockId);
+      }
+    };
+  }, [componentBlocks]);
+  (0, react_1.useLayoutEffect)(function () {
+    var parsedLayouts = (0, util_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : [], zOrders, placementRestriction);
+    setLayouts(function (prev) {
+      var _a;
+      var _b;
+      var group = (0, group_2.getGroupCB)(prev[layoutByDevice]);
+      var groupedCBIds = (_b = group === null || group === void 0 ? void 0 : group.childrenIds) !== null && _b !== void 0 ? _b : [];
+      var filteredLayout = (0, group_2.filterItemsById)(parsedLayouts[layoutByDevice], groupedCBIds);
+      if (group === null || group === void 0 ? void 0 : group.groupLayouts) {
+        var groupCbs = parsedLayouts[layoutByDevice].filter(function (each) {
+          return groupedCBIds.includes(each.i);
         });
-    }, [componentBlocks, group_2.getGroupCB, layoutByDevice, zOrders]);
-    (0, react_1.useEffect)(function () {
-        if (editingSectionId !== props.id) {
-            setSelectedBlockId(null);
-            setBulkBlockIds([]);
-            setEditingGroupBlock('ROOT');
-        }
-    }, [editingSectionId]);
-    var workDir = (_c = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _c !== void 0 ? _c : '/ROOT';
-    (0, react_1.useEffect)(function () {
-        sectionActionHandler &&
-            sectionActionHandler({
-                type: '@CUSTOMSECTION/WORKDIR_CHANGED',
-                payload: {
-                    workDir: workDir
-                }
-            });
-    }, [workDir]);
-    // NOTE: 추후에 event를 외부에서 전달받게하거나, 아예 상태를 끌어올리거나 해야합니다.
-    (0, react_1.useLayoutEffect)(function () {
-        var _a, _b, _c, _d, _e, _f;
-        if (props.id !== editingSectionId) {
-            return;
+        if (groupCbs.length > 0) {
+          var newGroupLayout = (0, group_2.getGroupForMultiple)(groupCbs);
+          filteredLayout.push(newGroupLayout);
         }
-        if (!shortcutKeyMode) {
-            return;
-        }
-        if (shortcutKeyMode === 'SELECT_ALL') {
-            makeAllInOneGroup();
-            return;
-        }
-        // esc
-        if (shortcutKeyMode === 'MANUAL_BULK_BREAK') {
-            if (selectedBlockId &&
-                editingGroupBlock !== selectedBlockId &&
-                editingGroupBlock !== 'ROOT') {
-                setSelectedBlockId(null);
-                sectionActionHandler &&
-                    sectionActionHandler({
-                        type: '@CUSTOMSECTION/BLOCK_CLICKED',
-                        payload: {
-                            block: {
-                                blockId: editingGroupBlock,
-                                type: 'GROUP_BLOCK',
-                                workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND',
-                                childrenBlockIds: (_b = (0, group_1.findDirectChildrenBlockIds)(newblock, editingGroupBlock)) !== null && _b !== void 0 ? _b : [],
-                                childrenCBIds: (_c = (0, group_1.findDirectChildrenCbIds)(newblock, editingGroupBlock)) !== null && _c !== void 0 ? _c : []
-                            }
-                        }
-                    });
-                return;
-            }
-            if (bulkBlockIds.length > 0) {
-                setBulkBlockIds([]);
-                setSelectedBlockId(null);
-                sectionActionHandler &&
-                    sectionActionHandler({
-                        type: '@CUSTOMSECTION/BLOCK_CLICKED',
-                        payload: {
-                            block: {
-                                blockId: editingGroupBlock,
-                                type: 'GROUP_BLOCK',
-                                workDir: (_d = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _d !== void 0 ? _d : 'NOT-FOUND',
-                                childrenBlockIds: (_e = (0, group_1.findDirectChildrenBlockIds)(newblock, editingGroupBlock)) !== null && _e !== void 0 ? _e : [],
-                                childrenCBIds: (_f = (0, group_1.findDirectChildrenCbIds)(newblock, editingGroupBlock)) !== null && _f !== void 0 ? _f : []
-                            }
-                        }
-                    });
-                return;
-            }
-            if (editingGroupBlock !== 'ROOT') {
-                setEditingGroupBlock('ROOT');
-                setSelectedBlockId(null);
-                sectionActionHandler &&
-                    sectionActionHandler({
-                        type: '@CUSTOMSECTION/BULK_DISMISSED',
-                        payload: {
-                            message: 'MANUAL_BULK_BREAK_OR_ESC',
-                            editingGroupBlock: 'ROOT'
-                        }
-                    });
-                return;
-            }
-            if (editingGroupBlock === 'ROOT') {
-                setSelectedBlockId(null);
-                sectionActionHandler &&
-                    sectionActionHandler({
-                        type: '@CUSTOMSECTION/BULK_DISMISSED',
-                        payload: {
-                            message: 'MANUAL_BULK_BREAK_OR_ESC',
-                            editingGroupBlock: 'ROOT'
-                        }
-                    });
-            }
-        }
-    }, [shortcutKeyMode, setSelectedBlockId]);
-    (0, react_1.useLayoutEffect)(function () {
-        var _a;
-        if (props.id !== editingSectionId) {
-            return;
-        }
-        if (shortcutKeyMode === 'MANUAL_COLLISION_SELECT') {
-            if (!selectedBlockId || selectedBlockId === 'BULK') {
-                return;
-            }
-            var selectedCBId = selectedBlockId ? (0, group_1.formatBlockIdToCbId)(selectedBlockId) : undefined;
-            if (!selectedCBId) {
-                return;
-            }
-            var bulks_1 = getCollisionGroupIds(selectedCBId);
-            if (selectedBlockId) {
-                bulks_1.push(selectedBlockId);
-            }
-            setBulkBlockIds(function (prev) {
-                var set = new Set(__spreadArray(__spreadArray([], prev, true), bulks_1, true));
-                return Array.from(set);
-            });
-            setSelectedBlockId(null);
-            var newBulkCBIds = bulks_1
-                .map(function (id) { return (0, group_1.formatBlockIdToCbId)(id); })
-                .filter(function (each) { return each !== null; });
-            var childrenCBIds = [];
-            if (newBulkCBIds.length === 0) {
-                var oneCB = (0, group_1.findOneComponentBlock)(newblock, bulks_1[0]);
-                childrenCBIds = oneCB ? [oneCB] : [];
-            }
-            else {
-                childrenCBIds = newBulkCBIds;
-            }
-            var groupDisabled = getWorkDirDirectChildrenLength() === __spreadArray(__spreadArray([], bulkBlockIds, true), bulks_1, true).length;
-            sectionActionHandler &&
-                sectionActionHandler({
-                    type: '@CUSTOMSECTION/BLOCK_CLICKED',
-                    payload: {
-                        block: {
-                            type: 'BULK',
-                            blockId: 'BULK',
-                            childrenBlockIds: bulks_1,
-                            workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND',
-                            childrenCBIds: childrenCBIds,
-                            groupDisabled: groupDisabled && editingGroupBlock !== 'ROOT'
-                        }
-                    }
-                });
-            return;
-        }
-    }, [selectedBlockId, shortcutKeyMode, sectionActionHandler, bulkBlockIds, setSelectedBlockId]);
-    var makeAllInOneGroup = function () {
-        var _a, _b, _c, _d, _e;
-        var allRootChildIds = (0, group_1.findDirectChildrenBlockIds)(pedigreeState, editingGroupBlock);
-        if (allRootChildIds.length === 1) {
-            var block = (0, group_1.findBlockByBlockId)(newblock, allRootChildIds[0]);
-            if (!block) {
-                return;
-            }
-            setSelectedBlockId(block.blockId);
-            setBulkBlockIds([]);
-            if (block.type === 'COMPONENT_BLOCK') {
-                sectionActionHandler &&
-                    sectionActionHandler({
-                        type: '@CUSTOMSECTION/BLOCK_CLICKED',
-                        payload: {
-                            block: {
-                                blockId: block.blockId,
-                                type: block.type,
-                                cbId: block.componentBlockId,
-                                workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND'
-                            }
-                        }
-                    });
-                return;
-            }
-            if (block.type === 'GROUP_BLOCK') {
-                sectionActionHandler &&
-                    sectionActionHandler({
-                        type: '@CUSTOMSECTION/BLOCK_CLICKED',
-                        payload: {
-                            block: {
-                                blockId: block.blockId,
-                                type: 'GROUP_BLOCK',
-                                workDir: (_b = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _b !== void 0 ? _b : 'NOT-FOUND',
-                                childrenBlockIds: (_c = (0, group_1.findDirectChildrenBlockIds)(newblock, block.blockId)) !== null && _c !== void 0 ? _c : [],
-                                childrenCBIds: (_d = (0, group_1.findDirectChildrenCbIds)(newblock, block.blockId)) !== null && _d !== void 0 ? _d : []
-                            }
-                        }
-                    });
+      }
+      return __assign(__assign({}, prev), (_a = {}, _a[layoutByDevice] = filteredLayout, _a));
+    });
+  }, [componentBlocks, group_2.getGroupCB, layoutByDevice, zOrders]);
+  (0, react_1.useEffect)(function () {
+    if (editingSectionId !== props.id) {
+      setSelectedBlockId(null);
+      setBulkBlockIds([]);
+      setEditingGroupBlock('ROOT');
+    }
+  }, [editingSectionId]);
+  var workDir = (_c = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _c !== void 0 ? _c : '/ROOT';
+  (0, react_1.useEffect)(function () {
+    sectionActionHandler && sectionActionHandler({
+      type: '@CUSTOMSECTION/WORKDIR_CHANGED',
+      payload: {
+        workDir: workDir
+      }
+    });
+  }, [workDir]);
+  // NOTE: 추후에 event를 외부에서 전달받게하거나, 아예 상태를 끌어올리거나 해야합니다.
+  (0, react_1.useLayoutEffect)(function () {
+    var _a, _b, _c, _d, _e, _f;
+    if (props.id !== editingSectionId) {
+      return;
+    }
+    if (!shortcutKeyMode) {
+      return;
+    }
+    if (shortcutKeyMode === 'SELECT_ALL') {
+      makeAllInOneGroup();
+      return;
+    }
+    // esc
+    if (shortcutKeyMode === 'MANUAL_BULK_BREAK') {
+      if (selectedBlockId && editingGroupBlock !== selectedBlockId && editingGroupBlock !== 'ROOT') {
+        setSelectedBlockId(null);
+        sectionActionHandler && sectionActionHandler({
+          type: '@CUSTOMSECTION/BLOCK_CLICKED',
+          payload: {
+            block: {
+              blockId: editingGroupBlock,
+              type: 'GROUP_BLOCK',
+              workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND',
+              childrenBlockIds: (_b = (0, group_1.findDirectChildrenBlockIds)(newblock, editingGroupBlock)) !== null && _b !== void 0 ? _b : [],
+              childrenCBIds: (_c = (0, group_1.findDirectChildrenCbIds)(newblock, editingGroupBlock)) !== null && _c !== void 0 ? _c : []
             }
-            return;
-        }
-        setBulkBlockIds(allRootChildIds);
-        var newBulkCBIds = allRootChildIds
-            .map(function (id) { return (0, group_1.formatBlockIdToCbId)(id); })
-            .filter(function (each) { return each !== null; });
-        var childrenCBIds = [];
-        if (newBulkCBIds.length === 0) {
-            var oneCB = (0, group_1.findOneComponentBlock)(newblock, allRootChildIds[0]);
-            childrenCBIds = oneCB ? [oneCB] : [];
-        }
-        else {
-            childrenCBIds = newBulkCBIds;
-        }
-        var groupDisabled = getWorkDirDirectChildrenLength() === allRootChildIds.length;
-        sectionActionHandler &&
-            sectionActionHandler({
-                type: '@CUSTOMSECTION/BLOCK_CLICKED',
-                payload: {
-                    block: {
-                        type: 'BULK',
-                        blockId: 'BULK',
-                        childrenBlockIds: allRootChildIds,
-                        workDir: (_e = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _e !== void 0 ? _e : 'NOT-FOUND',
-                        childrenCBIds: childrenCBIds,
-                        groupDisabled: groupDisabled && editingGroupBlock !== 'ROOT'
-                    }
-                }
-            });
-    };
-    var getCollisionGroupIds = function (cdId1) {
-        var layoutItem = (0, renderHelpers_1.getLayoutItem)(layouts[layoutByDevice], cdId1.toString());
-        if (!layoutItem) {
-            return [];
-        }
-        var allCollisions = (0, renderHelpers_1.getAllCollisions)(layouts[layoutByDevice], layoutItem);
-        var allCollisionsCbIds = allCollisions.map(function (each) { return Number(each.i); });
-        var workDirChildrenBlockIds = (0, group_1.findDirectChildrenBlockIds)(newblock, editingGroupBlock);
-        var collisions = workDirChildrenBlockIds.filter(function (each) {
-            var cbId = (0, group_1.formatBlockIdToCbId)(each);
-            var allCollisions = (0, group_1.findAllChildrenCbIds)(newblock, each);
-            if (cbId !== null && allCollisionsCbIds.includes(cbId)) {
-                return true;
+          }
+        });
+        return;
+      }
+      if (bulkBlockIds.length > 0) {
+        setBulkBlockIds([]);
+        setSelectedBlockId(null);
+        sectionActionHandler && sectionActionHandler({
+          type: '@CUSTOMSECTION/BLOCK_CLICKED',
+          payload: {
+            block: {
+              blockId: editingGroupBlock,
+              type: 'GROUP_BLOCK',
+              workDir: (_d = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _d !== void 0 ? _d : 'NOT-FOUND',
+              childrenBlockIds: (_e = (0, group_1.findDirectChildrenBlockIds)(newblock, editingGroupBlock)) !== null && _e !== void 0 ? _e : [],
+              childrenCBIds: (_f = (0, group_1.findDirectChildrenCbIds)(newblock, editingGroupBlock)) !== null && _f !== void 0 ? _f : []
             }
-            var hasCollision = allCollisions.some(function (each) { return allCollisionsCbIds.includes(each); });
-            return hasCollision;
+          }
         });
-        return __spreadArray(__spreadArray([], collisions, true), [(0, group_1.formatCbIdToBlockId)(cdId1)], false);
-    };
-    var _q = (0, util_1.parseCustomSectionPlacement)({
-        isMobile: isMobile,
-        customSectionProps: CB_PLACEMENT_PROP_SECTION
-    }), rows = _q.rows, width = _q.width, minHeight = _q.minHeight, isFullWidth = _q.isFullWidth;
-    var customSectionStyles = {
-        minHeight: "".concat(minHeight, "vh"),
-        width: '100%',
-        maxWidth: isFullWidth ? '' : "".concat(width, "px")
-    };
-    var breakpoint = device === 'MOBILE' ? 'sm' : 'lg';
-    var onClickCB = function (id) {
-        var _a, _b, _c, _d, _e, _f, _g;
-        var blockId = (0, group_1.formatCbIdToBlockId)(id);
-        if (!isEditMode) {
-            return;
+        return;
+      }
+      if (editingGroupBlock !== 'ROOT') {
+        setEditingGroupBlock('ROOT');
+        setSelectedBlockId(null);
+        sectionActionHandler && sectionActionHandler({
+          type: '@CUSTOMSECTION/BULK_DISMISSED',
+          payload: {
+            message: 'MANUAL_BULK_BREAK_OR_ESC',
+            editingGroupBlock: 'ROOT'
+          }
+        });
+        return;
+      }
+      if (editingGroupBlock === 'ROOT') {
+        setSelectedBlockId(null);
+        sectionActionHandler && sectionActionHandler({
+          type: '@CUSTOMSECTION/BULK_DISMISSED',
+          payload: {
+            message: 'MANUAL_BULK_BREAK_OR_ESC',
+            editingGroupBlock: 'ROOT'
+          }
+        });
+      }
+    }
+  }, [shortcutKeyMode, setSelectedBlockId]);
+  (0, react_1.useLayoutEffect)(function () {
+    var _a;
+    if (props.id !== editingSectionId) {
+      return;
+    }
+    if (shortcutKeyMode === 'MANUAL_COLLISION_SELECT') {
+      if (!selectedBlockId || selectedBlockId === 'BULK') {
+        return;
+      }
+      var selectedCBId = selectedBlockId ? (0, group_1.formatBlockIdToCbId)(selectedBlockId) : undefined;
+      if (!selectedCBId) {
+        return;
+      }
+      var bulks_1 = getCollisionGroupIds(selectedCBId);
+      if (selectedBlockId) {
+        bulks_1.push(selectedBlockId);
+      }
+      setBulkBlockIds(function (prev) {
+        var set = new Set(__spreadArray(__spreadArray([], prev, true), bulks_1, true));
+        return Array.from(set);
+      });
+      setSelectedBlockId(null);
+      var newBulkCBIds = bulks_1.map(function (id) {
+        return (0, group_1.formatBlockIdToCbId)(id);
+      }).filter(function (each) {
+        return each !== null;
+      });
+      var childrenCBIds = [];
+      if (newBulkCBIds.length === 0) {
+        var oneCB = (0, group_1.findOneComponentBlock)(newblock, bulks_1[0]);
+        childrenCBIds = oneCB ? [oneCB] : [];
+      } else {
+        childrenCBIds = newBulkCBIds;
+      }
+      var groupDisabled = getWorkDirDirectChildrenLength() === __spreadArray(__spreadArray([], bulkBlockIds, true), bulks_1, true).length;
+      sectionActionHandler && sectionActionHandler({
+        type: '@CUSTOMSECTION/BLOCK_CLICKED',
+        payload: {
+          block: {
+            type: 'BULK',
+            blockId: 'BULK',
+            childrenBlockIds: bulks_1,
+            workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND',
+            childrenCBIds: childrenCBIds,
+            groupDisabled: groupDisabled && editingGroupBlock !== 'ROOT'
+          }
         }
-        var added = (function () {
-            if (selectedBlockId === editingGroupBlock) {
-                return [blockId];
-            }
-            if (selectedBlockId === 'BULK') {
-                return [blockId];
-            }
-            return selectedBlockId ? [selectedBlockId, blockId] : [blockId];
-        })();
-        if (shortcutKeyMode === 'BULK_SELECT') {
-            setBulkBlockIds(function (prev) {
-                var set = new Set(__spreadArray(__spreadArray([], prev, true), added, true));
-                return Array.from(set);
-            });
-            setSelectedBlockId(null);
-            var newBulkBlockIds = Array.from(new Set(__spreadArray(__spreadArray([], bulkBlockIds, true), added, true)));
-            var newBulkCBIds = newBulkBlockIds
-                .map(function (id) { return (0, group_1.formatBlockIdToCbId)(id); })
-                .filter(function (each) { return each !== null; });
-            var childrenCBIds = [];
-            if (newBulkCBIds.length === 0) {
-                var oneCB = (0, group_1.findOneComponentBlock)(newblock, newBulkBlockIds[0]);
-                childrenCBIds = oneCB ? [oneCB] : [];
+      });
+      return;
+    }
+  }, [selectedBlockId, shortcutKeyMode, sectionActionHandler, bulkBlockIds, setSelectedBlockId]);
+  var makeAllInOneGroup = function () {
+    var _a, _b, _c, _d, _e;
+    var allRootChildIds = (0, group_1.findDirectChildrenBlockIds)(pedigreeState, editingGroupBlock);
+    if (allRootChildIds.length === 1) {
+      var block = (0, group_1.findBlockByBlockId)(newblock, allRootChildIds[0]);
+      if (!block) {
+        return;
+      }
+      setSelectedBlockId(block.blockId);
+      setBulkBlockIds([]);
+      if (block.type === 'COMPONENT_BLOCK') {
+        sectionActionHandler && sectionActionHandler({
+          type: '@CUSTOMSECTION/BLOCK_CLICKED',
+          payload: {
+            block: {
+              blockId: block.blockId,
+              type: block.type,
+              cbId: block.componentBlockId,
+              workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND'
             }
-            else {
-                childrenCBIds = newBulkCBIds;
+          }
+        });
+        return;
+      }
+      if (block.type === 'GROUP_BLOCK') {
+        sectionActionHandler && sectionActionHandler({
+          type: '@CUSTOMSECTION/BLOCK_CLICKED',
+          payload: {
+            block: {
+              blockId: block.blockId,
+              type: 'GROUP_BLOCK',
+              workDir: (_b = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _b !== void 0 ? _b : 'NOT-FOUND',
+              childrenBlockIds: (_c = (0, group_1.findDirectChildrenBlockIds)(newblock, block.blockId)) !== null && _c !== void 0 ? _c : [],
+              childrenCBIds: (_d = (0, group_1.findDirectChildrenCbIds)(newblock, block.blockId)) !== null && _d !== void 0 ? _d : []
             }
-            var groupDisabled = getWorkDirDirectChildrenLength() === __spreadArray(__spreadArray([], bulkBlockIds, true), added, true).length;
-            sectionActionHandler &&
-                sectionActionHandler({
-                    type: '@CUSTOMSECTION/BLOCK_CLICKED',
-                    payload: {
-                        block: {
-                            type: 'BULK',
-                            blockId: 'BULK',
-                            childrenBlockIds: newBulkBlockIds,
-                            childrenCBIds: childrenCBIds,
-                            workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND',
-                            groupDisabled: groupDisabled && editingGroupBlock !== 'ROOT'
-                        }
-                    }
-                });
-            return;
+          }
+        });
+      }
+      return;
+    }
+    setBulkBlockIds(allRootChildIds);
+    var newBulkCBIds = allRootChildIds.map(function (id) {
+      return (0, group_1.formatBlockIdToCbId)(id);
+    }).filter(function (each) {
+      return each !== null;
+    });
+    var childrenCBIds = [];
+    if (newBulkCBIds.length === 0) {
+      var oneCB = (0, group_1.findOneComponentBlock)(newblock, allRootChildIds[0]);
+      childrenCBIds = oneCB ? [oneCB] : [];
+    } else {
+      childrenCBIds = newBulkCBIds;
+    }
+    var groupDisabled = getWorkDirDirectChildrenLength() === allRootChildIds.length;
+    sectionActionHandler && sectionActionHandler({
+      type: '@CUSTOMSECTION/BLOCK_CLICKED',
+      payload: {
+        block: {
+          type: 'BULK',
+          blockId: 'BULK',
+          childrenBlockIds: allRootChildIds,
+          workDir: (_e = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _e !== void 0 ? _e : 'NOT-FOUND',
+          childrenCBIds: childrenCBIds,
+          groupDisabled: groupDisabled && editingGroupBlock !== 'ROOT'
         }
-        if (shortcutKeyMode === 'COLLISION_SELECT') {
-            var bulks = getCollisionGroupIds(id);
-            var newBulksSet = new Set(__spreadArray(__spreadArray(__spreadArray([], bulkBlockIds, true), added, true), bulks, true));
-            var newBulks = Array.from(newBulksSet);
-            if (newBulks.length === 1) {
-                var blockId_1 = newBulks[0];
-                setSelectedBlockId(blockId_1);
-                setBulkBlockIds([]);
-                sectionActionHandler &&
-                    sectionActionHandler({
-                        type: '@CUSTOMSECTION/BLOCK_CLICKED',
-                        payload: {
-                            block: {
-                                type: 'COMPONENT_BLOCK',
-                                blockId: blockId_1,
-                                cbId: id,
-                                workDir: (_b = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _b !== void 0 ? _b : 'NOT-FOUND'
-                            }
-                        }
-                    });
-                return;
-            }
-            setBulkBlockIds(newBulks);
-            setSelectedBlockId(null);
-            var newBulkCBIds = newBulks
-                .map(function (id) { return (0, group_1.formatBlockIdToCbId)(id); })
-                .filter(function (each) { return each !== null; });
-            var childrenCBIds = [];
-            if (newBulkCBIds.length === 0) {
-                var oneCB = (0, group_1.findOneComponentBlock)(newblock, bulks[0]);
-                childrenCBIds = oneCB ? [oneCB] : [];
-            }
-            else {
-                childrenCBIds = newBulkCBIds;
-            }
-            var groupDisabled = getWorkDirDirectChildrenLength() === newBulks.length;
-            sectionActionHandler &&
-                sectionActionHandler({
-                    type: '@CUSTOMSECTION/BLOCK_CLICKED',
-                    payload: {
-                        block: {
-                            type: 'BULK',
-                            blockId: 'BULK',
-                            childrenBlockIds: newBulks,
-                            workDir: (_c = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _c !== void 0 ? _c : 'NOT-FOUND',
-                            childrenCBIds: childrenCBIds,
-                            groupDisabled: groupDisabled && editingGroupBlock !== 'ROOT'
-                        }
-                    }
-                });
-            return;
+      }
+    });
+  };
+  var getCollisionGroupIds = function (cdId1) {
+    var layoutItem = (0, renderHelpers_1.getLayoutItem)(layouts[layoutByDevice], cdId1.toString());
+    if (!layoutItem) {
+      return [];
+    }
+    var allCollisions = (0, renderHelpers_1.getAllCollisions)(layouts[layoutByDevice], layoutItem);
+    var allCollisionsCbIds = allCollisions.map(function (each) {
+      return Number(each.i);
+    });
+    var workDirChildrenBlockIds = (0, group_1.findDirectChildrenBlockIds)(newblock, editingGroupBlock);
+    var collisions = workDirChildrenBlockIds.filter(function (each) {
+      var cbId = (0, group_1.formatBlockIdToCbId)(each);
+      var allCollisions = (0, group_1.findAllChildrenCbIds)(newblock, each);
+      if (cbId !== null && allCollisionsCbIds.includes(cbId)) {
+        return true;
+      }
+      var hasCollision = allCollisions.some(function (each) {
+        return allCollisionsCbIds.includes(each);
+      });
+      return hasCollision;
+    });
+    return __spreadArray(__spreadArray([], collisions, true), [(0, group_1.formatCbIdToBlockId)(cdId1)], false);
+  };
+  var _q = (0, util_1.parseCustomSectionPlacement)({
+      isMobile: isMobile,
+      customSectionProps: CB_PLACEMENT_PROP_SECTION
+    }),
+    rows = _q.rows,
+    width = _q.width,
+    minHeight = _q.minHeight,
+    isFullWidth = _q.isFullWidth;
+  var customSectionStyles = {
+    minHeight: "".concat(minHeight, "vh"),
+    width: '100%',
+    maxWidth: isFullWidth ? '' : "".concat(width, "px")
+  };
+  var breakpoint = device === 'MOBILE' ? 'sm' : 'lg';
+  var onClickCB = function (id) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    var blockId = (0, group_1.formatCbIdToBlockId)(id);
+    if (!isEditMode) {
+      return;
+    }
+    var added = function () {
+      if (selectedBlockId === editingGroupBlock) {
+        return [blockId];
+      }
+      if (selectedBlockId === 'BULK') {
+        return [blockId];
+      }
+      return selectedBlockId ? [selectedBlockId, blockId] : [blockId];
+    }();
+    if (shortcutKeyMode === 'BULK_SELECT') {
+      setBulkBlockIds(function (prev) {
+        var set = new Set(__spreadArray(__spreadArray([], prev, true), added, true));
+        return Array.from(set);
+      });
+      setSelectedBlockId(null);
+      var newBulkBlockIds = Array.from(new Set(__spreadArray(__spreadArray([], bulkBlockIds, true), added, true)));
+      var newBulkCBIds = newBulkBlockIds.map(function (id) {
+        return (0, group_1.formatBlockIdToCbId)(id);
+      }).filter(function (each) {
+        return each !== null;
+      });
+      var childrenCBIds = [];
+      if (newBulkCBIds.length === 0) {
+        var oneCB = (0, group_1.findOneComponentBlock)(newblock, newBulkBlockIds[0]);
+        childrenCBIds = oneCB ? [oneCB] : [];
+      } else {
+        childrenCBIds = newBulkCBIds;
+      }
+      var groupDisabled = getWorkDirDirectChildrenLength() === __spreadArray(__spreadArray([], bulkBlockIds, true), added, true).length;
+      sectionActionHandler && sectionActionHandler({
+        type: '@CUSTOMSECTION/BLOCK_CLICKED',
+        payload: {
+          block: {
+            type: 'BULK',
+            blockId: 'BULK',
+            childrenBlockIds: newBulkBlockIds,
+            childrenCBIds: childrenCBIds,
+            workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND',
+            groupDisabled: groupDisabled && editingGroupBlock !== 'ROOT'
+          }
         }
-        var blockType = blockId.startsWith('GB_') ? 'GROUP_BLOCK' : 'COMPONENT_BLOCK';
-        setSelectedBlockId(blockId);
+      });
+      return;
+    }
+    if (shortcutKeyMode === 'COLLISION_SELECT') {
+      var bulks = getCollisionGroupIds(id);
+      var newBulksSet = new Set(__spreadArray(__spreadArray(__spreadArray([], bulkBlockIds, true), added, true), bulks, true));
+      var newBulks = Array.from(newBulksSet);
+      if (newBulks.length === 1) {
+        var blockId_1 = newBulks[0];
+        setSelectedBlockId(blockId_1);
         setBulkBlockIds([]);
-        if (blockType === 'COMPONENT_BLOCK') {
-            sectionActionHandler &&
-                sectionActionHandler({
-                    type: '@CUSTOMSECTION/BLOCK_CLICKED',
-                    payload: {
-                        block: {
-                            blockId: blockId,
-                            type: blockType,
-                            cbId: id,
-                            workDir: (_d = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _d !== void 0 ? _d : 'NOT-FOUND'
-                        }
-                    }
-                });
-            return;
-        }
-        if (blockType === 'GROUP_BLOCK') {
-            sectionActionHandler &&
-                sectionActionHandler({
-                    type: '@CUSTOMSECTION/BLOCK_CLICKED',
-                    payload: {
-                        block: {
-                            blockId: blockId,
-                            type: 'GROUP_BLOCK',
-                            workDir: (_e = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _e !== void 0 ? _e : 'NOT-FOUND',
-                            childrenBlockIds: (_f = (0, group_1.findDirectChildrenBlockIds)(newblock, blockId)) !== null && _f !== void 0 ? _f : [],
-                            childrenCBIds: (_g = (0, group_1.findDirectChildrenCbIds)(newblock, blockId)) !== null && _g !== void 0 ? _g : []
-                        }
-                    }
-                });
-        }
-    };
-    var onContextMenuCB = function (id, e) {
-        var _a;
-        var blockId = (0, group_1.formatCbIdToBlockId)(id);
-        if (!isEditMode) {
-            return;
-        }
-        if (selectedBlockId === 'BULK' && blockId !== selectedBlockId) {
-            setBulkBlockIds([]);
-        }
-        // if (!['COLLISION_SELECT', 'BULK_SELECT'].includes(shortcutKeyMode ?? '')) {
-        //   if (blockId !== selectedBlockId) {
-        //     setBulkBlockIds([]);
-        //   }
-        // }
-        setSelectedBlockId(blockId);
-        if (sectionActionHandler) {
-            sectionActionHandler({
-                type: '@CUSTOMSECTION/CB_RIGHT_CLICKED',
-                payload: {
-                    e: e,
-                    block: {
-                        blockId: blockId,
-                        cbId: id,
-                        type: 'COMPONENT_BLOCK',
-                        workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND'
-                    }
-                }
-            });
-        }
-    };
-    var onLayoutChange = function (props) {
-        if (!isEditMode) {
-            return;
-        }
-        if (sectionActionHandler) {
-            sectionActionHandler({
-                type: '@CUSTOMSECTION/PLACEMENT_CHANGED',
-                payload: props
-            });
-        }
-        setLayouts(props.layouts);
-    };
-    var onDragStart = function (props) {
-        sectionActionHandler &&
-            sectionActionHandler({
-                type: '@CUSTOMSECTION/CB_DRAG_START',
-                payload: __assign({}, props)
-            });
-    };
-    var onDragStop = function (props) {
-        var _a, _b, _c;
-        if (!isEditMode || !props.item) {
-            return;
-        }
-        var item = props.item, prev = props.prev;
-        var isShiftOn = shortcutKeyMode === 'BULK_SELECT' || shortcutKeyMode === 'COLLISION_SELECT';
-        if (isLayoutPlacementSame(item, prev) && isShiftOn) {
-            setTimeout(function () {
-                onClickCB(Number(item.i));
-            }, 0);
-            return;
-        }
-        // NOTE 미사용시 삭제
-        // if (item.i === 'BULK' && props.item.groupLayouts) {
-        //   setSelectedBlockId('BULK');
-        //   const outerBasedChildrenPositions = props.item.groupLayouts.map((cb) => ({
-        //     ...cb,
-        //     x: item.x + cb.x,
-        //     y: item.y + cb.y
-        //   }));
-        //   sectionActionHandler &&
-        //     sectionActionHandler({
-        //       type: '@CUSTOMSECTION/BULK_DRAG_STOP',
-        //       payload: {
-        //         updatedBlocks: props.
-        //         ...props,
-        //         outerBasedChildrenPositions,
-        //         workDir: getBlockWorkDirPath(newblock, editingGroupBlock) ?? 'NOT-FOUND'
-        //       }
-        //     });
-        //   return;
-        // }
-        var numberId = Number((_a = props.item) === null || _a === void 0 ? void 0 : _a.i);
-        var blockId = (0, group_1.formatCbIdToBlockId)(numberId);
-        var isIdNumber = !Number.isNaN(numberId);
-        if (blockId) {
-            if ((0, group_2.getGroupCB)(layouts[layoutByDevice])) {
-                setTimeout(function () {
-                    setBulkBlockIds([]);
-                }, 100);
+        sectionActionHandler && sectionActionHandler({
+          type: '@CUSTOMSECTION/BLOCK_CLICKED',
+          payload: {
+            block: {
+              type: 'COMPONENT_BLOCK',
+              blockId: blockId_1,
+              cbId: id,
+              workDir: (_b = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _b !== void 0 ? _b : 'NOT-FOUND'
             }
-            setSelectedBlockId(blockId);
-        }
-        if (isLayoutPlacementSame(item, prev)) {
-            // 확인 필요.. 그룹과 벌크
-            sectionActionHandler &&
-                sectionActionHandler({
-                    type: '@CUSTOMSECTION/BLOCK_CLICKED',
-                    payload: {
-                        block: {
-                            blockId: blockId,
-                            cbId: numberId,
-                            type: 'COMPONENT_BLOCK',
-                            workDir: (_b = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _b !== void 0 ? _b : 'NOT-FOUND'
-                        }
-                    }
-                });
-            return;
-        }
-        if (sectionActionHandler && isIdNumber) {
-            sectionActionHandler({
-                type: '@CUSTOMSECTION/CB_DRAG_STOP',
-                payload: __assign(__assign({}, props), { blockId: blockId, workDir: (_c = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _c !== void 0 ? _c : 'NOT-FOUND' })
-            });
-        }
-    };
-    var onResizeStop = function (props) {
-        var _a;
-        var prev = props.prev, item = props.item;
-        if (!isEditMode || !item) {
-            return;
-        }
-        var numberId = Number(item.i);
-        var isIdNumber = !Number.isNaN(numberId);
-        if (isLayoutPlacementSame(item, prev)) {
-            return;
-        }
-        if (isIdNumber) {
-            var blockId = (0, group_1.formatCbIdToBlockId)(numberId);
-            setSelectedBlockId(blockId);
-        }
-        if (sectionActionHandler && isIdNumber) {
-            sectionActionHandler({
-                type: '@CUSTOMSECTION/CB_RESIZE_STOP',
-                payload: __assign(__assign({}, props), { blockId: (0, group_1.formatCbIdToBlockId)(numberId), workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND' })
-            });
-        }
-    };
-    var onAutoFitContent = function (props) {
-        var _a;
-        var prev = props.prev, item = props.item;
-        if (!isEditMode || !item) {
-            return;
-        }
-        var numberId = Number(item.i);
-        var isIdNumber = !Number.isNaN(numberId);
-        if (isLayoutPlacementSame(item, prev)) {
-            return;
+          }
+        });
+        return;
+      }
+      setBulkBlockIds(newBulks);
+      setSelectedBlockId(null);
+      var newBulkCBIds = newBulks.map(function (id) {
+        return (0, group_1.formatBlockIdToCbId)(id);
+      }).filter(function (each) {
+        return each !== null;
+      });
+      var childrenCBIds = [];
+      if (newBulkCBIds.length === 0) {
+        var oneCB = (0, group_1.findOneComponentBlock)(newblock, bulks[0]);
+        childrenCBIds = oneCB ? [oneCB] : [];
+      } else {
+        childrenCBIds = newBulkCBIds;
+      }
+      var groupDisabled = getWorkDirDirectChildrenLength() === newBulks.length;
+      sectionActionHandler && sectionActionHandler({
+        type: '@CUSTOMSECTION/BLOCK_CLICKED',
+        payload: {
+          block: {
+            type: 'BULK',
+            blockId: 'BULK',
+            childrenBlockIds: newBulks,
+            workDir: (_c = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _c !== void 0 ? _c : 'NOT-FOUND',
+            childrenCBIds: childrenCBIds,
+            groupDisabled: groupDisabled && editingGroupBlock !== 'ROOT'
+          }
         }
-        if (isIdNumber) {
-            var blockId = (0, group_1.formatCbIdToBlockId)(numberId);
-            setSelectedBlockId(blockId);
+      });
+      return;
+    }
+    var blockType = blockId.startsWith('GB_') ? 'GROUP_BLOCK' : 'COMPONENT_BLOCK';
+    setSelectedBlockId(blockId);
+    setBulkBlockIds([]);
+    if (blockType === 'COMPONENT_BLOCK') {
+      sectionActionHandler && sectionActionHandler({
+        type: '@CUSTOMSECTION/BLOCK_CLICKED',
+        payload: {
+          block: {
+            blockId: blockId,
+            type: blockType,
+            cbId: id,
+            workDir: (_d = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _d !== void 0 ? _d : 'NOT-FOUND'
+          }
         }
-        if (sectionActionHandler && isIdNumber) {
-            sectionActionHandler({
-                type: '@CUSTOMSECTION/CB_AUTO_FIT_CONTENT',
-                payload: __assign(__assign({}, props), { details: { hadPaddingChanged: props.hasPaddingChanged }, blockId: (0, group_1.formatCbIdToBlockId)(numberId), workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND' })
-            });
+      });
+      return;
+    }
+    if (blockType === 'GROUP_BLOCK') {
+      sectionActionHandler && sectionActionHandler({
+        type: '@CUSTOMSECTION/BLOCK_CLICKED',
+        payload: {
+          block: {
+            blockId: blockId,
+            type: 'GROUP_BLOCK',
+            workDir: (_e = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _e !== void 0 ? _e : 'NOT-FOUND',
+            childrenBlockIds: (_f = (0, group_1.findDirectChildrenBlockIds)(newblock, blockId)) !== null && _f !== void 0 ? _f : [],
+            childrenCBIds: (_g = (0, group_1.findDirectChildrenCbIds)(newblock, blockId)) !== null && _g !== void 0 ? _g : []
+          }
         }
-    };
-    var onClickSection = function (e) {
-        if (!isEditMode) {
-            return;
+      });
+    }
+  };
+  var onContextMenuCB = function (id, e) {
+    var _a;
+    var blockId = (0, group_1.formatCbIdToBlockId)(id);
+    if (!isEditMode) {
+      return;
+    }
+    if (selectedBlockId === 'BULK' && blockId !== selectedBlockId) {
+      setBulkBlockIds([]);
+    }
+    // if (!['COLLISION_SELECT', 'BULK_SELECT'].includes(shortcutKeyMode ?? '')) {
+    //   if (blockId !== selectedBlockId) {
+    //     setBulkBlockIds([]);
+    //   }
+    // }
+    setSelectedBlockId(blockId);
+    if (sectionActionHandler) {
+      sectionActionHandler({
+        type: '@CUSTOMSECTION/CB_RIGHT_CLICKED',
+        payload: {
+          e: e,
+          block: {
+            blockId: blockId,
+            cbId: id,
+            type: 'COMPONENT_BLOCK',
+            workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND'
+          }
         }
-        if (editingGroupBlock !== 'ROOT') {
-            onClickGroup(e, editingGroupBlock);
-            return;
+      });
+    }
+  };
+  var onLayoutChange = function (props) {
+    if (!isEditMode) {
+      return;
+    }
+    if (sectionActionHandler) {
+      sectionActionHandler({
+        type: '@CUSTOMSECTION/PLACEMENT_CHANGED',
+        payload: props
+      });
+    }
+    setLayouts(props.layouts);
+  };
+  var onDragStart = function (props) {
+    sectionActionHandler && sectionActionHandler({
+      type: '@CUSTOMSECTION/CB_DRAG_START',
+      payload: __assign({}, props)
+    });
+  };
+  var onDragStop = function (props) {
+    var _a, _b, _c;
+    if (!isEditMode || !props.item) {
+      return;
+    }
+    var item = props.item,
+      prev = props.prev;
+    var isShiftOn = shortcutKeyMode === 'BULK_SELECT' || shortcutKeyMode === 'COLLISION_SELECT';
+    if (isLayoutPlacementSame(item, prev) && isShiftOn) {
+      setTimeout(function () {
+        onClickCB(Number(item.i));
+      }, 0);
+      return;
+    }
+    // NOTE 미사용시 삭제
+    // if (item.i === 'BULK' && props.item.groupLayouts) {
+    //   setSelectedBlockId('BULK');
+    //   const outerBasedChildrenPositions = props.item.groupLayouts.map((cb) => ({
+    //     ...cb,
+    //     x: item.x + cb.x,
+    //     y: item.y + cb.y
+    //   }));
+    //   sectionActionHandler &&
+    //     sectionActionHandler({
+    //       type: '@CUSTOMSECTION/BULK_DRAG_STOP',
+    //       payload: {
+    //         updatedBlocks: props.
+    //         ...props,
+    //         outerBasedChildrenPositions,
+    //         workDir: getBlockWorkDirPath(newblock, editingGroupBlock) ?? 'NOT-FOUND'
+    //       }
+    //     });
+    //   return;
+    // }
+    var numberId = Number((_a = props.item) === null || _a === void 0 ? void 0 : _a.i);
+    var blockId = (0, group_1.formatCbIdToBlockId)(numberId);
+    var isIdNumber = !Number.isNaN(numberId);
+    if (blockId) {
+      if ((0, group_2.getGroupCB)(layouts[layoutByDevice])) {
+        setTimeout(function () {
+          setBulkBlockIds([]);
+        }, 100);
+      }
+      setSelectedBlockId(blockId);
+    }
+    if (isLayoutPlacementSame(item, prev)) {
+      // 확인 필요.. 그룹과 벌크
+      sectionActionHandler && sectionActionHandler({
+        type: '@CUSTOMSECTION/BLOCK_CLICKED',
+        payload: {
+          block: {
+            blockId: blockId,
+            cbId: numberId,
+            type: 'COMPONENT_BLOCK',
+            workDir: (_b = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _b !== void 0 ? _b : 'NOT-FOUND'
+          }
         }
+      });
+      return;
+    }
+    if (sectionActionHandler && isIdNumber) {
+      sectionActionHandler({
+        type: '@CUSTOMSECTION/CB_DRAG_STOP',
+        payload: __assign(__assign({}, props), {
+          blockId: blockId,
+          workDir: (_c = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _c !== void 0 ? _c : 'NOT-FOUND'
+        })
+      });
+    }
+  };
+  var onResizeStop = function (props) {
+    var _a;
+    var prev = props.prev,
+      item = props.item;
+    if (!isEditMode || !item) {
+      return;
+    }
+    var numberId = Number(item.i);
+    var isIdNumber = !Number.isNaN(numberId);
+    if (isLayoutPlacementSame(item, prev)) {
+      return;
+    }
+    if (isIdNumber) {
+      var blockId = (0, group_1.formatCbIdToBlockId)(numberId);
+      setSelectedBlockId(blockId);
+    }
+    if (sectionActionHandler && isIdNumber) {
+      sectionActionHandler({
+        type: '@CUSTOMSECTION/CB_RESIZE_STOP',
+        payload: __assign(__assign({}, props), {
+          blockId: (0, group_1.formatCbIdToBlockId)(numberId),
+          workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND'
+        })
+      });
+    }
+  };
+  var onAutoFitContent = function (props) {
+    var _a;
+    var prev = props.prev,
+      item = props.item;
+    if (!isEditMode || !item) {
+      return;
+    }
+    var numberId = Number(item.i);
+    var isIdNumber = !Number.isNaN(numberId);
+    if (isLayoutPlacementSame(item, prev)) {
+      return;
+    }
+    if (isIdNumber) {
+      var blockId = (0, group_1.formatCbIdToBlockId)(numberId);
+      setSelectedBlockId(blockId);
+    }
+    if (sectionActionHandler && isIdNumber) {
+      sectionActionHandler({
+        type: '@CUSTOMSECTION/CB_AUTO_FIT_CONTENT',
+        payload: __assign(__assign({}, props), {
+          details: {
+            hadPaddingChanged: props.hasPaddingChanged
+          },
+          blockId: (0, group_1.formatCbIdToBlockId)(numberId),
+          workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND'
+        })
+      });
+    }
+  };
+  var onClickSection = function (e) {
+    if (!isEditMode) {
+      return;
+    }
+    if (editingGroupBlock !== 'ROOT') {
+      onClickGroup(e, editingGroupBlock);
+      return;
+    }
+    setBulkBlockIds([]);
+    setSelectedBlockId(null);
+    sectionActionHandler && sectionActionHandler({
+      type: '@CUSTOMSECTION/SECTION_CLICKED',
+      payload: {
+        sectionId: props.id
+      }
+    });
+  };
+  var onContextGroup = function (e, blockId, isEditingGroup) {
+    var _a, _b, _c;
+    setSelectedBlockId(blockId);
+    var block = (0, group_1.findBlockByBlockId)(newblock, blockId);
+    if ((block === null || block === void 0 ? void 0 : block.type) === 'COMPONENT_BLOCK') {
+      return;
+    }
+    sectionActionHandler && sectionActionHandler({
+      type: '@CUSTOMSECTION/GROUP_RIGHT_CLICKED',
+      payload: {
+        block: {
+          blockId: blockId,
+          type: 'GROUP_BLOCK',
+          workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND',
+          childrenBlockIds: (_b = (0, group_1.findDirectChildrenBlockIds)(newblock, blockId)) !== null && _b !== void 0 ? _b : [],
+          childrenCBIds: (_c = (0, group_1.findDirectChildrenCbIds)(newblock, blockId)) !== null && _c !== void 0 ? _c : []
+        },
+        e: e,
+        isEditingGroup: isEditingGroup
+      }
+    });
+  };
+  var onContextSection = function (e) {
+    if (editingGroupBlock !== 'ROOT') {
+      e.preventDefault();
+      return;
+    }
+    if (!isEditMode) {
+      return;
+    }
+    if ((0, group_2.getGroupCB)(layouts[layoutByDevice])) {
+      setBulkBlockIds([]);
+    }
+    setSelectedBlockId(null);
+    sectionActionHandler && sectionActionHandler({
+      type: '@CUSTOMSECTION/SECTION_RIGHT_CLICKED',
+      payload: {
+        sectionId: props.id,
+        e: e
+      }
+    });
+  };
+  var onWidthChange = function (width) {
+    var responsiveFontMode =
+    // NOTE: local환경에서 CB_CONTENT_PROP_SECTION이 없는 경우가 있음.
+    !!(CB_CONTENT_PROP_SECTION === null || CB_CONTENT_PROP_SECTION === void 0 ? void 0 : CB_CONTENT_PROP_SECTION.CB_CONTENT_PROP_SECTION_SPEC_VARIABLEROOTFONTSIZE);
+    if (device === 'MOBILE') {
+      var cellWidth_1 = width / MOBILE_GRID_COLS;
+      setRowHeight(cellWidth_1 * 0.56);
+      // baseFontSize !== 16 && setBaseFontSize(width * 0.0133);
+      responsiveFontMode ? setBaseFontSize(width * 0.0421) : setBaseFontSize(16);
+      return;
+    }
+    var cellWidth = width / DESKTOP_GRID_COLS;
+    setRowHeight(cellWidth * 0.56);
+    responsiveFontMode ? setBaseFontSize(width * 0.0133) : setBaseFontSize(16);
+  };
+  var padding = (0, parseSectionPadding_1.default)(CB_LAYOUT_PROP_PADDING, device);
+  var breakpoints = device === 'DESKTOP' ? {
+    lg: 100,
+    sm: 0
+  } : {
+    lg: 1200,
+    sm: 480
+  };
+  var innerRef = (0, react_1.useRef)(null);
+  var clickOneCBInBulk = function (id) {
+    var _a, _b;
+    var blockId = (0, group_1.formatCbIdToBlockId)(id);
+    if (shortcutKeyMode === 'COLLISION_SELECT') {
+      return;
+    }
+    if (shortcutKeyMode === 'BULK_SELECT') {
+      if (bulkBlockIds.length <= 2) {
+        var oneLastBlockId = bulkBlockIds.filter(function (each) {
+          return each !== blockId;
+        })[0];
         setBulkBlockIds([]);
-        setSelectedBlockId(null);
-        sectionActionHandler &&
-            sectionActionHandler({
-                type: '@CUSTOMSECTION/SECTION_CLICKED',
-                payload: {
-                    sectionId: props.id
-                }
-            });
-    };
-    var onContextGroup = function (e, blockId, isEditingGroup) {
-        var _a, _b, _c;
-        setSelectedBlockId(blockId);
-        var block = (0, group_1.findBlockByBlockId)(newblock, blockId);
-        if ((block === null || block === void 0 ? void 0 : block.type) === 'COMPONENT_BLOCK') {
-            return;
+        if (!oneLastBlockId) {
+          return;
         }
-        sectionActionHandler &&
-            sectionActionHandler({
-                type: '@CUSTOMSECTION/GROUP_RIGHT_CLICKED',
-                payload: {
-                    block: {
-                        blockId: blockId,
-                        type: 'GROUP_BLOCK',
-                        workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND',
-                        childrenBlockIds: (_b = (0, group_1.findDirectChildrenBlockIds)(newblock, blockId)) !== null && _b !== void 0 ? _b : [],
-                        childrenCBIds: (_c = (0, group_1.findDirectChildrenCbIds)(newblock, blockId)) !== null && _c !== void 0 ? _c : []
-                    },
-                    e: e,
-                    isEditingGroup: isEditingGroup
-                }
-            });
-    };
-    var onContextSection = function (e) {
-        if (editingGroupBlock !== 'ROOT') {
-            e.preventDefault();
-            return;
-        }
-        if (!isEditMode) {
-            return;
-        }
-        if ((0, group_2.getGroupCB)(layouts[layoutByDevice])) {
-            setBulkBlockIds([]);
-        }
-        setSelectedBlockId(null);
-        sectionActionHandler &&
-            sectionActionHandler({
-                type: '@CUSTOMSECTION/SECTION_RIGHT_CLICKED',
-                payload: {
-                    sectionId: props.id,
-                    e: e
-                }
-            });
-    };
-    var onWidthChange = function (width) {
-        var responsiveFontMode = 
-        // NOTE: local환경에서 CB_CONTENT_PROP_SECTION이 없는 경우가 있음.
-        !!(CB_CONTENT_PROP_SECTION === null || CB_CONTENT_PROP_SECTION === void 0 ? void 0 : CB_CONTENT_PROP_SECTION.CB_CONTENT_PROP_SECTION_SPEC_VARIABLEROOTFONTSIZE);
-        if (device === 'MOBILE') {
-            var cellWidth_1 = width / MOBILE_GRID_COLS;
-            setRowHeight(cellWidth_1 * 0.56);
-            // baseFontSize !== 16 && setBaseFontSize(width * 0.0133);
-            responsiveFontMode ? setBaseFontSize(width * 0.0421) : setBaseFontSize(16);
-            return;
+        var cbId = (0, group_1.formatBlockIdToCbId)(oneLastBlockId);
+        if (!cbId) {
+          return;
         }
-        var cellWidth = width / DESKTOP_GRID_COLS;
-        setRowHeight(cellWidth * 0.56);
-        responsiveFontMode ? setBaseFontSize(width * 0.0133) : setBaseFontSize(16);
-    };
-    var padding = (0, parseSectionPadding_1.default)(CB_LAYOUT_PROP_PADDING, device);
-    var breakpoints = device === 'DESKTOP' ? { lg: 100, sm: 0 } : { lg: 1200, sm: 480 };
-    var innerRef = (0, react_1.useRef)(null);
-    var clickOneCBInBulk = function (id) {
-        var _a, _b;
-        var blockId = (0, group_1.formatCbIdToBlockId)(id);
-        if (shortcutKeyMode === 'COLLISION_SELECT') {
-            return;
-        }
-        if (shortcutKeyMode === 'BULK_SELECT') {
-            if (bulkBlockIds.length <= 2) {
-                var oneLastBlockId = bulkBlockIds.filter(function (each) { return each !== blockId; })[0];
-                setBulkBlockIds([]);
-                if (!oneLastBlockId) {
-                    return;
-                }
-                var cbId = (0, group_1.formatBlockIdToCbId)(oneLastBlockId);
-                if (!cbId) {
-                    return;
-                }
-                setSelectedBlockId(oneLastBlockId);
-                sectionActionHandler &&
-                    sectionActionHandler({
-                        type: '@CUSTOMSECTION/BLOCK_CLICKED',
-                        payload: {
-                            block: {
-                                blockId: oneLastBlockId,
-                                cbId: cbId,
-                                type: 'COMPONENT_BLOCK',
-                                workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND'
-                            }
-                        }
-                    });
-                return;
+        setSelectedBlockId(oneLastBlockId);
+        sectionActionHandler && sectionActionHandler({
+          type: '@CUSTOMSECTION/BLOCK_CLICKED',
+          payload: {
+            block: {
+              blockId: oneLastBlockId,
+              cbId: cbId,
+              type: 'COMPONENT_BLOCK',
+              workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND'
             }
-            var filtered = bulkBlockIds.filter(function (each) { return each !== blockId; });
-            setBulkBlockIds(filtered);
-            var groupDisabled = getWorkDirDirectChildrenLength() === filtered.length;
-            var newBulkCBIds = filtered
-                .map(function (id) { return (0, group_1.formatBlockIdToCbId)(id); })
-                .filter(function (each) { return each !== null; });
-            sectionActionHandler &&
-                sectionActionHandler({
-                    type: '@CUSTOMSECTION/BLOCK_CLICKED',
-                    payload: {
-                        block: {
-                            type: 'BULK',
-                            blockId: 'BULK',
-                            childrenBlockIds: filtered,
-                            workDir: (_b = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _b !== void 0 ? _b : 'NOT-FOUND',
-                            childrenCBIds: newBulkCBIds,
-                            groupDisabled: groupDisabled && editingGroupBlock !== 'ROOT'
-                        }
-                    }
-                });
-        }
-    };
-    var showSectionHiddenCover = (function () {
-        if (mode === 'EDIT') {
-            var visibilityKey = device === 'DESKTOP'
-                ? 'CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP'
-                : 'CB_CONTENT_PROP_VISIBILITY_SPEC_MOBILEWEB';
-            var isSectionVisible = jsonProperties === null || jsonProperties === void 0 ? void 0 : jsonProperties.data.CB_CONTENT_PROP_VISIBILITY[visibilityKey];
-            // 가시성 상태를 반전하여 숨겨진 커버를 표시할지 결정
-            var shouldShowHiddenCover = !isSectionVisible;
-            return shouldShowHiddenCover;
-        }
-        return false;
-    })();
-    var onDoubleClickGroup = function (e, id) {
-        e.stopPropagation();
-        if (id === 'BULK') {
-            return;
-        }
-        setEditingGroupBlock(id);
-    };
-    var onDoubleClickOutsideGroup = function () {
-        setEditingGroupBlock('ROOT');
-        setSelectedBlockId(null);
-    };
-    var onClickGroup = function (e, id) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        e.stopPropagation();
-        if (id === 'BULK') {
-            return;
-        }
-        if (editingGroupBlock === id && shortcutKeyMode === 'BULK_SELECT') {
-            return;
+          }
+        });
+        return;
+      }
+      var filtered = bulkBlockIds.filter(function (each) {
+        return each !== blockId;
+      });
+      setBulkBlockIds(filtered);
+      var groupDisabled = getWorkDirDirectChildrenLength() === filtered.length;
+      var newBulkCBIds = filtered.map(function (id) {
+        return (0, group_1.formatBlockIdToCbId)(id);
+      }).filter(function (each) {
+        return each !== null;
+      });
+      sectionActionHandler && sectionActionHandler({
+        type: '@CUSTOMSECTION/BLOCK_CLICKED',
+        payload: {
+          block: {
+            type: 'BULK',
+            blockId: 'BULK',
+            childrenBlockIds: filtered,
+            workDir: (_b = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _b !== void 0 ? _b : 'NOT-FOUND',
+            childrenCBIds: newBulkCBIds,
+            groupDisabled: groupDisabled && editingGroupBlock !== 'ROOT'
+          }
         }
-        if (bulkBlockIds.includes(id) && shortcutKeyMode === 'BULK_SELECT') {
-            if (bulkBlockIds.length <= 2) {
-                var oneLastBlockId = bulkBlockIds.filter(function (each) { return each !== id; })[0];
-                setBulkBlockIds([]);
-                setSelectedBlockId(oneLastBlockId);
-                sectionActionHandler &&
-                    sectionActionHandler({
-                        type: '@CUSTOMSECTION/BLOCK_CLICKED',
-                        payload: {
-                            block: {
-                                blockId: oneLastBlockId,
-                                type: 'GROUP_BLOCK',
-                                workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND',
-                                childrenBlockIds: (_b = (0, group_1.findDirectChildrenBlockIds)(newblock, oneLastBlockId)) !== null && _b !== void 0 ? _b : [],
-                                childrenCBIds: (_c = (0, group_1.findDirectChildrenCbIds)(newblock, oneLastBlockId)) !== null && _c !== void 0 ? _c : []
-                            }
-                        }
-                    });
-                return;
-            }
-            var newBulkBlockIds_1 = bulkBlockIds.filter(function (each) { return each !== id; });
-            var newBulkCBIds_1 = newBulkBlockIds_1
-                .map(function (id) { return (0, group_1.formatBlockIdToCbId)(id); })
-                .filter(function (each) { return each !== null; });
-            var childrenCBIds_1 = [];
-            if (newBulkCBIds_1.length === 0) {
-                var oneCB = (0, group_1.findOneComponentBlock)(newblock, newBulkBlockIds_1[0]);
-                childrenCBIds_1 = oneCB ? [oneCB] : [];
-            }
-            else {
-                childrenCBIds_1 = newBulkCBIds_1;
+      });
+    }
+  };
+  var showSectionHiddenCover = function () {
+    if (mode === 'EDIT') {
+      var visibilityKey = device === 'DESKTOP' ? 'CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP' : 'CB_CONTENT_PROP_VISIBILITY_SPEC_MOBILEWEB';
+      var isSectionVisible = jsonProperties === null || jsonProperties === void 0 ? void 0 : jsonProperties.data.CB_CONTENT_PROP_VISIBILITY[visibilityKey];
+      // 가시성 상태를 반전하여 숨겨진 커버를 표시할지 결정
+      var shouldShowHiddenCover = !isSectionVisible;
+      return shouldShowHiddenCover;
+    }
+    return false;
+  }();
+  var onDoubleClickGroup = function (e, id) {
+    e.stopPropagation();
+    if (id === 'BULK') {
+      return;
+    }
+    setEditingGroupBlock(id);
+  };
+  var onDoubleClickOutsideGroup = function () {
+    setEditingGroupBlock('ROOT');
+    setSelectedBlockId(null);
+  };
+  var onClickGroup = function (e, id) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    e.stopPropagation();
+    if (id === 'BULK') {
+      return;
+    }
+    if (editingGroupBlock === id && shortcutKeyMode === 'BULK_SELECT') {
+      return;
+    }
+    if (bulkBlockIds.includes(id) && shortcutKeyMode === 'BULK_SELECT') {
+      if (bulkBlockIds.length <= 2) {
+        var oneLastBlockId = bulkBlockIds.filter(function (each) {
+          return each !== id;
+        })[0];
+        setBulkBlockIds([]);
+        setSelectedBlockId(oneLastBlockId);
+        sectionActionHandler && sectionActionHandler({
+          type: '@CUSTOMSECTION/BLOCK_CLICKED',
+          payload: {
+            block: {
+              blockId: oneLastBlockId,
+              type: 'GROUP_BLOCK',
+              workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND',
+              childrenBlockIds: (_b = (0, group_1.findDirectChildrenBlockIds)(newblock, oneLastBlockId)) !== null && _b !== void 0 ? _b : [],
+              childrenCBIds: (_c = (0, group_1.findDirectChildrenCbIds)(newblock, oneLastBlockId)) !== null && _c !== void 0 ? _c : []
             }
-            setBulkBlockIds(newBulkBlockIds_1);
-            var groupDisabled = getWorkDirDirectChildrenLength() === newBulkBlockIds_1.length;
-            sectionActionHandler &&
-                sectionActionHandler({
-                    type: '@CUSTOMSECTION/BLOCK_CLICKED',
-                    payload: {
-                        block: {
-                            blockId: 'BULK',
-                            type: 'BULK',
-                            childrenBlockIds: newBulkBlockIds_1,
-                            childrenCBIds: childrenCBIds_1,
-                            workDir: (_d = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _d !== void 0 ? _d : 'NOT-FOUND',
-                            groupDisabled: groupDisabled && editingGroupBlock !== 'ROOT'
-                        }
-                    }
-                });
-            return;
+          }
+        });
+        return;
+      }
+      var newBulkBlockIds_1 = bulkBlockIds.filter(function (each) {
+        return each !== id;
+      });
+      var newBulkCBIds_1 = newBulkBlockIds_1.map(function (id) {
+        return (0, group_1.formatBlockIdToCbId)(id);
+      }).filter(function (each) {
+        return each !== null;
+      });
+      var childrenCBIds_1 = [];
+      if (newBulkCBIds_1.length === 0) {
+        var oneCB = (0, group_1.findOneComponentBlock)(newblock, newBulkBlockIds_1[0]);
+        childrenCBIds_1 = oneCB ? [oneCB] : [];
+      } else {
+        childrenCBIds_1 = newBulkCBIds_1;
+      }
+      setBulkBlockIds(newBulkBlockIds_1);
+      var groupDisabled = getWorkDirDirectChildrenLength() === newBulkBlockIds_1.length;
+      sectionActionHandler && sectionActionHandler({
+        type: '@CUSTOMSECTION/BLOCK_CLICKED',
+        payload: {
+          block: {
+            blockId: 'BULK',
+            type: 'BULK',
+            childrenBlockIds: newBulkBlockIds_1,
+            childrenCBIds: childrenCBIds_1,
+            workDir: (_d = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _d !== void 0 ? _d : 'NOT-FOUND',
+            groupDisabled: groupDisabled && editingGroupBlock !== 'ROOT'
+          }
         }
-        if (shortcutKeyMode === 'BULK_SELECT') {
-            var added = (function () {
-                if (selectedBlockId === editingGroupBlock) {
-                    return [id];
-                }
-                return selectedBlockId ? [selectedBlockId, id] : [id];
-            })();
-            if (bulkBlockIds.length === 0 && added.length === 1) {
-                setSelectedBlockId(id);
-                setBulkBlockIds([]);
-                sectionActionHandler &&
-                    sectionActionHandler({
-                        type: '@CUSTOMSECTION/BLOCK_CLICKED',
-                        payload: {
-                            block: {
-                                blockId: id,
-                                type: 'GROUP_BLOCK',
-                                workDir: (_e = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _e !== void 0 ? _e : 'NOT-FOUND',
-                                childrenBlockIds: (_f = (0, group_1.findDirectChildrenBlockIds)(newblock, id)) !== null && _f !== void 0 ? _f : [],
-                                childrenCBIds: (_g = (0, group_1.findDirectChildrenCbIds)(newblock, id)) !== null && _g !== void 0 ? _g : []
-                            }
-                        }
-                    });
-                return;
-            }
-            var newBulkBlockIds_2 = Array.from(new Set(__spreadArray(__spreadArray([], bulkBlockIds, true), added, true)));
-            var newBulkCBIds_2 = newBulkBlockIds_2
-                .map(function (id) { return (0, group_1.formatBlockIdToCbId)(id); })
-                .filter(function (each) { return each !== null; });
-            setBulkBlockIds(newBulkBlockIds_2);
-            setSelectedBlockId(null);
-            var childrenCBIds_2 = [];
-            if (newBulkCBIds_2.length === 0) {
-                var oneCB = (0, group_1.findOneComponentBlock)(newblock, newBulkBlockIds_2[0]);
-                childrenCBIds_2 = oneCB ? [oneCB] : [];
-            }
-            else {
-                childrenCBIds_2 = newBulkCBIds_2;
-            }
-            var groupDisabled = getWorkDirDirectChildrenLength() === newBulkBlockIds_2.length;
-            sectionActionHandler &&
-                sectionActionHandler({
-                    type: '@CUSTOMSECTION/BLOCK_CLICKED',
-                    payload: {
-                        block: {
-                            blockId: 'BULK',
-                            type: 'BULK',
-                            childrenBlockIds: newBulkBlockIds_2,
-                            childrenCBIds: childrenCBIds_2,
-                            workDir: (_h = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _h !== void 0 ? _h : 'NOT-FOUND',
-                            groupDisabled: groupDisabled && editingGroupBlock !== 'ROOT'
-                        }
-                    }
-                });
-            return;
+      });
+      return;
+    }
+    if (shortcutKeyMode === 'BULK_SELECT') {
+      var added = function () {
+        if (selectedBlockId === editingGroupBlock) {
+          return [id];
         }
-        setBulkBlockIds([]);
+        return selectedBlockId ? [selectedBlockId, id] : [id];
+      }();
+      if (bulkBlockIds.length === 0 && added.length === 1) {
         setSelectedBlockId(id);
-        var newBulkBlockIds = (0, group_1.findDirectChildrenBlockIds)(newblock, id);
-        var newBulkCBIds = newBulkBlockIds
-            .map(function (id) { return (0, group_1.formatBlockIdToCbId)(id); })
-            .filter(function (each) { return each !== null; });
-        var childrenCBIds = [];
-        if (newBulkCBIds.length === 0) {
-            var oneCB = (0, group_1.findOneComponentBlock)(newblock, newBulkBlockIds[0]);
-            childrenCBIds = oneCB ? [oneCB] : [];
-        }
-        else {
-            childrenCBIds = newBulkCBIds;
+        setBulkBlockIds([]);
+        sectionActionHandler && sectionActionHandler({
+          type: '@CUSTOMSECTION/BLOCK_CLICKED',
+          payload: {
+            block: {
+              blockId: id,
+              type: 'GROUP_BLOCK',
+              workDir: (_e = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _e !== void 0 ? _e : 'NOT-FOUND',
+              childrenBlockIds: (_f = (0, group_1.findDirectChildrenBlockIds)(newblock, id)) !== null && _f !== void 0 ? _f : [],
+              childrenCBIds: (_g = (0, group_1.findDirectChildrenCbIds)(newblock, id)) !== null && _g !== void 0 ? _g : []
+            }
+          }
+        });
+        return;
+      }
+      var newBulkBlockIds_2 = Array.from(new Set(__spreadArray(__spreadArray([], bulkBlockIds, true), added, true)));
+      var newBulkCBIds_2 = newBulkBlockIds_2.map(function (id) {
+        return (0, group_1.formatBlockIdToCbId)(id);
+      }).filter(function (each) {
+        return each !== null;
+      });
+      setBulkBlockIds(newBulkBlockIds_2);
+      setSelectedBlockId(null);
+      var childrenCBIds_2 = [];
+      if (newBulkCBIds_2.length === 0) {
+        var oneCB = (0, group_1.findOneComponentBlock)(newblock, newBulkBlockIds_2[0]);
+        childrenCBIds_2 = oneCB ? [oneCB] : [];
+      } else {
+        childrenCBIds_2 = newBulkCBIds_2;
+      }
+      var groupDisabled = getWorkDirDirectChildrenLength() === newBulkBlockIds_2.length;
+      sectionActionHandler && sectionActionHandler({
+        type: '@CUSTOMSECTION/BLOCK_CLICKED',
+        payload: {
+          block: {
+            blockId: 'BULK',
+            type: 'BULK',
+            childrenBlockIds: newBulkBlockIds_2,
+            childrenCBIds: childrenCBIds_2,
+            workDir: (_h = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _h !== void 0 ? _h : 'NOT-FOUND',
+            groupDisabled: groupDisabled && editingGroupBlock !== 'ROOT'
+          }
         }
-        sectionActionHandler &&
-            sectionActionHandler({
-                type: '@CUSTOMSECTION/BLOCK_CLICKED',
-                payload: {
-                    block: {
-                        blockId: id,
-                        type: 'GROUP_BLOCK',
-                        workDir: (_j = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _j !== void 0 ? _j : 'NOT-FOUND',
-                        childrenBlockIds: newBulkBlockIds,
-                        childrenCBIds: childrenCBIds
-                    }
-                }
-            });
-    };
-    var onBulkDragStop = function (_a) {
-        var _b;
-        var updatedItems = _a.updatedItems, item = _a.item;
-        if ((item === null || item === void 0 ? void 0 : item.i) === 'BULK') {
-            sectionActionHandler &&
-                sectionActionHandler({
-                    type: '@CUSTOMSECTION/BULK_DRAG_STOP',
-                    payload: {
-                        updatedBlocks: updatedItems.map(function (i) { return ({
-                            cbId: Number(i.id),
-                            blockId: (0, group_1.formatCbIdToBlockId)(Number(i.id)),
-                            x: i.x,
-                            y: i.y
-                        }); })
-                    }
-                });
-            return;
+      });
+      return;
+    }
+    setBulkBlockIds([]);
+    setSelectedBlockId(id);
+    var newBulkBlockIds = (0, group_1.findDirectChildrenBlockIds)(newblock, id);
+    var newBulkCBIds = newBulkBlockIds.map(function (id) {
+      return (0, group_1.formatBlockIdToCbId)(id);
+    }).filter(function (each) {
+      return each !== null;
+    });
+    var childrenCBIds = [];
+    if (newBulkCBIds.length === 0) {
+      var oneCB = (0, group_1.findOneComponentBlock)(newblock, newBulkBlockIds[0]);
+      childrenCBIds = oneCB ? [oneCB] : [];
+    } else {
+      childrenCBIds = newBulkCBIds;
+    }
+    sectionActionHandler && sectionActionHandler({
+      type: '@CUSTOMSECTION/BLOCK_CLICKED',
+      payload: {
+        block: {
+          blockId: id,
+          type: 'GROUP_BLOCK',
+          workDir: (_j = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _j !== void 0 ? _j : 'NOT-FOUND',
+          childrenBlockIds: newBulkBlockIds,
+          childrenCBIds: childrenCBIds
         }
-        if (item) {
-            sectionActionHandler &&
-                sectionActionHandler({
-                    type: '@CUSTOMSECTION/GROUP_DRAG_STOP',
-                    payload: {
-                        workDir: (_b = (0, group_1.getBlockWorkDirPath)(newblock, item.i)) !== null && _b !== void 0 ? _b : 'NOT-FOUND',
-                        updatedBlocks: updatedItems.map(function (i) { return ({
-                            cbId: Number(i.id),
-                            blockId: (0, group_1.formatCbIdToBlockId)(Number(i.id)),
-                            x: i.x,
-                            y: i.y
-                        }); })
-                    }
-                });
+      }
+    });
+  };
+  var onBulkDragStop = function (_a) {
+    var _b;
+    var updatedItems = _a.updatedItems,
+      item = _a.item;
+    if ((item === null || item === void 0 ? void 0 : item.i) === 'BULK') {
+      sectionActionHandler && sectionActionHandler({
+        type: '@CUSTOMSECTION/BULK_DRAG_STOP',
+        payload: {
+          updatedBlocks: updatedItems.map(function (i) {
+            return {
+              cbId: Number(i.id),
+              blockId: (0, group_1.formatCbIdToBlockId)(Number(i.id)),
+              x: i.x,
+              y: i.y
+            };
+          })
         }
-    };
-    (0, react_1.useLayoutEffect)(function () {
-        if (innerRef.current) {
-            innerRef.current.setAttribute('data-section-id', props.id.toString());
+      });
+      return;
+    }
+    if (item) {
+      sectionActionHandler && sectionActionHandler({
+        type: '@CUSTOMSECTION/GROUP_DRAG_STOP',
+        payload: {
+          workDir: (_b = (0, group_1.getBlockWorkDirPath)(newblock, item.i)) !== null && _b !== void 0 ? _b : 'NOT-FOUND',
+          updatedBlocks: updatedItems.map(function (i) {
+            return {
+              cbId: Number(i.id),
+              blockId: (0, group_1.formatCbIdToBlockId)(Number(i.id)),
+              x: i.x,
+              y: i.y
+            };
+          })
         }
-    }, []);
-    function getWorkDirDirectChildrenLength() {
-        var ids = (0, group_1.findDirectChildrenBlockIds)(newblock, editingGroupBlock).filter(function (each) { return each !== 'BULK'; });
-        return ids.length + bulkBlockIds.length;
+      });
+    }
+  };
+  (0, react_1.useLayoutEffect)(function () {
+    if (innerRef.current) {
+      innerRef.current.setAttribute('data-section-id', props.id.toString());
     }
-    var editableCBIDs = (0, group_1.findDirectChildrenCbIds)(newblock, editingGroupBlock);
-    return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsxs)(gleStyles_1.S_gleStyles, __assign({ isBulkMode: shortcutKeyMode === 'BULK_SELECT' }, { children: [showSectionHiddenCover && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_SectionWrapper, __assign({ ref: gleRef, "x-dlayout-section-type": "NO_NAME", onClick: onClickSection, onContextMenu: function (e) {
-                        e.stopPropagation();
+  }, []);
+  function getWorkDirDirectChildrenLength() {
+    var ids = (0, group_1.findDirectChildrenBlockIds)(newblock, editingGroupBlock).filter(function (each) {
+      return each !== 'BULK';
+    });
+    return ids.length + bulkBlockIds.length;
+  }
+  var editableCBIDs = (0, group_1.findDirectChildrenCbIds)(newblock, editingGroupBlock);
+  return (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, {
+    children: (0, jsx_runtime_1.jsxs)(gleStyles_1.S_gleStyles, __assign({
+      isBulkMode: shortcutKeyMode === 'BULK_SELECT'
+    }, {
+      children: [showSectionHiddenCover && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_SectionWrapper, __assign({
+        ref: gleRef,
+        "x-dlayout-section-type": "NO_NAME",
+        onClick: onClickSection,
+        onContextMenu: function (e) {
+          e.stopPropagation();
+          e.preventDefault();
+          onContextSection(e);
+        }
+      }, {
+        children: (0, jsx_runtime_1.jsx)(components_1.CustomSection, __assign({}, props, {
+          isMobile: isMobile,
+          overrideStyles: {
+            minHeight: customSectionStyles.minHeight,
+            paddingTop: padding.top,
+            paddingBottom: padding.bottom,
+            paddingRight: padding.right,
+            paddingLeft: padding.left
+          }
+        }, {
+          children: (0, jsx_runtime_1.jsx)(Responsive, __assign({
+            sectionId: props.id.toString(),
+            innerRef: innerRef,
+            className: (0, clsx_1.clsx)({
+              'selected-grid-layout': editingSectionId === props.id
+            }),
+            allowOverlap: true,
+            layouts: layouts,
+            resizeHandles: ['nw', 'e', 'n', 'ne', 's', 'se', 'sw', 'w'],
+            breakpoints: breakpoints,
+            breakpoint: breakpoint,
+            cols: {
+              lg: colsDesktop,
+              sm: colsMobile
+            },
+            rowHeight: rowHeight,
+            margin: [10, 10],
+            style: {
+              width: customSectionStyles.width,
+              maxWidth: customSectionStyles.maxWidth,
+              minWidth: isMobile ? GLE_MIN_WIDTH_MOBILE_PX : GLE_MIN_WIDTH_DESKTOP_PX,
+              fontSize: "".concat(baseFontSize, "px")
+            },
+            onLayoutChange: onLayoutChange,
+            onDragStart: onDragStart,
+            onDragStop: onDragStop,
+            onResizeStop: onResizeStop,
+            onDragStopForGroup: onBulkDragStop,
+            onFitToContent: onAutoFitContent,
+            onWidthChange: onWidthChange,
+            minNbRow: rows,
+            isDraggable: isEditMode,
+            isResizable: isEditMode,
+            zoom: zoomScale,
+            // GROUP
+            selectedGroupBlock: (_d = selectedBlockId === null || selectedBlockId === void 0 ? void 0 : selectedBlockId.toString()) !== null && _d !== void 0 ? _d : 'ROOT',
+            editingGroupBlock: editingGroupBlock,
+            blockStructure: newblock,
+            bulkIds: bulkBlockIds,
+            onDoubleClickGroup: onDoubleClickGroup,
+            onClickGroup: onClickGroup,
+            onDoubleClickOutsideGroup: onDoubleClickOutsideGroup,
+            onContextGroup: onContextGroup
+          }, {
+            children: layouts[layoutByDevice].map(function (each, index) {
+              var matchedCB = componentBlocks === null || componentBlocks === void 0 ? void 0 : componentBlocks.find(function (cb) {
+                return cb.id.toString() === each.i;
+              });
+              var isInBulk = bulkBlockIds.includes((0, group_1.formatCbIdToBlockId)(Number(each.i)));
+              if (!matchedCB) {
+                return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+              }
+              return (0, jsx_runtime_1.jsx)("div", __assign({
+                className: (0, clsx_1.clsx)({
+                  'react-grid-item-selected': selectedBlockId === (0, group_1.formatCbIdToBlockId)(matchedCB.id)
+                })
+              }, {
+                children: (0, jsx_runtime_1.jsx)("div", __assign({
+                  className: (0, clsx_1.clsx)({
+                    'grid-item-child': true
+                  }),
+                  style: {
+                    width: '100%',
+                    height: '100%'
+                  },
+                  onClick: function (e) {
+                    e.stopPropagation();
+                    if (isInBulk) {
+                      clickOneCBInBulk(matchedCB.id);
+                      return;
+                    }
+                    if (editingGroupBlock !== 'ROOT') {
+                      if (!editableCBIDs.includes(matchedCB.id)) {
                         e.preventDefault();
-                        onContextSection(e);
-                    } }, { children: (0, jsx_runtime_1.jsx)(components_1.CustomSection, __assign({}, props, { isMobile: isMobile, overrideStyles: {
-                            minHeight: customSectionStyles.minHeight,
-                            paddingTop: padding.top,
-                            paddingBottom: padding.bottom,
-                            paddingRight: padding.right,
-                            paddingLeft: padding.left
-                        } }, { children: (0, jsx_runtime_1.jsx)(Responsive, __assign({ sectionId: props.id.toString(), innerRef: innerRef, className: (0, clsx_1.clsx)({
-                                'selected-grid-layout': editingSectionId === props.id
-                            }), allowOverlap: true, layouts: layouts, resizeHandles: ['nw', 'e', 'n', 'ne', 's', 'se', 'sw', 'w'], breakpoints: breakpoints, breakpoint: breakpoint, cols: { lg: colsDesktop, sm: colsMobile }, rowHeight: rowHeight, margin: [10, 10], style: {
-                                width: customSectionStyles.width,
-                                maxWidth: customSectionStyles.maxWidth,
-                                minWidth: isMobile ? GLE_MIN_WIDTH_MOBILE_PX : GLE_MIN_WIDTH_DESKTOP_PX,
-                                fontSize: "".concat(baseFontSize, "px")
-                            }, onLayoutChange: onLayoutChange, onDragStart: onDragStart, onDragStop: onDragStop, onResizeStop: onResizeStop, onDragStopForGroup: onBulkDragStop, onFitToContent: onAutoFitContent, onWidthChange: onWidthChange, minNbRow: rows, isDraggable: isEditMode, isResizable: isEditMode, zoom: zoomScale, 
-                            // GROUP
-                            selectedGroupBlock: (_d = selectedBlockId === null || selectedBlockId === void 0 ? void 0 : selectedBlockId.toString()) !== null && _d !== void 0 ? _d : 'ROOT', editingGroupBlock: editingGroupBlock, blockStructure: newblock, bulkIds: bulkBlockIds, onDoubleClickGroup: onDoubleClickGroup, onClickGroup: onClickGroup, onDoubleClickOutsideGroup: onDoubleClickOutsideGroup, onContextGroup: onContextGroup }, { children: layouts[layoutByDevice].map(function (each, index) {
-                                var matchedCB = componentBlocks === null || componentBlocks === void 0 ? void 0 : componentBlocks.find(function (cb) { return cb.id.toString() === each.i; });
-                                var isInBulk = bulkBlockIds.includes((0, group_1.formatCbIdToBlockId)(Number(each.i)));
-                                if (!matchedCB) {
-                                    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-                                }
-                                return ((0, jsx_runtime_1.jsx)("div", __assign({ className: (0, clsx_1.clsx)({
-                                        'react-grid-item-selected': selectedBlockId === (0, group_1.formatCbIdToBlockId)(matchedCB.id)
-                                    }) }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: (0, clsx_1.clsx)({
-                                            'grid-item-child': true
-                                        }), style: {
-                                            width: '100%',
-                                            height: '100%'
-                                        }, onClick: function (e) {
-                                            e.stopPropagation();
-                                            if (isInBulk) {
-                                                clickOneCBInBulk(matchedCB.id);
-                                                return;
-                                            }
-                                            if (editingGroupBlock !== 'ROOT') {
-                                                if (!editableCBIDs.includes(matchedCB.id)) {
-                                                    e.preventDefault();
-                                                    return;
-                                                }
-                                            }
-                                            onClickCB(matchedCB.id);
-                                        }, onContextMenu: function (e) {
-                                            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));
-                            }) })) })) }))] })) }));
+                        return;
+                      }
+                    }
+                    onClickCB(matchedCB.id);
+                  },
+                  onContextMenu: function (e) {
+                    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);
+            })
+          }))
+        }))
+      }))]
+    }))
+  });
 });
 function isLayoutPlacementSame(current, prev) {
-    if (!prev) {
-        return false;
-    }
-    return (prev.w === current.w &&
-        prev.h === current.h &&
-        prev.x === current.x &&
-        prev.y === current.y &&
-        prev.z === current.z &&
-        prev.i === current.i);
+  if (!prev) {
+    return false;
+  }
+  return prev.w === current.w && prev.h === current.h && prev.x === current.x && prev.y === current.y && prev.z === current.z && prev.i === current.i;
 }
 var S_SectionWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
 exports.default = react_1.default.memo(CustomSection);
-var templateObject_1;
+var templateObject_1;