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

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) {

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

@@ -42,21 +42,47 @@ 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);
-            }
+    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]);
+    // 2. (수정) 루프와 slidesPerView 문제를 해결하기 위한 배열
+    var loopedChildren = (0, react_1.useMemo)(function () {
+        // 루프가 아니거나, slidesPerView가 1이하이면 원본 반환
+        if (!styles.loop || typeof slidesPerView !== 'number' || slidesPerView <= 1) {
+            return originalChildren;
         }
-        return childrenArray;
-    }, [children, slidesPerView, styles.slidesPerGroup]);
+        // 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, styles.loop, slidesPerView]);
     var finalSlidesPerView = props.effect === 'cards' ? 1 : slidesPerView;
-    var useAutoplay = !!styles.useAutoplay && Array.isArray(children) && children.length > 1;
+    var useAutoplay = !!styles.useAutoplay && childrenArray.length > 1;
+    // 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 +97,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/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/ContentsCarousel/components/progressConfigs.js

@@ -157,12 +157,15 @@ var S_ProgressDesign5 = styled_components_1.default.div(templateObject_5 || (tem
     var barColor = _a.barColor;
     return barColor;
 });
-var S_ProgressDesign6 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  flex-direction: column;\n  font-weight: bold;\n  width: ", "px;\n\n  .progress-bar-container {\n    background-color: rgba(0, 0, 0, 0.2);\n    border-radius: 3px;\n    height: ", "px;\n    overflow: hidden;\n    position: relative;\n    width: 100%;\n  }\n\n  .progress-bar-fill {\n    background-color: ", ";\n    border-radius: 3px;\n    height: 100%;\n    transition: width 0.1s ease-out;\n    width: calc(var(--progress) * 100%);\n  }\n"], ["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  flex-direction: column;\n  font-weight: bold;\n  width: ", "px;\n\n  .progress-bar-container {\n    background-color: rgba(0, 0, 0, 0.2);\n    border-radius: 3px;\n    height: ", "px;\n    overflow: hidden;\n    position: relative;\n    width: 100%;\n  }\n\n  .progress-bar-fill {\n    background-color: ", ";\n    border-radius: 3px;\n    height: 100%;\n    transition: width 0.1s ease-out;\n    width: calc(var(--progress) * 100%);\n  }\n"])), function (_a) {
-    var bgColor = _a.bgColor;
-    return bgColor;
-}, function (props) { return SIZE_ENUM_TO_NUM_BAR[props.size].width; }, function (props) { return SIZE_ENUM_TO_NUM_BAR[props.size].height; }, function (_a) {
+var S_ProgressDesign6 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  flex-direction: column;\n  font-weight: bold;\n  width: ", "px;\n\n  .progress-bar-container {\n    background-color: ", ";\n    border-radius: 3px;\n    height: ", "px;\n    overflow: hidden;\n    position: relative;\n    width: 100%;\n  }\n\n  .progress-bar-fill {\n    background-color: ", ";\n    border-radius: 3px;\n    height: 100%;\n    transition: width 0.1s ease-out;\n    width: calc(var(--progress) * 100%);\n  }\n"], ["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  flex-direction: column;\n  font-weight: bold;\n  width: ", "px;\n\n  .progress-bar-container {\n    background-color: ", ";\n    border-radius: 3px;\n    height: ", "px;\n    overflow: hidden;\n    position: relative;\n    width: 100%;\n  }\n\n  .progress-bar-fill {\n    background-color: ", ";\n    border-radius: 3px;\n    height: 100%;\n    transition: width 0.1s ease-out;\n    width: calc(var(--progress) * 100%);\n  }\n"])), function (_a) {
+    var barColor = _a.barColor;
+    return barColor;
+}, function (props) { return SIZE_ENUM_TO_NUM_BAR[props.size].width; }, function (_a) {
     var bgColor = _a.bgColor;
     return bgColor;
+}, function (props) { return SIZE_ENUM_TO_NUM_BAR[props.size].height; }, function (_a) {
+    var barColor = _a.barColor;
+    return barColor;
 });
 var S_ProgressDesign7 = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  flex-direction: column;\n  font-weight: bold;\n  width: ", "px;\n\n  .progress-bar-container {\n    background-color: ", ";\n    height: ", "px;\n    overflow: hidden;\n    position: relative;\n    width: 100%;\n  }\n\n  .progress-bar-fill {\n    background-color: ", ";\n    height: 100%;\n    transition: width 0.1s ease-out;\n    width: calc(var(--progress) * 100%);\n  }\n"], ["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  flex-direction: column;\n  font-weight: bold;\n  width: ", "px;\n\n  .progress-bar-container {\n    background-color: ", ";\n    height: ", "px;\n    overflow: hidden;\n    position: relative;\n    width: 100%;\n  }\n\n  .progress-bar-fill {\n    background-color: ", ";\n    height: 100%;\n    transition: width 0.1s ease-out;\n    width: calc(var(--progress) * 100%);\n  }\n"])), function (_a) {
     var barColor = _a.barColor;

package/package.json

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