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

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';
-    }
+    console.log(queryData, swiperRef);
+    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
+                    }) }), 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);
+    };
     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];
                         return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-slidebanner-button-group ccb-elements ".concat(position), ref: function (el) {
@@ -165,37 +204,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", 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", 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;
+        setCurrentSlide(1);
+        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,
@@ -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/types.d.ts

@@ -46,7 +46,7 @@ export type CB_CONTENT_PROP_CONTENTSCAROUSEL = {
     CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE: CCB_VALUE_TYPE;
     CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA: STRING_PLAIN;
     CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATASORTING: STRING_PLAIN;
-    CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_OFFSET: NUMBER_INTEGER;
+    CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATAOFFSET: NUMBER_INTEGER;
     CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MANUALITEMS: ManualItem[];
     CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_ITEMCOUNTS: NUMBER_INTEGER;
     CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS: NUMBER_INTEGER;
@@ -56,7 +56,7 @@ export type CB_CONTENT_PROP_SLIDEBANNER = {
     CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE: CCB_VALUE_TYPE;
     CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA: STRING_PLAIN;
     CB_CONTENT_PROP_SLIDEBANNER_SPEC_DATASORTING: STRING_PLAIN;
-    CB_CONTENT_PROP_SLIDEBANNER_SPEC_OFFSET: NUMBER_INTEGER;
+    CB_CONTENT_PROP_SLIDEBANNER_SPEC_DATAOFFSET: NUMBER_INTEGER;
     CB_CONTENT_PROP_SLIDEBANNER_SPEC_MANUALITEMS: ManualItem[];
     CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS: NUMBER_INTEGER;
 };
@@ -65,7 +65,7 @@ export type CB_CONTENT_PROP_CONTENTSLIST = {
     CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA: STRING_PLAIN;
     CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATASORTING: STRING_PLAIN;
     CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATAFILTER: STRING_PLAIN;
-    CB_CONTENT_PROP_CONTENTSLIST_SPEC_OFFSET: NUMBER_INTEGER;
+    CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATAOFFSET: NUMBER_INTEGER;
     CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS: ManualItem[];
     CB_CONTENT_PROP_CONTENTSLIST_SPEC_ITEMCOUNTS: NUMBER_INTEGER;
     CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS: NUMBER_INTEGER;

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/parseJsonProperties.js

@@ -37,18 +37,22 @@ function parseJsonProperties(properties, device) {
         };
         if (normalizedProperty.name in types_4.CB_STYLE_PROP_KEYS) {
             var _a = (0, stylePropParsers_1.parseStyleProperties)(normalizedProperty, device), style = _a.style, overlayStyle = _a.overlayStyle;
+            // console.log(normalizedProperty.name, ' >>>', overlayStyle, overlayHoverStyle);
             return __assign(__assign({}, acc), { style: __assign(__assign({}, acc.style), style), overlayStyle: __assign(__assign({}, acc.overlayStyle), overlayStyle) });
         }
         if (normalizedProperty.name in types_3.CB_LAYOUT_PROP_KEYS) {
             var style = (0, layoutPropParsers_1.parseLayoutProperties)(normalizedProperty, device).style;
+            // console.log(normalizedProperty.name, ' >>>', style);
             return __assign(__assign({}, acc), { layout: __assign(__assign({}, acc.layout), style) });
         }
         if (normalizedProperty.name in types_1.CB_CONTENT_PROP_KEYS) {
             var style = (0, contentPropParsers_1.parseContentProperties)(normalizedProperty, device).style;
+            // console.log(normalizedProperty.name, ' >>>', style);
             return __assign(__assign({}, acc), { style: __assign(__assign({}, acc.style), style) });
         }
         if (normalizedProperty.name in types_2.CB_EFFECT_PROP_KEYS) {
             var style = (0, effectPropParsers_1.parseEffectProperties)(normalizedProperty, device).style;
+            // console.log(normalizedProperty.name, ' >>>', style);
             return __assign(__assign({}, acc), { effect: __assign(__assign({}, acc.effect), style) });
         }
         return acc;

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/stylePropParsers/parseStylePropBorder.js

@@ -21,24 +21,17 @@ var AVAILABLE_SPECS = [
 function parseStylePropBorder(namedProps, device) {
     var specs = namedProps.specs;
     return AVAILABLE_SPECS.reduce(function (acc, cur) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c;
         var baseKey = device === 'DESKTOP' ? cur : "".concat(cur, ":MOBILE");
         var cssPropertyKey = getParsedKey(baseKey);
         var value = specs[baseKey];
         var hoverValue = specs["".concat(baseKey, ":HOVER")];
         var isRadius = cssPropertyKey === 'borderRadius';
         if (value === null || value === undefined) {
-            if (device === 'MOBILE') {
-                var desktopValue = specs[cur];
-                return {
-                    style: __assign(__assign({}, acc.style), (_a = {}, _a[cssPropertyKey] = desktopValue, _a)),
-                    hoverStyle: __assign({}, acc.hoverStyle)
-                };
-            }
             return acc;
         }
         if (isRadius) {
-            var _e = value, tl = _e.tl, tr = _e.tr, bl = _e.bl, br = _e.br;
+            var _d = value, tl = _d.tl, tr = _d.tr, bl = _d.bl, br = _d.br;
             var hoverValueTypeExpanded = hoverValue;
             if (hoverValueTypeExpanded === null || hoverValueTypeExpanded === undefined) {
                 return {
@@ -53,13 +46,13 @@ function parseStylePropBorder(namedProps, device) {
         }
         if (hoverValue === null || hoverValue === undefined) {
             return {
-                style: __assign(__assign({}, acc.style), (_b = {}, _b[cssPropertyKey] = value, _b)),
+                style: __assign(__assign({}, acc.style), (_a = {}, _a[cssPropertyKey] = value, _a)),
                 hoverStyle: __assign({}, acc.hoverStyle)
             };
         }
         return {
-            style: __assign(__assign({}, acc.style), (_c = {}, _c[cssPropertyKey] = value, _c)),
-            hoverStyle: __assign(__assign({}, acc.hoverStyle), (_d = {}, _d[cssPropertyKey] = hoverValue, _d))
+            style: __assign(__assign({}, acc.style), (_b = {}, _b[cssPropertyKey] = value, _b)),
+            hoverStyle: __assign(__assign({}, acc.hoverStyle), (_c = {}, _c[cssPropertyKey] = hoverValue, _c))
         };
     }, {
         style: {},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web-test",
-  "version": "2.7.501",
+  "version": "2.7.503",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",

package/release-note.md

@@ -1,7 +1,7 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.2.284]
+## [v2.2.280]
 ## daily|https://design.storybook.publ.biz/
 
 ### 업데이트 사항
 
-* [PDS-1398] 리액션 버튼의 타입 변경
+* 컬러키 업데이트

package/dist/src/common/assets/icons/fill/Plugin.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import type IconType from '../IconType';
-declare const Plugin: ({ color, size, ...rest }: IconType) => JSX.Element;
-export default Plugin;

package/dist/src/common/assets/icons/fill/Plugin.js

@@ -1,30 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var Plugin = function (_a) {
-    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
-    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsxs)("g", __assign({ fill: "none" }, { children: [(0, jsx_runtime_1.jsx)("path", { fill: color, fillRule: "evenodd", d: "M6.7686,9.5034 C7.0246,9.5034 7.2806,9.6014 7.4756,9.7964 L14.2036,16.5244 C14.5946,16.9144 14.5946,17.5484 14.2036,17.9384 L11.8896,20.2524 C11.1086,21.0334 10.0846,21.4244 9.0616,21.4244 C8.0376,21.4244 7.0136,21.0334 6.2326,20.2524 L3.7476,17.7674 C2.1856,16.2054 2.1856,13.6724 3.7476,12.1104 L6.0616,9.7964 C6.2566,9.6014 6.5126,9.5034 6.7686,9.5034 Z M6.7686,11.9174 L5.1616,13.5244 C4.3816,14.3044 4.3816,15.5734 5.1616,16.3524 L7.6466,18.8384 C8.0246,19.2164 8.5266,19.4244 9.0616,19.4244 C9.5956,19.4244 10.0976,19.2164 10.4756,18.8384 L12.0826,17.2314 L6.7686,11.9174 Z M14.9387,2.576 C15.9627,2.576 16.9857,2.967 17.7667,3.748 L20.2527,6.233 C21.8147,7.795 21.8147,10.328 20.2527,11.89 L17.9387,14.204 C17.7437,14.399 17.4877,14.497 17.2317,14.497 C16.9757,14.497 16.7197,14.399 16.5247,14.204 L9.7967,7.476 C9.4057,7.085 9.4057,6.452 9.7967,6.062 L12.1107,3.748 C12.8917,2.967 13.9147,2.576 14.9387,2.576 Z M14.9387,4.576 C14.4047,4.576 13.9027,4.784 13.5247,5.162 L11.9177,6.769 L17.2317,12.082 L18.8377,10.476 C19.6177,9.696 19.6177,8.427 18.8377,7.647 L16.3527,5.162 C15.9747,4.784 15.4727,4.576 14.9387,4.576 Z" }), (0, jsx_runtime_1.jsx)("path", { stroke: color, strokeLinecap: "round", strokeWidth: "2", d: "M5.2577,18.7423 L2.9147,21.0853 M18.7423,5.2577 L21.0853,2.9147 M10.1817,10.62 L8.7747,12.027 M13.38,13.8183 L11.973,15.2253" })] })) })));
-};
-exports.default = Plugin;

package/dist/src/common/assets/icons/line/Plugin.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import type IconType from '../IconType';
-declare const Plugin: ({ color, size, ...rest }: IconType) => JSX.Element;
-export default Plugin;

package/dist/src/common/assets/icons/line/Plugin.js

@@ -1,30 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var Plugin = function (_a) {
-    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
-    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsxs)("g", __assign({ fill: "none" }, { children: [(0, jsx_runtime_1.jsx)("path", { fill: color, fillRule: "evenodd", d: "M6.7686,9.5034 C7.0246,9.5034 7.2806,9.6014 7.4756,9.7964 L14.2036,16.5244 C14.5946,16.9144 14.5946,17.5484 14.2036,17.9384 L11.8896,20.2524 C11.1086,21.0334 10.0846,21.4244 9.0616,21.4244 C8.0376,21.4244 7.0136,21.0334 6.2326,20.2524 L3.7476,17.7674 C2.1856,16.2054 2.1856,13.6724 3.7476,12.1104 L6.0616,9.7964 C6.2566,9.6014 6.5126,9.5034 6.7686,9.5034 Z M6.7686,11.2104 L4.8086,13.1704 C4.3366,13.6434 4.0756,14.2704 4.0756,14.9384 C4.0756,15.6064 4.3366,16.2344 4.8086,16.7064 L7.2936,19.1914 C7.7656,19.6644 8.3936,19.9244 9.0616,19.9244 C9.7296,19.9244 10.3566,19.6644 10.8296,19.1914 L12.7896,17.2314 L6.7686,11.2104 Z M14.9386,2.576 C15.9626,2.576 16.9856,2.967 17.7666,3.748 L20.2526,6.233 C21.8146,7.795 21.8146,10.328 20.2526,11.89 L17.9386,14.204 C17.7436,14.399 17.4876,14.497 17.2316,14.497 C16.9756,14.497 16.7196,14.399 16.5246,14.204 L9.7966,7.476 C9.4056,7.085 9.4056,6.452 9.7966,6.062 L12.1106,3.748 C12.8916,2.967 13.9146,2.576 14.9386,2.576 Z M14.9386,4.076 C14.2706,4.076 13.6426,4.336 13.1706,4.808 L11.2106,6.769 L17.2316,12.79 L19.1916,10.829 C19.6636,10.357 19.9236,9.729 19.9236,9.061 C19.9236,8.394 19.6636,7.766 19.1916,7.294 L16.7066,4.808 C16.2346,4.336 15.6066,4.076 14.9386,4.076 Z" }), (0, jsx_runtime_1.jsx)("path", { stroke: color, strokeLinecap: "round", strokeWidth: "1.5", d: "M5.2577,18.7423 L2.9147,21.0853 M18.7423,5.2577 L21.0853,2.9147 M10.1817,10.62 L8.7747,12.027 M13.38,13.8183 L11.973,15.2253" })] })) })));
-};
-exports.default = Plugin;