pds-dev-kit-web 2.2.296 → 2.2.298

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

@@ -33,6 +33,7 @@ exports.getTextStyles = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable react/destructuring-assignment */
 var react_1 = require("react");
+var react_i18next_1 = require("react-i18next");
 var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
 var compositionQueryContext_1 = require("../../../../../../../DynamicLayout/compositionQueryContext");
 var hooks_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/hooks");
@@ -41,8 +42,10 @@ var newUtils_1 = require("../../../../../../../DynamicLayout/sections/CustomSect
 var colorUtil_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/newUtils/colorUtil");
 var types_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/types");
 var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
+var parseQueryData_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util/parseQueryData");
 var parseStylePropShadow_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util/stylePropParsers/parseStylePropShadow");
 var styled_components_1 = __importDefault(require("styled-components"));
+var DataNotFound_1 = __importDefault(require("../../../fallbacks/DataNotFound"));
 var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
 var S_CB_Box_1 = require("../components/S_CB_Box");
 var S_HiddenCover_1 = require("../components/S_HiddenCover");
@@ -52,11 +55,12 @@ function Button(props) {
     var _a, _b, _c;
     var _d = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _d.device, mode = _d.mode;
     var queryContext = (0, compositionQueryContext_1.useCCBQueryPath)();
+    var t = (0, react_i18next_1.useTranslation)('translation').t;
     var index = props.index, CB_STYLE_PROP_COLOR = props.CB_STYLE_PROP_COLOR, _e = props.CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CLINK_SPEC_SRC = _e.CB_CONTENT_PROP_CLINK_SPEC_SRC, CB_CONTENT_PROP_CLINK_SPEC_TYPE = _e.CB_CONTENT_PROP_CLINK_SPEC_TYPE, CB_CONTENT_PROP_CLINK_SPEC_NEWTAB = _e.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB, CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC = _e.CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC, CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE = _e.CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE, CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA = _e.CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA, _f = props.CB_CONTENT_PROP_TEXT, CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE = _f.CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE, CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA = _f.CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM, CB_CONTENT_PROP_TEXTOPTION = props.CB_CONTENT_PROP_TEXTOPTION;
     var textSuffix = (_a = CB_CONTENT_PROP_TEXTOPTION === null || CB_CONTENT_PROP_TEXTOPTION === void 0 ? void 0 : CB_CONTENT_PROP_TEXTOPTION.CB_CONTENT_PROP_TEXTOPTION_SPEC_SUFFIX) !== null && _a !== void 0 ? _a : '';
     var textPrefix = (_b = CB_CONTENT_PROP_TEXTOPTION === null || CB_CONTENT_PROP_TEXTOPTION === void 0 ? void 0 : CB_CONTENT_PROP_TEXTOPTION.CB_CONTENT_PROP_TEXTOPTION_SPEC_PREFIX) !== null && _b !== void 0 ? _b : '';
     var textFormat = (_c = CB_CONTENT_PROP_TEXTOPTION === null || CB_CONTENT_PROP_TEXTOPTION === void 0 ? void 0 : CB_CONTENT_PROP_TEXTOPTION.CB_CONTENT_PROP_TEXTOPTION_SPEC_FORMAT) !== null && _c !== void 0 ? _c : 'NONE';
-    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 +72,13 @@ function Button(props) {
             }
             return link;
         }
-        return CB_CONTENT_PROP_CLINK_SPEC_SRC;
+        return defaultValue;
     };
     var _g = (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 = _g.onClickCLINK, CLINKCursor = _g.CLINKCursor;
     var _h = getTextStyles(props.CB_STYLE_PROP_TEXT, device), btnTextStyle = _h.style, btnTextHoverStyle = _h.hoverStyle;
     var _j = getBTNColorStyles(CB_STYLE_PROP_COLOR, device), btnColorStyle = _j.style, btnColorHoverStyle = _j.hoverStyle;
@@ -103,13 +107,39 @@ function Button(props) {
             CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE === 'DELEGATEDDATA';
         if (isDataConnected) {
             if (queryContext === null || queryContext === void 0 ? void 0 : queryContext.queryData) {
+                if (CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA === 'NONE') {
+                    if (mode === 'EDIT') {
+                        return (0, jsx_runtime_1.jsx)(DataNotFound_1.default, { stringKey: "str_10477" });
+                    }
+                    return '';
+                }
+                if (!Object.prototype.hasOwnProperty.call(queryContext.queryData, CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA)) {
+                    if (mode === 'EDIT') {
+                        return (0, jsx_runtime_1.jsx)(DataNotFound_1.default, { stringKey: "str_10478" });
+                    }
+                    return '';
+                }
                 var value = queryContext.queryData[CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA];
-                if (formatOption) {
-                    return formatOption.formatter(value);
+                if (value === null || value === undefined) {
+                    if (mode === 'EDIT') {
+                        return (0, jsx_runtime_1.jsx)(DataNotFound_1.default, { stringKey: "str_10478" });
+                    }
+                    return '';
                 }
-                return value;
+                if (!value && mode === 'EDIT') {
+                    return (0, jsx_runtime_1.jsx)(DataNotFound_1.default, { stringKey: "str_10597" });
+                }
+                return (0, parseQueryData_1.parseQueryValue)({
+                    value: value,
+                    queryKey: CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA,
+                    formatOption: formatOption,
+                    t: t
+                });
+            }
+            if (mode === 'EDIT') {
+                return (0, jsx_runtime_1.jsx)(DataNotFound_1.default, { stringKey: "str_10478" });
             }
-            return 'ERROR: data connected but no data';
+            return '';
         }
         if (device === 'MOBILE' &&
             mode !== 'EDIT' &&

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

@@ -67,9 +67,9 @@ 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 _a, _b, _c;
+    var _d = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _d.device, mode = _d.mode, queryData = _d.queryData;
+    var compositions = props.compositions, index = props.index, _e = props.CB_CONTENT_PROP_CONTENTSCAROUSEL, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS = _e.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_ITEMCOUNTS = _e.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_ITEMCOUNTS, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MDISPLAYCOUNTS = _e.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MDISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE = _e.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA = _e.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATASORTING = _e.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATASORTING, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATAOFFSET = _e.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATAOFFSET, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MANUALITEMS = _e.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
@@ -77,28 +77,40 @@ function ContentsCarousel(props) {
     var displayCounts = device === 'DESKTOP'
         ? CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS
         : CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MDISPLAYCOUNTS !== null && CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MDISPLAYCOUNTS !== void 0 ? CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MDISPLAYCOUNTS : CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MANUALITEMS.length;
-    var _e = (0, util_1.parseProperties)(props, device), style = _e.style, hoverStyle = _e.hoverStyle, layout = _e.layout, overlayStyle = _e.overlayStyle, effect = _e.effect;
-    var _f = (0, contentsCarouselUtils_1.parseCarouselStyleToCarouselCoreProp)({
+    var _f = (0, util_1.parseProperties)(props, device), style = _f.style, hoverStyle = _f.hoverStyle, layout = _f.layout, overlayStyle = _f.overlayStyle, effect = _f.effect;
+    var _g = (0, contentsCarouselUtils_1.parseCarouselStyleToCarouselCoreProp)({
         props: CB_STYLE_PROP_CONTENTSCAROUSEL,
         contentsPropsPartials: { CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS: displayCounts },
         device: device
-    }), contentsCarouselNormalStyle = _f.normalStyle, contentsCarouselHoverStyle = _f.hoverStyle;
-    var _g = (0, contentsCarouselUtils_1.parseCarouselStyleToCustomNavigationProp)({
+    }), contentsCarouselNormalStyle = _g.normalStyle, contentsCarouselHoverStyle = _g.hoverStyle;
+    var _h = (0, contentsCarouselUtils_1.parseCarouselStyleToCustomNavigationProp)({
         props: CB_STYLE_PROP_CONTENTSCAROUSEL,
         device: device
-    }), customNavigationNormalStyle = _g.normalStyle, customNavigationHoverStyle = _g.hoverStyle;
-    var _h = (0, contentsCarouselUtils_1.parseCarouselStyleToCustomProgressbarProp)({
+    }), customNavigationNormalStyle = _h.normalStyle, customNavigationHoverStyle = _h.hoverStyle;
+    var _j = (0, contentsCarouselUtils_1.parseCarouselStyleToCustomProgressbarProp)({
         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 _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 loop = contentsCarouselNormalStyle.loop && orderedCompositions.length >= displayCounts;
+    }), customProgressbarNormalStyle = _j.normalStyle, customProgressbarHoverStyle = _j.hoverStyle;
+    var _k = (0, useSwiper_1.useSwiper)(), swiperRef = _k.swiperRef, progressRef = _k.progressRef, leftTimeMsRef = _k.leftTimeMsRef, isBeginning = _k.isBeginning, isEnd = _k.isEnd, onSwiper = _k.onSwiper, onSlideChangeTransitionEnd = _k.onSlideChangeTransitionEnd, onAutoplayTimeLeft = _k.onAutoplayTimeLeft, onClickPrevBtn = _k.onClickPrevBtn, onClickNextBtn = _k.onClickNextBtn, resetSwiper = _k.resetSwiper;
+    var _l = (0, react_1.useState)(false), isHovered = _l[0], setIsHovered = _l[1];
+    var queryPath = "".concat(CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA, "/").concat(CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATASORTING, "/").concat(CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATAOFFSET);
+    var queryDataToRender = CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE === 'DATA' && queryData
+        ? queryData === null || queryData === void 0 ? void 0 : queryData[queryPath]
+        : null;
+    (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 childrenLength = CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE === 'VALUE'
+        ? orderedCompositions.length
+        : Math.min((_b = queryDataToRender === null || queryDataToRender === void 0 ? void 0 : queryDataToRender.length) !== null && _b !== void 0 ? _b : 0, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_ITEMCOUNTS);
+    var loop = contentsCarouselNormalStyle.loop && childrenLength >= displayCounts;
     // NOTE: edit모드에서는 그리드의 이벤트만 작동하도록 CB의 포인터 이벤트는 막습니다.
     var editModeStyle = mode === 'EDIT' ? { pointerEvents: 'none' } : {};
     // NOTE: EFFECT와 관련된 함수들입니다.
@@ -126,31 +138,19 @@ function ContentsCarousel(props) {
             designType: customProgressbarNormalStyle.type || 'NONE'
         }
     ].filter(function (component) { return component !== undefined; });
-    var _l = (0, useFlexGridLayout_1.useFlexGridLayout)({ components: components }), layoutRef = _l.layoutRef, positionRefs = _l.positionRefs, 
+    var _m = (0, useFlexGridLayout_1.useFlexGridLayout)({ components: components }), layoutRef = _m.layoutRef, positionRefs = _m.positionRefs, 
     // ccbInset,
-    componentGroups = _l.componentGroups, getPositionStyle = _l.getPositionStyle, getComponentGroupLayout = _l.getComponentGroupLayout;
+    componentGroups = _m.componentGroups, getPositionStyle = _m.getPositionStyle, getComponentGroupLayout = _m.getComponentGroupLayout;
     var ccbInset = {
         top: '0px',
         right: '0px',
         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
-        : (_b = CB_STYLE_PROP_CONTENTSCAROUSELDESIGN['CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_ITEMSPACING:MOBILE']) !== null && _b !== void 0 ? _b : CB_STYLE_PROP_CONTENTSCAROUSELDESIGN.CB_STYLE_PROP_CONTENTSCAROUSELDESIGN_SPEC_ITEMSPACING;
+        : (_c = CB_STYLE_PROP_CONTENTSCAROUSELDESIGN['CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_ITEMSPACING:MOBILE']) !== null && _c !== void 0 ? _c : CB_STYLE_PROP_CONTENTSCAROUSELDESIGN.CB_STYLE_PROP_CONTENTSCAROUSELDESIGN_SPEC_ITEMSPACING;
     var columnGap = columnGapEnum === 'NARROW' ? 8 : columnGapEnum === 'NORMAL' ? 16 : 24;
     var pointerEventsObj = mode === 'EDIT' ? { pointerEvents: 'none' } : {};
     var backgroundRef = (0, react_1.useRef)(null);
@@ -161,6 +161,59 @@ 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 : childrenLength <= displayCounts || 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: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE === 'VALUE'
+                            ? displayCounts
+                            : CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_ITEMCOUNTS,
+                        queryData: queryData,
+                        compositions: compositions,
+                        componentBlockCode: types_1.CB_ALL_CODES.CB_CONTENTSCAROUSEL,
+                        device: device
+                    }) }), CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE +
+                    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 (CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA === '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, {}), Object.entries(componentGroups).map(function (_a) {
                 var position = _a[0], groupComponents = _a[1];
@@ -172,43 +225,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 ".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 () {
                         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/ContentsCarouselCore.js

@@ -21,20 +21,13 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable no-loop-func */
+/* eslint-disable no-plusplus */
 var react_1 = require("react");
 var swiper_1 = require("swiper");
 require("swiper/modules/navigation/navigation.min.css");
@@ -53,21 +46,51 @@ function (_a, ref) {
     }, [children]);
     var finalSlidesPerView = props.effect === 'cards' ? 1 : slidesPerView;
     var useAutoplay = !!styles.useAutoplay && childrenArray.length > 1;
-    // 2. (수정) 루프와 slidesPerView 문제를 해결하기 위한 배열
-    var loopedChildren = (0, react_1.useMemo)(function () {
-        // 루프가 아니거나, slidesPerView가 1이하이면 원본 반환
+    // 2. loop를 위한 슬라이드 배열 및 key 생성
+    var _b = (0, react_1.useMemo)(function () {
         if (!loop || typeof slidesPerView !== 'number' || slidesPerView <= 1) {
-            return originalChildren;
+            return {
+                slides: originalChildren.map(function (child, idx) { return ({ child: child, key: "original-".concat(idx) }); }),
+                shouldEnableLoop: loop
+            };
+        }
+        // loop를 위한 최소 슬라이드 수 계산 (Swiper 내부 복제를 위한 공간 확보)
+        var minSlidesForLoop = slidesPerView * 2;
+        // 슬라이드가 충분하면 원본 그대로 + loop 활성화
+        if (originalChildren.length >= minSlidesForLoop) {
+            return {
+                slides: originalChildren.map(function (child, idx) { return ({ child: child, key: "original-".concat(idx) }); }),
+                shouldEnableLoop: true
+            };
         }
-        // 3. (핵심) 루프가 필요한데 슬라이드 수가 (slidesPerView * 2)보다 적은 경우
-        if (originalChildren.length > 0 && originalChildren.length < slidesPerView * 2) {
-            // 원본 배열을 2번 (혹은 3번) 반복하여 강제로 개수를 늘림
-            // 최소 8개(slidesPerView*2)는 넘겨야 하므로, 5개일 경우 10개로 만듦
-            return __spreadArray(__spreadArray([], originalChildren, true), originalChildren, true);
+        // 슬라이드가 부족하면 충분한 개수까지 복제 + loop 활성화
+        if (originalChildren.length > 0) {
+            var duplicatedSlides_1 = [];
+            var copyCount_1 = 0;
+            // Swiper loop가 제대로 작동하려면 충분히 많이 복제
+            // minSlidesForLoop * 3 = 18개 정도면 무한 루프가 자연스럽게 작동
+            while (duplicatedSlides_1.length < minSlidesForLoop * 3) {
+                originalChildren.forEach(function (child, idx) {
+                    duplicatedSlides_1.push({ child: child, key: "copy-".concat(copyCount_1, "-").concat(idx) });
+                });
+                copyCount_1++;
+            }
+            return {
+                slides: duplicatedSlides_1,
+                shouldEnableLoop: true // 충분히 복제했으므로 loop 활성화
+            };
         }
-        // 슬라이드 수가 충분하면 원본 반환
-        return originalChildren;
-    }, [originalChildren, loop, slidesPerView]);
+        return {
+            slides: originalChildren.map(function (child, idx) { return ({ child: child, key: "original-".concat(idx) }); }),
+            shouldEnableLoop: false
+        };
+    }, [originalChildren, loop, slidesPerView]), slides = _b.slides, shouldEnableLoop = _b.shouldEnableLoop;
+    // loopedSlides는 loop가 실제로 활성화될 때만 설정
+    var loopedSlidesCount = (0, react_1.useMemo)(function () {
+        if (!shouldEnableLoop || typeof slidesPerView !== 'number')
+            return undefined;
+        return slidesPerView;
+    }, [shouldEnableLoop, slidesPerView]);
     return ((0, jsx_runtime_1.jsx)(StyledSwiper_1.default, __assign({ id: "styled-swiper-wrapper" }, { children: (0, jsx_runtime_1.jsx)(react_2.Swiper, __assign({ ref: ref, style: {
                 width: '100%',
                 height: '100%'
@@ -82,7 +105,10 @@ function (_a, ref) {
                 swiper_1.EffectCards,
                 swiper_1.EffectCoverflow,
                 swiper_1.EffectFlip
-            ], slidesPerView: finalSlidesPerView, scrollbar: styles.scrollbar, slidesPerGroup: styles.slidesPerGroup, spaceBetween: styles.spaceBetween, freeMode: styles.freeMode, autoplay: useAutoplay ? styles.autoplay : false, loop: loop, allowTouchMove: allowTouchMove, observer: true, observeParents: true }, props, { children: loopedChildren.map(function (slide, index) { return ((0, jsx_runtime_1.jsx)(react_2.SwiperSlide, __assign({ style: { pointerEvents: allowTouchMove ? 'auto' : 'none' } }, { children: slide || (0, jsx_runtime_1.jsx)("div", { className: "swiper-slide-empty" }) }), index)); }) })) })));
+            ], loopedSlides: loopedSlidesCount, slidesPerView: finalSlidesPerView, scrollbar: styles.scrollbar, slidesPerGroup: styles.slidesPerGroup, spaceBetween: styles.spaceBetween, freeMode: styles.freeMode, autoplay: useAutoplay ? styles.autoplay : false, loop: shouldEnableLoop, allowTouchMove: allowTouchMove, observer: true, observeParents: true }, props, { children: slides.map(function (_a) {
+                var child = _a.child, key = _a.key;
+                return ((0, jsx_runtime_1.jsx)(react_2.SwiperSlide, __assign({ style: { pointerEvents: allowTouchMove ? 'auto' : 'none' } }, { children: child || (0, jsx_runtime_1.jsx)("div", { className: "swiper-slide-empty" }) }), key));
+            }) })) })));
 });
 ContentsCarouselCore.displayName = 'ContentsCarouselCore';
 exports.default = ContentsCarouselCore;

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, _b, _c;
+        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,
@@ -40,7 +48,8 @@ function useSwiper() {
         onSlideChangeTransitionEnd: onSlideChangeTransitionEnd,
         onAutoplayTimeLeft: onAutoplayTimeLeft,
         onClickPrevBtn: onClickPrevBtn,
-        onClickNextBtn: onClickNextBtn
+        onClickNextBtn: onClickNextBtn,
+        resetSwiper: resetSwiper
     };
 }
 exports.useSwiper = useSwiper;