pds-dev-kit-web 2.2.295 → 2.2.297

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

@@ -65,16 +65,14 @@ 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];
+    var CB_CONTENT_PROP_CONTENTSLIST_SPEC_ITEMCOUNTS = CB_CONTENT_PROP_CONTENTSLIST.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_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
@@ -83,22 +81,22 @@ function ContentsList(props) {
         ? CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS
         : CB_CONTENT_PROP_CONTENTSLIST_SPEC_MDISPLAYCOUNTS;
     var totalPage = Math.ceil((CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE === 'DATA' && queryDataValue
-        ? queryDataValue === null || queryDataValue === void 0 ? void 0 : queryDataValue.length
+        ? CB_CONTENT_PROP_CONTENTSLIST_SPEC_ITEMCOUNTS
         : 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 +133,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 +142,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 +152,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 +171,49 @@ 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: CB_CONTENT_PROP_CONTENTSLIST_SPEC_ITEMCOUNTS,
+                    queryData: queryData,
+                    compositions: compositions,
+                    componentBlockCode: types_1.CB_ALL_CODES.CB_LIST,
+                    device: device
+                }).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);
+    };
     var isHidden = style.visibility === 'hidden';
     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];
@@ -196,20 +228,7 @@ function ContentsList(props) {
                             { visibility: isHidden ? 'hidden' : 'visible' }) }, { 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 ".concat(isHidden ? 'hidden' : ''), 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, ", min-content)") } }, { 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 ".concat(isHidden ? 'hidden' : ''), 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 }), renderCompositions(orderedCompositions)] })) }))] }));
 }
 function getIsBgMedia(isMobile, specs) {
     if (!specs) {
@@ -253,16 +272,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;
@@ -299,22 +314,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;

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

@@ -48,6 +48,7 @@ var compositionQueryContext_1 = require("../../../../../../../DynamicLayout/comp
 var styled_components_1 = __importStar(require("styled-components"));
 var hooks_1 = require("../../../../hooks");
 var util_1 = require("../../../../util");
+var DataNotFound_1 = __importDefault(require("../../../fallbacks/DataNotFound"));
 var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
 var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
 var S_HiddenCover_1 = require("../components/S_HiddenCover");
@@ -56,7 +57,7 @@ function Image(props) {
     var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
     var queryContext = (0, compositionQueryContext_1.useCCBQueryPath)();
     var index = props.index, CB_CONTENT_PROP_IMAGE = props.CB_CONTENT_PROP_IMAGE, _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 () {
+    var cLinkValue = function (defaultValue) {
         if (CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE === 'DATA' ||
             CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE === 'DELEGATEDDATA') {
             if (!(queryContext === null || queryContext === void 0 ? void 0 : queryContext.queryData)) {
@@ -68,13 +69,13 @@ function Image(props) {
             }
             return link;
         }
-        return CB_CONTENT_PROP_CLINK_SPEC_SRC;
+        return defaultValue;
     };
     var _c = (0, useCLINK_1.default)({
-        src: cLinkValue(),
+        src: cLinkValue(CB_CONTENT_PROP_CLINK_SPEC_SRC),
         type: CB_CONTENT_PROP_CLINK_SPEC_TYPE,
         openNewTab: CB_CONTENT_PROP_CLINK_SPEC_NEWTAB,
-        internalSrc: String(CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC)
+        internalSrc: cLinkValue(CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC)
     }), onClickCLINK = _c.onClickCLINK, CLINKCursor = _c.CLINKCursor;
     var _d = (0, util_1.parseProperties)(props, device), style = _d.style, hoverStyle = _d.hoverStyle, layout = _d.layout, effect = _d.effect;
     var _e = parseImageCBStyle(style, hoverStyle, mode), boxStyle = _e.boxStyle, imgStyle = _e.imgStyle;
@@ -108,9 +109,30 @@ function Image(props) {
         }
         return queryContext.queryData[CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_CONNECTDATA];
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (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_ImageWrapper, __assign({ style: __assign({}, effectCssProperties) }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, layout), { overflow: 'hidden' }), boxStyle.normal), { cursor: CLINKCursor }), hoverStyle: __assign({}, boxStyle.hover), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onClick: onClickCLINK }, { children: (0, jsx_runtime_1.jsx)(S_Image, { src: imgSrc() === 'ERROR'
-                                ? 'https://static.publ.site/pages-sample/img_cb_style_prop_bgmedia_spec_imageselector_01.png'
-                                : imgSrc(), normalStyle: __assign({}, imgStyle.normal), hoverStyle: __assign({}, imgStyle.hover) }) })) })) }))] }));
+    var showDataNotFound = function () {
+        if (mode !== 'EDIT') {
+            return false;
+        }
+        if (CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_VALUETYPE === 'DATA' ||
+            CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_VALUETYPE === 'DELEGATEDDATA') {
+            if (!(queryContext === null || queryContext === void 0 ? void 0 : queryContext.queryData)) {
+                return true;
+            }
+            if (!Object.prototype.hasOwnProperty.call(queryContext.queryData, CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_CONNECTDATA)) {
+                if (mode === 'EDIT') {
+                    return true;
+                }
+                return false;
+            }
+            if (!queryContext.queryData[CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_CONNECTDATA]) {
+                return true;
+            }
+        }
+        return false;
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (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_ImageWrapper, __assign({ style: __assign({}, effectCssProperties) }, { children: (0, jsx_runtime_1.jsxs)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, layout), { overflow: 'hidden' }), boxStyle.normal), { cursor: CLINKCursor }), hoverStyle: __assign({}, boxStyle.hover), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onClick: onClickCLINK }, { children: [(0, jsx_runtime_1.jsx)(S_Image, { src: imgSrc() === 'ERROR'
+                                    ? 'https://static.publ.site/pages-sample/img_cb_style_prop_bgmedia_spec_imageselector_01.png'
+                                    : imgSrc(), normalStyle: __assign({}, imgStyle.normal), hoverStyle: __assign({}, imgStyle.hover) }), showDataNotFound() && (0, jsx_runtime_1.jsx)(DataNotFound_1.default, { stringKey: "str_10478" })] })) })) }))] }));
 }
 function parseImageCBStyle(style, hoverStyle, mode) {
     var boxStyle = {

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

@@ -72,7 +72,7 @@ size) {
 function SlideBanner(props) {
     var _a;
     var _b = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _b.device, mode = _b.mode, queryData = _b.queryData;
-    var index = props.index, _c = props.CB_CONTENT_PROP_SLIDEBANNER, CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS, CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE, CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA, CB_CONTENT_PROP_SLIDEBANNER_SPEC_MANUALITEMS = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_MANUALITEMS, CB_STYLE_PROP_SLIDEBANNERDESIGN = props.CB_STYLE_PROP_SLIDEBANNERDESIGN, CB_STYLE_PROP_SLIDEBANNERPAGINATION = props.CB_STYLE_PROP_SLIDEBANNERPAGINATION, CB_STYLE_PROP_SLIDEBANNERBUTTON = props.CB_STYLE_PROP_SLIDEBANNERBUTTON, CB_STYLE_PROP_SLIDEBANNERPLAYBACKMETHOD = props.CB_STYLE_PROP_SLIDEBANNERPLAYBACKMETHOD, CB_STYLE_PROP_SLIDEBANNERPROGRESSBAR = props.CB_STYLE_PROP_SLIDEBANNERPROGRESSBAR, 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_SLIDEBANNER_SPEC_TRANSITIONTYPE = props.CB_EFFECT_PROP_SLIDEBANNER.CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE;
+    var index = props.index, _c = props.CB_CONTENT_PROP_SLIDEBANNER, CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS, CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE, CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA, CB_CONTENT_PROP_SLIDEBANNER_SPEC_DATASORTING = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_DATASORTING, CB_CONTENT_PROP_SLIDEBANNER_SPEC_DATAOFFSET = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_DATAOFFSET, CB_CONTENT_PROP_SLIDEBANNER_SPEC_MANUALITEMS = _c.CB_CONTENT_PROP_SLIDEBANNER_SPEC_MANUALITEMS, CB_STYLE_PROP_SLIDEBANNERDESIGN = props.CB_STYLE_PROP_SLIDEBANNERDESIGN, CB_STYLE_PROP_SLIDEBANNERPAGINATION = props.CB_STYLE_PROP_SLIDEBANNERPAGINATION, CB_STYLE_PROP_SLIDEBANNERBUTTON = props.CB_STYLE_PROP_SLIDEBANNERBUTTON, CB_STYLE_PROP_SLIDEBANNERPLAYBACKMETHOD = props.CB_STYLE_PROP_SLIDEBANNERPLAYBACKMETHOD, CB_STYLE_PROP_SLIDEBANNERPROGRESSBAR = props.CB_STYLE_PROP_SLIDEBANNERPROGRESSBAR, 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_SLIDEBANNER_SPEC_TRANSITIONTYPE = props.CB_EFFECT_PROP_SLIDEBANNER.CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE;
     var compositions = props.compositions;
     var CB_STYLE_PROP_SLIDEBANNER = __assign(__assign(__assign(__assign(__assign({}, CB_STYLE_PROP_SLIDEBANNERDESIGN), CB_STYLE_PROP_SLIDEBANNERPAGINATION), CB_STYLE_PROP_SLIDEBANNERBUTTON), CB_STYLE_PROP_SLIDEBANNERPLAYBACKMETHOD), CB_STYLE_PROP_SLIDEBANNERPROGRESSBAR);
     var autoPlayEnabled = device === 'DESKTOP'
@@ -95,7 +95,7 @@ function SlideBanner(props) {
         props: CB_STYLE_PROP_SLIDEBANNER,
         device: device
     }), customProgressbarNormalStyle = _h.normalStyle, customProgressbarHoverStyle = _h.hoverStyle;
-    var _j = (0, useSwiper_1.useSwiper)(), swiperRef = _j.swiperRef, progressRef = _j.progressRef, leftTimeMsRef = _j.leftTimeMsRef, currentSlide = _j.currentSlide, isBeginning = _j.isBeginning, isEnd = _j.isEnd, onSwiper = _j.onSwiper, onSlideChangeTransitionEnd = _j.onSlideChangeTransitionEnd, onAutoplayTimeLeft = _j.onAutoplayTimeLeft, onClickBullet = _j.onClickBullet, onClickPrevBtn = _j.onClickPrevBtn, onClickNextBtn = _j.onClickNextBtn;
+    var _j = (0, useSwiper_1.useSwiper)(), swiperRef = _j.swiperRef, progressRef = _j.progressRef, leftTimeMsRef = _j.leftTimeMsRef, currentSlide = _j.currentSlide, isBeginning = _j.isBeginning, isEnd = _j.isEnd, onSwiper = _j.onSwiper, onSlideChangeTransitionEnd = _j.onSlideChangeTransitionEnd, onAutoplayTimeLeft = _j.onAutoplayTimeLeft, onClickBullet = _j.onClickBullet, onClickPrevBtn = _j.onClickPrevBtn, onClickNextBtn = _j.onClickNextBtn, resetSwiper = _j.resetSwiper;
     var _k = (0, react_1.useState)(false), isHovered = _k[0], setIsHovered = _k[1];
     var loop = isHovered ? slideBannerNormalStyle.loop : slideBannerHoverStyle.loop;
     // NOTE: edit모드에서는 그리드의 이벤트만 작동하도록 CB의 포인터 이벤트는 막습니다.
@@ -127,34 +127,73 @@ function SlideBanner(props) {
         }
     ].filter(function (component) { return component !== undefined; });
     var _l = (0, useFlexGridLayout_1.useFlexGridLayout)({ components: components }), layoutRef = _l.layoutRef, positionRefs = _l.positionRefs, ccbInset = _l.ccbInset, componentGroups = _l.componentGroups, getPositionStyle = _l.getPositionStyle, getComponentGroupLayout = _l.getComponentGroupLayout;
-    var renderElements = function (component, positionStyle) {
-        var _a;
+    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 queryPath = "".concat(CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA, "/").concat(CB_CONTENT_PROP_SLIDEBANNER_SPEC_DATASORTING, "/").concat(CB_CONTENT_PROP_SLIDEBANNER_SPEC_DATAOFFSET);
+    (0, react_1.useEffect)(function () {
+        resetSwiper();
+    }, [queryPath]);
+    var orderedCompositions = CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE === 'VALUE'
+        ? __spreadArray([], CB_CONTENT_PROP_SLIDEBANNER_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 isEditModeAndHidden = style.visibility === 'hidden' && mode === 'EDIT';
+    if (mode === 'EDIT') {
+        style.visibility = 'visible';
+    }
+    var renderElements = function (component, positionStyle, slidesLength) {
+        var _a, _b, _c;
         switch (component.type) {
             case 'PREV':
                 return ((0, jsx_runtime_1.jsx)(CustomNavigationPrevBtn_1.CustomNavigationPrevBtn, { isDisabled: loop ? false : isBeginning, styles: customNavigationNormalStyle, hoverStyles: customNavigationHoverStyle, onClick: onClickPrevBtn, style: __assign(__assign({}, positionStyle), { visibility: mode === 'EDIT' ? 'visible' : isHovered ? 'visible' : 'hidden' }) }));
             case 'NEXT':
                 return ((0, jsx_runtime_1.jsx)(CustomNavigationNextBtn_1.CustomNavigationNextBtn, { isDisabled: loop ? false : isEnd, styles: customNavigationNormalStyle, hoverStyles: customNavigationHoverStyle, onClick: onClickNextBtn, style: __assign(__assign({}, positionStyle), { visibility: mode === 'EDIT' ? 'visible' : isHovered ? 'visible' : 'hidden' }) }));
             case 'PAGINATION':
-                return ((0, jsx_runtime_1.jsx)(CustomPagination_1.CustomPagination, { styles: isHovered ? customPaginationHoverStyle : customPaginationNormalStyle, current: currentSlide, isPrevBtnDisabled: loop ? false : isBeginning, isNextBtnDisabled: loop ? false : isEnd, total: ((_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slides.length) || 0, onBulletClick: onClickBullet, onPrevBtnClick: onClickPrevBtn, onNextBtnClick: onClickNextBtn, style: positionStyle }));
+                return ((0, jsx_runtime_1.jsx)(CustomPagination_1.CustomPagination, { styles: isHovered ? customPaginationHoverStyle : customPaginationNormalStyle, current: currentSlide, isPrevBtnDisabled: loop ? false : isBeginning, isNextBtnDisabled: loop ? false : isEnd, total: ((_c = (_b = (_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slides) === null || _c === void 0 ? void 0 : _c.length) || 0, onBulletClick: onClickBullet, onPrevBtnClick: onClickPrevBtn, onNextBtnClick: onClickNextBtn, style: positionStyle }));
             case 'PROGRESSBAR':
-                return ((0, jsx_runtime_1.jsx)(CustomProgressbar_1.CustomProgressbar, { slidesLength: orderedCompositions.length, progressRef: progressRef, leftTimeMsRef: leftTimeMsRef, styles: isHovered ? customProgressbarHoverStyle : customProgressbarNormalStyle }));
+                return ((0, jsx_runtime_1.jsx)(CustomProgressbar_1.CustomProgressbar, { slidesLength: slidesLength, progressRef: progressRef, leftTimeMsRef: leftTimeMsRef, styles: isHovered ? customProgressbarHoverStyle : customProgressbarNormalStyle }));
             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_SLIDEBANNER_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 isEditModeAndHidden = style.visibility === 'hidden' && mode === 'EDIT';
-    if (mode === 'EDIT') {
-        style.visibility = 'visible';
-    }
+    var renderSwiper = function (compositions) {
+        return ((0, jsx_runtime_1.jsx)(S_SwiperLayout, __assign({ className: "cb-slidebanner-layout-box", ref: layoutRef }, { children: (0, jsx_runtime_1.jsx)(S_SwiperWrapper, __assign({ className: "cb-slidebanner-wrapper", ccbInset: ccbInset, customStyle: isHovered ? slideBannerHoverStyle === null || slideBannerHoverStyle === void 0 ? void 0 : slideBannerHoverStyle.customStyle : slideBannerNormalStyle === null || slideBannerNormalStyle === void 0 ? void 0 : slideBannerNormalStyle.customStyle }, { children: (0, jsx_runtime_1.jsx)(SlideBannerCore_1.default, __assign({ ref: swiperRef, className: "cb-slidebanner", onSwiper: onSwiper, onSlideChangeTransitionEnd: onSlideChangeTransitionEnd, onAutoplayTimeLeft: onAutoplayTimeLeft, slidesPerView: 1, styles: isHovered ? slideBannerHoverStyle : slideBannerNormalStyle, effect: CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE.toLowerCase() }, { children: (0, createCompositions_1.createCompositions)({
+                        valueType: CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE,
+                        queryPath: queryPath,
+                        limit: CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS,
+                        queryData: queryData,
+                        compositions: compositions,
+                        componentBlockCode: types_1.CB_ALL_CODES.CB_SLIDEBANNER,
+                        device: device
+                    }) }), CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE +
+                    CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE +
+                    autoPlayEnabled +
+                    compositions.length +
+                    queryPath) })) })));
+    };
+    var renderCompositions = function (compositions) {
+        // 직접 연결
+        if (CB_CONTENT_PROP_SLIDEBANNER_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);
+    };
     var isHidden = style.visibility === 'hidden';
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsxs)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: [Object.entries(componentGroups).map(function (_a) {
                         var position = _a[0], groupComponents = _a[1];
@@ -166,37 +205,27 @@ function SlideBanner(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-slidebanner-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.jsxs)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box ccb-layout-box ".concat(isHidden ? 'hidden' : ''), 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 }, { 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-slidebanner-layout-box", ref: layoutRef }, { children: (0, jsx_runtime_1.jsx)(S_SwiperWrapper, __assign({ className: "cb-slidebanner-wrapper", ccbInset: ccbInset, customStyle: isHovered
-                                        ? slideBannerHoverStyle === null || slideBannerHoverStyle === void 0 ? void 0 : slideBannerHoverStyle.customStyle
-                                        : slideBannerNormalStyle === null || slideBannerNormalStyle === void 0 ? void 0 : slideBannerNormalStyle.customStyle }, { children: (0, jsx_runtime_1.jsx)(SlideBannerCore_1.default, __assign({ ref: swiperRef, className: "cb-slidebanner", onSwiper: onSwiper, onSlideChangeTransitionEnd: onSlideChangeTransitionEnd, onAutoplayTimeLeft: onAutoplayTimeLeft, slidesPerView: 1, styles: isHovered ? slideBannerHoverStyle : slideBannerNormalStyle, effect: CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE.toLowerCase() }, { children: (0, createCompositions_1.createCompositions)({
-                                            valueType: CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE,
-                                            queryPath: CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA,
-                                            limit: CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS,
-                                            queryData: queryData,
-                                            compositions: orderedCompositions,
-                                            componentBlockCode: types_1.CB_ALL_CODES.CB_SLIDEBANNER
-                                        }) }), CB_EFFECT_PROP_SLIDEBANNER_SPEC_TRANSITIONTYPE +
-                                        autoPlayEnabled +
-                                        orderedCompositions.length) })) }))) : ((0, jsx_runtime_1.jsx)(EmptyString, {}))] }))] }))] }));
+                    }), (0, jsx_runtime_1.jsxs)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box ccb-layout-box ".concat(isHidden ? 'hidden' : ''), 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 }, { 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"])));
 var S_CustomBackgroundWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  border-radius: inherit;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  left: 0;\n  overflow: hidden;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: -2;\n"], ["\n  align-items: center;\n  border-radius: inherit;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  left: 0;\n  overflow: hidden;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: -2;\n"])));

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

