pds-dev-kit-web-test 2.5.351 → 2.5.353

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

@@ -35,5 +35,5 @@ function createCompositions(_a) {
 }
 exports.createCompositions = createCompositions;
 function convertSlashToUnderscores(queryPath) {
-    return queryPath.replace(/\//g, '_');
+    return queryPath.split('/')[1];
 }

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

@@ -30,7 +30,7 @@ exports.sampleMockComposition1 = {
                         CB_CONTENT_PROP_TEXT_SPEC_TEXT: 'New Text',
                         CB_CONTENT_PROP_TEXT_SPEC_TEXTMOBILEALTERNATIVE: null,
                         CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE: 'DATA',
-                        CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA_NAME: 'itemDesc'
+                        CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA: 'itemDesc'
                     },
                     CB_CONTENT_PROP_VISIBILITY: {
                         CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP: true,

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

@@ -102,7 +102,7 @@ exports.SAMPLE_CONTENTSCAROUSEL_CB = {
             },
             CB_CONTENT_PROP_CONTENTSCAROUSEL: {
                 CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE: 'DATA',
-                CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECT_DATA: 'PAPPQUERY/C00007/VOD/CLASS/TOTAL',
+                CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA: 'C00007/PAPPQUERY_C00007_VOD_CLASS_TOTAL',
                 CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATASORTING: '최신순',
                 CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_OFFSET: 1,
                 CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MANUALITEMS: [],

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

@@ -62,7 +62,7 @@ exports.SAMPLE_LIST_CB = {
             },
             CB_CONTENT_PROP_CONTENTSLIST: {
                 CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE: 'DATA',
-                CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA: '아티클:포스트',
+                CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA: 'C00007/PAPPQUERY_C00007_VOD_CLASS_TOTAL',
                 CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATASORTING: '최신순',
                 CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATAFILTER: 'NONE',
                 CB_CONTENT_PROP_CONTENTSLIST_SPEC_OFFSET: 0,

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

@@ -94,7 +94,7 @@ exports.SAMPLE_SLIDEBANNER_CB = {
             },
             CB_CONTENT_PROP_SLIDEBANNER: {
                 CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE: 'DATA',
-                CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECT_DATA: '아티클:포스트',
+                CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA: 'C00007/PAPPQUERY_C00007_VOD_CLASS_TOTAL',
                 CB_CONTENT_PROP_SLIDEBANNER_SPEC_DATASORTING: '최신순',
                 CB_CONTENT_PROP_SLIDEBANNER_SPEC_OFFSET: 1,
                 CB_CONTENT_PROP_SLIDEBANNER_SPEC_MENUALITEMS: [],

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

@@ -39,7 +39,7 @@ function ContentsCarousel(props) {
     var _a = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _a.device, mode = _a.mode, queryData = _a.queryData;
     var index = props.index, 
     // // CONTENT : 캐로셀
-    _b = props.CB_CONTENT_PROP_CONTENTSCAROUSEL, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS = _b.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE = _b.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECT_DATA = _b.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECT_DATA, 
+    _b = props.CB_CONTENT_PROP_CONTENTSCAROUSEL, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS = _b.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE = _b.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE, CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA = _b.CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA, 
     // STYLE: 캐로셀
     CB_STYLE_PROP_CONTENTSCAROUSEL = props.CB_STYLE_PROP_CONTENTSCAROUSEL, 
     // STYLE: 그림자
@@ -52,27 +52,27 @@ function ContentsCarousel(props) {
     var _e = (0, react_1.useState)(0), totalPages = _e[0], setTotalPages = _e[1];
     var _f = (0, react_1.useState)(true), isBeginning = _f[0], setIsBeginning = _f[1];
     var _g = (0, react_1.useState)(false), isEnd = _g[0], setIsEnd = _g[1];
-    var _h = (0, react_1.useState)(0), progress = _h[0], setProgress = _h[1];
-    var _j = (0, react_1.useState)(0), leftTime = _j[0], setLeftTime = _j[1];
+    var progressRef = (0, react_1.useRef)(0);
+    var leftTimeMsRef = (0, react_1.useRef)(0);
     var swiperRef = (0, react_1.useRef)(null);
-    var _k = (0, contentsCarouselUtils_1.parseCarouselStyleToCarouselCoreProp)({
+    var _h = (0, contentsCarouselUtils_1.parseCarouselStyleToCarouselCoreProp)({
         props: CB_STYLE_PROP_CONTENTSCAROUSEL,
         contentsPropsPartials: { CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS },
         device: device
-    }), contentsCarouselNormalStyle = _k.normalStyle, contentsCarouselHoverStyle = _k.hoverStyle;
-    var _l = (0, contentsCarouselUtils_1.parseCarouselStyleToCustomPaginationProp)({
+    }), contentsCarouselNormalStyle = _h.normalStyle, contentsCarouselHoverStyle = _h.hoverStyle;
+    var _j = (0, contentsCarouselUtils_1.parseCarouselStyleToCustomPaginationProp)({
         props: CB_STYLE_PROP_CONTENTSCAROUSEL,
         device: device
-    }), customPaginationNormalStyle = _l.normalStyle, customPaginationHoverStyle = _l.hoverStyle;
-    var _m = (0, contentsCarouselUtils_1.parseCarouselStyleToCustomNavigationProp)({
+    }), customPaginationNormalStyle = _j.normalStyle, customPaginationHoverStyle = _j.hoverStyle;
+    var _k = (0, contentsCarouselUtils_1.parseCarouselStyleToCustomNavigationProp)({
         props: CB_STYLE_PROP_CONTENTSCAROUSEL,
         device: device
-    }), customNavigationNormalStyle = _m.normalStyle, customNavigationHoverStyle = _m.hoverStyle;
-    var _o = (0, contentsCarouselUtils_1.parseCarouselStyleToCustomProgressbarProp)({
+    }), customNavigationNormalStyle = _k.normalStyle, customNavigationHoverStyle = _k.hoverStyle;
+    var _l = (0, contentsCarouselUtils_1.parseCarouselStyleToCustomProgressbarProp)({
         props: CB_STYLE_PROP_CONTENTSCAROUSEL,
         device: device
-    }), customProgressbarNormalStyle = _o.normalStyle, customProgressbarHoverStyle = _o.hoverStyle;
-    var _p = (0, util_1.parseProperties)(props, device), style = _p.style, hoverStyle = _p.hoverStyle, layout = _p.layout, effect = _p.effect;
+    }), customProgressbarNormalStyle = _l.normalStyle, customProgressbarHoverStyle = _l.hoverStyle;
+    var _m = (0, util_1.parseProperties)(props, device), style = _m.style, hoverStyle = _m.hoverStyle, layout = _m.layout, effect = _m.effect;
     // NOTE: edit모드에서는 그리드의 이벤트만 작동하도록 CB의 포인터 이벤트는 막습니다.
     var editModeStyle = mode === 'EDIT' ? { pointerEvents: 'none' } : {};
     // NOTE: EFFECT와 관련된 함수들입니다.
@@ -107,10 +107,10 @@ function ContentsCarousel(props) {
         setIsEnd(swiper.isEnd);
         setCurrentSlide(swiper.activeIndex + 1);
     };
-    var handleAutoplayTimeLeft = function (swiper, time, progress) {
-        setProgress(progress);
-        setLeftTime(time);
-    };
+    var handleAutoplayTimeLeft = (0, react_1.useCallback)(function (swiper, time, progress) {
+        leftTimeMsRef.current = time;
+        progressRef.current = progress;
+    }, []);
     var handleBulletClick = function (index) {
         if (swiperRef.current) {
             var targetIndex = (swiperRef.current.swiper.params.slidesPerGroup || 1) * index;
@@ -139,7 +139,7 @@ function ContentsCarousel(props) {
                             ? contentsCarouselHoverStyle.useAutoplay
                             : contentsCarouselNormalStyle.useAutoplay, loop: isHovered ? contentsCarouselHoverStyle.loop : contentsCarouselNormalStyle.loop }, { children: (0, createCompositions_1.createCompositions)({
                             valueType: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE,
-                            queryPath: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECT_DATA,
+                            queryPath: CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA,
                             queryData: queryData,
                             compositions: compositions
                         }) })), (0, jsx_runtime_1.jsx)(CustomPagination_1.CustomPagination, { type: isHovered ? customPaginationHoverStyle.type : customPaginationNormalStyle.type, offset: isHovered ? customPaginationHoverStyle.offset : customPaginationNormalStyle.offset, current: currentSlide, total: totalPages, size: isHovered ? customPaginationHoverStyle.size : customPaginationNormalStyle.size, onBulletClick: handleBulletClick }), (0, jsx_runtime_1.jsx)(CustomNavigation_1.CustomNavigation, { prevBtnDisabled: isBeginning, prevBtnType: isHovered
@@ -154,7 +154,7 @@ function ContentsCarousel(props) {
                             ? customNavigationHoverStyle.nextBtnOffset
                             : customNavigationNormalStyle.nextBtnOffset, nextBtnSize: isHovered
                             ? customNavigationHoverStyle.nextBtnSize
-                            : customNavigationNormalStyle.nextBtnSize, onNextBtnClick: handleNextBtnClick }), (0, jsx_runtime_1.jsx)(CustomProgressbar_1.CustomProgressbar, { progress: progress, leftTime: leftTime, type: isHovered ? customProgressbarHoverStyle.type : customProgressbarNormalStyle.type, size: isHovered ? customProgressbarHoverStyle.size : customProgressbarNormalStyle.size, offset: isHovered ? customProgressbarHoverStyle.offset : customProgressbarNormalStyle.offset })] })) })) })));
+                            : customNavigationNormalStyle.nextBtnSize, onNextBtnClick: handleNextBtnClick }), (0, jsx_runtime_1.jsx)(CustomProgressbar_1.CustomProgressbar, { progressRef: progressRef, leftTimeMsRef: leftTimeMsRef, type: isHovered ? customProgressbarHoverStyle.type : customProgressbarNormalStyle.type, size: isHovered ? customProgressbarHoverStyle.size : customProgressbarNormalStyle.size, offset: isHovered ? customProgressbarHoverStyle.offset : customProgressbarNormalStyle.offset })] })) })) })));
 }
 var S_SwiperWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  width: 100%;\n  ", "\n"], ["\n  height: 100%;\n  width: 100%;\n  ", "\n"])), function (_a) {
     var customStyle = _a.customStyle;

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

