pds-dev-kit-web-test 2.7.348 → 2.7.351

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

@@ -93,7 +93,12 @@ function ContentsCarousel(props) {
     }), 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 loop = isHovered ? contentsCarouselHoverStyle.loop : contentsCarouselNormalStyle.loop;
+    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;
     // NOTE: edit모드에서는 그리드의 이벤트만 작동하도록 CB의 포인터 이벤트는 막습니다.
     var editModeStyle = mode === 'EDIT' ? { pointerEvents: 'none' } : {};
     // NOTE: EFFECT와 관련된 함수들입니다.
@@ -150,16 +155,10 @@ function ContentsCarousel(props) {
     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_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 isEditModeAndHidden = style.visibility === 'hidden' && mode === 'EDIT';
     if (mode === 'EDIT') {
         style.visibility = 'visible';
     }
-    console.log('contentsCarouselStyle', contentsCarouselNormalStyle);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), Object.entries(componentGroups).map(function (_a) {
                 var position = _a[0], groupComponents = _a[1];
                 return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-contentscarousel-button-group ccb-elements ".concat(position), ref: function (el) {
@@ -180,7 +179,7 @@ function ContentsCarousel(props) {
                                     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() }, { children: (0, createCompositions_1.createCompositions)({
+                                } }, { 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,

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

@@ -5,6 +5,7 @@ import type { SwiperProps, SwiperRef } from 'swiper/react/swiper-react.js';
 export interface ContentsCarouselCoreProps extends SwiperProps {
     styles: CoreCarouselProps;
     slidesPerView?: SwiperProps['slidesPerView'];
+    displayCounts: number;
     children?: React.ReactNode[] | JSX.Element;
 }
 declare const ContentsCarouselCore: import("react").ForwardRefExoticComponent<ContentsCarouselCoreProps & import("react").RefAttributes<SwiperRef>>;

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

@@ -41,7 +41,7 @@ require("swiper/modules/navigation/navigation.min.css");
 var react_2 = require("swiper/react");
 var StyledSwiper_1 = __importDefault(require("../../../StyledSwiper/StyledSwiper"));
 var ContentsCarouselCore = (0, react_1.forwardRef)(function (_a, ref) {
-    var styles = _a.styles, slidesPerView = _a.slidesPerView, children = _a.children, allowTouchMove = _a.allowTouchMove, props = __rest(_a, ["styles", "slidesPerView", "children", "allowTouchMove"]);
+    var styles = _a.styles, slidesPerView = _a.slidesPerView, children = _a.children, allowTouchMove = _a.allowTouchMove, displayCounts = _a.displayCounts, loop = _a.loop, props = __rest(_a, ["styles", "slidesPerView", "children", "allowTouchMove", "displayCounts", "loop"]);
     var childrenArray = (0, react_1.useMemo)(function () {
         return Array.isArray(children) ? children : [children];
     }, [children]);
@@ -49,10 +49,12 @@ var ContentsCarouselCore = (0, react_1.forwardRef)(function (_a, ref) {
     var originalChildren = (0, react_1.useMemo)(function () {
         return Array.isArray(children) ? children : [children];
     }, [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이하이면 원본 반환
-        if (!styles.loop || typeof slidesPerView !== 'number' || slidesPerView <= 1) {
+        if (!loop || typeof slidesPerView !== 'number' || slidesPerView <= 1) {
             return originalChildren;
         }
         // 3. (핵심) 루프가 필요한데 슬라이드 수가 (slidesPerView * 2)보다 적은 경우
@@ -63,9 +65,7 @@ var ContentsCarouselCore = (0, react_1.forwardRef)(function (_a, ref) {
         }
         // 슬라이드 수가 충분하면 원본 반환
         return originalChildren;
-    }, [originalChildren, styles.loop, slidesPerView]);
-    var finalSlidesPerView = props.effect === 'cards' ? 1 : slidesPerView;
-    var useAutoplay = !!styles.useAutoplay && childrenArray.length > 1;
+    }, [originalChildren, loop, slidesPerView]);
     // const slidesWithEmpty = useMemo(() => {
     //   const childrenArray = Array.isArray(children) ? children : [children];
     //   if (
@@ -97,9 +97,7 @@ var ContentsCarouselCore = (0, react_1.forwardRef)(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: styles.loop, allowTouchMove: allowTouchMove, 
-            // cnrk
-            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)); }) })) })));
+            ], allowSlideNext: allowTouchMove, allowSlidePrev: allowTouchMove, 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)); }) })) })));
 });
 ContentsCarouselCore.displayName = 'ContentsCarouselCore';
 exports.default = ContentsCarouselCore;

package/package.json

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