pds-dev-kit-web-test 2.7.501 → 2.7.503

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

@@ -69,7 +69,7 @@ var createComponent = function (type, getDesignType, getLocation, designType) {
 function ContentsCarousel(props) {
     var _a, _b;
     var _c = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _c.device, mode = _c.mode, queryData = _c.queryData;
-    var compositions = props.compositions, index = props.index, _d = props.CB_CONTENT_PROP_CONTENTSCAROUSEL, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MDISPLAYCOUNTS = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MDISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MANUALITEMS = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MANUALITEMS, CB_STYLE_PROP_CONTENTSCAROUSELDESIGN = props.CB_STYLE_PROP_CONTENTSCAROUSELDESIGN, CB_STYLE_PROP_CONTENTSCAROUSELPLAYBACKMETHOD = props.CB_STYLE_PROP_CONTENTSCAROUSELPLAYBACKMETHOD, CB_STYLE_PROP_CONTENTSCAROUSELBUTTON = props.CB_STYLE_PROP_CONTENTSCAROUSELBUTTON, CB_STYLE_PROP_CONTENTSCAROUSELPROGRESSBAR = props.CB_STYLE_PROP_CONTENTSCAROUSELPROGRESSBAR, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM, CB_STYLE_PROP_BGMEDIA = props.CB_STYLE_PROP_BGMEDIA, CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE = props.CB_EFFECT_PROP_CONTENTSCAROUSEL.CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE;
+    var compositions = props.compositions, index = props.index, _d = props.CB_CONTENT_PROP_CONTENTSCAROUSEL, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MDISPLAYCOUNTS = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MDISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATASORTING = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATASORTING, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATAOFFSET = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATAOFFSET, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MANUALITEMS = _d.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MANUALITEMS, CB_STYLE_PROP_CONTENTSCAROUSELDESIGN = props.CB_STYLE_PROP_CONTENTSCAROUSELDESIGN, CB_STYLE_PROP_CONTENTSCAROUSELPLAYBACKMETHOD = props.CB_STYLE_PROP_CONTENTSCAROUSELPLAYBACKMETHOD, CB_STYLE_PROP_CONTENTSCAROUSELBUTTON = props.CB_STYLE_PROP_CONTENTSCAROUSELBUTTON, CB_STYLE_PROP_CONTENTSCAROUSELPROGRESSBAR = props.CB_STYLE_PROP_CONTENTSCAROUSELPROGRESSBAR, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM, CB_STYLE_PROP_BGMEDIA = props.CB_STYLE_PROP_BGMEDIA, CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE = props.CB_EFFECT_PROP_CONTENTSCAROUSEL.CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE;
     var CB_STYLE_PROP_CONTENTSCAROUSEL = __assign(__assign(__assign(__assign({}, CB_STYLE_PROP_CONTENTSCAROUSELDESIGN), CB_STYLE_PROP_CONTENTSCAROUSELPLAYBACKMETHOD), CB_STYLE_PROP_CONTENTSCAROUSELBUTTON), CB_STYLE_PROP_CONTENTSCAROUSELPROGRESSBAR);
     var autoPlayEnabled = device === 'DESKTOP'
         ? CB_STYLE_PROP_CONTENTSCAROUSELPLAYBACKMETHOD.CB_STYLE_PROP_CONTENTSCAROUSELPLAYBACKMETHOD_SPEC_AUTOPLAYUSE
@@ -91,13 +91,19 @@ function ContentsCarousel(props) {
         props: CB_STYLE_PROP_CONTENTSCAROUSEL,
         device: device
     }), customProgressbarNormalStyle = _h.normalStyle, customProgressbarHoverStyle = _h.hoverStyle;
-    var _j = (0, useSwiper_1.useSwiper)(), swiperRef = _j.swiperRef, progressRef = _j.progressRef, leftTimeMsRef = _j.leftTimeMsRef, isBeginning = _j.isBeginning, isEnd = _j.isEnd, onSwiper = _j.onSwiper, onSlideChangeTransitionEnd = _j.onSlideChangeTransitionEnd, onAutoplayTimeLeft = _j.onAutoplayTimeLeft, onClickPrevBtn = _j.onClickPrevBtn, onClickNextBtn = _j.onClickNextBtn;
+    var _j = (0, useSwiper_1.useSwiper)(), swiperRef = _j.swiperRef, progressRef = _j.progressRef, leftTimeMsRef = _j.leftTimeMsRef, isBeginning = _j.isBeginning, isEnd = _j.isEnd, onSwiper = _j.onSwiper, onSlideChangeTransitionEnd = _j.onSlideChangeTransitionEnd, onAutoplayTimeLeft = _j.onAutoplayTimeLeft, onClickPrevBtn = _j.onClickPrevBtn, onClickNextBtn = _j.onClickNextBtn, resetSwiper = _j.resetSwiper;
     var _k = (0, react_1.useState)(false), isHovered = _k[0], setIsHovered = _k[1];
-    var orderedCompositions = __spreadArray([], CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MANUALITEMS, true).filter(function (item) { return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; }); })
-        .sort(function (a, b) { return a.order - b.order; })
-        .map(function (item) {
-        return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; });
-    });
+    var queryPath = "".concat(CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA, "/").concat(CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATASORTING, "/").concat(CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATAOFFSET);
+    (0, react_1.useEffect)(function () {
+        resetSwiper();
+    }, [queryPath]);
+    var orderedCompositions = CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE === 'VALUE'
+        ? __spreadArray([], CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MANUALITEMS, true).filter(function (item) { return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; }); })
+            .sort(function (a, b) { return a.order - b.order; })
+            .map(function (item) {
+            return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; });
+        })
+        : compositions.filter(function (comp) { return !comp.ccbManualItemUuid; });
     var loop = contentsCarouselNormalStyle.loop && orderedCompositions.length >= displayCounts;
     // NOTE: edit모드에서는 그리드의 이벤트만 작동하도록 CB의 포인터 이벤트는 막습니다.
     var editModeStyle = mode === 'EDIT' ? { pointerEvents: 'none' } : {};