@@ -1,8 +1,6 @@
 /// <reference types="react" />
 import type { CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBAR_TYPE } from '../types';
 export interface CustomProgressbarProps {
-    progress?: number;
-    leftTime?: number;
     type?: CB_STYLE_PROP_CONTENTSCAROUSEL_SPEC_PROGRESSBAR_TYPE;
     offset?: {
         top?: string;
@@ -15,5 +13,9 @@ export interface CustomProgressbarProps {
     };
     size?: number;
 }
-export declare const CustomProgressbar: ({ progress, leftTime, type, offset, size }: CustomProgressbarProps) => JSX.Element;
+type Props = {
+    progressRef: React.RefObject<number>;
+    leftTimeMsRef: React.RefObject<number>;
+} & CustomProgressbarProps;
+export declare const CustomProgressbar: ({ progressRef, leftTimeMsRef, type, offset, size }: Props) => JSX.Element;
 export default CustomProgressbar;

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

@@ -40,18 +40,39 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomProgressbar = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var styled_components_1 = __importStar(require("styled-components"));
 var CustomProgressbar = function (_a) {
-    var _b = _a.progress, progress = _b === void 0 ? 0 : _b, _c = _a.leftTime, leftTime = _c === void 0 ? 0 : _c, // ms
-    _d = _a.type, // ms
-    type = _d === void 0 ? 'NONE' : _d, _e = _a.offset, offset = _e === void 0 ? { top: '0' } : _e, _f = _a.size, size = _f === void 0 ? 1 : _f;
+    var progressRef = _a.progressRef, leftTimeMsRef = _a.leftTimeMsRef, _b = _a.type, type = _b === void 0 ? 'NONE' : _b, _c = _a.offset, offset = _c === void 0 ? { top: '0' } : _c, _d = _a.size, size = _d === void 0 ? 1 : _d;
+    var _e = (0, react_1.useState)(0), leftTimeSec = _e[0], setLeftTimeSec = _e[1];
+    var _f = (0, react_1.useState)(0), progress = _f[0], setProgress = _f[1];
+    // 초 단위 렌더
+    (0, react_1.useEffect)(function () {
+        var id = setInterval(function () {
+            var _a;
+            var sec = Math.ceil(((_a = leftTimeMsRef.current) !== null && _a !== void 0 ? _a : 0) / 1000);
+            setLeftTimeSec(sec);
+        }, 1000);
+        return function () { return clearInterval(id); };
+    }, [leftTimeMsRef]);
+    // 실시간 progress 반영
+    (0, react_1.useEffect)(function () {
+        var animationId;
+        var updateProgress = function () {
+            var _a;
+            setProgress((_a = progressRef.current) !== null && _a !== void 0 ? _a : 0);
+            animationId = requestAnimationFrame(updateProgress);
+        };
+        animationId = requestAnimationFrame(updateProgress);
+        return function () { return cancelAnimationFrame(animationId); };
+    }, [progressRef]);
     return ((0, jsx_runtime_1.jsx)(S_Progress, __assign({ className: "autoplay-progress", "$offset": offset, "$size": size }, { children: (function () {
             switch (type) {
                 case 'NONE':
                     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
                 case 'DESIGN1':
                 case 'DESIGN2':
-                    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("svg", __assign({ viewBox: "0 0 48 48", style: { '--progress': 1 - progress } }, { children: (0, jsx_runtime_1.jsx)("circle", { cx: "24", cy: "24", r: "20" }) })), (0, jsx_runtime_1.jsx)("span", { children: "".concat(Math.ceil(leftTime / 1000), "s") })] }));
+                    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("svg", __assign({ viewBox: "0 0 48 48", style: { '--progress': 1 - progress } }, { children: (0, jsx_runtime_1.jsx)("circle", { cx: "24", cy: "24", r: "20" }) })), (0, jsx_runtime_1.jsx)("span", { children: "".concat(Math.ceil(leftTimeSec), "s") })] }));
                 default:
                     return (0, jsx_runtime_1.jsx)("div", { children: "Default Design" });
             }

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

