pds-dev-kit-web-test 2.7.93 → 2.7.95

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

@@ -46,9 +46,12 @@ 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_CONTENTS_CAROUSEL: {
+        case types_1.CB_ALL_CODES.CB_CONTENTSCAROUSEL: {
             return (0, jsx_runtime_1.jsx)("div", { children: "NOT SUPPORTED NESTED CAROUSEL" });
         }
+        case types_1.CB_ALL_CODES.CB_LIST: {
+            return (0, jsx_runtime_1.jsx)("div", { children: "NOT SUPPORTED NESTED CONTENTSLIST" });
+        }
         default:
             return (0, jsx_runtime_1.jsx)("div", { children: "Error: not supported CB" });
     }

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

@@ -1,9 +1,11 @@
 import React from 'react';
-import type { ISection } from '../types';
-import type { Layout } from 'publ-echo/dist/lib/GridLayoutEditor/types';
+import type { IComposition } from '../types';
+import type { Layout } from 'publ-echo-test/dist/lib/GridLayoutEditor/types';
 export type LayoutsType = {
     sm: Layout;
     lg: Layout;
 };
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<ISection & React.RefAttributes<unknown>>>;
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<IComposition & {
+    device?: "DESKTOP" | "MOBILE" | undefined;
+} & React.RefAttributes<unknown>>>;
 export default _default;

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

@@ -44,39 +44,37 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable @typescript-eslint/no-unused-vars */
 var react_1 = __importStar(require("react"));
-var ErrorBoundary_1 = require("../../DynamicLayout/components/Section/ErrorBoundary");
-var dynamicLayoutContext_1 = require("../../DynamicLayout/dynamicLayoutContext");
+var ErrorBoundary_1 = require("@sub/DynamicLayout/components/Section/ErrorBoundary");
+var dynamicLayoutContext_1 = require("@sub/DynamicLayout/dynamicLayoutContext");
 var styled_components_1 = __importDefault(require("styled-components"));
-var components_1 = require("../components");
+require("../components");
 var gleStyles_1 = require("../gleStyles");
 var useResizableObserver_1 = require("../sections/CustomSection/hooks/useResizableObserver");
-var util_1 = require("../sections/CustomSection/util");
+require("../sections/CustomSection/util");
 var parseSectionPadding_1 = __importDefault(require("../sections/CustomSection/util/layoutPropParsers/parseSectionPadding"));
