pds-dev-kit-web-test 2.5.346 → 2.5.348

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

@@ -49,6 +49,9 @@ function ComponentBlockMatcher(_a) {
         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/createCompositions.d.ts

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

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

@@ -0,0 +1,39 @@
+"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 __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 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;
+    var isQueryDataConnected = valueType === 'DATA';
+    if (!isQueryDataConnected || !queryPath || !queryData) {
+        return compositions.map(function (composition) { return (0, jsx_runtime_1.jsx)(Composition_1.default, __assign({}, composition), composition.id); });
+    }
+    var parsedQueryPath = convertSlashToUnderscores(queryPath);
+    var queryDataValue = queryData[parsedQueryPath];
+    var queryComposition = compositions.find(function (composition) { return composition.isDefault; });
+    if (!queryDataValue) {
+        return [(0, jsx_runtime_1.jsxs)("div", { children: ["NOT FOUND QUERYDATA: ", parsedQueryPath] }, "not-found")];
+    }
+    return queryDataValue.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 convertSlashToUnderscores(queryPath) {
+    return queryPath.replace(/\//g, '_');
+}

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

@@ -29,7 +29,7 @@ exports.sampleMockComposition1 = {
                     CB_CONTENT_PROP_TEXT: {
                         CB_CONTENT_PROP_TEXT_SPEC_TEXT: 'New Text',
                         CB_CONTENT_PROP_TEXT_SPEC_TEXTMOBILEALTERNATIVE: null,
-                        CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE: 'QUERYDATA',
+                        CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE: 'DATA',
                         CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA_NAME: 'itemDesc'
                     },
                     CB_CONTENT_PROP_VISIBILITY: {

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

@@ -101,11 +101,11 @@ exports.SAMPLE_CONTENTSCAROUSEL_CB = {
                 'CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_INFINITESCROLL:MOBILE:HOVER': true
             },
             CB_CONTENT_PROP_CONTENTSCAROUSEL: {
-                CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUE_TYPE: 'QUERYDATA',
+                CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE: 'DATA',
                 CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECT_DATA: 'PAPPQUERY/C00007/VOD/CLASS/TOTAL',
                 CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATASORTING: '최신순',
-                CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_OFFSET: '1',
-                CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MENUALITEM: [],
+                CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_OFFSET: 1,
+                CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MANUALITEMS: [],
                 CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_ITEMCOUNTS: 50,
                 CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS: 1
             },

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

@@ -0,0 +1,2 @@
+import type { CB_LIST } from './sections/CustomSection/types';
+export declare const SAMPLE_LIST_CB: CB_LIST;

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

@@ -0,0 +1,296 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SAMPLE_LIST_CB = void 0;
+var mock_composition_1 = require("./mock_composition");
+var types_1 = require("./sections/CustomSection/types");
+exports.SAMPLE_LIST_CB = {
+    availablePlugins: [],
+    componentBlockCode: types_1.CB_ALL_CODES.CB_LIST,
+    dynamicLayoutSectionId: 18661,
+    type: 'GENERAL',
+    id: 188292,
+    blockId: 'CB_188292',
+    jsonProperties: {
+        data: {
+            CB_PLACEMENT_PROP_PLACEMENT: {
+                CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS: 7,
+                'CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS:MOBILE': 8,
+                CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS: 16,
+                'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE': 20,
+                CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX: 5,
+                'CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX:MOBILE': 0,
+                CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY: 0,
+                'CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY:MOBILE': 0,
+                CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX: 3,
+                'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX:MOBILE': 2
+                // 'CB_PLACEMENT_PROP_PLACEMENT_SPEC_LATEST_LOCKED_STARTY:MOBILE': 2,
+                // 'CB_PLACEMENT_PROP_PLACEMENT_SPEC_LOCKSTATUS:MOBILE': 'FALLBACK_TO_SYNC'
+            },
+            CB_STYLE_PROP_CONTENTSLIST: {
+                CB_STYLE_PROP_CONTENTSLIST_SPEC_INFINITESCROLL: false,
+                'CB_STYLE_PROP_CONTENTSLIST_SPEC_INFINITESCROLL:HOVER': null,
+                'CB_STYLE_PROP_CONTENTSLIST_SPEC_INFINITESCROLL:MOBILE': null,
+                'CB_STYLE_PROP_CONTENTSLIST_SPEC_INFINITESCROLL:MOBILE:HOVER': null,
+                CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMHEIGHTFITCONTENT: false,
+                'CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMHEIGHTFITCONTENT:HOVER': null,
+                'CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMHEIGHTFITCONTENT:MOBILE': null,
+                'CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMHEIGHTFITCONTENT:MOBILE:HOVER': null,
+                CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMLINEHEIGHT: 1,
+                'CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMLINEHEIGHT:HOVER': null,
+                'CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMLINEHEIGHT:MOBILE': null,
+                'CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMLINEHEIGHT:MOBILE:HOVER': null,
+                CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMSPACING: 'NORMAL',
+                'CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMSPACING:HOVER': null,
+                'CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMSPACING:MOBILE': null,
+                'CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMSPACING:MOBILE:HOVER': null,
+                CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONLOCATION: 'OUTSET1',
+                'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONLOCATION:HOVER': null,
+                'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONLOCATION:MOBILE': null,
+                'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONLOCATION:MOBILE:HOVER': null,
+                CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE: 'MEDIUM',
+                'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE:HOVER': null,
+                'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE:MOBILE': null,
+                'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE:MOBILE:HOVER': null,
+                CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE: 'DESIGN1',
+                'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE:HOVER': null,
+                'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE:MOBILE': null,
+                'CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE:MOBILE:HOVER': null,
+                CB_STYLE_PROP_CONTENTSLIST_SPEC_STYLE: 'DESIGN1',
+                'CB_STYLE_PROP_CONTENTSLIST_SPEC_STYLE:HOVER': null,
+                'CB_STYLE_PROP_CONTENTSLIST_SPEC_STYLE:MOBILE': null,
+                'CB_STYLE_PROP_CONTENTSLIST_SPEC_STYLE:MOBILE:HOVER': null
+            },
+            CB_CONTENT_PROP_CONTENTSLIST: {
+                CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE: 'DATA',
+                CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA: '아티클:포스트',
+                CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATASORTING: '최신순',
+                CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATAFILTER: 'NONE',
+                CB_CONTENT_PROP_CONTENTSLIST_SPEC_OFFSET: 0,
+                CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS: [],
+                CB_CONTENT_PROP_CONTENTSLIST_SPEC_EDITCOMMONITEM: null,
+                CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS: 1,
+                CB_CONTENT_PROP_CONTENTSLIST_SPEC_ITEMCOUNTS: 1
+            },
+            CB_STYLE_PROP_BORDER: {
+                CB_STYLE_PROP_BORDER_SPEC_STYLE: 'SOLID',
+                'CB_STYLE_PROP_BORDER_SPEC_STYLE:HOVER': 'SOLID',
+                'CB_STYLE_PROP_BORDER_SPEC_STYLE:MOBILE': 'DASHED',
+                'CB_STYLE_PROP_BORDER_SPEC_STYLE:MOBILE:HOVER': 'DOTTED',
+                CB_STYLE_PROP_BORDER_SPEC_WIDTH: 0,
+                'CB_STYLE_PROP_BORDER_SPEC_WIDTH:HOVER': 0,
+                'CB_STYLE_PROP_BORDER_SPEC_WIDTH:MOBILE': 0,
+                'CB_STYLE_PROP_BORDER_SPEC_WIDTH:MOBILE:HOVER': 0,
+                CB_STYLE_PROP_BORDER_SPEC_COLOR: '#FF573300',
+                'CB_STYLE_PROP_BORDER_SPEC_COLOR:HOVER': '#FF573300',
+                'CB_STYLE_PROP_BORDER_SPEC_COLOR:MOBILE': '#00FF5733',
+                'CB_STYLE_PROP_BORDER_SPEC_COLOR:MOBILE:HOVER': '#5733FF00',
+                CB_STYLE_PROP_BORDER_SPEC_RADIUS: { tl: 5, tr: 5, bl: 5, br: 5 },
+                'CB_STYLE_PROP_BORDER_SPEC_RADIUS:HOVER': { tl: 5, tr: 5, bl: 5, br: 5 },
+                'CB_STYLE_PROP_BORDER_SPEC_RADIUS:MOBILE': { tl: 10, tr: 10, bl: 10, br: 10 },
+                'CB_STYLE_PROP_BORDER_SPEC_RADIUS:MOBILE:HOVER': { tl: 15, tr: 15, bl: 15, br: 15 },
+                CB_STYLE_PROP_BORDER_SPEC_RADIUSFIX: true,
+                'CB_STYLE_PROP_BORDER_SPEC_RADIUSFIX:HOVER': true,
+                'CB_STYLE_PROP_BORDER_SPEC_RADIUSFIX:MOBILE': false,
+                'CB_STYLE_PROP_BORDER_SPEC_RADIUSFIX:MOBILE:HOVER': true
+            },
+            CB_STYLE_PROP_SHADOW: {
+                CB_STYLE_PROP_SHADOW_SPEC_BLUR: 24,
+                'CB_STYLE_PROP_SHADOW_SPEC_BLUR:HOVER': 24,
+                'CB_STYLE_PROP_SHADOW_SPEC_BLUR:MOBILE': null,
+                'CB_STYLE_PROP_SHADOW_SPEC_BLUR:MOBILE:HOVER': null,
+                CB_STYLE_PROP_SHADOW_SPEC_COLOR: '#000000',
+                'CB_STYLE_PROP_SHADOW_SPEC_COLOR:HOVER': '#000000',
+                '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': 30,
+                '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': 2,
+                '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': 0,
+                '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': 12,
+                'CB_STYLE_PROP_SHADOW_SPEC_Y:MOBILE': null,
+                'CB_STYLE_PROP_SHADOW_SPEC_Y:MOBILE:HOVER': null
+            },
+            CB_STYLE_PROP_OPACITY: {
+                CB_STYLE_PROP_OPACITY_SPEC_OPACITY: 100,
+                'CB_STYLE_PROP_OPACITY_SPEC_OPACITY:HOVER': 100,
+                'CB_STYLE_PROP_OPACITY_SPEC_OPACITY:MOBILE': null,
+                'CB_STYLE_PROP_OPACITY_SPEC_OPACITY:MOBILE:HOVER': null
+            },
+            CB_STYLE_PROP_BGCOLOR: {
+                CB_STYLE_PROP_BGCOLOR_SPEC_ANGLE: 90,
+                'CB_STYLE_PROP_BGCOLOR_SPEC_ANGLE:HOVER': 90,
+                'CB_STYLE_PROP_BGCOLOR_SPEC_ANGLE:MOBILE': null,
+                'CB_STYLE_PROP_BGCOLOR_SPEC_ANGLE:MOBILE:HOVER': null,
+                CB_STYLE_PROP_BGCOLOR_SPEC_COLOR: '#455EEFFF',
+                'CB_STYLE_PROP_BGCOLOR_SPEC_COLOR:HOVER': '#455EEFFF',
+                'CB_STYLE_PROP_BGCOLOR_SPEC_COLOR:MOBILE': null,
+                'CB_STYLE_PROP_BGCOLOR_SPEC_COLOR:MOBILE:HOVER': null,
+                CB_STYLE_PROP_BGCOLOR_SPEC_ENDCOLOR: '#ff0000',
+                'CB_STYLE_PROP_BGCOLOR_SPEC_ENDCOLOR:HOVER': '#27FFBFFF',
+                'CB_STYLE_PROP_BGCOLOR_SPEC_ENDCOLOR:MOBILE': null,
+                'CB_STYLE_PROP_BGCOLOR_SPEC_ENDCOLOR:MOBILE:HOVER': null,
+                CB_STYLE_PROP_BGCOLOR_SPEC_ENDLOC: 100,
+                'CB_STYLE_PROP_BGCOLOR_SPEC_ENDLOC:HOVER': 100,
+                'CB_STYLE_PROP_BGCOLOR_SPEC_ENDLOC:MOBILE': null,
+                'CB_STYLE_PROP_BGCOLOR_SPEC_ENDLOC:MOBILE:HOVER': null,
+                CB_STYLE_PROP_BGCOLOR_SPEC_GRADIENT: 'NONE',
+                'CB_STYLE_PROP_BGCOLOR_SPEC_GRADIENT:HOVER': 'NONE',
+                'CB_STYLE_PROP_BGCOLOR_SPEC_GRADIENT:MOBILE': null,
+                'CB_STYLE_PROP_BGCOLOR_SPEC_GRADIENT:MOBILE:HOVER': null,
+                CB_STYLE_PROP_BGCOLOR_SPEC_STARTCOLOR: 'NONE',
+                'CB_STYLE_PROP_BGCOLOR_SPEC_STARTCOLOR:HOVER': 'NONE',
+                'CB_STYLE_PROP_BGCOLOR_SPEC_STARTCOLOR:MOBILE': null,
+                'CB_STYLE_PROP_BGCOLOR_SPEC_STARTCOLOR:MOBILE:HOVER': null,
+                CB_STYLE_PROP_BGCOLOR_SPEC_STARTLOC: 0,
+                'CB_STYLE_PROP_BGCOLOR_SPEC_STARTLOC:HOVER': 0,
+                'CB_STYLE_PROP_BGCOLOR_SPEC_STARTLOC:MOBILE': null,
+                'CB_STYLE_PROP_BGCOLOR_SPEC_STARTLOC:MOBILE:HOVER': null,
+                CB_STYLE_PROP_BGCOLOR_SPEC_TYPE: 'SOLID',
+                'CB_STYLE_PROP_BGCOLOR_SPEC_TYPE:HOVER': 'SOLID',
+                'CB_STYLE_PROP_BGCOLOR_SPEC_TYPE:MOBILE': null,
+                'CB_STYLE_PROP_BGCOLOR_SPEC_TYPE:MOBILE:HOVER': null
+            },
+            CB_STYLE_PROP_BGOVERLAY: {
+                CB_STYLE_PROP_BGOVERLAY_SPEC_ANGLE: 45,
+                CB_STYLE_PROP_BGOVERLAY_SPEC_COLOR: '#FF573300',
+                CB_STYLE_PROP_BGOVERLAY_SPEC_ENDCOLOR: '#00FF5733',
+                CB_STYLE_PROP_BGOVERLAY_SPEC_ENDLOC: 80,
+                CB_STYLE_PROP_BGOVERLAY_SPEC_GRADIENT: 'LINEAR',
+                CB_STYLE_PROP_BGOVERLAY_SPEC_STARTCOLOR: '#5733FF00',
+                CB_STYLE_PROP_BGOVERLAY_SPEC_STARTLOC: 20,
+                CB_STYLE_PROP_BGOVERLAY_SPEC_TYPE: 'OVERLAY',
+                'CB_STYLE_PROP_BGOVERLAY_SPEC_ANGLE:HOVER': 60,
+                'CB_STYLE_PROP_BGOVERLAY_SPEC_ANGLE:MOBILE': 30,
+                'CB_STYLE_PROP_BGOVERLAY_SPEC_ANGLE:MOBILE:HOVER': 90,
+                'CB_STYLE_PROP_BGOVERLAY_SPEC_COLOR:HOVER': '#AA573300',
+                'CB_STYLE_PROP_BGOVERLAY_SPEC_COLOR:MOBILE': '#BBFF5733',
+                'CB_STYLE_PROP_BGOVERLAY_SPEC_COLOR:MOBILE:HOVER': '#CC5733FF',
+                'CB_STYLE_PROP_BGOVERLAY_SPEC_ENDCOLOR:HOVER': '#DD573300',
+                'CB_STYLE_PROP_BGOVERLAY_SPEC_ENDCOLOR:MOBILE': '#EEFF5733',
+                'CB_STYLE_PROP_BGOVERLAY_SPEC_ENDCOLOR:MOBILE:HOVER': '#FF5733FF',
+                'CB_STYLE_PROP_BGOVERLAY_SPEC_ENDLOC:HOVER': 85,
+                'CB_STYLE_PROP_BGOVERLAY_SPEC_ENDLOC:MOBILE': 75,
+                'CB_STYLE_PROP_BGOVERLAY_SPEC_ENDLOC:MOBILE:HOVER': 95,
+                'CB_STYLE_PROP_BGOVERLAY_SPEC_GRADIENT:HOVER': 'RADIAL',
+                'CB_STYLE_PROP_BGOVERLAY_SPEC_GRADIENT:MOBILE': 'LINEAR',
+                'CB_STYLE_PROP_BGOVERLAY_SPEC_GRADIENT:MOBILE:HOVER': 'CONIC',
+                'CB_STYLE_PROP_BGOVERLAY_SPEC_STARTCOLOR:HOVER': '#11573300',
+                'CB_STYLE_PROP_BGOVERLAY_SPEC_STARTCOLOR:MOBILE': '#225733FF',
+                'CB_STYLE_PROP_BGOVERLAY_SPEC_STARTCOLOR:MOBILE:HOVER': '#3357FF00',
+                'CB_STYLE_PROP_BGOVERLAY_SPEC_STARTLOC:HOVER': 25,
+                'CB_STYLE_PROP_BGOVERLAY_SPEC_STARTLOC:MOBILE': 15,
+                'CB_STYLE_PROP_BGOVERLAY_SPEC_STARTLOC:MOBILE:HOVER': 35,
+                'CB_STYLE_PROP_BGOVERLAY_SPEC_TYPE:HOVER': 'BLEND',
+                'CB_STYLE_PROP_BGOVERLAY_SPEC_TYPE:MOBILE': 'MIX',
+                'CB_STYLE_PROP_BGOVERLAY_SPEC_TYPE:MOBILE:HOVER': 'OVERLAY'
+            },
+            CB_STYLE_PROP_BGMEDIA: {
+                // Base properties
+                CB_STYLE_PROP_BGMEDIA_SPEC_YSRC: 'https://example.com/video.mp4',
+                CB_STYLE_PROP_BGMEDIA_SPEC_TYPE: 'video',
+                CB_STYLE_PROP_BGMEDIA_SPEC_SCROLL: true,
+                CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME: 0,
+                CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY: false,
+                CB_STYLE_PROP_BGMEDIA_SPEC_MPLAY: true,
+                CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEPOSITION: 'center',
+                CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR: '.background-image',
+                CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT: 'cover',
+                CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME: 60,
+                // Hover state
+                'CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME:HOVER': 65,
+                'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT:HOVER': 'contain',
+                'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR:HOVER': '.bg-hover',
+                'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEPOSITION:HOVER': 'top',
+                'CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY:HOVER': true,
+                'CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME:HOVER': 5,
+                'CB_STYLE_PROP_BGMEDIA_SPEC_SCROLL:HOVER': false,
+                'CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:HOVER': 'gif',
+                'CB_STYLE_PROP_BGMEDIA_SPEC_YSRC:HOVER': 'https://example.com/hover-video.mp4',
+                // Mobile state
+                'CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME:MOBILE': 55,
+                'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT:MOBILE': 'fill',
+                'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR:MOBILE': '.bg-mobile',
+                'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEPOSITION:MOBILE': 'bottom',
+                'CB_STYLE_PROP_BGMEDIA_SPEC_MPLAY:MOBILE': false,
+                'CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY:MOBILE': true,
+                'CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME:MOBILE': 10,
+                'CB_STYLE_PROP_BGMEDIA_SPEC_SCROLL:MOBILE': true,
+                'CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:MOBILE': 'image',
+                'CB_STYLE_PROP_BGMEDIA_SPEC_YSRC:MOBILE': 'https://example.com/mobile-video.mp4',
+                // Mobile hover state
+                'CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME:MOBILE:HOVER': 70,
+                'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT:MOBILE:HOVER': 'scale-down',
+                'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR:MOBILE:HOVER': '.bg-mobile-hover',
+                'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEPOSITION:MOBILE:HOVER': 'left',
+                'CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY:MOBILE:HOVER': false,
+                'CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME:MOBILE:HOVER': 15,
+                'CB_STYLE_PROP_BGMEDIA_SPEC_SCROLL:MOBILE:HOVER': false,
+                'CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:MOBILE:HOVER': 'video',
+                'CB_STYLE_PROP_BGMEDIA_SPEC_YSRC:MOBILE:HOVER': 'https://example.com/mobile-hover-video.mp4'
+            },
+            CB_LAYOUT_PROP_PADDING: {
+                CB_LAYOUT_PROP_PADDING_SPEC_PADDING: {
+                    top: 0,
+                    right: 0,
+                    bottom: 0,
+                    left: 0
+                },
+                'CB_LAYOUT_PROP_PADDING_SPEC_PADDING:MOBILE': {
+                    top: 0,
+                    right: 0,
+                    bottom: 0,
+                    left: 0
+                },
+                CB_LAYOUT_PROP_PADDING_SPEC_FIX: true,
+                'CB_LAYOUT_PROP_PADDING_SPEC_FIX:MOBILE': false
+            },
+            CB_CONTENT_PROP_HOVER: {
+                CB_CONTENT_PROP_HOVER_SPEC_MUSE: true
+            },
+            CB_LAYOUT_PROP_ARRANGE: {
+                CB_LAYOUT_PROP_ARRANGE_SPEC_HORIZONTAL: 'CENTER',
+                'CB_LAYOUT_PROP_ARRANGE_SPEC_HORIZONTAL:MOBILE': 'CENTER',
+                CB_LAYOUT_PROP_ARRANGE_SPEC_VERTICAL: 'MIDDLE',
+                'CB_LAYOUT_PROP_ARRANGE_SPEC_VERTICAL:MOBILE': undefined
+            },
+            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': 'SLIDEINLEFT',
+                CB_EFFECT_PROP_ENTANIM_SPEC_DURATION: 1,
+                'CB_EFFECT_PROP_ENTANIM_SPEC_DURATION:MOBILE': undefined,
+                CB_EFFECT_PROP_ENTANIM_SPEC_REPEAT: 1,
+                'CB_EFFECT_PROP_ENTANIM_SPEC_REPEAT:MOBILE': undefined,
+                CB_EFFECT_PROP_ENTANIM_SPEC_TFUNC: 'EASEINOUT',
+                'CB_EFFECT_PROP_ENTANIM_SPEC_TFUNC:MOBILE': undefined
+            }
+        }
+    },
+    queryableDefinitionPreset: 'N/A',
+    queryableTapSrc: 'N/A',
+    compositions: [
+        mock_composition_1.sampleMockComposition1,
+        mock_composition_1.sampleMockComposition1,
+        mock_composition_1.sampleMockComposition1,
+        mock_composition_1.sampleMockComposition1,
+        mock_composition_1.sampleMockComposition1,
+        mock_composition_1.sampleMockComposition1,
+        mock_composition_1.sampleMockComposition1
+    ]
+};

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

@@ -6,7 +6,7 @@ var types_1 = require("./sections/CustomSection/types");
 exports.SAMPLE_SLIDEBANNER_CB = {
     availablePlugins: [],
     componentBlockCode: types_1.CB_ALL_CODES.CB_SLIDEBANNER,
-    dynamicLayoutSectionId: 18662,
+    dynamicLayoutSectionId: 18661,
     type: 'GENERAL',
     id: 188291,
     blockId: 'CB_188291',
@@ -93,11 +93,11 @@ exports.SAMPLE_SLIDEBANNER_CB = {
                 'CB_STYLE_PROP_SLIDEBANNER_SPEC_INFINITESCROLL:MOBILE:HOVER': false
             },
             CB_CONTENT_PROP_SLIDEBANNER: {
-                CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUE_TYPE: 'A',
+                CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE: 'DATA',
                 CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECT_DATA: '아티클:포스트',
                 CB_CONTENT_PROP_SLIDEBANNER_SPEC_DATASORTING: '최신순',
-                CB_CONTENT_PROP_SLIDEBANNER_SPEC_OFFSET: '1',
-                CB_CONTENT_PROP_SLIDEBANNER_SPEC_MENUALITEM: [],
+                CB_CONTENT_PROP_SLIDEBANNER_SPEC_OFFSET: 1,
+                CB_CONTENT_PROP_SLIDEBANNER_SPEC_MENUALITEMS: [],
                 CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS: 50,
                 CB_CONTENT_PROP_SLIDEBANNER_SPEC_DISPLAYCOUNTS: 1
             },

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

@@ -1,7 +1,7 @@
 export declare const MOCK_SECTIONS: {
     administrativeTitle: string;
     appearanceTemplate: string;
-    componentBlocks: (import("./sections/CustomSection/types").CB_CONTENTSCAROUSEL | import("./sections/CustomSection/types").CB_SLIDEBANNER | {
+    componentBlocks: (import("./sections/CustomSection/types").CB_LIST | import("./sections/CustomSection/types").CB_CONTENTSCAROUSEL | import("./sections/CustomSection/types").CB_SLIDEBANNER | {
         availablePlugins: never[];
         blockId: string;
         componentBlockCode: string;
@@ -999,6 +999,7 @@ export declare const MOCK_SECTIONS: {
                 '188287': number;
                 '188290': number;
                 '188291': number;
+                '188292': number;
             };
             mobile: {
                 '188262': number;
@@ -1029,6 +1030,7 @@ export declare const MOCK_SECTIONS: {
                 '188287': number;
                 '188290': number;
                 '188291': number;
+                '188292': number;
             };
         };
     };

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MOCK_SECTIONS = void 0;
 var mock_contentsCarousel_1 = require("./mock_contentsCarousel");
+var mock_contentsList_1 = require("./mock_contentsList");
 var mock_slideBanner_1 = require("./mock_slideBanner");
 exports.MOCK_SECTIONS = [
     {
@@ -10,6 +11,7 @@ exports.MOCK_SECTIONS = [
         componentBlocks: [
             mock_slideBanner_1.SAMPLE_SLIDEBANNER_CB,
             mock_contentsCarousel_1.SAMPLE_CONTENTSCAROUSEL_CB,
+            mock_contentsList_1.SAMPLE_LIST_CB,
             {
                 availablePlugins: [],
                 blockId: 'CB_188265',
@@ -4644,6 +4646,14 @@ exports.MOCK_SECTIONS = [
                         type: 'COMPONENT_BLOCK',
                         zOrderDesktopInternal: 28,
                         zOrderMobileInternal: 28
+                    },
+                    {
+                        blockId: 'CB_188292',
+                        children: [],
+                        componentBlockId: 188292,
+                        type: 'COMPONENT_BLOCK',
+                        zOrderDesktopInternal: 28,
+                        zOrderMobileInternal: 28
                     }
                 ],
                 componentBlockId: null,
@@ -4681,7 +4691,8 @@ exports.MOCK_SECTIONS = [
                     '188286': 26,
                     '188287': 19,
                     '188290': 27,
-                    '188291': 28
+                    '188291': 28,
+                    '188292': 29
                 },
                 mobile: {
                     '188262': 10,
@@ -4711,7 +4722,8 @@ exports.MOCK_SECTIONS = [
                     '188286': 25,
                     '188287': 19,
                     '188290': 27,
-                    '188291': 28
+                    '188291': 28,
+                    '188292': 29
                 }
             }
         },

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

@@ -20,6 +20,7 @@ var newUtils_1 = require("../../newUtils");
 var types_1 = require("../../types");
 var Button_1 = __importDefault(require("./componentBlocks/Button/Button"));
 var ContentsCarousel_1 = require("./componentBlocks/ContentsCarousel");
+var ContentsList_1 = require("./componentBlocks/ContentsList");
 var Divider_1 = __importDefault(require("./componentBlocks/Divider/Divider"));
 var Embed_1 = __importDefault(require("./componentBlocks/Embed/Embed"));
 var Image_1 = __importDefault(require("./componentBlocks/Image/Image"));
@@ -57,6 +58,10 @@ function ComponentBlockMatcher(_a) {
             var compositions = cbProps.compositions;
             return ((0, jsx_runtime_1.jsx)(SlideBanner_1.SlideBanner, __assign({}, propsWithValue, { compositions: compositions, index: index })));
         }
+        case types_1.CB_ALL_CODES.CB_LIST: {
+            var compositions = cbProps.compositions;
+            return ((0, jsx_runtime_1.jsx)(ContentsList_1.ContentsList, __assign({}, propsWithValue, { compositions: compositions, index: index })));
+        }
         default:
             return (0, jsx_runtime_1.jsx)("div", { children: "Error: not supported CB" });
     }

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

@@ -29,6 +29,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable react/destructuring-assignment */
 var react_1 = require("react");
 var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
+var compositionQueryContext_1 = require("../../../../../../../DynamicLayout/compositionQueryContext");
 var hooks_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/hooks");
 var useGoogleFonts_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/hooks/useGoogleFonts");
 var newUtils_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/newUtils");
@@ -40,9 +41,23 @@ var S_HiddenCover_1 = require("../components/S_HiddenCover");
 var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
 function Button(props) {
     var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
-    var index = props.index, CB_STYLE_PROP_COLOR = props.CB_STYLE_PROP_COLOR, _b = props.CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CLINK_SPEC_SRC = _b.CB_CONTENT_PROP_CLINK_SPEC_SRC, CB_CONTENT_PROP_CLINK_SPEC_TYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_TYPE, CB_CONTENT_PROP_CLINK_SPEC_NEWTAB = _b.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB, CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC = _b.CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
+    var queryContext = (0, compositionQueryContext_1.useCCBQueryPath)();
+    var index = props.index, CB_STYLE_PROP_COLOR = props.CB_STYLE_PROP_COLOR, _b = props.CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CLINK_SPEC_SRC = _b.CB_CONTENT_PROP_CLINK_SPEC_SRC, CB_CONTENT_PROP_CLINK_SPEC_TYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_TYPE, CB_CONTENT_PROP_CLINK_SPEC_NEWTAB = _b.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB, CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC = _b.CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC, CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE, CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA = _b.CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
+    var cLinkValue = function () {
+        if (CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE === 'DATA') {
+            if (!(queryContext === null || queryContext === void 0 ? void 0 : queryContext.queryData)) {
+                return "ERROR: QueryData NOT FOUND";
+            }
+            var link = queryContext.queryData[CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA];
+            if (!link) {
+                return "ERROR: ".concat(CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA, " NOT found from queryData");
+            }
+            return link;
+        }
+        return CB_CONTENT_PROP_CLINK_SPEC_SRC;
+    };
     var _c = (0, useCLINK_1.default)({
-        src: CB_CONTENT_PROP_CLINK_SPEC_SRC,
+        src: cLinkValue(),
         type: CB_CONTENT_PROP_CLINK_SPEC_TYPE,
         openNewTab: CB_CONTENT_PROP_CLINK_SPEC_NEWTAB,
         internalSrc: String(CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC)

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

@@ -21,8 +21,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable @typescript-eslint/no-unused-vars */
 var react_1 = require("react");
-var compositionQueryContext_1 = require("../../../../../../../DynamicLayout/compositionQueryContext");
-var Composition_1 = __importDefault(require("../../../../../../../DynamicLayout/CompositionRenderer/Composition"));
+require("../../../../../../../DynamicLayout/compositionQueryContext");
+require("../../../../../../../DynamicLayout/CompositionRenderer/Composition");
+var createCompositions_1 = require("../../../../../../../DynamicLayout/CompositionRenderer/createCompositions");
 var dynamicLayoutContext_1 = require("../../../../../../../DynamicLayout/dynamicLayoutContext");
 var hooks_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/hooks");
 var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
@@ -38,7 +39,7 @@ function ContentsCarousel(props) {
     var _a = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _a.device, mode = _a.mode, queryData = _a.queryData;
     var index = props.index, 
     // // CONTENT : 캐로셀
-    _b = props.CB_CONTENT_PROP_CONTENTSCAROUSEL, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS = _b.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUE_TYPE = _b.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUE_TYPE, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECT_DATA = _b.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECT_DATA, 
+    _b = props.CB_CONTENT_PROP_CONTENTSCAROUSEL, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS = _b.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE = _b.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECT_DATA = _b.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECT_DATA, 
     // STYLE: 캐로셀
     CB_STYLE_PROP_CONTENTSCAROUSEL = props.CB_STYLE_PROP_CONTENTSCAROUSEL, 
     // STYLE: 그림자
@@ -126,16 +127,6 @@ function ContentsCarousel(props) {
             swiperRef.current.swiper.slideNext();
         }
     };
-    var queryPath = CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUE_TYPE === 'QUERYDATA'
-        ? convertColonsToUnderscores(CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECT_DATA)
-        : null;
-    var isQueryDataConnected = CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUE_TYPE === 'QUERYDATA' && queryPath;
-    var filteredQueryData = isQueryDataConnected && queryData ? queryData[queryPath] : [];
-    // NOTE: 이 방식이 맞으면 util로 빼서 모든 CCB들에 적용하기 쉽게 만들기.
-    function convertColonsToUnderscores(input) {
-        return input.replace(/\//g, '_');
-    }
-    var queryComposition = compositions.find(function (composition) { return composition.isDefault; });
     return ((0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), editModeStyle), { position: 'relative', overflow: 'hidden' }), hoverStyle: __assign(__assign({}, hoverStyle), { position: 'relative', overflow: 'hidden' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: (0, jsx_runtime_1.jsxs)(S_SwiperWrapper, __assign({ customStyle: isHovered
                     ? contentsCarouselHoverStyle === null || contentsCarouselHoverStyle === void 0 ? void 0 : contentsCarouselHoverStyle.customStyle
                     : contentsCarouselNormalStyle === null || contentsCarouselNormalStyle === void 0 ? void 0 : contentsCarouselNormalStyle.customStyle }, { children: [(0, jsx_runtime_1.jsx)(ContentsCarouselCore_1.default, __assign({ ref: swiperRef, className: "contents-carousel-core", onSwiper: handleSwiper, onSlideChange: handleSlideChange, onAutoplayTimeLeft: handleAutoplayTimeLeft, slidesPerView: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, scrollbar: isHovered
@@ -146,11 +137,12 @@ function ContentsCarousel(props) {
                             ? contentsCarouselHoverStyle.spaceBetween
                             : contentsCarouselNormalStyle.spaceBetween, freeMode: isHovered ? contentsCarouselHoverStyle.freeMode : contentsCarouselNormalStyle.freeMode, autoplay: isHovered ? contentsCarouselHoverStyle.autoplay : contentsCarouselNormalStyle.autoplay, useAutoplay: isHovered
                             ? contentsCarouselHoverStyle.useAutoplay
-                            : contentsCarouselNormalStyle.useAutoplay, loop: isHovered ? contentsCarouselHoverStyle.loop : contentsCarouselNormalStyle.loop }, { children: filteredQueryData.length > 0
-                            ? filteredQueryData.map(function (query, index) {
-                                return ((0, jsx_runtime_1.jsxs)(compositionQueryContext_1.CCBQueryPathContext.Provider, __assign({ value: { queryData: query } }, { children: [(0, jsx_runtime_1.jsx)(Composition_1.default, __assign({}, queryComposition)), ";"] }), index));
-                            })
-                            : compositions.map(function (composition) { return ((0, jsx_runtime_1.jsx)(Composition_1.default, __assign({}, composition), composition.id)); }) })), (0, jsx_runtime_1.jsx)(CustomPagination_1.CustomPagination, { type: isHovered ? customPaginationHoverStyle.type : customPaginationNormalStyle.type, offset: isHovered ? customPaginationHoverStyle.offset : customPaginationNormalStyle.offset, current: currentSlide, total: totalPages, size: isHovered ? customPaginationHoverStyle.size : customPaginationNormalStyle.size, onBulletClick: handleBulletClick }), (0, jsx_runtime_1.jsx)(CustomNavigation_1.CustomNavigation, { prevBtnDisabled: isBeginning, prevBtnType: isHovered
+                            : contentsCarouselNormalStyle.useAutoplay, loop: isHovered ? contentsCarouselHoverStyle.loop : contentsCarouselNormalStyle.loop }, { children: (0, createCompositions_1.createCompositions)({
+                            valueType: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE,
+                            queryPath: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECT_DATA,
+                            queryData: queryData,
+                            compositions: compositions
+                        }) })), (0, jsx_runtime_1.jsx)(CustomPagination_1.CustomPagination, { type: isHovered ? customPaginationHoverStyle.type : customPaginationNormalStyle.type, offset: isHovered ? customPaginationHoverStyle.offset : customPaginationNormalStyle.offset, current: currentSlide, total: totalPages, size: isHovered ? customPaginationHoverStyle.size : customPaginationNormalStyle.size, onBulletClick: handleBulletClick }), (0, jsx_runtime_1.jsx)(CustomNavigation_1.CustomNavigation, { prevBtnDisabled: isBeginning, prevBtnType: isHovered
                             ? customNavigationHoverStyle.prevBtnType
                             : customNavigationNormalStyle.prevBtnType, prevBtnOffset: isHovered
                             ? customNavigationHoverStyle.prevBtnOffset

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

@@ -11,7 +11,7 @@ export interface ContentsCarouselCoreProps extends SwiperProps {
     autoplay?: SwiperProps['autoplay'];
     useAutoplay?: boolean;
     loop?: SwiperProps['loop'];
-    children?: React.ReactNode[];
+    children?: React.ReactNode[] | JSX.Element;
 }
 declare const ContentsCarouselCore: import("react").ForwardRefExoticComponent<ContentsCarouselCoreProps & import("react").RefAttributes<SwiperRef>>;
 export default ContentsCarouselCore;

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

@@ -33,7 +33,7 @@ var ContentsCarouselCore = (0, react_1.forwardRef)(function (_a, ref) {
     return ((0, jsx_runtime_1.jsx)(react_2.Swiper, __assign({ ref: ref, style: {
             width: '100%',
             height: '100%'
-        }, modules: [swiper_1.Pagination, swiper_1.Navigation, swiper_1.Scrollbar, swiper_1.FreeMode, swiper_1.Autoplay], slidesPerView: slidesPerView, scrollbar: scrollbar, slidesPerGroup: slidesPerGroup, spaceBetween: spaceBetween, freeMode: freeMode, autoplay: useAutoplay ? autoplay : false, loop: loop }, props, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children === null || children === void 0 ? void 0 : children.map(function (slide, index) { return ((0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { children: slide }, index)); }) }) })));
+        }, modules: [swiper_1.Pagination, swiper_1.Navigation, swiper_1.Scrollbar, swiper_1.FreeMode, swiper_1.Autoplay], slidesPerView: slidesPerView, scrollbar: scrollbar, slidesPerGroup: slidesPerGroup, spaceBetween: spaceBetween, freeMode: freeMode, autoplay: useAutoplay ? autoplay : false, loop: loop }, props, { children: Array.isArray(children) ? (children.map(function (slide, index) { return (0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { children: slide }, index); })) : ((0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { children: children })) })));
 });
 ContentsCarouselCore.displayName = 'ContentsCarouselCore';
 exports.default = ContentsCarouselCore;