@@ -36,7 +36,7 @@ function SlideBanner(props) {
     var _a = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _a.device, mode = _a.mode, queryData = _a.queryData;
     var index = props.index, 
     // CONTENT : 슬라이드배너
-    _b = props.CB_CONTENT_PROP_SLIDEBANNER, CB_CONTENT_PROP_SLIDEBANNER_SPEC_DISPLAYCOUNTS = _b.CB_CONTENT_PROP_SLIDEBANNER_SPEC_DISPLAYCOUNTS, CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE = _b.CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE, CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECT_DATA = _b.CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECT_DATA, 
+    _b = props.CB_CONTENT_PROP_SLIDEBANNER, CB_CONTENT_PROP_SLIDEBANNER_SPEC_DISPLAYCOUNTS = _b.CB_CONTENT_PROP_SLIDEBANNER_SPEC_DISPLAYCOUNTS, CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE = _b.CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE, CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA = _b.CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA, 
     // STYLE: 슬라이드배너
     CB_STYLE_PROP_SLIDEBANNER = props.CB_STYLE_PROP_SLIDEBANNER, 
     // STYLE: 그림자
@@ -49,26 +49,26 @@ function SlideBanner(props) {
     var _e = (0, react_1.useState)(0), totalPages = _e[0], setTotalPages = _e[1];
     var _f = (0, react_1.useState)(true), isBeginning = _f[0], setIsBeginning = _f[1];
     var _g = (0, react_1.useState)(false), isEnd = _g[0], setIsEnd = _g[1];
-    var _h = (0, react_1.useState)(0), progress = _h[0], setProgress = _h[1];
-    var _j = (0, react_1.useState)(0), leftTime = _j[0], setLeftTime = _j[1];
+    var progressRef = (0, react_1.useRef)(0);
+    var leftTimeMsRef = (0, react_1.useRef)(0);
     var swiperRef = (0, react_1.useRef)(null);
-    var _k = (0, slideBannerUtils_1.parseSlideBannerStyleToSlideBannerCoreProp)({
+    var _h = (0, slideBannerUtils_1.parseSlideBannerStyleToSlideBannerCoreProp)({
         props: CB_STYLE_PROP_SLIDEBANNER,
         device: device
-    }), slideBannerNormalStyle = _k.normalStyle, slideBannerHoverStyle = _k.hoverStyle;
-    var _l = (0, slideBannerUtils_1.parseSlideBannerStyleToCustomPaginationProp)({
+    }), slideBannerNormalStyle = _h.normalStyle, slideBannerHoverStyle = _h.hoverStyle;
+    var _j = (0, slideBannerUtils_1.parseSlideBannerStyleToCustomPaginationProp)({
         props: CB_STYLE_PROP_SLIDEBANNER,
         device: device
-    }), customPaginationNormalStyle = _l.normalStyle, customPaginationHoverStyle = _l.hoverStyle;
-    var _m = (0, slideBannerUtils_1.parseSlideBannerStyleToCustomNavigationProp)({
+    }), customPaginationNormalStyle = _j.normalStyle, customPaginationHoverStyle = _j.hoverStyle;
+    var _k = (0, slideBannerUtils_1.parseSlideBannerStyleToCustomNavigationProp)({
         props: CB_STYLE_PROP_SLIDEBANNER,
         device: device
-    }), customNavigationNormalStyle = _m.normalStyle, customNavigationHoverStyle = _m.hoverStyle;
-    var _o = (0, slideBannerUtils_1.parseSlideBannerStyleToCustomProgressbarProp)({
+    }), customNavigationNormalStyle = _k.normalStyle, customNavigationHoverStyle = _k.hoverStyle;
+    var _l = (0, slideBannerUtils_1.parseSlideBannerStyleToCustomProgressbarProp)({
         props: CB_STYLE_PROP_SLIDEBANNER,
         device: device
-    }), customProgressbarNormalStyle = _o.normalStyle, customProgressbarHoverStyle = _o.hoverStyle;
-    var _p = (0, util_1.parseProperties)(props, device), style = _p.style, hoverStyle = _p.hoverStyle, layout = _p.layout, effect = _p.effect;
+    }), customProgressbarNormalStyle = _l.normalStyle, customProgressbarHoverStyle = _l.hoverStyle;
+    var _m = (0, util_1.parseProperties)(props, device), style = _m.style, hoverStyle = _m.hoverStyle, layout = _m.layout, effect = _m.effect;
     // NOTE: edit모드에서는 그리드의 이벤트만 작동하도록 CB의 포인터 이벤트는 막습니다.
     var editModeStyle = mode === 'EDIT' ? { pointerEvents: 'none' } : {};
     // NOTE: EFFECT와 관련된 함수들입니다.
@@ -103,10 +103,10 @@ function SlideBanner(props) {
         setIsEnd(swiper.isEnd);
         setCurrentSlide(swiper.activeIndex + 1);
     };
-    var handleAutoplayTimeLeft = function (swiper, time, progress) {
-        setProgress(progress);
-        setLeftTime(time);
-    };
+    var handleAutoplayTimeLeft = (0, react_1.useCallback)(function (swiper, time, progress) {
+        leftTimeMsRef.current = time;
+        progressRef.current = progress;
+    }, []);
     var handleBulletClick = function (index) {
         if (swiperRef.current) {
             var targetIndex = (swiperRef.current.swiper.params.slidesPerGroup || 1) * index;
@@ -125,7 +125,7 @@ function SlideBanner(props) {
     };
     return ((0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), editModeStyle), { position: 'relative', overflow: 'hidden' }), hoverStyle: __assign(__assign({}, hoverStyle), { position: 'relative', overflow: 'hidden' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: (0, jsx_runtime_1.jsxs)(S_SwiperWrapper, __assign({ customStyle: isHovered ? 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, onSwiper: handleSwiper, onSlideChange: handleSlideChange, onAutoplayTimeLeft: handleAutoplayTimeLeft, slidesPerView: CB_CONTENT_PROP_SLIDEBANNER_SPEC_DISPLAYCOUNTS, scrollbar: isHovered ? slideBannerHoverStyle.scrollbar : slideBannerNormalStyle.scrollbar, freeMode: isHovered ? slideBannerHoverStyle.freeMode : slideBannerNormalStyle.freeMode, autoplay: isHovered ? slideBannerHoverStyle.autoplay : slideBannerNormalStyle.autoplay, useAutoplay: isHovered ? slideBannerHoverStyle.useAutoplay : slideBannerNormalStyle.useAutoplay, loop: isHovered ? slideBannerHoverStyle.loop : slideBannerNormalStyle.loop }, { children: (0, createCompositions_1.createCompositions)({
                             valueType: CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE,
-                            queryPath: CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECT_DATA,
+                            queryPath: CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA,
                             queryData: queryData,
                             compositions: compositions
                         }) })), (0, jsx_runtime_1.jsx)(CustomPagination_1.CustomPagination, { type: isHovered ? customPaginationHoverStyle.type : customPaginationNormalStyle.type, offset: isHovered ? customPaginationHoverStyle.offset : customPaginationNormalStyle.offset, current: currentSlide, total: totalPages, size: isHovered ? customPaginationHoverStyle.size : customPaginationNormalStyle.size, onBulletClick: handleBulletClick }), (0, jsx_runtime_1.jsx)(CustomNavigation_1.CustomNavigation, { prevBtnDisabled: isBeginning, prevBtnType: isHovered
@@ -140,7 +140,7 @@ function SlideBanner(props) {
                             ? customNavigationHoverStyle.nextBtnOffset
                             : customNavigationNormalStyle.nextBtnOffset, nextBtnSize: isHovered
                             ? customNavigationHoverStyle.nextBtnSize
-                            : customNavigationNormalStyle.nextBtnSize, onNextBtnClick: handleNextBtnClick }), (0, jsx_runtime_1.jsx)(CustomProgressbar_1.CustomProgressbar, { progress: progress, leftTime: leftTime, type: isHovered ? customProgressbarHoverStyle.type : customProgressbarNormalStyle.type, size: isHovered ? customProgressbarHoverStyle.size : customProgressbarNormalStyle.size, offset: isHovered ? customProgressbarHoverStyle.offset : customProgressbarNormalStyle.offset })] })) })) })));
+                            : customNavigationNormalStyle.nextBtnSize, onNextBtnClick: handleNextBtnClick }), (0, jsx_runtime_1.jsx)(CustomProgressbar_1.CustomProgressbar, { progressRef: progressRef, leftTimeMsRef: leftTimeMsRef, type: isHovered ? customProgressbarHoverStyle.type : customProgressbarNormalStyle.type, size: isHovered ? customProgressbarHoverStyle.size : customProgressbarNormalStyle.size, offset: isHovered ? customProgressbarHoverStyle.offset : customProgressbarNormalStyle.offset })] })) })) })));
 }
 var S_SwiperWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  width: 100%;\n  ", "\n"], ["\n  height: 100%;\n  width: 100%;\n  ", "\n"])), function (_a) {
     var customStyle = _a.customStyle;

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

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

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

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

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