-var FlexGridItem_1 = __importDefault(require("./FlexGridItem"));
-var GRID_CELL_MIN = 24;
-var DESKTOP_GRID_COLS = 24;
-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 parseCompositionPlacement_1 = __importDefault(require("../sections/CustomSection/util/parseCompositionPlacement"));
+var parseStylePropBorder_1 = __importDefault(require("../sections/CustomSection/util/stylePropParsers/parseStylePropBorder"));
+var parseStylePropShadow_1 = __importDefault(require("../sections/CustomSection/util/stylePropParsers/parseStylePropShadow"));
+var types_1 = require("../sections/CustomSection/util/stylePropParsers/types");
+var CompositionBackground_1 = __importDefault(require("./CompositionBackground"));
+var FlexGridItemForCCB_1 = __importDefault(require("./FlexGridItemForCCB"));
 var Composition = (0, react_1.forwardRef)(function CustomSection(props, ref) {
-    var _a;
-    var _b = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _b.device, editingSectionId = _b.editingSectionId, mode = _b.mode, shortcutKeyMode = _b.shortcutKeyMode, sectionActionHandler = _b.sectionActionHandler;
+    var _a, _b, _c, _d, _e;
+    var _f = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _f.device, editingSectionId = _f.editingSectionId, mode = _f.mode, shortcutKeyMode = _f.shortcutKeyMode, sectionActionHandler = _f.sectionActionHandler, queryData = _f.queryData;
     var componentBlocks = props.componentBlocks, jsonProperties = props.jsonProperties;
-    var _c = jsonProperties, _d = _c.data, CB_PLACEMENT_PROP_SECTION = _d.CB_PLACEMENT_PROP_SECTION, CB_LAYOUT_PROP_PADDING = _d.CB_LAYOUT_PROP_PADDING, zOrders = _c.zOrders;
+    var isMobile = device === 'MOBILE';
+    var isEditMode = mode === 'EDIT';
+    var _g = jsonProperties, _h = _g.data, CB_PLACEMENT_PROP_COMPOSITION = _h.CB_PLACEMENT_PROP_COMPOSITION, CB_LAYOUT_PROP_PADDING = _h.CB_LAYOUT_PROP_PADDING, CB_STYLE_PROP_SHADOW = _h.CB_STYLE_PROP_SHADOW, CB_STYLE_PROP_BORDER = _h.CB_STYLE_PROP_BORDER, zOrders = _g.zOrders;
+    var colsDesktop = (_a = CB_PLACEMENT_PROP_COMPOSITION.CB_PLACEMENT_PROP_COMPOSITION_SPEC_COLUMNS) !== null && _a !== void 0 ? _a : 24;
+    var colsMobile = (_b = CB_PLACEMENT_PROP_COMPOSITION['CB_PLACEMENT_PROP_COMPOSITION_SPEC_COLUMNS:MOBILE']) !== null && _b !== void 0 ? _b : 8;
+    var rowsDesktop = (_c = CB_PLACEMENT_PROP_COMPOSITION.CB_PLACEMENT_PROP_COMPOSITION_SPEC_ROWS) !== null && _c !== void 0 ? _c : 26;
+    var rowsMobile = (_d = CB_PLACEMENT_PROP_COMPOSITION['CB_PLACEMENT_PROP_COMPOSITION_SPEC_ROWS:MOBILE']) !== null && _d !== void 0 ? _d : 26;
+    var rows = isMobile ? rowsMobile : rowsDesktop;
+    var cols = isMobile ? colsMobile : colsDesktop;
     var containerRef = (0, react_1.useRef)(null);
     var size = (0, useResizableObserver_1.useResizeObserver)({ ref: containerRef, box: 'border-box' });
-    var _e = (0, react_1.useState)(null), selectedCB = _e[0], setSelectedCB = _e[1];
+    var _j = (0, react_1.useState)(null), selectedCB = _j[0], setSelectedCB = _j[1];
     var gleRef = (0, react_1.useRef)(null);
-    var isMobile = device === 'MOBILE';
-    var isEditMode = mode === 'EDIT';
-    // const layoutByDevice = device === 'DESKTOP' ? 'lg' : 'sm';
-    // const [layouts] = useState<LayoutsType>(() => {
-    //   const { lg, sm } = parsePlacement(componentBlocks ?? []);
-    //   return {
-    //     lg,
-    //     sm
-    //   };
-    // });
     (0, react_1.useEffect)(function () {
         if (editingSectionId !== props.id) {
             setSelectedCB(null);
@@ -124,14 +122,17 @@ var Composition = (0, react_1.forwardRef)(function CustomSection(props, ref) {
             setSelectedCB('BULK');
         }
     }, [selectedCB, shortcutKeyMode, sectionActionHandler, setSelectedCB]);
-    var _f = (0, util_1.parseCustomSectionPlacement)({
+    var _k = (0, parseCompositionPlacement_1.default)({
         isMobile: isMobile,
-        customSectionProps: CB_PLACEMENT_PROP_SECTION
-    }), width = _f.width, minHeight = _f.minHeight, isFullWidth = _f.isFullWidth;
+        compositionProps: CB_PLACEMENT_PROP_COMPOSITION
+    }), minHeight = _k.minHeight, maxHeight = _k.maxHeight, maxWidth = _k.maxWidth, minWidth = _k.minWidth;
+    var canvasWidth = 50 * cols;
     var customSectionStyles = {
-        minHeight: "".concat(minHeight, "vh"),
-        width: '100%',
-        maxWidth: isFullWidth ? '' : "".concat(width, "px")
+        minHeight: "".concat(minHeight, "px"),
+        maxHeight: "".concat(maxHeight, "px"),
+        width: "100%",
+        maxWidth: maxWidth ? "".concat(maxWidth, "px") : '100%',
+        minWidth: "".concat(Math.max(canvasWidth, minWidth !== null && minWidth !== void 0 ? minWidth : 0), "px")
     };
     var onClickSection = function () {
         if (!isEditMode) {
@@ -147,26 +148,34 @@ var Composition = (0, react_1.forwardRef)(function CustomSection(props, ref) {
             });
     };
     var padding = (0, parseSectionPadding_1.default)(CB_LAYOUT_PROP_PADDING, device);
-    var sectionRow = CB_PLACEMENT_PROP_SECTION[device === 'DESKTOP'
-        ? 'CB_PLACEMENT_PROP_SECTION_SPEC_ROWS'
-        : 'CB_PLACEMENT_PROP_SECTION_SPEC_ROWS:MOBILE'];
+    var shadowStyles = (0, parseStylePropShadow_1.default)({
+        name: types_1.CB_STYLE_PROP_KEYS.CB_STYLE_PROP_SHADOW,
+        specs: MOCK_SHADOW
+    }, device);
+    var borderStyles = (0, parseStylePropBorder_1.default)({
+        name: types_1.CB_STYLE_PROP_KEYS.CB_STYLE_PROP_BORDER,
+        specs: MOCK_BORDER
+    }, device);
     var rowHeight = (function () {
         if (!size.width) {
             return 50;
         }
         if (device === 'MOBILE') {
-            var cellWidth_1 = size.width / MOBILE_GRID_COLS;
+            var cellWidth_1 = size.width / cols;
             return cellWidth_1 * 0.56;
         }
-        var cellWidth = size.width / DESKTOP_GRID_COLS;
+        var cellWidth = size.width / cols;
         return cellWidth * 0.56;
     })();
+    // TODO: 폰트사이즈 작업 필요.
     var baseFontSize = (function () {
-        var _a, _b;
         if (!size.width) {
             return 16;
         }
-        var responsiveFontMode = !!((_b = (_a = props.jsonProperties) === null || _a === void 0 ? void 0 : _a.data.CB_CONTENT_PROP_SECTION) === null || _b === void 0 ? void 0 : _b.CB_CONTENT_PROP_SECTION_SPEC_VARIABLEROOTFONTSIZE);
+        // const responsiveFontMode =
+        //   !!props.jsonProperties?.CB_CONTENT_PROP_COMPOSITION
+        //     ?.CB_CONTENT_PROP_COMPOSITION_SPEC_VARIABLEROOTFONTSIZE;
+        var responsiveFontMode = true;
         if (device === 'MOBILE') {
             if (responsiveFontMode) {
                 return size.width * 0.0421;
@@ -184,29 +193,88 @@ var Composition = (0, react_1.forwardRef)(function CustomSection(props, ref) {
         }
         return 16;
     })();
-    return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(gleStyles_1.S_gleStyles, __assign({ style: { width: '100%', height: '100%' } }, { children: (0, jsx_runtime_1.jsx)(S_SectionWrapper, __assign({ ref: gleRef, "x-dlayout-section-type": "NO_NAME", onClick: onClickSection, style: {
-                    width: '100%',
-                    height: '100%'
-                } }, { 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,
+    return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(dynamicLayoutContext_1.dynamicLayoutContext.Provider, __assign({ value: {
+                device: device
+            } }, { children: (0, jsx_runtime_1.jsx)(gleStyles_1.S_gleStyles, __assign({ style: __assign(__assign(__assign({ width: '100%', height: '100%' }, shadowStyles.style), borderStyles.style), { overflow: 'hidden' }) }, { children: (0, jsx_runtime_1.jsx)(S_COMPOSITIONWrapper, __assign({ ref: gleRef, "x-dlayout-section-type": "NO_NAME", onClick: onClickSection, style: {
                         width: '100%',
                         height: '100%'
-                    } }, { children: (0, jsx_runtime_1.jsx)(GridContainer, __assign({ ref: containerRef, cols: isMobile ? 8 : 24, rowHeight: rowHeight, sectionRow: sectionRow !== null && sectionRow !== void 0 ? sectionRow : 0, style: {
-                            width: customSectionStyles.width,
-                            maxWidth: customSectionStyles.maxWidth,
-                            minWidth: isMobile ? GLE_MIN_WIDTH_MOBILE_PX : GLE_MIN_WIDTH_DESKTOP_PX,
-                            fontSize: "".concat(baseFontSize, "px")
-                        } }, { children: (_a = props.componentBlocks) === null || _a === void 0 ? void 0 : _a.map(function (cb, index) {
-                            var _a;
-                            return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(FlexGridItem_1.default, { cb: cb, index: index, device: device, rowHeight: rowHeight, zIndex: (_a = zOrders === null || zOrders === void 0 ? void 0 : zOrders[device === 'DESKTOP' ? 'desktop' : 'mobile'][cb.id]) !== null && _a !== void 0 ? _a : 0 }) }, cb.id));
-                        }) })) })) })) })) }));
+                    } }, { children: (0, jsx_runtime_1.jsx)(CompositionBackground_1.default, __assign({}, props, { isMobile: isMobile, overrideStyles: {
+                            // minHeight: customSectionStyles.minHeight,
+                            paddingTop: padding.top,
+                            paddingBottom: padding.bottom,
+                            paddingRight: padding.right,
+                            paddingLeft: padding.left,
+                            width: '100%',
+                            height: '100%'
+                        } }, { children: (0, jsx_runtime_1.jsx)(GridContainer, __assign({ className: "composition-container", "data-cols": cols, "data-rows": rows, "data-row-height": rowHeight, "data-col-width": "10px", ref: containerRef, cols: cols, rowHeight: rowHeight, sectionRow: rows, "data-wrapper-paddingT": padding.top, "data-wrapper-paddingB": padding.bottom, "data-wrapper-paddingL": padding.left, "data-wrapper-paddingR": padding.right, style: {
+                                width: customSectionStyles.width,
+                                maxWidth: customSectionStyles.maxWidth
+                                // minWidth: isMobile ? GLE_MIN_WIDTH_MOBILE_PX : GLE_MIN_WIDTH_DESKTOP_PX,
+                                // fontSize: `${baseFontSize}px`
+                            } }, { children: (_e = props.componentBlocks) === null || _e === void 0 ? void 0 : _e.map(function (cb, index) {
+                                var _a;
+                                return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(FlexGridItemForCCB_1.default, { cb: cb, index: index, device: device, rowHeight: rowHeight, zIndex: (_a = zOrders === null || zOrders === void 0 ? void 0 : zOrders[device === 'DESKTOP' ? 'desktop' : 'mobile'][cb.id]) !== null && _a !== void 0 ? _a : 0 }) }, cb.id));
+                            }) })) })) })) })) })) }));
 });