@@ -135,18 +141,6 @@ function ContentsCarousel(props) {
         bottom: '0px',
         left: '0px'
     };
-    var renderElements = function (component, style) {
-        switch (component.type) {
-            case 'PREV':
-                return ((0, jsx_runtime_1.jsx)(CustomNavigationPrevBtn_1.CustomNavigationPrevBtn, { isDisabled: loop ? false : isBeginning, hoverStyles: customNavigationHoverStyle, onClick: onClickPrevBtn, styles: customNavigationNormalStyle, style: __assign({}, style) }));
-            case 'NEXT':
-                return ((0, jsx_runtime_1.jsx)(CustomNavigationNextBtn_1.CustomNavigationNextBtn, { isDisabled: loop ? false : isEnd, styles: customNavigationNormalStyle, hoverStyles: customNavigationHoverStyle, onClick: onClickNextBtn, style: __assign({}, style) }));
-            case 'PROGRESSBAR':
-                return ((0, jsx_runtime_1.jsx)(CustomProgressbar_1.CustomProgressbar, { slidesLength: orderedCompositions.length, progressRef: progressRef, leftTimeMsRef: leftTimeMsRef, styles: isHovered ? customProgressbarHoverStyle : customProgressbarNormalStyle }));
-            default:
-                return null;
-        }
-    };
     // NOTE: edit환경에서 hover가 작동하지 않아서 제외함 필요시 추가..
     var columnGapEnum = device === 'DESKTOP'
         ? CB_STYLE_PROP_CONTENTSCAROUSELDESIGN.CB_STYLE_PROP_CONTENTSCAROUSELDESIGN_SPEC_ITEMSPACING
@@ -161,6 +155,55 @@ function ContentsCarousel(props) {
     if (mode === 'EDIT') {
         style.visibility = 'visible';
     }
+    var renderElements = function (component, style, slidesLength) {
+        switch (component.type) {
+            case 'PREV':
+                return ((0, jsx_runtime_1.jsx)(CustomNavigationPrevBtn_1.CustomNavigationPrevBtn, { isDisabled: loop ? false : isBeginning, hoverStyles: customNavigationHoverStyle, onClick: onClickPrevBtn, styles: customNavigationNormalStyle, style: __assign({}, style) }));
+            case 'NEXT':
+                return ((0, jsx_runtime_1.jsx)(CustomNavigationNextBtn_1.CustomNavigationNextBtn, { isDisabled: loop ? false : isEnd, styles: customNavigationNormalStyle, hoverStyles: customNavigationHoverStyle, onClick: onClickNextBtn, style: __assign({}, style) }));
+            case 'PROGRESSBAR':
+                return ((0, jsx_runtime_1.jsx)(CustomProgressbar_1.CustomProgressbar, { slidesLength: slidesLength, progressRef: progressRef, leftTimeMsRef: leftTimeMsRef, styles: isHovered ? customProgressbarHoverStyle : customProgressbarNormalStyle }));
+            default:
+                return null;
+        }
+    };
+    var renderSwiper = function (compositions) {
+        return ((0, jsx_runtime_1.jsx)(S_SwiperLayout, __assign({ className: "cb-contentscarousel-layout-box", ref: layoutRef, style: __assign({}, pointerEventsObj) }, { children: (0, jsx_runtime_1.jsx)(S_SwiperWrapper, __assign({ className: "cb-contentscarousel-wrapper", ccbInset: ccbInset, customStyle: isHovered
+                    ? contentsCarouselHoverStyle === null || contentsCarouselHoverStyle === void 0 ? void 0 : contentsCarouselHoverStyle.customStyle
+                    : contentsCarouselNormalStyle === null || contentsCarouselNormalStyle === void 0 ? void 0 : contentsCarouselNormalStyle.customStyle, style: {
+                    display: layout.display,
+                    flexDirection: layout.flexDirection,
+                    justifyContent: layout.justifyContent
+                } }, { children: (0, jsx_runtime_1.jsx)(ContentsCarouselCore_1.default, __assign({ ref: swiperRef, className: "cb-contentscarousel", allowTouchMove: mode !== 'EDIT' ? true : false, onSwiper: onSwiper, onSlideChangeTransitionEnd: onSlideChangeTransitionEnd, onAutoplayTimeLeft: onAutoplayTimeLeft, slidesPerView: displayCounts, styles: isHovered ? contentsCarouselHoverStyle : contentsCarouselNormalStyle, effect: CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE === null || CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE === void 0 ? void 0 : CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE.toLowerCase(), loop: loop, displayCounts: displayCounts }, { children: (0, createCompositions_1.createCompositions)({
+                        valueType: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE,
+                        queryPath: queryPath,
+                        limit: displayCounts,
+                        queryData: queryData,
+                        compositions: compositions,
+                        componentBlockCode: types_1.CB_ALL_CODES.CB_CONTENTSCAROUSEL
+                    }) }), CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE +
+                    autoPlayEnabled +
+                    compositions.length +
+                    queryPath) })) })));
+    };
+    var renderCompositions = function (compositions) {
+        // 직접 연결
+        if (CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE === 'VALUE') {
+            if (!compositions.length)
+                return (0, jsx_runtime_1.jsx)(EmptyString, { stringKey: "str_9806" });
+            return renderSwiper(compositions);
+        }
+        // 데이터 연결
+        if (queryPath === 'NONE' || !queryPath || !queryData) {
+            return (0, jsx_runtime_1.jsx)(EmptyString, { stringKey: "str_10477" }, "no-query");
+        }
+        var queryDataValue = queryData[queryPath];
+        // 쿼리 데이터와 키가 있으나, 쿼리 데이터에 결과가 빈 경우
+        if (!(queryDataValue === null || queryDataValue === void 0 ? void 0 : queryDataValue.length)) {
+            return (0, jsx_runtime_1.jsx)(EmptyString, { stringKey: "str_10478" }, "empty-item");
+        }
+        return renderSwiper(compositions);
+    };
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), Object.entries(componentGroups).map(function (_a) {
                 var position = _a[0], groupComponents = _a[1];
                 return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-contentscarousel-button-group ccb-elements ".concat(position), ref: function (el) {
@@ -171,43 +214,29 @@ function ContentsCarousel(props) {
                             delete positionRefs.current[position];
                         }
                     }, style: __assign(__assign({}, getPositionStyle(position, ccbInset, 'GROUP', 'GROUP', 'GROUP')), { zIndex: 3, position: 'absolute' }) }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-contentscarousel-button-layout-box", style: getComponentGroupLayout(groupComponents, position) }, { children: groupComponents.map(function (component) {