@@ -13,4 +13,5 @@ export declare function useSwiper(): {
     onClickBullet: (index: number) => void;
     onClickPrevBtn: () => void;
     onClickNextBtn: () => void;
+    resetSwiper: () => void;
 };

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

@@ -45,6 +45,15 @@ function useSwiper() {
             swiperRef.current.swiper.slideNext();
         }
     };
+    var resetSwiper = function () {
+        var _a, _b, _c;
+        setCurrentSlide(1);
+        setIsBeginning(true);
+        setIsEnd(false);
+        progressRef.current = 0;
+        leftTimeMsRef.current = 0;
+        (_c = (_b = (_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideTo) === null || _c === void 0 ? void 0 : _c.call(_b, 0, 0);
+    };
     return {
         swiperRef: swiperRef,
         progressRef: progressRef,
@@ -57,7 +66,8 @@ function useSwiper() {
         onAutoplayTimeLeft: onAutoplayTimeLeft,
         onClickBullet: onClickBullet,
         onClickPrevBtn: onClickPrevBtn,
-        onClickNextBtn: onClickNextBtn
+        onClickNextBtn: onClickNextBtn,
+        resetSwiper: resetSwiper
     };
 }
 exports.useSwiper = useSwiper;

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

@@ -15,4 +15,9 @@ export declare function getTextOptionStyles(props: CB_STYLE_PROP_TEXTOPTION, dev
         overflowY: string;
     };
 };
+/**
+ * 문자열이 유효한 날짜 형태인지 판별합니다.
+ * (YYYY-MM-DD, ISO 8601, UTC 형태 등을 지원)
+ */
+export declare const isValidDate: (value: string) => boolean;
 export {};