pds-dev-kit-web-test 2.7.347 → 2.7.350

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

@@ -159,6 +159,7 @@ function ContentsCarousel(props) {
     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) {
@@ -179,7 +180,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(), 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,22 +41,49 @@ 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 slidesWithEmpty = (0, react_1.useMemo)(function () {
-        var childrenArray = Array.isArray(children) ? children : [children];
-        if (slidesPerView === styles.slidesPerGroup &&
-            styles.slidesPerGroup &&
-            styles.slidesPerGroup > 1) {
-            var remainder = childrenArray.length % styles.slidesPerGroup;
-            if (remainder !== 0) {
-                var emptyCount = styles.slidesPerGroup - remainder;
-                return __spreadArray(__spreadArray([], childrenArray, true), Array(emptyCount).fill(null), true);
-            }
-        }
-        return childrenArray;
-    }, [children, slidesPerView, styles.slidesPerGroup]);
+    var styles = _a.styles, slidesPerView = _a.slidesPerView, children = _a.children, allowTouchMove = _a.allowTouchMove, displayCounts = _a.displayCounts, props = __rest(_a, ["styles", "slidesPerView", "children", "allowTouchMove", "displayCounts"]);
+    var childrenArray = (0, react_1.useMemo)(function () {
+        return Array.isArray(children) ? children : [children];
+    }, [children]);
+    // 1. 원본 슬라이드 배열
+    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 && Array.isArray(children) && children.length > 1;
+    var useAutoplay = !!styles.useAutoplay && childrenArray.length > 1;
+    var loop = styles.loop && originalChildren.length >= displayCounts;
+    // 2. (수정) 루프와 slidesPerView 문제를 해결하기 위한 배열
+    var loopedChildren = (0, react_1.useMemo)(function () {
+        // 루프가 아니거나, slidesPerView가 1이하이면 원본 반환
+        if (!loop || typeof slidesPerView !== 'number' || slidesPerView <= 1) {
+            return originalChildren;
+        }
+        // 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);
+        }
+        // 슬라이드 수가 충분하면 원본 반환
+        return originalChildren;
+    }, [originalChildren, loop, slidesPerView]);
+    // const slidesWithEmpty = useMemo(() => {
+    //   const childrenArray = Array.isArray(children) ? children : [children];
+    //   if (
+    //     slidesPerView === styles.slidesPerGroup &&
+    //     styles.slidesPerGroup &&
+    //     styles.slidesPerGroup > 1
+    //   ) {
+    //     const remainder = childrenArray.length % styles.slidesPerGroup;
+    //     if (remainder !== 0) {
+    //       const emptyCount = styles.slidesPerGroup - remainder;
+    //       return [...childrenArray, ...Array(emptyCount).fill(null)];
+    //     }
+    //   }
+    //   return childrenArray;
+    // }, [children, slidesPerView, styles.slidesPerGroup]);
+    // const finalSlidesPerView = props.effect === 'cards' ? 1 : slidesPerView;
+    // const useAutoplay = !!styles.useAutoplay && Array.isArray(children) && children.length > 1;
     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%'
@@ -71,7 +98,9 @@ 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 }, props, { children: slidesWithEmpty.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)); }) })) })));
+            ], 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)); }) })) })));
 });
 ContentsCarouselCore.displayName = 'ContentsCarouselCore';
 exports.default = ContentsCarouselCore;

package/package.json

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