-                            return renderElements(component, getPositionStyle(position, ccbInset, component.designType, component.size, component.type));
+                            return renderElements(component, getPositionStyle(position, ccbInset, component.designType, component.size, component.type), orderedCompositions.length);
                         }) })) }), position));
             }), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsxs)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box ccb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), editModeStyle), { overflow: 'hidden' }), hoverStyle: __assign(__assign({}, hoverStyle), { overflow: 'hidden' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onMouseEnter: function () {
                         setIsHovered(true);
-                    }, onMouseLeave: function () { return setIsHovered(false); }, "data-number-of-columns": displayCounts, "data-number-of-items": displayCounts, "data-column-gap": columnGap, "data-cols": displayCounts, "data-inset-top": parseFloat(ccbInset.top), "data-inset-bottom": parseFloat(ccbInset.bottom) }, { children: [(0, jsx_runtime_1.jsx)(S_CustomBackgroundWrapper, __assign({ ref: backgroundRef, style: __assign(__assign({}, effect), { background: style.background }) }, { children: isBgMedia && CB_STYLE_PROP_BGMEDIA && ((0, jsx_runtime_1.jsx)(CustomSectionBackgroundMedia_1.CustomSectionBackgroundMedia, { specs: CB_STYLE_PROP_BGMEDIA, componentStyle: style, playerId: index, mediaType: mediaType || 'NONE', device: isMobile ? 'MOBILE' : 'DESKTOP', backgroundRef: backgroundRef })) })), (0, jsx_runtime_1.jsx)(S_Overlay, { style: overlayStyle }), orderedCompositions.length > 0 ? ((0, jsx_runtime_1.jsx)(S_SwiperLayout, __assign({ className: "cb-contentscarousel-layout-box", ref: layoutRef, style: __assign({}, pointerEventsObj) }, { children: (0, jsx_runtime_1.jsx)(S_SwiperWrapper, __assign({ className: "cb-contentscarousel-wrapper", ccbInset: ccbInset, customStyle: isHovered
-                                    ? contentsCarouselHoverStyle === null || contentsCarouselHoverStyle === void 0 ? void 0 : contentsCarouselHoverStyle.customStyle
-                                    : contentsCarouselNormalStyle === null || contentsCarouselNormalStyle === void 0 ? void 0 : contentsCarouselNormalStyle.customStyle, style: {
-                                    display: layout.display,
-                                    flexDirection: layout.flexDirection,
-                                    justifyContent: layout.justifyContent
-                                } }, { children: (0, jsx_runtime_1.jsx)(ContentsCarouselCore_1.default, __assign({ ref: swiperRef, className: "cb-contentscarousel", allowTouchMove: mode !== 'EDIT' ? true : false, onSwiper: onSwiper, onSlideChangeTransitionEnd: onSlideChangeTransitionEnd, onAutoplayTimeLeft: onAutoplayTimeLeft, slidesPerView: displayCounts, styles: isHovered ? contentsCarouselHoverStyle : contentsCarouselNormalStyle, effect: CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE === null || CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE === void 0 ? void 0 : CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE.toLowerCase(), loop: loop, displayCounts: displayCounts }, { children: (0, createCompositions_1.createCompositions)({
-                                        valueType: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE,
-                                        queryPath: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA,
-                                        limit: displayCounts,
-                                        queryData: queryData,
-                                        compositions: orderedCompositions,
-                                        componentBlockCode: types_1.CB_ALL_CODES.CB_CONTENTSCAROUSEL
-                                    }) }), CB_EFFECT_PROP_CONTENTSCAROUSEL_SPEC_TRANSITIONTYPE +
-                                    autoPlayEnabled +
-                                    orderedCompositions.length) })) }))) : ((0, jsx_runtime_1.jsx)(EmptyString, {}))] })) }))] }));
+                    }, onMouseLeave: function () { return setIsHovered(false); }, "data-number-of-columns": displayCounts, "data-number-of-items": displayCounts, "data-column-gap": columnGap, "data-cols": displayCounts, "data-inset-top": parseFloat(ccbInset.top), "data-inset-bottom": parseFloat(ccbInset.bottom) }, { children: [(0, jsx_runtime_1.jsx)(S_CustomBackgroundWrapper, __assign({ ref: backgroundRef, style: __assign(__assign({}, effect), { background: style.background }) }, { children: isBgMedia && CB_STYLE_PROP_BGMEDIA && ((0, jsx_runtime_1.jsx)(CustomSectionBackgroundMedia_1.CustomSectionBackgroundMedia, { specs: CB_STYLE_PROP_BGMEDIA, componentStyle: style, playerId: index, mediaType: mediaType || 'NONE', device: isMobile ? 'MOBILE' : 'DESKTOP', backgroundRef: backgroundRef })) })), (0, jsx_runtime_1.jsx)(S_Overlay, { style: overlayStyle }), renderCompositions(orderedCompositions)] })) }))] }));
 }
