pds-dev-kit-web-test 2.4.22 → 2.4.23

package/dist/src/desktop/components/UserDesktopTabBar/UserDesktopTabBar.d.ts

@@ -6,7 +6,7 @@ type TextObj = {
 };
 type UserDesktopTabBarProps = {
     itemArray?: PDSTabItemOption[];
-    styleTheme?: 'main' | 'content';
+    styleTheme?: 'main';
     /** @deprecated v1.5 해당 필드 대신 itemArray를 사용하세요. */
     textArray?: TextObj[];
 };

package/dist/src/desktop/components/UserDesktopTabBar/UserDesktopTabBar.js

@@ -52,12 +52,7 @@ function UserDesktopTabBar(_a) {
                 item.onClick(e);
             }
         };
-        return ((0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "UserDesktopTabBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: itemArray.map(function (item, index) {
-                if (styleTheme === 'content') {
-                    return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ isActive: item.isActive, styleTheme: "content", text: item.title, onClick: function (e) { return handleClickTabItem_1(item, e); } }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "headingBold", colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }) }), index));
-                }
-                return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ isActive: item.isActive, styleTheme: styleTheme, text: item.title, onClick: function (e) { return handleClickTabItem_1(item, e); } }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'body2Bold' : 'body2Regular', colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }) }), index));
-            }) })));
+        return ((0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "UserDesktopTabBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: itemArray.map(function (item, index) { return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ isActive: item.isActive, styleTheme: styleTheme, text: item.title, onClick: function (e) { return handleClickTabItem_1(item, e); } }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'body2Bold' : 'body2Regular', colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }) }), index)); }) })));
     }
     if (textArray) {
         var handleClick_1 = function (value) {
@@ -80,9 +75,7 @@ var S_TabWrapper = styled_components_1.default.div(templateObject_2 || (template
     var styleTheme = _a.styleTheme;
     switch (styleTheme) {
         case 'main':
-            return mainStyle;
-        case 'content':
-            return contentStyle;
+            return mainStyle; // TODO : 추후 styleTheme 의 enum 값이 추가되면 수정
         default:
             return mainStyle;
     }
@@ -106,20 +99,7 @@ var mainStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject
     var isActive = _a.isActive;
     return !isActive && "display: none;";
 });
-var contentStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  cursor: pointer;\n  display: flex;\n  margin-right: ", ";\n  position: relative;\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &::after {\n    background-color: ", ";\n    bottom: -1px;\n    content: '';\n    height: 2px;\n    position: absolute;\n    width: 100%;\n    ", ";\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  cursor: pointer;\n  display: flex;\n  margin-right: ", ";\n  position: relative;\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &::after {\n    background-color: ", ";\n    bottom: -1px;\n    content: '';\n    height: 2px;\n    position: absolute;\n    width: 100%;\n    ", ";\n  }\n"])), function (_a) {
-    var isActive = _a.isActive, theme = _a.theme;
-    return isActive && theme.ui_cpnt_tabbar_base_area;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingF;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_19;
-}, function (_a) {
-    var isActive = _a.isActive;
-    return !isActive && "display: none;";
-});
-var S_TabBar = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  height: 48px;\n  justify-content: center;\n"], ["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  height: 48px;\n  justify-content: center;\n"])), function (_a) {
+var S_TabBar = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  height: 48px;\n  justify-content: center;\n"], ["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  height: 48px;\n  justify-content: center;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_tabbar_base_area;
 }, function (_a) {
@@ -127,4 +107,4 @@ var S_TabBar = styled_components_1.default.div(templateObject_5 || (templateObje
     return theme.ui_cpnt_divider;
 });
 exports.default = UserDesktopTabBar;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -26,20 +26,7 @@ var SectionMatcher_1 = require("./components/SectionMatcher");
 var dynamicLayoutContext_1 = require("./dynamicLayoutContext");
 function DynamicLayout(_a) {
     var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, navigationHandler = _a.navigationHandler, sectionActionHandler = _a.sectionActionHandler, onClickEditSection = _a.onClickEditSection, programmedSectionComponents = _a.programmedSectionComponents, shortcutKeyMode = _a.shortcutKeyMode, dynamicLayoutRef = _a.dynamicLayoutRef;
-    var filteredSortedSection = __spreadArray([], sections, true).filter(function (section) {
-        var _a;
-        if (!section.display) {
-            return false;
-        }
-        if (section.type === 'CUSTOM' && mode !== 'EDIT') {
-            var deviceKey = device === 'DESKTOP'
-                ? 'CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP'
-                : 'CB_CONTENT_PROP_VISIBILITY_SPEC_MOBILEWEB';
-            var isVisible = (_a = section.jsonProperties) === null || _a === void 0 ? void 0 : _a.data.CB_CONTENT_PROP_VISIBILITY[deviceKey];
-            return isVisible;
-        }
-        return true;
-    })
+    var filteredSortedSection = __spreadArray([], sections, true).filter(function (section) { return section.display; })
         .sort(function (a, b) { return a.order - b.order; });
     var iframeSection = filteredSortedSection.find(function (section) { return section.manifest.schema === 'EXP_IFRAME' && section.display; });
     return ((0, jsx_runtime_1.jsxs)(dynamicLayoutContext_1.dynamicLayoutContext.Provider, __assign({ value: {

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

@@ -137,123 +137,6 @@ exports.sampleCustomsection1 = {
             queryableTapSrc: 'N/A',
             updatedAt: '2023-08-06T13:30:49'
         },
-        {
-            availablePlugins: [],
-            componentBlockCode: 'CB_TEXT',
-            componentBlockType: 'GENERAL',
-            dynamicLayoutSectionId: 18661,
-            id: 3599,
-            insertedAt: '2023-08-06T13:30:47',
-            jsonProperties: {
-                currentVersion: '2023-08-03',
-                data: {
-                    CB_CONTENT_PROP_CLINK: {
-                        CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC: 'https://publ.co',
-                        CB_CONTENT_PROP_CLINK_SPEC_NEWTAB: true,
-                        CB_CONTENT_PROP_CLINK_SPEC_SRC: 'https://publ.co',
-                        CB_CONTENT_PROP_CLINK_SPEC_TYPE: 'DISABLED'
-                    },
-                    CB_CONTENT_PROP_HOVER: {
-                        CB_CONTENT_PROP_HOVER_SPEC_MUSE: true
-                    },
-                    CB_CONTENT_PROP_TEXT: {
-                        CB_CONTENT_PROP_TEXT_SPEC_TEXT: '{"scrollId": "airpods", "totalImages": 64, "baseURL": "https://www.apple.com/105/media/us/airpods-pro/2022/d2deeb8e-83eb-48ea-9721-f567cf0fffa8/anim/hero/medium", "type": "png", "startShowingImages": 0,"endShowingImages": 1000, "bodySelector": ".sc-bdfBQB"}'
-                    },
-                    CB_CONTENT_PROP_VISIBILITY: {
-                        CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP: true,
-                        CB_CONTENT_PROP_VISIBILITY_SPEC_MOBILEWEB: true
-                    },
-                    CB_EFFECT_PROP_ENTANIM: {
-                        CB_EFFECT_PROP_ENTANIM_SPEC_TYPE: 'SLIDEINLEFT',
-                        'CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE': 'HEARTBEAT',
-                        CB_EFFECT_PROP_ENTANIM_SPEC_DURATION: 1,
-                        'CB_EFFECT_PROP_ENTANIM_SPEC_DURATION:MOBILE': null,
-                        CB_EFFECT_PROP_ENTANIM_SPEC_REPEAT: 1,
-                        'CB_EFFECT_PROP_ENTANIM_SPEC_REPEAT:MOBILE': null,
-                        CB_EFFECT_PROP_ENTANIM_SPEC_TFUNC: 'EASEINOUT',
-                        'CB_EFFECT_PROP_ENTANIM_SPEC_TFUNC:MOBILE': null
-                    },
-                    CB_EFFECT_PROP_HOVERANIM: {
-                        CB_EFFECT_PROP_HOVERANIM_SPEC_DURATION: 0.7,
-                        'CB_EFFECT_PROP_HOVERANIM_SPEC_DURATION:MOBILE': null,
-                        CB_EFFECT_PROP_HOVERANIM_SPEC_REPEAT: 1,
-                        'CB_EFFECT_PROP_HOVERANIM_SPEC_REPEAT:MOBILE': null,
-                        CB_EFFECT_PROP_HOVERANIM_SPEC_TFUNC: 'EASEINOUT',
-                        'CB_EFFECT_PROP_HOVERANIM_SPEC_TFUNC:MOBILE': null,
-                        CB_EFFECT_PROP_HOVERANIM_SPEC_TYPE: 'NONE',
-                        'CB_EFFECT_PROP_HOVERANIM_SPEC_TYPE:MOBILE': null
-                    },
-                    CB_LAYOUT_PROP_PADDING: {
-                        CB_LAYOUT_PROP_PADDING_SPEC_FIX: true,
-                        'CB_LAYOUT_PROP_PADDING_SPEC_FIX:MOBILE': null,
-                        CB_LAYOUT_PROP_PADDING_SPEC_PADDING: {
-                            bottom: 0,
-                            left: 0,
-                            right: 0,
-                            top: 0
-                        },
-                        'CB_LAYOUT_PROP_PADDING_SPEC_PADDING:MOBILE': null
-                    },
-                    CB_PLACEMENT_PROP_PLACEMENT: {
-                        CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS: 5,
-                        'CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS:MOBILE': 8,
-                        CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS: 3,
-                        'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE': 4,
-                        CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX: 1,
-                        'CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX:MOBILE': 1,
-                        CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY: 0,
-                        'CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY:MOBILE': 1,
-                        CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX: 9999,
-                        'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX:MOBILE': 9999
-                    },
-                    CB_STYLE_PROP_OPACITY: {
-                        CB_STYLE_PROP_OPACITY_SPEC_OPACITY: 100,
-                        'CB_STYLE_PROP_OPACITY_SPEC_OPACITY:HOVER': null,
-                        'CB_STYLE_PROP_OPACITY_SPEC_OPACITY:MOBILE': null,
-                        'CB_STYLE_PROP_OPACITY_SPEC_OPACITY:MOBILE:HOVER': null
-                    },
-                    CB_STYLE_PROP_TEXT: {
-                        CB_STYLE_PROP_TEXT_SPEC_COLOR: '#333333FF',
-                        'CB_STYLE_PROP_TEXT_SPEC_COLOR:HOVER': null,
-                        'CB_STYLE_PROP_TEXT_SPEC_COLOR:MOBILE': null,
-                        'CB_STYLE_PROP_TEXT_SPEC_COLOR:MOBILE:HOVER': null,
-                        CB_STYLE_PROP_TEXT_SPEC_HORIZONTAL: 'CENTER',
-                        'CB_STYLE_PROP_TEXT_SPEC_HORIZONTAL:HOVER': null,
-                        'CB_STYLE_PROP_TEXT_SPEC_HORIZONTAL:MOBILE': null,
-                        'CB_STYLE_PROP_TEXT_SPEC_HORIZONTAL:MOBILE:HOVER': null,
-                        CB_STYLE_PROP_TEXT_SPEC_LETTERSPACING: 0,
-                        'CB_STYLE_PROP_TEXT_SPEC_LETTERSPACING:HOVER': null,
-                        'CB_STYLE_PROP_TEXT_SPEC_LETTERSPACING:MOBILE': null,
-                        'CB_STYLE_PROP_TEXT_SPEC_LETTERSPACING:MOBILE:HOVER': null,
-                        CB_STYLE_PROP_TEXT_SPEC_LINEHEIGHT: 130,
-                        'CB_STYLE_PROP_TEXT_SPEC_LINEHEIGHT:HOVER': null,
-                        'CB_STYLE_PROP_TEXT_SPEC_LINEHEIGHT:MOBILE': null,
-                        'CB_STYLE_PROP_TEXT_SPEC_LINEHEIGHT:MOBILE:HOVER': null,
-                        CB_STYLE_PROP_TEXT_SPEC_SIZE: 36,
-                        'CB_STYLE_PROP_TEXT_SPEC_SIZE:HOVER': null,
-                        'CB_STYLE_PROP_TEXT_SPEC_SIZE:MOBILE': null,
-                        'CB_STYLE_PROP_TEXT_SPEC_SIZE:MOBILE:HOVER': null,
-                        CB_STYLE_PROP_TEXT_SPEC_TYPEFACE: 'GOOGLE:Source Serif 4',
-                        'CB_STYLE_PROP_TEXT_SPEC_TYPEFACE:HOVER': 'GOOGLE:Lobster',
-                        'CB_STYLE_PROP_TEXT_SPEC_TYPEFACE:MOBILE': null,
-                        'CB_STYLE_PROP_TEXT_SPEC_TYPEFACE:MOBILE:HOVER': null,
-                        CB_STYLE_PROP_TEXT_SPEC_VERTICAL: 'MIDDLE',
-                        'CB_STYLE_PROP_TEXT_SPEC_VERTICAL:HOVER': null,
-                        'CB_STYLE_PROP_TEXT_SPEC_VERTICAL:MOBILE': null,
-                        'CB_STYLE_PROP_TEXT_SPEC_VERTICAL:MOBILE:HOVER': null,
-                        CB_STYLE_PROP_TEXT_SPEC_WEIGHT: 700,
-                        'CB_STYLE_PROP_TEXT_SPEC_WEIGHT:HOVER': null,
-                        'CB_STYLE_PROP_TEXT_SPEC_WEIGHT:MOBILE': null,
-                        'CB_STYLE_PROP_TEXT_SPEC_WEIGHT:MOBILE:HOVER': null
-                    }
-                },
-                minVersion: '2023-08-03',
-                version: '2023-08-03'
-            },
-            queryableDefinitionPreset: 'N/A',
-            queryableTapSrc: 'N/A',
-            updatedAt: '2023-08-06T13:30:49'
-        },
         {
             availablePlugins: [],
             componentBlockCode: 'CB_BTN',

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

@@ -8,6 +8,14 @@ type ActionHandlerPayload = {
         event: React.SyntheticEvent<HTMLIFrameElement, Event>;
         multiPurposeUrl: string;
     };
+    '@CUSTOMSECTION/CB_DRAG_START': {
+        layout: Layout;
+        prev?: LayoutItem;
+        item?: LayoutItem;
+        placeholder?: LayoutItem;
+        e?: ResizeEventType;
+        node?: HTMLElement;
+    };
     '@CUSTOMSECTION/CB_DRAG_STOP': {
         layout: Layout;
         prev?: LayoutItem;

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

@@ -60,7 +60,6 @@ var deepCopy_1 = __importDefault(require("../../../DynamicLayout/utils/deepCopy"
 var styled_components_1 = __importDefault(require("styled-components"));
 var components_1 = require("../../components");
 var ComponentBlockMatcher_1 = __importDefault(require("./components/ComponentBlock/ComponentBlockMatcher"));
-var S_HiddenCover_1 = require("./components/ComponentBlock/componentBlocks/components/S_HiddenCover");
 var useGroupDrag_1 = require("./hooks/useGroupDrag");
 var useGroupDrag_2 = require("./hooks/useGroupDrag/useGroupDrag");
 var utils_1 = require("./hooks/useGroupDrag/utils");
@@ -267,6 +266,14 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
         }
         setLayouts(props.layouts);
     };
+    var onDragStart = function (props) {
+        console.log(props);
+        sectionActionHandler &&
+            sectionActionHandler({
+                type: '@CUSTOMSECTION/CB_DRAG_START',
+                payload: __assign({}, props)
+            });
+    };
     var onDragStop = function (props) {
         var _a;
         if (!isEditMode || !props.item) {
@@ -404,75 +411,63 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
         }
         makeCollisionOfBulk();
     };
-    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;
-    })();
-    return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsxs)(S_gleStyles, { 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 }, { 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({ innerRef: innerRef, allowOverlap: true, layouts: layouts, resizeHandles: ['nw', 'e', 'n', 'ne', 's', 'se', 'sw', 'w'], breakpoints: breakpoints, breakpoint: breakpoint, cols: { lg: 24, sm: 8 }, 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, onDragStop: onDragStop, onResizeStop: onResizeStop, onWidthChange: onWidthChange, minNbRow: rows, isDraggable: isEditMode, isResizable: isEditMode, useCSSTransforms: mode === 'EDIT' ? true : false }, { children: keepSimilarOrderToPreventRerender(layouts[layoutByDevice]).map(function (each, index) {
-                                var _a;
-                                if (each === null) {
-                                    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-                                }
-                                var matchedCB = componentBlocks === null || componentBlocks === void 0 ? void 0 : componentBlocks.find(function (cb) { return cb.id.toString() === each.i; });
-                                if (each.i === 'group' && each.groupLayouts) {
-                                    return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "iamgroup", onClick: function (e) {
-                                            e.stopPropagation();
-                                            onClickBulk();
-                                        }, onContextMenu: function (e) {
-                                            e.stopPropagation();
-                                            e.preventDefault();
-                                            onContextMenuCB('group', e);
-                                        } }, { children: (0, jsx_runtime_1.jsx)(WidthProvidedRGL, __assign({ cols: each.w, allowOverlap: true, layout: each.groupLayouts, rowHeight: rowHeight, containerPadding: [0, 0], margin: [10, 10], isDraggable: false, isResizable: false, style: {
-                                                width: '100%'
-                                            } }, { children: (_a = each.groupLayouts) === null || _a === void 0 ? void 0 : _a.map(function (layoutItem, index, array) {
-                                                var matchedCB = componentBlocks === null || componentBlocks === void 0 ? void 0 : componentBlocks.find(function (cb) { return cb.id.toString() === layoutItem.i; });
-                                                if (!matchedCB) {
-                                                    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-                                                }
-                                                var cbCopy = (0, deepCopy_1.default)(matchedCB);
-                                                cbCopy.jsonProperties.data.CB_EFFECT_PROP_ENTANIM.CB_EFFECT_PROP_ENTANIM_SPEC_TYPE =
-                                                    'NONE';
-                                                cbCopy.jsonProperties.data.CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] = 'NONE';
-                                                return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-box-in-group", onClick: function (e) {
-                                                        e.stopPropagation();
-                                                        clickOneCBInBulk(matchedCB.id, array);
-                                                    } }, { children: (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(ComponentBlockMatcher_1.default, { cbProps: cbCopy, device: device, index: index }) }) }), matchedCB.id));
-                                            }) })) }), each.i));
-                                }
-                                if (!matchedCB) {
-                                    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-                                }
-                                return ((0, jsx_runtime_1.jsx)("div", __assign({ className: selectedCB === matchedCB.id ? 'react-grid-item-selected' : '' }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
-                                            width: '100%',
-                                            height: '100%'
-                                        }, onClick: function (e) {
-                                            e.stopPropagation();
-                                            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, index: index }) }) })) }), each.i));
-                            }) })) })) }))] }) }));
+    return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(S_gleStyles, { children: (0, jsx_runtime_1.jsx)(S_SectionWrapper, __assign({ ref: gleRef, "x-dlayout-section-type": "NO_NAME", onClick: onClickSection }, { children: (0, jsx_runtime_1.jsx)(components_1.CustomSection, __assign({}, props, { isMobile: isMobile, overrideStyles: {
+                        minHeight: customSectionStyles.minHeight,
+                        paddingTop: padding.top,
+                        paddingBottom: padding.bottom,
+                        paddingRight: padding.right,
+                        paddingLeft: padding.left
+                    } }, { children: (0, jsx_runtime_1.jsx)(Responsive, __assign({ innerRef: innerRef, allowOverlap: true, layouts: layouts, resizeHandles: ['nw', 'e', 'n', 'ne', 's', 'se', 'sw', 'w'], breakpoints: breakpoints, breakpoint: breakpoint, cols: { lg: 24, sm: 8 }, 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, onWidthChange: onWidthChange, minNbRow: rows, isDraggable: isEditMode, isResizable: isEditMode }, { children: keepSimilarOrderToPreventRerender(layouts[layoutByDevice]).map(function (each, index) {
+                            var _a;
+                            if (each === null) {
+                                return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+                            }
+                            var matchedCB = componentBlocks === null || componentBlocks === void 0 ? void 0 : componentBlocks.find(function (cb) { return cb.id.toString() === each.i; });
+                            if (each.i === 'group' && each.groupLayouts) {
+                                return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "iamgroup", onClick: function (e) {
+                                        e.stopPropagation();
+                                        onClickBulk();
+                                    }, onContextMenu: function (e) {
+                                        e.stopPropagation();
+                                        e.preventDefault();
+                                        onContextMenuCB('group', e);
+                                    } }, { children: (0, jsx_runtime_1.jsx)(WidthProvidedRGL, __assign({ cols: each.w, allowOverlap: true, layout: each.groupLayouts, rowHeight: rowHeight, containerPadding: [0, 0], margin: [10, 10], isDraggable: false, isResizable: false, style: {
+                                            width: '100%'
+                                        } }, { children: (_a = each.groupLayouts) === null || _a === void 0 ? void 0 : _a.map(function (layoutItem, index, array) {
+                                            var matchedCB = componentBlocks === null || componentBlocks === void 0 ? void 0 : componentBlocks.find(function (cb) { return cb.id.toString() === layoutItem.i; });
+                                            if (!matchedCB) {
+                                                return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+                                            }
+                                            var cbCopy = (0, deepCopy_1.default)(matchedCB);
+                                            cbCopy.jsonProperties.data.CB_EFFECT_PROP_ENTANIM.CB_EFFECT_PROP_ENTANIM_SPEC_TYPE =
+                                                'NONE';
+                                            cbCopy.jsonProperties.data.CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] = 'NONE';
+                                            return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-box-in-group", onClick: function (e) {
+                                                    e.stopPropagation();
+                                                    clickOneCBInBulk(matchedCB.id, array);
+                                                } }, { children: (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(ComponentBlockMatcher_1.default, { cbProps: cbCopy, device: device, index: index }) }) }), matchedCB.id));
+                                        }) })) }), each.i));
+                            }
+                            if (!matchedCB) {
+                                return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+                            }
+                            return ((0, jsx_runtime_1.jsx)("div", __assign({ className: selectedCB === matchedCB.id ? 'react-grid-item-selected' : '' }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
+                                        width: '100%',
+                                        height: '100%'
+                                    }, onClick: function (e) {
+                                        e.stopPropagation();
+                                        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, index: index }) }) })) }), each.i));
+                        }) })) })) })) }) }));
 });
 function keepSimilarOrderToPreventRerender(arr) {
     var _a;

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

@@ -15,7 +15,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable react/destructuring-assignment */
 require("react");
 var newUtils_1 = require("../../newUtils");
 var types_1 = require("../../types");
@@ -24,7 +23,6 @@ var Divider_1 = __importDefault(require("./componentBlocks/Divider/Divider"));
 var Embed_1 = __importDefault(require("./componentBlocks/Embed/Embed"));
 var Image_1 = __importDefault(require("./componentBlocks/Image/Image"));
 var RichText_1 = require("./componentBlocks/RichText");
-var ScrollAnimation_1 = __importDefault(require("./componentBlocks/ScrollAnimation"));
 var Text_1 = __importDefault(require("./componentBlocks/Text/Text"));
 var Twitter_1 = __importDefault(require("./componentBlocks/Twitter/Twitter"));
 var Youtube_1 = require("./componentBlocks/Youtube");
@@ -35,8 +33,8 @@ function ComponentBlockMatcher(_a) {
     switch (componentBlockCode) {
         case types_1.CB_ALL_CODES.CB_BTN:
             return (0, jsx_runtime_1.jsx)(Button_1.default, __assign({}, propsWithValue, { index: index }));
-        // case CB_ALL_CODES.CB_TEXT:
-        //   return <Text {...(propsWithValue as CB_TEXT_PROPERTIES_TYPE)} index={index} />;
+        case types_1.CB_ALL_CODES.CB_TEXT:
+            return (0, jsx_runtime_1.jsx)(Text_1.default, __assign({}, propsWithValue, { index: index }));
         case types_1.CB_ALL_CODES.CB_RICHTEXT:
             return (0, jsx_runtime_1.jsx)(RichText_1.RichText, __assign({}, propsWithValue, { index: index }));
         case types_1.CB_ALL_CODES.CB_DIVIDER:
@@ -49,43 +47,8 @@ function ComponentBlockMatcher(_a) {
             return (0, jsx_runtime_1.jsx)(Youtube_1.Youtube, __assign({}, propsWithValue, { index: index }));
         case types_1.CB_ALL_CODES.CB_EMBED:
             return (0, jsx_runtime_1.jsx)(Embed_1.default, __assign({}, propsWithValue, { index: index }));
-        case types_1.CB_ALL_CODES.CB_TEXT:
-            return (0, jsx_runtime_1.jsx)(TextPropToAnim, __assign({}, propsWithValue, { index: index }));
         default:
             return (0, jsx_runtime_1.jsx)("div", { children: "Error: not supported CB" });
     }
 }
 exports.default = ComponentBlockMatcher;
-var isValidJSON = function (str) {
-    try {
-        JSON.parse(str);
-        return true;
-    }
-    catch (e) {
-        return false;
-    }
-};
-function TextPropToAnim(props) {
-    var isAnim = isValidJSON(props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT);
-    if (!isAnim) {
-        return (0, jsx_runtime_1.jsx)(Text_1.default, __assign({}, props));
-    }
-    var json = JSON.parse(props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT);
-    var hasAllProp = validateAnimationProps(json);
-    if (!hasAllProp) {
-        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "MUST HAVE ALL PROPS: scrollId, totalImages, baseURL, type, startShowingImages, endShowingImages, bodySelector" }));
-    }
-    return (0, jsx_runtime_1.jsx)(ScrollAnimation_1.default, __assign({}, json));
-}
-var validateAnimationProps = function (json) {
-    var requiredProps = [
-        'scrollId',
-        'totalImages',
-        'baseURL',
-        'type',
-        'startShowingImages',
-        'endShowingImages',
-        'bodySelector'
-    ];
-    return requiredProps.every(function (prop) { return prop in json; });
-};

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/types.d.ts