@@ -1,8 +1,6 @@
 /// <reference types="react" />
 import type { CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBAR_TYPE } from '../types';
 export interface CustomProgressbarProps {
-    progress?: number;
-    leftTime?: number;
     type?: CB_STYLE_PROP_SLIDEBANNER_SPEC_PROGRESSBAR_TYPE;
     offset?: {
         top?: string;
@@ -15,5 +13,9 @@ export interface CustomProgressbarProps {
     };
     size?: number;
 }
-export declare const CustomProgressbar: ({ progress, leftTime, type, offset, size }: CustomProgressbarProps) => JSX.Element;
+type Props = {
+    progressRef: React.RefObject<number>;
+    leftTimeMsRef: React.RefObject<number>;
+} & CustomProgressbarProps;
+export declare const CustomProgressbar: ({ progressRef, leftTimeMsRef, type, offset, size }: Props) => JSX.Element;
 export default CustomProgressbar;

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

@@ -40,18 +40,39 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomProgressbar = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var styled_components_1 = __importStar(require("styled-components"));
 var CustomProgressbar = function (_a) {
-    var _b = _a.progress, progress = _b === void 0 ? 0 : _b, _c = _a.leftTime, leftTime = _c === void 0 ? 0 : _c, // ms
-    _d = _a.type, // ms
-    type = _d === void 0 ? 'NONE' : _d, _e = _a.offset, offset = _e === void 0 ? { top: '0' } : _e, _f = _a.size, size = _f === void 0 ? 1 : _f;
+    var progressRef = _a.progressRef, leftTimeMsRef = _a.leftTimeMsRef, _b = _a.type, type = _b === void 0 ? 'NONE' : _b, _c = _a.offset, offset = _c === void 0 ? { top: '0' } : _c, _d = _a.size, size = _d === void 0 ? 1 : _d;
+    var _e = (0, react_1.useState)(0), leftTimeSec = _e[0], setLeftTimeSec = _e[1];
+    var _f = (0, react_1.useState)(0), progress = _f[0], setProgress = _f[1];
+    // 초 단위 렌더
+    (0, react_1.useEffect)(function () {
+        var id = setInterval(function () {
+            var _a;
+            var sec = Math.ceil(((_a = leftTimeMsRef.current) !== null && _a !== void 0 ? _a : 0) / 1000);
+            setLeftTimeSec(sec);
+        }, 1000);
+        return function () { return clearInterval(id); };
+    }, [leftTimeMsRef]);
+    // 실시간 progress 반영
+    (0, react_1.useEffect)(function () {
+        var animationId;
+        var updateProgress = function () {
+            var _a;
+            setProgress((_a = progressRef.current) !== null && _a !== void 0 ? _a : 0);
+            animationId = requestAnimationFrame(updateProgress);
+        };
+        animationId = requestAnimationFrame(updateProgress);
+        return function () { return cancelAnimationFrame(animationId); };
+    }, [progressRef]);
     return ((0, jsx_runtime_1.jsx)(S_Progress, __assign({ className: "autoplay-progress", "$offset": offset, "$size": size }, { children: (function () {
             switch (type) {
                 case 'NONE':
                     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
                 case 'DESIGN1':
                 case 'DESIGN2':
-                    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("svg", __assign({ viewBox: "0 0 48 48", style: { '--progress': 1 - progress } }, { children: (0, jsx_runtime_1.jsx)("circle", { cx: "24", cy: "24", r: "20" }) })), (0, jsx_runtime_1.jsx)("span", { children: "".concat(Math.ceil(leftTime / 1000), "s") })] }));
+                    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("svg", __assign({ viewBox: "0 0 48 48", style: { '--progress': 1 - progress } }, { children: (0, jsx_runtime_1.jsx)("circle", { cx: "24", cy: "24", r: "20" }) })), (0, jsx_runtime_1.jsx)("span", { children: "".concat(Math.ceil(leftTimeSec), "s") })] }));
                 default:
                     return (0, jsx_runtime_1.jsx)("div", { children: "Default Design" });
             }

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