-function EmptyString() {
+function EmptyString(_a) {
+    var stringKey = _a.stringKey;
     var t = (0, react_i18next_1.useTranslation)('translation').t;
-    return (0, jsx_runtime_1.jsx)(S_EmptyLayer, { children: t('str_9806') });
+    return (0, jsx_runtime_1.jsx)(S_EmptyLayer, { children: t(stringKey) });
 }
-var S_EmptyLayer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: rgba(0, 0, 0, 0.6);\n  color: white;\n  display: flex;\n  font-size: ", ";\n  font-weight: ", ";\n  justify-content: center;\n  line-height: ", ";\n  margin: auto;\n  padding: ", ";\n  text-align: center;\n  width: 100%;\n  word-break: keep-all;\n"], ["\n  background-color: rgba(0, 0, 0, 0.6);\n  color: white;\n  display: flex;\n  font-size: ", ";\n  font-weight: ", ";\n  justify-content: center;\n  line-height: ", ";\n  margin: auto;\n  padding: ", ";\n  text-align: center;\n  width: 100%;\n  word-break: keep-all;\n"])), function (_a) {
+var S_EmptyLayer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: rgba(0, 0, 0, 0.5);\n  color: white;\n  display: flex;\n  font-size: ", ";\n  font-weight: ", ";\n  justify-content: center;\n  line-height: ", ";\n  margin: auto;\n  padding: ", ";\n  text-align: center;\n  width: 100%;\n  word-break: keep-all;\n"], ["\n  background-color: rgba(0, 0, 0, 0.5);\n  color: white;\n  display: flex;\n  font-size: ", ";\n  font-weight: ", ";\n  justify-content: center;\n  line-height: ", ";\n  margin: auto;\n  padding: ", ";\n  text-align: center;\n  width: 100%;\n  word-break: keep-all;\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.desktopFontSize.body2;
+    return theme.desktopFontSize.caption1;
 }, function (_a) {
     var theme = _a.theme;
     return theme.fontWeight.bold;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.desktopLineHeight.body2;
+    return theme.desktopLineHeight.caption1;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingE;
+    return theme.spacing.spacingD;
 });
 var S_Overlay = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: inherit;\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n"], ["\n  border-radius: inherit;\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n"])));
 function getIsBgMedia(isMobile, specs) {

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

@@ -11,4 +11,5 @@ export declare function useSwiper(): {
     onAutoplayTimeLeft: (swiper: SwiperClass, time: number, progress: number) => void;
     onClickPrevBtn: () => void;
     onClickNextBtn: () => void;
+    resetSwiper: () => void;
 };

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

@@ -30,6 +30,14 @@ function useSwiper() {
             swiperRef.current.swiper.slideNext();
         }
     };