@@ -36,6 +36,8 @@ export type CB_PLACEMENT_PROP_SPECS = {
     'CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY:MOBILE': number;
     CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX: number;
     'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX:MOBILE': number;
+    'CB_PLACEMENT_PROP_PLACEMENT_SPEC_LATEST_LOCKED_STARTY:MOBILE': number;
+    'CB_PLACEMENT_PROP_PLACEMENT_SPEC_LOCKSTATUS:MOBILE': 'LOCKED' | 'FALLBACK_TO_SYNC' | undefined;
 };
 export type CB_TEXT_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
     CB_CONTENT_PROP_TEXT: CB_CONTENT_PROP_TEXT;

package/package.json

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

package/release-note.md

@@ -1,6 +1,6 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.2.79]
+## [v2.2.77]
 ## daily|https://design.storybook.publ.biz/
 
 ### 업데이트 사항
-* [PDS-1232] 섹션 단위로 디바이스별 노출 설정 제공 건
+* 컬러 키 싱크

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

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-declare const AirpodsAnimation: ({ bodySelector, scrollId, totalImages, baseURL, type, startShowingImages, endShowingImages }: any) => JSX.Element;
-export default AirpodsAnimation;

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

@@ -1,224 +0,0 @@
-"use strict";
-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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable no-await-in-loop */
-/* eslint-disable no-plusplus */
-var react_1 = require("react");
-var AirpodsAnimation = function (_a) {
-    var bodySelector = _a.bodySelector, scrollId = _a.scrollId, totalImages = _a.totalImages, baseURL = _a.baseURL, type = _a.type, startShowingImages = _a.startShowingImages, endShowingImages = _a.endShowingImages;
-    var canvasRef = (0, react_1.useRef)(null);
-    var _b = (0, react_1.useState)([]), images = _b[0], setImages = _b[1];
-    var _c = (0, react_1.useState)(0), loadedImages = _c[0], setLoadedImages = _c[1];
-    var _d = (0, react_1.useState)(0), currentFrameIndex = _d[0], setCurrentFrameIndex = _d[1];
-    var _e = (0, react_1.useState)(function () {
-        var box = document.querySelector(bodySelector);
-        return box;
-    }), mainBody = _e[0], setMainBody = _e[1];
-    (0, react_1.useEffect)(function () {
-        var box = document.querySelector(bodySelector);
-        setMainBody(box);
-    }, [bodySelector]);
-    (0, react_1.useEffect)(function () {
-        var loadImage = function (i) {
-            return new Promise(function (resolve) {
-                var img = new Image();
-                img.src = "".concat(baseURL, "/").concat(String(i).padStart(4, '0'), ".").concat(type);
-                img.onload = function () { return resolve(img); };
-            });
-        };
-        var loadImages = function () { return __awaiter(void 0, void 0, void 0, function () {
-            var imgs, i, img;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        imgs = [];
-                        i = 0;
-                        _a.label = 1;
-                    case 1:
-                        if (!(i < totalImages)) return [3 /*break*/, 4];
-                        return [4 /*yield*/, loadImage(i)];
-                    case 2:
-                        img = _a.sent();
-                        imgs.push(img);
-                        _a.label = 3;
-                    case 3:
-                        i++;
-                        return [3 /*break*/, 1];
-                    case 4:
-                        setImages(imgs);
-                        return [2 /*return*/];
-                }
-            });
-        }); };
-        loadImages();
-    }, [totalImages, baseURL, type]);
-    (0, react_1.useEffect)(function () {
-        var handleScroll = function () {
-            var scrollTop = mainBody.scrollTop;
-            console.log(scrollId, scrollTop);
-            if (scrollTop < startShowingImages || scrollTop > endShowingImages) {
-                console.log(scrollId, 'frame 0');
-                setCurrentFrameIndex(0); // Reset or handle as needed when out of range
-                return;
-            }
-            var maxScrollTop = endShowingImages - startShowingImages;
-            var scrollFraction = (scrollTop - startShowingImages) / maxScrollTop;
-            console.log({ maxScrollTop: maxScrollTop, scrollTop: scrollTop, startShowingImages: startShowingImages });
-            var frameIndex = Math.min(totalImages - 1, Math.max(0, Math.floor(scrollFraction * totalImages)));
-            setCurrentFrameIndex(frameIndex);
-            console.log(scrollId, "frameis ".concat(frameIndex));
-            handleHeadingAnimationBasedOnScroll();
-        };
-        var handleHeadingAnimationBasedOnScroll = function () {
-            var heading = document.querySelector('h1');
-            var scrollTop = mainBody.scrollTop;
-            var viewportHeight = window.innerHeight;
-            // Calculate opacity based on scroll position
-            var opacity = Math.max(0, 1 - scrollTop / (2 * viewportHeight));
-            // Apply the calculated opacity
-            if (heading) {
-                heading.style.opacity = opacity.toString();
-            }
-        };
-        mainBody.addEventListener('scroll', handleScroll);
-        return function () {
-            mainBody.removeEventListener('scroll', handleScroll);
-        };
-    }, [totalImages, images, startShowingImages, endShowingImages, mainBody]);
-    (0, react_1.useEffect)(function () {
-        if (images.length === totalImages) {
-            render();
-        }
-    }, [currentFrameIndex, images]);
-    var render = function () {
-        var canvas = canvasRef.current;
-        if (!canvas) {
-            return;
-        }
-        var ctx = canvas.getContext('2d');
-        if (!ctx) {
-            return;
-        }
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        var img = images[currentFrameIndex];
-        // const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
-        var scrollTop = mainBody.scrollTop;
-        if (!img || scrollTop < startShowingImages || scrollTop > endShowingImages) {
-            ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
-            return;
-        }
-        var canvasRatio = canvas.width / canvas.height;
-        var imgRatio = img.width / img.height;
-        var drawWidth;
-        var drawHeight;
-        var offsetX = 0;
-        var offsetY = 0;
-        if (canvasRatio > imgRatio) {
-            drawWidth = canvas.width;
-            drawHeight = drawWidth / imgRatio;
-            offsetY = (canvas.height - drawHeight) / 2;
-        }
-        else {
-            drawHeight = canvas.height;
-            drawWidth = drawHeight * imgRatio;
-            offsetX = (canvas.width - drawWidth) / 2;
-        }
-        ctx.save();
-        if (totalImages - currentFrameIndex < 10) {
-            ctx.globalAlpha = (totalImages - currentFrameIndex) / 10;
-        }
-        ctx.drawImage(img, offsetX, offsetY, drawWidth, drawHeight);
-        ctx.restore();
-    };
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({ id: "main", style: {
-            width: '100vw',
-            position: 'fixed',
-            pointerEvents: 'none'
-            /* height: 500vh; */
-        } }, { children: [(0, jsx_runtime_1.jsx)("h1", __assign({ style: {
-                    position: 'fixed',
-                    top: '50%',
-                    width: '100vw',
-                    left: '50%',
-                    textAlign: 'center',
-                    transform: 'translate(-50%, -50%)',
-                    fontSize: 'clamp(2rem, 10vw, 13.5rem)'
-                } }, { children: "Airpods Pro" })), (0, jsx_runtime_1.jsx)("canvas", { style: {
-                    position: 'fixed',
-                    left: '50%',
-                    top: '50%',
-                    maxHeight: '100vh',
-                    maxWidth: '100vw',
-                    transform: 'translate(-50%, -50%)'
-                }, ref: canvasRef, width: window.innerWidth, height: window.innerHeight })] })));
-};
-// #main {
-//     width: 100vw;
-//     position: fixed;
-//     /* height: 500vh; */
-//   }
-//   canvas {
-//     position: fixed;
-//     left: 50%;
-//     top: 50%;
-//     max-height: 100vh;
-//     max-width: 100vw;
-//     transform: translate(-50%, -50%);
-//   }
-//   h1 {
-//     position: fixed;
-//     top: 50%;
-//     width: 100vw;
-//     left: 50%;
-//     text-align: center;
-//     transform: translate(-50%, -50%);
-//     font-size: clamp(2rem, 10vw, 13.5rem);
-//   }
-exports.default = AirpodsAnimation;