-var GridContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid; /* Space between grid items */\n  gap: 10px;\n  grid-auto-rows: minmax(", ", auto);\n  grid-template-columns: repeat(", ", 1fr);\n  grid-template-rows: repeat(", ", minmax(", ", 1fr));\n  height: 100%;\n  padding: 10px 10px;\n  width: 100%;\n\n  * {\n    box-sizing: border-box;\n  }\n"], ["\n  display: grid; /* Space between grid items */\n  gap: 10px;\n  grid-auto-rows: minmax(", ", auto);\n  grid-template-columns: repeat(", ", 1fr);\n  grid-template-rows: repeat(", ", minmax(", ", 1fr));\n  height: 100%;\n  padding: 10px 10px;\n  width: 100%;\n\n  * {\n    box-sizing: border-box;\n  }\n"])), function (props) { return "".concat(props.rowHeight, "px"); }, function (props) { return props.cols; }, function (props) { return props.sectionRow; }, function (props) { return "".concat(0, "px"); });
-var S_SectionWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+var MOCK_BORDER = {
+    CB_STYLE_PROP_BORDER_SPEC_COLOR: '#000000FF',
+    'CB_STYLE_PROP_BORDER_SPEC_COLOR:HOVER': null,
+    'CB_STYLE_PROP_BORDER_SPEC_COLOR:MOBILE': null,
+    'CB_STYLE_PROP_BORDER_SPEC_COLOR:MOBILE:HOVER': null,
+    CB_STYLE_PROP_BORDER_SPEC_RADIUS: {
+        bl: 18,
+        br: 18,
+        tl: 18,
+        tr: 18
+    },
+    'CB_STYLE_PROP_BORDER_SPEC_RADIUS:HOVER': null,
+    'CB_STYLE_PROP_BORDER_SPEC_RADIUS:MOBILE': null,
+    'CB_STYLE_PROP_BORDER_SPEC_RADIUS:MOBILE:HOVER': null,
+    CB_STYLE_PROP_BORDER_SPEC_RADIUSFIX: true,
+    'CB_STYLE_PROP_BORDER_SPEC_RADIUSFIX:HOVER': true,
+    'CB_STYLE_PROP_BORDER_SPEC_RADIUSFIX:MOBILE': null,
+    'CB_STYLE_PROP_BORDER_SPEC_RADIUSFIX:MOBILE:HOVER': null,
+    CB_STYLE_PROP_BORDER_SPEC_STYLE: 'SOLID',
+    'CB_STYLE_PROP_BORDER_SPEC_STYLE:HOVER': null,
+    'CB_STYLE_PROP_BORDER_SPEC_STYLE:MOBILE': null,
+    'CB_STYLE_PROP_BORDER_SPEC_STYLE:MOBILE:HOVER': null,
+    CB_STYLE_PROP_BORDER_SPEC_WIDTH: 3,
+    'CB_STYLE_PROP_BORDER_SPEC_WIDTH:HOVER': null,
+    'CB_STYLE_PROP_BORDER_SPEC_WIDTH:MOBILE': null,
+    'CB_STYLE_PROP_BORDER_SPEC_WIDTH:MOBILE:HOVER': null
+};
+var MOCK_SHADOW = {
+    CB_STYLE_PROP_SHADOW_SPEC_BLUR: 24,
+    'CB_STYLE_PROP_SHADOW_SPEC_BLUR:HOVER': null,
+    'CB_STYLE_PROP_SHADOW_SPEC_BLUR:MOBILE': null,
+    'CB_STYLE_PROP_SHADOW_SPEC_BLUR:MOBILE:HOVER': null,
+    CB_STYLE_PROP_SHADOW_SPEC_COLOR: '#000000FF',
+    'CB_STYLE_PROP_SHADOW_SPEC_COLOR:HOVER': null,
+    'CB_STYLE_PROP_SHADOW_SPEC_COLOR:MOBILE': null,
+    'CB_STYLE_PROP_SHADOW_SPEC_COLOR:MOBILE:HOVER': null,
+    CB_STYLE_PROP_SHADOW_SPEC_OPACITY: 30,
+    'CB_STYLE_PROP_SHADOW_SPEC_OPACITY:HOVER': null,
+    'CB_STYLE_PROP_SHADOW_SPEC_OPACITY:MOBILE': null,
+    'CB_STYLE_PROP_SHADOW_SPEC_OPACITY:MOBILE:HOVER': null,
+    CB_STYLE_PROP_SHADOW_SPEC_SPREAD: 2,
+    'CB_STYLE_PROP_SHADOW_SPEC_SPREAD:HOVER': null,
+    'CB_STYLE_PROP_SHADOW_SPEC_SPREAD:MOBILE': null,
+    'CB_STYLE_PROP_SHADOW_SPEC_SPREAD:MOBILE:HOVER': null,
+    CB_STYLE_PROP_SHADOW_SPEC_TYPE: 'OUTSET',
+    'CB_STYLE_PROP_SHADOW_SPEC_TYPE:HOVER': 'OUTSET',
+    'CB_STYLE_PROP_SHADOW_SPEC_TYPE:MOBILE': null,
+    'CB_STYLE_PROP_SHADOW_SPEC_TYPE:MOBILE:HOVER': null,
+    CB_STYLE_PROP_SHADOW_SPEC_X: 0,
+    'CB_STYLE_PROP_SHADOW_SPEC_X:HOVER': null,
+    'CB_STYLE_PROP_SHADOW_SPEC_X:MOBILE': null,
+    'CB_STYLE_PROP_SHADOW_SPEC_X:MOBILE:HOVER': null,
+    CB_STYLE_PROP_SHADOW_SPEC_Y: 12,
+    'CB_STYLE_PROP_SHADOW_SPEC_Y:HOVER': null,
+    'CB_STYLE_PROP_SHADOW_SPEC_Y:MOBILE': null,
+    'CB_STYLE_PROP_SHADOW_SPEC_Y:MOBILE:HOVER': null
+};
+var GridContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid; /* Space between grid items */\n  gap: 10px;\n  /* grid-auto-rows: minmax(", ", auto); */\n  grid-template-columns: repeat(", ", 1fr);\n  grid-template-rows: repeat(\n    ", ",\n    minmax(", ", auto)\n  );\n  height: 100%;\n  padding: 10px 10px;\n  width: 100%;\n\n  * {\n    box-sizing: border-box;\n  }\n"], ["\n  display: grid; /* Space between grid items */\n  gap: 10px;\n  /* grid-auto-rows: minmax(", ", auto); */\n  grid-template-columns: repeat(", ", 1fr);\n  grid-template-rows: repeat(\n    ", ",\n    minmax(", ", auto)\n  );\n  height: 100%;\n  padding: 10px 10px;\n  width: 100%;\n\n  * {\n    box-sizing: border-box;\n  }\n"])), function (props) { return "".concat(props.rowHeight, "px"); }, function (props) { return props.cols; }, function (props) { return props.sectionRow; }, function (props) { return "".concat(props.rowHeight, "px"); });
+var S_COMPOSITIONWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
 exports.default = react_1.default.memo(Composition);
 function getDefensiveFontSize(device, width) {
     if (device === 'MOBILE') {

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { CSSProperties } from 'styled-components';
+import type { IComposition } from '../types';
+type SectionPropTypes = IComposition & {
+    children?: React.ReactNode;
+} & {
+    overrideStyles?: CSSProperties;
+    isMobile?: boolean;
+};
+declare function CompositionBackground({ children, overrideStyles, isMobile, ...props }: SectionPropTypes): JSX.Element;
+export default CompositionBackground;

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

@@ -0,0 +1,45 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importDefault(require("styled-components"));
+var Section_1 = require("../components/Section");
+var CustomSectionBackground_1 = __importDefault(require("../components/Section/components/CustomSectionBackground"));
+function CompositionBackground(_a) {
+    var children = _a.children, overrideStyles = _a.overrideStyles, _b = _a.isMobile, isMobile = _b === void 0 ? false : _b, props = __rest(_a, ["children", "overrideStyles", "isMobile"]);
+    return ((0, jsx_runtime_1.jsx)(Section_1.sectionContext.Provider, __assign({ value: __assign({}, props) }, { children: (0, jsx_runtime_1.jsxs)(S_Section, __assign({ style: overrideStyles, isIframeSection: false }, { children: [(0, jsx_runtime_1.jsx)(CustomSectionBackground_1.default, { isMobile: isMobile }), children] })) })));
+}
+var S_Section = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  height: ", ";\n  justify-content: center;\n  position: relative;\n  width: 100%;\n  z-index: 0;\n"], ["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  height: ", ";\n  justify-content: center;\n  position: relative;\n  width: 100%;\n  z-index: 0;\n"])), function (_a) {
+    var isIframeSection = _a.isIframeSection;
+    return (isIframeSection ? '100%' : 'auto');
+});
+exports.default = CompositionBackground;
+var templateObject_1;

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

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

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

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

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { CB_VALUE_TYPE, CCB_VALUE_TYPE } from '../sections/CustomSection/util/types';
+import type { IComposition, QueryData } from '@sub/DynamicLayout/types';
+export declare function createCompositions({ valueType, queryPath, queryData, compositions, limit }: {
+    valueType: CCB_VALUE_TYPE | CB_VALUE_TYPE;
+    queryPath: string;
+    queryData: QueryData | undefined;
+    compositions: IComposition[];
+    limit: number;
+}): JSX.Element[];

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