+    var resetSwiper = function () {
+        var _a;
+        setIsBeginning(true);
+        setIsEnd(false);
+        progressRef.current = 0;
+        leftTimeMsRef.current = 0;
+        (_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(0, 0);
+    };
     return {
         swiperRef: swiperRef,
         progressRef: progressRef,
@@ -40,7 +48,8 @@ function useSwiper() {
         onSlideChangeTransitionEnd: onSlideChangeTransitionEnd,
         onAutoplayTimeLeft: onAutoplayTimeLeft,
         onClickPrevBtn: onClickPrevBtn,
-        onClickNextBtn: onClickNextBtn
+        onClickNextBtn: onClickNextBtn,
+        resetSwiper: resetSwiper
     };
 }
 exports.useSwiper = useSwiper;

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

@@ -65,16 +65,16 @@ var createComponent = function (type, getDesignType, getLocation, designType, si
     };
 };
 function ContentsList(props) {
-    var _a, _b, _c, _d, _e, _f;
-    var _g = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _g.device, mode = _g.mode, queryData = _g.queryData;
+    var _a, _b, _c, _d;
+    var _e = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _e.device, mode = _e.mode, queryData = _e.queryData;
     var index = props.index, compositions = props.compositions, CB_CONTENT_PROP_CONTENTSLIST = props.CB_CONTENT_PROP_CONTENTSLIST, CB_STYLE_PROP_CONTENTSLISTDESIGN = props.CB_STYLE_PROP_CONTENTSLISTDESIGN, CB_STYLE_PROP_CONTENTSLISTPAGINATION = props.CB_STYLE_PROP_CONTENTSLISTPAGINATION, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM, CB_LAYOUT_PROP_PADDING = props.CB_LAYOUT_PROP_PADDING, CB_STYLE_PROP_BGMEDIA = props.CB_STYLE_PROP_BGMEDIA, CB_LAYOUT_PROP_HEIGHTADJUSTMENT = props.CB_LAYOUT_PROP_HEIGHTADJUSTMENT;
     var 
     // CB_CONTENT_PROP_CONTENTSLIST_SPEC_ITEMCOUNTS,
-    CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MDISPLAYCOUNTS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_MDISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE, CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA, CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MCOLUMNS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_MCOLUMNS;
-    var _h = (0, react_1.useState)(false), isHovered = _h[0], setIsHovered = _h[1];
-    var _j = (0, react_1.useState)(1), currentPage = _j[0], setCurrentPage = _j[1];
-    var parsedQueryPath = removeFirstSegment(CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA);
-    var queryDataValue = queryData === null || queryData === void 0 ? void 0 : queryData[parsedQueryPath];
+    CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MDISPLAYCOUNTS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_MDISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE, CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA, CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATASORTING = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATASORTING, CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATAOFFSET = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATAOFFSET, CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MCOLUMNS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_MCOLUMNS;
+    var _f = (0, react_1.useState)(false), isHovered = _f[0], setIsHovered = _f[1];
+    var _g = (0, react_1.useState)(1), currentPage = _g[0], setCurrentPage = _g[1];
+    var queryPath = "".concat(CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA, "/").concat(CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATASORTING, "/").concat(CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATAOFFSET);
+    var queryDataValue = queryData === null || queryData === void 0 ? void 0 : queryData[queryPath];
     // list의 minheight / minwidth를 계산
     var numberOfColumns = device === 'DESKTOP'
         ? CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS
@@ -86,19 +86,19 @@ function ContentsList(props) {
         ? queryDataValue === null || queryDataValue === void 0 ? void 0 : queryDataValue.length
         : CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS.length) / displayCounts);
     var CB_STYLE_PROP_CONTENTSLIST = __assign(__assign({}, CB_STYLE_PROP_CONTENTSLISTDESIGN), CB_STYLE_PROP_CONTENTSLISTPAGINATION);
-    var _k = (0, util_1.parseProperties)(props, device), style = _k.style, hoverStyle = _k.hoverStyle, layout = _k.layout, effect = _k.effect, overlayStyle = _k.overlayStyle;
+    var _h = (0, util_1.parseProperties)(props, device), style = _h.style, hoverStyle = _h.hoverStyle, layout = _h.layout, effect = _h.effect, overlayStyle = _h.overlayStyle;
     var contentPropCss = (0, contentsListUtils_1.parseGridContentProp)({
         props: CB_CONTENT_PROP_CONTENTSLIST,
         device: device
     }).contentPropCss;
-    var _l = (0, contentsListUtils_1.parseGridStyleProp)({
+    var _j = (0, contentsListUtils_1.parseGridStyleProp)({
         props: CB_STYLE_PROP_CONTENTSLIST,
         device: device
-    }), stylePropCss = _l.stylePropCss, hoverStylePropCss = _l.hoverStylePropCss;
-    var _m = (0, contentsListUtils_1.parsePaginationStyleProp)({
+    }), stylePropCss = _j.stylePropCss, hoverStylePropCss = _j.hoverStylePropCss;
+    var _k = (0, contentsListUtils_1.parsePaginationStyleProp)({
         props: CB_STYLE_PROP_CONTENTSLIST,
         device: device
-    }), paginationNormalStyle = _m.normalStyle, paginationHoverStyle = _m.hoverStyle;
+    }), paginationNormalStyle = _k.normalStyle, paginationHoverStyle = _k.hoverStyle;
     // NOTE: edit모드에서는 그리드의 이벤트만 작동하도록 CB의 포인터 이벤트는 막습니다.
     var editModeStyle = mode === 'EDIT' ? { pointerEvents: 'none' } : {};
     var cbRef = (0, react_1.useRef)(null);
