pds-dev-kit-web-test 2.7.543 → 2.7.545

package/dist/src/sub/DynamicLayout/mock_section.json

@@ -5103,9 +5103,9 @@
                             "CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATAFILTER": "NONE",
                             "CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATAOFFSET": 0,
                             "CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATASORTING": "PAPPQUERY_SORTING_ITEM_ID_ASC",
-                            "CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS": 4,
+                            "CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS": 3,
                             "CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_EDITCOMMONITEM": null,
-                            "CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_ITEMCOUNTS": 2,
+                            "CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_ITEMCOUNTS": 4,
                             "CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MANUALITEMS": [
                                 {
                                     "order": 1,

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

@@ -26,6 +26,8 @@ var __importDefault = (this && this.__importDefault) || function (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");
@@ -44,39 +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이하이면 원본 반환
-        console.log('loopedChildren calculation', {
-            loop: loop,
-            slidesPerView: slidesPerView,
-            originalChildrenLength: originalChildren.length
-        });
+    // 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
+            };
         }
-        // 3. (핵심) 루프가 필요한데 슬라이드 수가 충분하지 않은 경우
-        // Swiper loop는 최소 slidesPerView * 2개 이상 필요
-        var minSlidesRequired = slidesPerView * 2;
-        console.log('minSlidesRequired', minSlidesRequired);
-        console.log('originalChildren.length', originalChildren.length);
-        if (originalChildren.length > 0 && originalChildren.length < minSlidesRequired) {
-            // 필요한 개수만큼만 정확히 복제
-            var duplicatedChildren = [];
-            while (duplicatedChildren.length < minSlidesRequired) {
-                duplicatedChildren.push.apply(duplicatedChildren, originalChildren);
+        // 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
+            };
+        }
+        // 슬라이드가 부족하면 충분한 개수까지 복제 + 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 duplicatedChildren.slice(0, minSlidesRequired);
+            return {
+                slides: duplicatedSlides_1,
+                shouldEnableLoop: true // 충분히 복제했으므로 loop 활성화
+            };
         }
-        // 슬라이드 수가 충분하면 원본 반환
-        return originalChildren;
-    }, [originalChildren, loop, slidesPerView]);
-    // Swiper에 loopedSlides 옵션 추가
+        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 (!loop || typeof slidesPerView !== 'number')
+        if (!shouldEnableLoop || typeof slidesPerView !== 'number')
             return undefined;
-        return Math.max(slidesPerView, originalChildren.length);
-    }, [loop, slidesPerView, originalChildren.length]);
+        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%'
@@ -91,7 +105,10 @@ function (_a, ref) {
                 swiper_1.EffectCards,
                 swiper_1.EffectCoverflow,
                 swiper_1.EffectFlip
-            ], loopedSlides: loopedSlidesCount, 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/package.json

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