@@ -0,0 +1,79 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createCompositions = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+require("react");
+var styled_components_1 = __importDefault(require("styled-components"));
+var compositionQueryContext_1 = require("../compositionQueryContext");
+var Composition_1 = __importDefault(require("./Composition"));
+function createCompositions(_a) {
+    var valueType = _a.valueType, queryPath = _a.queryPath, queryData = _a.queryData, compositions = _a.compositions, limit = _a.limit;
+    var isQueryDataConnected = valueType === 'DATA' || valueType === 'DELEGATEDDATA';
+    // 직접 입력 유형인 경우
+    if (!isQueryDataConnected) {
+        var valueTypeCompositions = compositions.filter(function (composition) { return !composition.isDefault; });
+        // MANUAL ITEM이 없는 경우
+        if (!valueTypeCompositions.length) {
+            return [
+                (0, jsx_runtime_1.jsx)(S_EmptyLayer, { children: "\uC544\uC774\uD15C\uC774 \uC5C6\uC2B5\uB2C8\uB2E4. \uC544\uC774\uD15C\uC744 \uCD94\uAC00\uD574\uC8FC\uC138\uC694." }, "empty-manual-item")
+            ];
+        }
+        return valueTypeCompositions.map(function (composition) { return ((0, jsx_runtime_1.jsx)(Composition_1.default, __assign({}, composition), composition.id)); });
+    }
+    if (!compositions.length) {
+        return [(0, jsx_runtime_1.jsx)("div", { children: "EMPTY TEXT" }, "empty")];
+    }
+    // 데이터 연결 유형이나, 쿼리 데이터나 키가 없는 경우
+    if (queryPath === 'NONE' || !queryPath || !queryData) {
+        return [(0, jsx_runtime_1.jsx)(S_EmptyLayer, { children: "\uC544\uC9C1 \uC5F0\uACB0\uB41C \uCFFC\uB9AC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }, "no-query")];
+    }
+    var parsedQueryPath = removeFirstSegment(queryPath);
+    var queryDataValue = queryData[parsedQueryPath];
+    var queryComposition = compositions.find(function (composition) { return composition.isDefault; });
+    // 쿼리 데이터와 키가 있으나, 쿼리 데이터에 해당 키가 없는 경우
+    if (!queryDataValue) {
+        return [(0, jsx_runtime_1.jsx)(S_EmptyLayer, { children: "\uC5F0\uACB0\uB41C \uB370\uC774\uD130\uB97C \uCC3E\uC744 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4." }, "not-found")];
+    }
+    // 쿼리 데이터와 키가 있으나, 쿼리 데이터에 결과가 빈 경우
+    if (!queryDataValue.length) {
+        return [(0, jsx_runtime_1.jsx)(S_EmptyLayer, { children: "\uC544\uC9C1 \uBCF4\uC5EC\uC904 \uCF58\uD150\uCE20\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }, "empty-item")];
+    }
+    return queryDataValue.slice(0, limit).map(function (query, index) { return ((0, jsx_runtime_1.jsx)(compositionQueryContext_1.CCBQueryPathContext.Provider, __assign({ value: { queryData: query } }, { children: (0, jsx_runtime_1.jsx)(Composition_1.default, __assign({}, queryComposition)) }), index)); });
+}
+exports.createCompositions = createCompositions;
+function removeFirstSegment(path) {
+    var segments = path.split('/');
+    return segments.slice(1).join('/');
+}
+var S_EmptyLayer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: rgba(0, 0, 0, 0.6);\n  bottom: 0;\n  color: white;\n  display: flex;\n  font-size: ", ";\n  font-weight: ", ";\n  justify-content: center;\n  left: 0;\n  line-height: ", ";\n  padding: ", ";\n  position: absolute;\n  right: 0;\n  text-align: center;\n  top: 0;\n  word-break: keep-all;\n"], ["\n  align-items: center;\n  background-color: rgba(0, 0, 0, 0.6);\n  bottom: 0;\n  color: white;\n  display: flex;\n  font-size: ", ";\n  font-weight: ", ";\n  justify-content: center;\n  left: 0;\n  line-height: ", ";\n  padding: ", ";\n  position: absolute;\n  right: 0;\n  text-align: center;\n  top: 0;\n  word-break: keep-all;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.desktopFontSize.body2;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.fontWeight.bold;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.desktopLineHeight.body2;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+});
+var templateObject_1;