@@ -135,9 +135,6 @@ function ContentsList(props) {
         CB_LAYOUT_PROP_PADDING.CB_LAYOUT_PROP_PADDING_SPEC_PADDING.right;
     var paddingTB = CB_LAYOUT_PROP_PADDING.CB_LAYOUT_PROP_PADDING_SPEC_PADDING.top +
         CB_LAYOUT_PROP_PADDING.CB_LAYOUT_PROP_PADDING_SPEC_PADDING.bottom;
-    var queryPath = removeFirstSegment(CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA);
-    var queryLength = (_f = (_e = queryData === null || queryData === void 0 ? void 0 : queryData[queryPath]) === null || _e === void 0 ? void 0 : _e.length) !== null && _f !== void 0 ? _f : 0;
-    // const displayedItemLength = Math.max(0, Math.min(endIndex, queryLength) - startIndex);
     var numberOfRows = Math.ceil(displayCounts / numberOfColumns);
     var listMinWidth = oneCompositionMinWidth * numberOfColumns + (numberOfColumns - 1) * columnGap + paddingLR;
     var listMinHeight = oneCompositionMinHeight * numberOfRows +
@@ -147,9 +144,9 @@ function ContentsList(props) {
     var components = [
         createPagination(paginationNormalStyle, paginationHoverStyle, isHovered)
     ].filter(function (component) { return component !== undefined; });
-    var _o = (0, useFlexGridLayout_1.useFlexGridLayout)({ components: components }), layoutRef = _o.layoutRef, positionRefs = _o.positionRefs, 
+    var _l = (0, useFlexGridLayout_1.useFlexGridLayout)({ components: components }), layoutRef = _l.layoutRef, positionRefs = _l.positionRefs, 
     // ccbInset,
-    componentGroups = _o.componentGroups, getPositionStyle = _o.getPositionStyle, getComponentGroupLayout = _o.getComponentGroupLayout;
+    componentGroups = _l.componentGroups, getPositionStyle = _l.getPositionStyle, getComponentGroupLayout = _l.getComponentGroupLayout;
     var ccbInset = {
         top: '0px',
         right: '0px',
@@ -157,23 +154,17 @@ function ContentsList(props) {
         left: '0px'
     };
     var t = (0, react_i18next_1.useTranslation)('translation').t;
-    var renderElements = function (component, positionStyle) {
-        switch (component.type) {
-            case 'PAGINATION':
-                return ((0, jsx_runtime_1.jsx)("div", __assign({ style: positionStyle }, { children: (0, jsx_runtime_1.jsx)(CustomPagination_1.CustomPagination, { styles: isHovered ? paginationHoverStyle : paginationNormalStyle, current: currentPage, total: totalPage, onPageClick: handlePageClick, style: positionStyle }) })));
-            default:
-                return null;
-        }
-    };
     var backgroundRef = (0, react_1.useRef)(null);
     var isMobile = device === 'MOBILE';
     var isBgMedia = getIsBgMedia(isMobile, CB_STYLE_PROP_BGMEDIA);
     var mediaType = getMediaType(isMobile, CB_STYLE_PROP_BGMEDIA);
-    var orderedCompositions = __spreadArray([], CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS, true).filter(function (item) { return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; }); })
-        .sort(function (a, b) { return a.order - b.order; })
-        .map(function (item) {
-        return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; });
-    });
+    var orderedCompositions = CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE === 'VALUE'
+        ? __spreadArray([], CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS, true).filter(function (item) { return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; }); })
+            .sort(function (a, b) { return a.order - b.order; })
+            .map(function (item) {
+            return compositions.find(function (comp) { return comp.ccbManualItemUuid === item.uuid; });
+        })
+        : compositions.filter(function (comp) { return !comp.ccbManualItemUuid; });
     var heightFitContentByDevice = device === 'DESKTOP'
         ? CB_LAYOUT_PROP_HEIGHTADJUSTMENT === null || CB_LAYOUT_PROP_HEIGHTADJUSTMENT === void 0 ? void 0 : CB_LAYOUT_PROP_HEIGHTADJUSTMENT.CB_LAYOUT_PROP_HEIGHTADJUSTMENT_SPEC_HEIGHTFITCONTENT
         : CB_LAYOUT_PROP_HEIGHTADJUSTMENT === null || CB_LAYOUT_PROP_HEIGHTADJUSTMENT === void 0 ? void 0 : CB_LAYOUT_PROP_HEIGHTADJUSTMENT['CB_LAYOUT_PROP_HEIGHTADJUSTMENT_SPEC_HEIGHTFITCONTENT:MOBILE'];