@@ -31,7 +31,7 @@ var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
 function Text(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, _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_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM, _c = props.CB_CONTENT_PROP_TEXT, CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE = _c.CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE, CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA_NAME = _c.CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA_NAME;
+    var index = props.index, _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_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM, _c = props.CB_CONTENT_PROP_TEXT, CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE = _c.CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE, CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA = _c.CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA;
     var cLinkValue = function () {
         if (CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE === 'DATA') {
             if (!(queryContext === null || queryContext === void 0 ? void 0 : queryContext.queryData)) {
@@ -72,7 +72,7 @@ function Text(props) {
     var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
     var textValue = function () {
         if (CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE === 'DATA' && (queryContext === null || queryContext === void 0 ? void 0 : queryContext.queryData)) {
-            return queryContext.queryData[CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA_NAME];
+            return queryContext.queryData[CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA];
         }
         if (device === 'MOBILE' &&
             mode !== 'EDIT' &&

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

@@ -8,7 +8,7 @@ export type CB_CONTENT_PROP_TEXT = {
     CB_CONTENT_PROP_TEXT_SPEC_TEXT: STRING_PLAIN;
     CB_CONTENT_PROP_TEXT_SPEC_TEXTMOBILEALTERNATIVE: STRING_PLAIN;
     CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE: VALUE_TYPE;
-    CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA_NAME: STRING_PLAIN;
+    CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA: STRING_PLAIN;
 };
 export type CB_CONTENT_PROP_CLINK = {
     CB_CONTENT_PROP_CLINK_SPEC_TYPE: 'INTERNAL' | 'EXTERNAL' | 'DISABLED';
@@ -31,7 +31,7 @@ export type CB_CONTENT_PROP_CODEBLOCK = {
 };
 export type CB_CONTENT_PROP_CONTENTSCAROUSEL = {
     CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE: VALUE_TYPE;
-    CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECT_DATA: STRING_PLAIN;
+    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_MANUALITEMS: MockComposition[];
@@ -40,7 +40,7 @@ export type CB_CONTENT_PROP_CONTENTSCAROUSEL = {
 };
 export type CB_CONTENT_PROP_SLIDEBANNER = {
     CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE: VALUE_TYPE;
-    CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECT_DATA: STRING_PLAIN;
+    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_MENUALITEMS: MockComposition[];

package/dist/src/sub/DynamicLayout/sections/CustomSection/newUtils/replaceUndefinedValues.js

@@ -38,7 +38,7 @@ function replaceUndefinedValues(jsonData) {
                     }
                 }
                 return __assign({}, accSpecs);
-            }, currentProps);
+            }, __assign({}, currentProps));
             return __assign(__assign({}, acc), (_a = {}, _a[currentPropKey] = specs, _a));
         }
         return acc;

package/package.json

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