@@ -182,6 +173,48 @@ function ContentsList(props) {
     if (mode === 'EDIT') {
         style.visibility = 'visible';
     }
+    var renderElements = function (component, positionStyle) {
+        switch (component.type) {
+            case 'PAGINATION':
+                return ((0, jsx_runtime_1.jsx)("div", __assign({ style: positionStyle }, { children: (0, jsx_runtime_1.jsx)(CustomPagination_1.CustomPagination, { styles: isHovered ? paginationHoverStyle : paginationNormalStyle, current: currentPage, total: totalPage, onPageClick: handlePageClick, style: positionStyle }) })));
+            default:
+                return null;
+        }
+    };
+    var renderList = function (compositions) {
+        return ((0, jsx_runtime_1.jsx)(S_ContentsListLayout, __assign({ className: "cb-contentslist-layout-box", ref: layoutRef, style: {
+                display: layout.display,
+                flexDirection: layout.flexDirection,
+                justifyContent: layout.justifyContent
+            } }, { children: (0, jsx_runtime_1.jsx)(S_ContentsListWrapper, __assign({ className: "cb-contentslist-wrapper", ccbInset: ccbInset, contentPropCss: contentPropCss, stylePropCss: isHovered ? hoverStylePropCss : stylePropCss, 
+                // NOTE: 위 CSS 프롭과 정리
+                style: { gridTemplateRows: "repeat(".concat(numberOfRows, ", 1fr)") } }, { children: (0, createCompositions_1.createCompositions)({
+                    valueType: CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE,
+                    queryPath: queryPath,
+                    limit: displayCounts,
+                    queryData: queryData,
+                    compositions: compositions,
+                    componentBlockCode: types_1.CB_ALL_CODES.CB_LIST
+                }).slice(startIndex, endIndex + 1) })) })));
+    };
+    var renderCompositions = function (compositions) {
+        // 직접 연결
+        if (CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE === 'VALUE') {
+            if (!compositions.length)
+                return (0, jsx_runtime_1.jsx)(EmptyString, { stringKey: "str_9806" });
+            return renderList(compositions);
+        }
+        // 데이터 연결
+        if (queryPath === 'NONE' || !queryPath || !queryData) {
+            return (0, jsx_runtime_1.jsx)(EmptyString, { stringKey: "str_10477" }, "no-query");
+        }
+        var queryDataValue = queryData[queryPath];
+        // 쿼리 데이터와 키가 있으나, 쿼리 데이터에 결과가 빈 경우
+        if (!(queryDataValue === null || queryDataValue === void 0 ? void 0 : queryDataValue.length)) {
+            return (0, jsx_runtime_1.jsx)(EmptyString, { stringKey: "str_10478" }, "empty-item");
+        }
+        return renderList(compositions);
+    };
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), isEditModeAndHeightFitContent && ((0, jsx_runtime_1.jsx)(S_HeightFitContentCover_1.S_HeightFitContentCover, { className: "height-fit-content-cover", bottomText: t('str_10106') })), Object.entries(componentGroups).map(function (_a) {
                 var position = _a[0], groupComponents = _a[1];
                 return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-contentslist-button-group ccb-elements", ref: function (el) {
@@ -194,20 +227,7 @@ function ContentsList(props) {
                     }, style: __assign(__assign({}, getPositionStyle(position, ccbInset, 'GROUP', 'GROUP', 'GROUP')), { zIndex: 3, position: 'absolute' }) }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-contentslist-button-layout-box", style: getComponentGroupLayout(groupComponents, position) }, { children: groupComponents.map(function (component) {
                             return renderElements(component, getPositionStyle(position, ccbInset, component.designType, component.size, component.type));
                         }) })) }), position));
-            }), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsxs)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ id: "contentslist-box", className: "cb-layout-box ccb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), editModeStyle), { overflow: 'hidden' }), hoverStyle: __assign(__assign({}, hoverStyle), { overflow: 'hidden' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, "data-number-of-items": CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS.length, "data-number-of-columns": Math.min(numberOfColumns, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS.length), "data-row-gap": rowGap, "data-column-gap": columnGap, "data-cols": Math.min(numberOfColumns, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS.length), "data-min-width": listMinWidth, "data-min-height": listMinHeight, "data-inset-top": parseFloat(ccbInset.top), "data-inset-bottom": parseFloat(ccbInset.bottom) }, { children: [(0, jsx_runtime_1.jsx)(S_CustomBackgroundWrapper, __assign({ ref: backgroundRef, style: __assign(__assign({}, effect), { background: style.background }) }, { children: isBgMedia && CB_STYLE_PROP_BGMEDIA && ((0, jsx_runtime_1.jsx)(CustomSectionBackgroundMedia_1.CustomSectionBackgroundMedia, { specs: CB_STYLE_PROP_BGMEDIA, componentStyle: style, playerId: index, mediaType: mediaType || 'NONE', device: isMobile ? 'MOBILE' : 'DESKTOP', backgroundRef: backgroundRef })) })), (0, jsx_runtime_1.jsx)(S_Overlay, { style: overlayStyle }), orderedCompositions.length > 0 ? ((0, jsx_runtime_1.jsx)(S_ContentsListLayout, __assign({ className: "cb-contentslist-layout-box", ref: layoutRef, style: {
-                                display: layout.display,
-                                flexDirection: layout.flexDirection,
-                                justifyContent: layout.justifyContent
-                            } }, { children: (0, jsx_runtime_1.jsx)(S_ContentsListWrapper, __assign({ className: "cb-contentslist-wrapper", ccbInset: ccbInset, contentPropCss: contentPropCss, stylePropCss: isHovered ? hoverStylePropCss : stylePropCss, 
-                                // NOTE: 위 CSS 프롭과 정리
-                                style: { gridTemplateRows: "repeat(".concat(numberOfRows, ", 1fr)") } }, { children: (0, createCompositions_1.createCompositions)({
-                                    valueType: CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE,
-                                    queryPath: CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA,
-                                    limit: displayCounts,
-                                    queryData: queryData,
-                                    compositions: orderedCompositions,
-                                    componentBlockCode: types_1.CB_ALL_CODES.CB_LIST
-                                }).slice(startIndex, endIndex + 1) })) }))) : ((0, jsx_runtime_1.jsx)(EmptyString, {}))] })) }))] }));
+            }), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsxs)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ id: "contentslist-box", className: "cb-layout-box ccb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), editModeStyle), { overflow: 'hidden' }), hoverStyle: __assign(__assign({}, hoverStyle), { overflow: 'hidden' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, "data-number-of-items": CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS.length, "data-number-of-columns": Math.min(numberOfColumns, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS.length), "data-row-gap": rowGap, "data-column-gap": columnGap, "data-cols": Math.min(numberOfColumns, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS.length), "data-min-width": listMinWidth, "data-min-height": listMinHeight, "data-inset-top": parseFloat(ccbInset.top), "data-inset-bottom": parseFloat(ccbInset.bottom) }, { children: [(0, jsx_runtime_1.jsx)(S_CustomBackgroundWrapper, __assign({ ref: backgroundRef, style: __assign(__assign({}, effect), { background: style.background }) }, { children: isBgMedia && CB_STYLE_PROP_BGMEDIA && ((0, jsx_runtime_1.jsx)(CustomSectionBackgroundMedia_1.CustomSectionBackgroundMedia, { specs: CB_STYLE_PROP_BGMEDIA, componentStyle: style, playerId: index, mediaType: mediaType || 'NONE', device: isMobile ? 'MOBILE' : 'DESKTOP', backgroundRef: backgroundRef })) })), (0, jsx_runtime_1.jsx)(S_Overlay, { style: overlayStyle }), renderList(orderedCompositions)] })) }))] }));
 }
 function getIsBgMedia(isMobile, specs) {
     if (!specs) {
@@ -251,16 +271,12 @@ var S_ContentsListWrapper = styled_components_1.default.div(templateObject_4 ||
     var ccbInset = _a.ccbInset;
     return ccbInset.top;
 });
-function removeFirstSegment(path) {
-    var segments = path.split('/');
-    return segments.slice(1).join('/');
-}
 function getStandardComposition(compositions, valueType) {
     if (valueType === 'DATA') {
-        return compositions.find(function (composition) { return composition.isDefault; });
+        return compositions.find(function (composition) { return !composition.ccbManualItemUuid; });
     }
     // NOTE: 일단 디폴트가 아닌 첫번째를 반환하지만 경우에따라 가장 cols/width가 큰 것을 반환하도록 변경할 수 있음
-    return compositions.find(function (composition) { return !composition.isDefault; });
+    return compositions.find(function (composition) { return !!composition.ccbManualItemUuid; });
 }
 function getCompositionMinValue(composition, device) {
     var minCellWidth = 10;
@@ -297,22 +313,23 @@ function getCompositionMinValue(composition, device) {
         };
     }
 }
-function EmptyString() {
+function EmptyString(_a) {
+    var stringKey = _a.stringKey;
     var t = (0, react_i18next_1.useTranslation)('translation').t;
-    return (0, jsx_runtime_1.jsx)(S_EmptyLayer, { children: t('str_9806') });
+    return (0, jsx_runtime_1.jsx)(S_EmptyLayer, { children: t(stringKey) });
 }
-var S_EmptyLayer = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: rgba(0, 0, 0, 0.6);\n  color: white;\n  display: flex;\n  font-size: ", ";\n  font-weight: ", ";\n  justify-content: center;\n  line-height: ", ";\n  margin: auto;\n  padding: ", ";\n  text-align: center;\n  width: 100%;\n  word-break: keep-all;\n"], ["\n  background-color: rgba(0, 0, 0, 0.6);\n  color: white;\n  display: flex;\n  font-size: ", ";\n  font-weight: ", ";\n  justify-content: center;\n  line-height: ", ";\n  margin: auto;\n  padding: ", ";\n  text-align: center;\n  width: 100%;\n  word-break: keep-all;\n"])), function (_a) {
+var S_EmptyLayer = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: rgba(0, 0, 0, 0.5);\n  color: white;\n  display: flex;\n  font-size: ", ";\n  font-weight: ", ";\n  justify-content: center;\n  line-height: ", ";\n  margin: auto;\n  padding: ", ";\n  text-align: center;\n  width: 100%;\n  word-break: keep-all;\n"], ["\n  background-color: rgba(0, 0, 0, 0.5);\n  color: white;\n  display: flex;\n  font-size: ", ";\n  font-weight: ", ";\n  justify-content: center;\n  line-height: ", ";\n  margin: auto;\n  padding: ", ";\n  text-align: center;\n  width: 100%;\n  word-break: keep-all;\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.desktopFontSize.body2;
+    return theme.desktopFontSize.caption1;
 }, function (_a) {
     var theme = _a.theme;
     return theme.fontWeight.bold;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.desktopLineHeight.body2;
+    return theme.desktopLineHeight.caption1;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingE;
+    return theme.spacing.spacingD;
 });
 exports.default = ContentsList;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;