pds-dev-kit-web-test 2.7.229 → 2.7.231

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

@@ -24,13 +24,14 @@ var react_1 = require("react");
 var styled_components_1 = __importDefault(require("styled-components"));
 var progressConfigs_1 = require("./progressConfigs");
 var CustomProgressbar = function (_a) {
-    var styles = _a.styles, progressRef = _a.progressRef, leftTimeMsRef = _a.leftTimeMsRef;
+    var styles = _a.styles, progressRef = _a.progressRef, leftTimeMsRef = _a.leftTimeMsRef, slidesLength = _a.slidesLength;
     var _b = (0, react_1.useState)(0), leftTimeSec = _b[0], setLeftTimeSec = _b[1];
     var _c = (0, react_1.useState)(0), progress = _c[0], setProgress = _c[1];
     (0, react_1.useEffect)(function () {
         var updateTimer = function () {
             var _a;
-            var sec = Math.abs(((_a = leftTimeMsRef.current) !== null && _a !== void 0 ? _a : 10000) / 1000);
+            var remainingMs = (_a = leftTimeMsRef.current) !== null && _a !== void 0 ? _a : 0;
+            var sec = Math.max(0, Math.ceil(remainingMs / 1000));
             setLeftTimeSec(sec);
         };
         updateTimer();
@@ -55,19 +56,21 @@ var CustomProgressbar = function (_a) {
         animationId = requestAnimationFrame(updateProgress);
         return function () { return cancelAnimationFrame(animationId); };
     }, []);
+    var progressRender = slidesLength > 1 ? progress : 0;
+    var timeLeftRender = slidesLength > 1 ? leftTimeSec : 0;
     var renderProgressByType = function () {
         var _a, _b, _c, _d, _e;
         switch (styles.type) {
             case 'NONE':
                 return null;
             case 'DESIGN1':
-                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { size: (_a = styles.size) !== null && _a !== void 0 ? _a : 'MEDIUM', progress: progress, leftTimeSec: leftTimeSec, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
+                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { size: (_a = styles.size) !== null && _a !== void 0 ? _a : 'MEDIUM', progress: progressRender, leftTimeSec: timeLeftRender, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
             // case 'DESIGN2':
             //   return (
             //     <ProgressDesign2
             //       size={styles.size ?? 'MEDIUM'}
-            //       progress={progress}
-            //       leftTimeSec={leftTimeSec}
+            //       progress={progressRender}
+            //       leftTimeSec={timeLeftRender}
             //       progressColor={styles.primaryColor}
             //       bufferColor={styles.secondaryColor}
             //     />
@@ -76,37 +79,37 @@ var CustomProgressbar = function (_a) {
             //   return (
             //     <ProgressDesign3
             //       size={styles.size ?? 'MEDIUM'}
-            //       progress={progress}
+            //       progress={progressRender}
             //       progressColor={styles.primaryColor}
             //       bufferColor={styles.secondaryColor}
             //     />
             //   );
             case 'DESIGN2':
-                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign4, { size: (_b = styles.size) !== null && _b !== void 0 ? _b : 'MEDIUM', progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
+                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign4, { size: (_b = styles.size) !== null && _b !== void 0 ? _b : 'MEDIUM', progress: progressRender, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
             // case 'DESIGN5':
             //   return (
             //     <ProgressDesign5
             //       size={styles.size ?? 'MEDIUM'}
-            //       progress={progress}
+            //       progress={progressRender}
             //       progressColor={styles.primaryColor}
             //       bufferColor={styles.secondaryColor}
             //     />
             //   );
             case 'DESIGN3':
-                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign6, { size: (_c = styles.size) !== null && _c !== void 0 ? _c : 'MEDIUM', progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
+                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign6, { size: (_c = styles.size) !== null && _c !== void 0 ? _c : 'MEDIUM', progress: progressRender, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
             case 'DESIGN4':
-                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign7, { size: (_d = styles.size) !== null && _d !== void 0 ? _d : 'MEDIUM', progress: progress, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
+                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign7, { size: (_d = styles.size) !== null && _d !== void 0 ? _d : 'MEDIUM', progress: progressRender, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
             // case 'DESIGN8':
             //   return (
             //     <ProgressDesign8
             //       size={styles.size ?? 'MEDIUM'}
-            //       progress={progress}
+            //       progress={progressRender}
             //       progressColor={styles.primaryColor}
             //       bufferColor={styles.secondaryColor}
             //     />
             //   );
             default:
-                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { size: (_e = styles.size) !== null && _e !== void 0 ? _e : 'MEDIUM', progress: progress, leftTimeSec: leftTimeSec, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
+                return ((0, jsx_runtime_1.jsx)(progressConfigs_1.ProgressDesign1, { size: (_e = styles.size) !== null && _e !== void 0 ? _e : 'MEDIUM', progress: progressRender, leftTimeSec: timeLeftRender, progressColor: styles.primaryColor, bufferColor: styles.secondaryColor }));
         }
     };
     return ((0, jsx_runtime_1.jsx)(S_ProgressWrapper, __assign({ className: "cb-contentscarousel-progressbar-wrapper", "$size": styles.size }, { children: renderProgressByType() })));

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

@@ -0,0 +1,5 @@
+import type { ContentsCarouselElementsProps } from '../ContentsCarousel';
+import type { CSSProperties } from 'styled-components';
+export declare function getPosition(position: string, designType: string, size: string, elementType: ContentsCarouselElementsProps['type'] | 'GROUP'): CSSProperties;
+export declare const POS_INSET: Record<string, CSSProperties>;
+export declare const POS_OUTSET_NAVIGATION: Record<string, CSSProperties>;

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

@@ -0,0 +1,243 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.POS_OUTSET_NAVIGATION = exports.POS_INSET = exports.getPosition = void 0;
+var GAP = 8;
+function getPosition(position, designType, size, elementType) {
+    if (position.startsWith('OUTSET')) {
+        if (elementType === 'GROUP') {
+            return POS_OUTSET_GROUP[position];
+        }
+        if (elementType === 'PROGRESSBAR') {
+            return exports.POS_INSET[position];
+        }
+        if (elementType === 'NEXT' || elementType === 'PREV') {
+            return exports.POS_OUTSET_NAVIGATION[position];
+        }
+        var val = POS_OUTSET_PAGINATION[position][designType];
+        return val;
+        // return POS_OUTSET_PAGINATION[position][designType][size];
+    }
+    if (elementType === 'GROUP') {
+        return exports.POS_INSET[position];
+    }
+    return {};
+}
+exports.getPosition = getPosition;
+var POS_OUTSET_PAGINATION = {
+    OUTSET1: {
+        DESIGN1: { bottom: 15 },
+        DESIGN3: { bottom: 15 },
+        DESIGN5: { bottom: 15 },
+        DESIGN7: { bottom: 15 },
+        DESIGN9: { bottom: 15 },
+        DESIGN11: { bottom: 15 },
+        DESIGN13: { bottom: 15 },
+        DESIGN15: { bottom: 20 }
+    },
+    OUTSET2: {
+        DESIGN1: { bottom: 15 },
+        DESIGN3: { bottom: 15 },
+        DESIGN5: { bottom: 15 },
+        DESIGN7: { bottom: 15 },
+        DESIGN9: { bottom: 15 },
+        DESIGN11: { bottom: 15 },
+        DESIGN13: { bottom: 15 },
+        DESIGN15: { bottom: 20 }
+    },
+    OUTSET3: {
+        DESIGN1: { bottom: 15 },
+        DESIGN3: { bottom: 15 },
+        DESIGN5: { bottom: 15 },
+        DESIGN7: { bottom: 15 },
+        DESIGN9: { bottom: 15 },
+        DESIGN11: { bottom: 15 },
+        DESIGN13: { bottom: 15 },
+        DESIGN15: { bottom: 20 }
+    },
+    OUTSET4: {
+        DESIGN1: { left: 15 },
+        DESIGN3: { left: 15 },
+        DESIGN5: { left: 15 },
+        DESIGN7: { left: 15 },
+        DESIGN9: { left: 15 },
+        DESIGN11: { left: 15 },
+        DESIGN13: { left: 15 },
+        DESIGN15: { left: 15 }
+    },
+    OUTSET5: {
+        DESIGN1: { left: 15 },
+        DESIGN3: { left: 15 },
+        DESIGN5: { left: 15 },
+        DESIGN7: { left: 15 },
+        DESIGN9: { left: 15 },
+        DESIGN11: { left: 15 },
+        DESIGN13: { left: 15 },
+        DESIGN15: { left: 15 }
+    },
+    OUTSET6: {
+        DESIGN1: { left: 15 },
+        DESIGN3: { left: 15 },
+        DESIGN5: { left: 15 },
+        DESIGN7: { left: 15 },
+        DESIGN9: { left: 15 },
+        DESIGN11: { left: 15 },
+        DESIGN13: { left: 15 },
+        DESIGN15: { left: 15 }
+    },
+    OUTSET7: {
+        DESIGN1: { top: 15 },
+        DESIGN3: { top: 15 },
+        DESIGN5: { top: 15 },
+        DESIGN7: { top: 15 },
+        DESIGN9: { top: 15 },
+        DESIGN11: { top: 15 },
+        DESIGN13: { top: 15 },
+        DESIGN15: { top: 20 }
+    },
+    OUTSET8: {
+        DESIGN1: { top: 15 },
+        DESIGN3: { top: 15 },
+        DESIGN5: { top: 15 },
+        DESIGN7: { top: 15 },
+        DESIGN9: { top: 15 },
+        DESIGN11: { top: 15 },
+        DESIGN13: { top: 15 },
+        DESIGN15: { top: 20 }
+    },
+    OUTSET9: {
+        DESIGN1: { top: 15 },
+        DESIGN3: { top: 15 },
+        DESIGN5: { top: 15 },
+        DESIGN7: { top: 15 },
+        DESIGN9: { top: 15 },
+        DESIGN11: { top: 15 },
+        DESIGN13: { top: 15 },
+        DESIGN15: { top: 20 }
+    },
+    OUTSET10: {
+        DESIGN1: { right: 15 },
+        DESIGN3: { right: 15 },
+        DESIGN5: { right: 15 },
+        DESIGN7: { right: 15 },
+        DESIGN9: { right: 15 },
+        DESIGN11: { right: 15 },
+        DESIGN13: { right: 15 },
+        DESIGN15: { right: 15 }
+    },
+    OUTSET11: {
+        DESIGN1: { right: 15 },
+        DESIGN3: { right: 15 },
+        DESIGN5: { right: 15 },
+        DESIGN7: { right: 15 },
+        DESIGN9: { right: 15 },
+        DESIGN11: { right: 15 },
+        DESIGN13: { right: 15 },
+        DESIGN15: { right: 15 }
+    },
+    OUTSET12: {
+        DESIGN1: { right: 15 },
+        DESIGN3: { right: 15 },
+        DESIGN5: { right: 15 },
+        DESIGN7: { right: 15 },
+        DESIGN9: { right: 15 },
+        DESIGN11: { right: 15 },
+        DESIGN13: { right: 15 },
+        DESIGN15: { right: 15 }
+    }
+};
+exports.POS_INSET = {
+    INSET1: { top: GAP, left: GAP },
+    INSET2: { top: GAP, left: '50%', transform: 'translateX(-50%)' },
+    INSET3: { top: GAP, right: GAP },
+    INSET4: { top: '50%', right: GAP, transform: 'translateY(-50%)' },
+    INSET5: { bottom: GAP, right: GAP },
+    INSET6: { bottom: GAP, left: '50%', transform: 'translateX(-50%)' },
+    INSET7: { left: GAP, bottom: GAP },
+    INSET8: { top: '50%', left: GAP, transform: 'translateY(-50%)' }
+};
+exports.POS_OUTSET_NAVIGATION = {
+    OUTSET1: { bottom: 20 },
+    OUTSET2: { bottom: 20 },
+    OUTSET3: { bottom: 20 },
+    OUTSET4: { left: 20 },
+    OUTSET5: { left: 20 },
+    OUTSET6: { left: 20 },
+    OUTSET7: { top: 20 },
+    OUTSET8: { top: 20 },
+    OUTSET9: { top: 20 },
+    OUTSET10: { right: 20 },
+    OUTSET11: { right: 20 },
+    OUTSET12: { right: 20 }
+};
+var POS_OUTSET_GROUP = {
+    OUTSET1: {
+        top: 0,
+        height: 0
+    },
+    OUTSET2: {
+        bottom: '100%',
+        height: 0,
+        left: '50%',
+        transform: 'translateX(-50%)'
+    },
+    OUTSET3: {
+        bottom: '100%',
+        height: 0,
+        right: 0,
+        justifyContent: 'flex-start'
+    },
+    OUTSET4: {
+        top: 0,
+        width: 0,
+        right: 0
+    },
+    OUTSET5: {
+        top: '50%',
+        width: 0,
+        right: 0,
+        transform: 'translateY(-50%)'
+    },
+    OUTSET6: {
+        bottom: 0,
+        width: 0,
+        right: 0
+    },
+    OUTSET7: {
+        bottom: 0,
+        height: 0,
+        right: 0
+    },
+    OUTSET8: {
+        bottom: 0,
+        height: 0,
+        left: '50%',
+        transform: 'translateX(-50%)'
+    },
+    OUTSET9: {
+        bottom: 0,
+        height: 0,
+        left: 0
+    },
+    OUTSET10: {
+        bottom: 0,
+        width: 0,
+        left: 0
+    },
+    OUTSET11: {
+        top: '50%',
+        width: 0,
+        left: 0,
+        transform: 'translateY(-50%)'
+    },
+    OUTSET12: {
+        top: 0,
+        width: 0,
+        left: 0
+    }
+};
+// export const POS_OUTSET = {
+//   PAGINATION: POS_OUTSET_PAGINATION,
+//   PREV: POS_OUTSET_NAVIGATION,
+//   NEXT: POS_OUTSET_NAVIGATION,
+//   GROUP: POS_OUTSET_GROUP
+// };

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

@@ -13,6 +13,6 @@ export declare const useFlexGridLayout: ({ components }: {
         left: string;
     };
     componentGroups: Record<string, ContentsCarouselElementsProps[]>;
-    getPositionStyle: (position: string, ccbInset: Record<string, string>) => CSSProperties;
+    getPositionStyle: (position: string, ccbInset: Record<string, string>, designType: string, size: 'LARGE' | 'MEDIUM' | 'SMALL' | 'GROUP', elementType: string) => CSSProperties;
     getComponentGroupLayout: (components: ContentsCarouselElementsProps[], position: string) => CSSProperties;
 };

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

@@ -13,6 +13,7 @@ var __assign = (this && this.__assign) || function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFlexGridLayout = void 0;
 var react_1 = require("react");
+var elementPositions_1 = require("../../SlideBanner/hooks/elementPositions");
 var useFlexGridLayout = function (_a) {
     var components = _a.components;
     var _b = (0, react_1.useState)({ top: 0, right: 0, bottom: 0, left: 0 }), groupSizes = _b[0], setGroupSizes = _b[1];
@@ -60,50 +61,33 @@ var useFlexGridLayout = function (_a) {
         return directions[position];
     };
     // 위치에 따른 스타일 결정 (CCB 크기를 고려)
-    var getPositionStyle = function (position, ccbInset) {
+    var getPositionStyle = function (position, ccbInset, designType, size, elementType) {
+        var EAST = ['OUTSET4', 'OUTSET5', 'OUTSET6'];
+        var WEST = ['OUTSET10', 'OUTSET11', 'OUTSET12'];
+        var SOUTH = ['OUTSET7', 'OUTSET8', 'OUTSET9'];
+        var NORTH = ['OUTSET1', 'OUTSET2', 'OUTSET3'];
+        var isEAST = EAST.includes(position);
+        var isWEST = WEST.includes(position);
+        var isSOUTH = SOUTH.includes(position);
+        var isNORTH = NORTH.includes(position);
         var base = {
-            position: 'absolute',
+            position: 'relative',
             display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center'
+            alignItems: isSOUTH ? 'flex-start' : isNORTH ? 'flex-end' : 'center',
+            justifyContent: isEAST ? 'flex-start' : isWEST ? 'flex-end' : 'center'
         };
-        // CCB의 중앙 위치 계산
-        var ccbTop = parseFloat(ccbInset.top) || 0;
-        var ccbRight = parseFloat(ccbInset.right) || 0;
-        var ccbBottom = parseFloat(ccbInset.bottom) || 0;
-        var ccbLeft = parseFloat(ccbInset.left) || 0;
-        // CCB의 실제 크기와 중앙 위치 계산
-        var ccbWidth = layoutSize.width - ccbLeft - ccbRight;
-        var ccbHeight = layoutSize.height - ccbTop - ccbBottom;
-        var ccbCenterX = ccbLeft + ccbWidth / 2;
-        var ccbCenterY = ccbTop + ccbHeight / 2;
-        var positions = {
-            OUTSET1: { top: -50, left: ccbLeft },
-            OUTSET2: { top: -50, left: "".concat(ccbCenterX, "px"), transform: 'translateX(-50%)' },
-            OUTSET3: { top: -50, right: ccbRight },
-            OUTSET4: { top: ccbTop, right: -50 },
-            OUTSET5: { top: "".concat(ccbCenterY, "px"), right: -50, transform: 'translateY(-50%)' },
-            OUTSET6: { bottom: ccbBottom, right: -50 },
-            OUTSET7: { bottom: -50, right: ccbRight },
-            OUTSET8: { bottom: -50, left: "".concat(ccbCenterX, "px"), transform: 'translateX(-50%)' },
-            OUTSET9: { bottom: -50, left: ccbLeft },
-            OUTSET10: { bottom: ccbBottom, left: -50 },
-            OUTSET11: { top: "".concat(ccbCenterY, "px"), left: -50, transform: 'translateY(-50%)' },
-            OUTSET12: { top: ccbTop, left: -50 },
-            INSET1: { top: ccbTop + GAP, left: ccbLeft + GAP },
-            INSET2: { top: ccbTop + GAP, left: "".concat(ccbCenterX, "px"), transform: 'translateX(-50%)' },
-            INSET3: { top: ccbTop + GAP, right: ccbRight + GAP },
-            INSET4: { top: "".concat(ccbCenterY, "px"), right: ccbRight + GAP, transform: 'translateY(-50%)' },
-            INSET5: { bottom: ccbBottom + GAP, right: ccbRight + GAP },
-            INSET6: {
-                bottom: ccbBottom + GAP,
-                left: "".concat(ccbCenterX, "px"),
-                transform: 'translateX(-50%)'
-            },
-            INSET7: { bottom: ccbBottom + GAP, left: ccbLeft + GAP },
-            INSET8: { top: "".concat(ccbCenterY, "px"), left: ccbLeft + GAP, transform: 'translateY(-50%)' }
-        };
-        return __assign(__assign({}, base), positions[position]);
+        // // CCB의 중앙 위치 계산
+        // const ccbTop = parseFloat(ccbInset.top) || 0;
+        // const ccbRight = parseFloat(ccbInset.right) || 0;
+        // const ccbBottom = parseFloat(ccbInset.bottom) || 0;
+        // const ccbLeft = parseFloat(ccbInset.left) || 0;
+        // // CCB의 실제 크기와 중앙 위치 계산
+        // const ccbWidth = layoutSize.width - ccbLeft - ccbRight;
+        // const ccbHeight = layoutSize.height - ccbTop - ccbBottom;
+        // const ccbCenterX = ccbLeft + ccbWidth / 2;
+        // const ccbCenterY = ccbTop + ccbHeight / 2;
+        var pos = (0, elementPositions_1.getPosition)(position, designType, size, elementType);
+        return __assign(__assign({}, base), pos);
     };
     // 컴포넌트 그룹 레이아웃
     var getComponentGroupLayout = function (components, position) {
@@ -129,8 +113,7 @@ var useFlexGridLayout = function (_a) {
         return {
             display: 'flex',
             flexDirection: isHorizontal ? 'row' : 'column',
-            gap: '8px',
-            alignItems: 'center'
+            gap: '8px'
         };
     };
     // ccbInset 계산

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

@@ -8,7 +8,7 @@ export declare function useSwiper(): {
     isEnd: boolean;
     onSwiper: (swiper: SwiperClass) => void;
     onSlideChangeTransitionEnd: (swiper: SwiperClass) => void;
-    onAutoplayTimeLeft: (_: SwiperClass, time: number, progress: number) => void;
+    onAutoplayTimeLeft: (swiper: SwiperClass, time: number, progress: number) => void;
     onClickPrevBtn: () => void;
     onClickNextBtn: () => void;
 };

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

@@ -16,7 +16,7 @@ function useSwiper() {
         setIsBeginning(swiper.isBeginning);
         setIsEnd(swiper.isEnd);
     };
-    var onAutoplayTimeLeft = (0, react_1.useCallback)(function (_, time, progress) {
+    var onAutoplayTimeLeft = (0, react_1.useCallback)(function (swiper, time, progress) {
         leftTimeMsRef.current = time;
         progressRef.current = progress;
     }, []);

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { OUTSET_POSTIION, INSET_POSTIION } from './types';
+import type { OUTSET_POSTIION, INSET_POSTIION, CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE_TYPE } from './types';
 import type { CB_LIST } from '../../../../../../../DynamicLayout/sections/CustomSection/types';
 import type { CB_LIST_PROPERTIES_TYPE, IndexForIntersection } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
 type Props = CB_LIST_PROPERTIES_TYPE & IndexForIntersection & {
@@ -9,6 +9,8 @@ type ComponentType = 'PAGINATION';
 export type ContentsListElementsProps = {
     type: ComponentType;
     position: OUTSET_POSTIION | INSET_POSTIION;
+    designType: CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE_TYPE;
+    size: 'LARGE' | 'MEDIUM' | 'SMALL';
 };
 declare function ContentsList(props: Props): JSX.Element;
 export default ContentsList;

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

@@ -30,6 +30,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable @typescript-eslint/no-unused-vars */
 var react_1 = require("react");
+var react_i18next_1 = require("react-i18next");
 var CustomSectionBackgroundMedia_1 = require("../../../../../../../DynamicLayout/components/Section/components/CustomSectionBackgroundMedia");
 var createCompositions_1 = require("../../../../../../../DynamicLayout/CompositionRenderer/createCompositions");
 var dynamicLayoutContext_1 = require("../../../../../../../DynamicLayout/dynamicLayoutContext");
@@ -42,8 +43,10 @@ var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
 var CustomPagination_1 = require("./components/CustomPagination");
 var contentsListUtils_1 = require("./contentsListUtils");
 var useFlexGridLayout_1 = require("./hooks/useFlexGridLayout");
-var createComponent = function (type, getDesignType, getLocation) {
-    return function (normalStyle, hoverStyle, isHovered) {
+var createComponent = function (type, getDesignType, getLocation, designType, size) {
+    if (size === void 0) { size = 'MEDIUM'; }
+    return function (normalStyle, hoverStyle, isHovered, size) {
+        if (size === void 0) { size = 'MEDIUM'; }
         var normalDesign = getDesignType(normalStyle);
         var hoverDesign = getDesignType(hoverStyle);
         if (isHovered && hoverDesign === 'NONE')
@@ -52,7 +55,9 @@ var createComponent = function (type, getDesignType, getLocation) {
             return undefined;
         return {
             type: type,
-            position: isHovered ? getLocation(hoverStyle) : getLocation(normalStyle)
+            position: isHovered ? getLocation(hoverStyle) : getLocation(normalStyle),
+            designType: designType,
+            size: size
         };
     };
 };
@@ -60,20 +65,26 @@ function ContentsList(props) {
     var _a, _b, _c, _d, _e, _f;
     var _g = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _g.device, mode = _g.mode, queryData = _g.queryData;
     var index = props.index, compositions = props.compositions, CB_CONTENT_PROP_CONTENTSLIST = props.CB_CONTENT_PROP_CONTENTSLIST, CB_STYLE_PROP_CONTENTSLISTDESIGN = props.CB_STYLE_PROP_CONTENTSLISTDESIGN, CB_STYLE_PROP_CONTENTSLISTPAGINATION = props.CB_STYLE_PROP_CONTENTSLISTPAGINATION, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM, CB_LAYOUT_PROP_PADDING = props.CB_LAYOUT_PROP_PADDING, CB_STYLE_PROP_BGMEDIA = props.CB_STYLE_PROP_BGMEDIA, CB_STYLE_PROP_BGOVERLAY = props.CB_STYLE_PROP_BGOVERLAY;
-    var CB_CONTENT_PROP_CONTENTSLIST_SPEC_ITEMCOUNTS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_ITEMCOUNTS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE, CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA, CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS;
+    var CB_CONTENT_PROP_CONTENTSLIST_SPEC_ITEMCOUNTS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_ITEMCOUNTS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MDISPLAYCOUNTS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_MDISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE, CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA, CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MCOLUMNS = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_MCOLUMNS;
     var _h = (0, react_1.useState)(false), isHovered = _h[0], setIsHovered = _h[1];
     var _j = (0, react_1.useState)(1), currentPage = _j[0], setCurrentPage = _j[1];
     var parsedQueryPath = removeFirstSegment(CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA);
     var queryDataValue = queryData === null || queryData === void 0 ? void 0 : queryData[parsedQueryPath];
-    var displayCounts = CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS !== null && CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS !== void 0 ? CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS : CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS.length;
+    // list의 minheight / minwidth를 계산
+    var numberOfColumns = device === 'DESKTOP'
+        ? CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS
+        : CB_CONTENT_PROP_CONTENTSLIST_SPEC_MCOLUMNS;
+    var displayCounts = device === 'DESKTOP'
+        ? CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS
+        : CB_CONTENT_PROP_CONTENTSLIST_SPEC_MDISPLAYCOUNTS !== null && CB_CONTENT_PROP_CONTENTSLIST_SPEC_MDISPLAYCOUNTS !== void 0 ? CB_CONTENT_PROP_CONTENTSLIST_SPEC_MDISPLAYCOUNTS : CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS.length;
     var totalPage = Math.ceil((CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE === 'DATA' && queryDataValue
         ? queryDataValue === null || queryDataValue === void 0 ? void 0 : queryDataValue.length
-        : CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS.length) /
-        CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS);
+        : CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS.length) / displayCounts);
     var CB_STYLE_PROP_CONTENTSLIST = __assign(__assign({}, CB_STYLE_PROP_CONTENTSLISTDESIGN), CB_STYLE_PROP_CONTENTSLISTPAGINATION);
     var _k = (0, util_1.parseProperties)(props, device), style = _k.style, hoverStyle = _k.hoverStyle, layout = _k.layout, effect = _k.effect, overlayStyle = _k.overlayStyle;
     var contentPropCss = (0, contentsListUtils_1.parseGridContentProp)({
-        props: CB_CONTENT_PROP_CONTENTSLIST
+        props: CB_CONTENT_PROP_CONTENTSLIST,
+        device: device
     }).contentPropCss;
     var _l = (0, contentsListUtils_1.parseGridStyleProp)({
         props: CB_STYLE_PROP_CONTENTSLIST,
@@ -101,11 +112,8 @@ function ContentsList(props) {
     var handlePageClick = function (page) {
         setCurrentPage(page);
     };
-    // CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS ?? CB_CONTENT_PROP_CONTENTSLIST_SPEC_ITEMCOUNTS;
     var startIndex = (currentPage - 1) * displayCounts;
     var endIndex = startIndex + (displayCounts - 1);
-    // list의 minheight / minwidth를 계산
-    var numberOfColumns = CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS;
     // NOTE: edit환경에서 hover가 작동하지 않아서 제외함 필요시 추가..
     var columnGapEnum = device === 'DESKTOP'
         ? CB_STYLE_PROP_CONTENTSLIST.CB_STYLE_PROP_CONTENTSLISTDESIGN_SPEC_ITEMSPACING
@@ -130,7 +138,7 @@ function ContentsList(props) {
     var listMinHeight = oneCompositionMinHeight * numberOfRows +
         (numberOfRows - 1) * rowGap +
         paddingTB;
-    var createPagination = createComponent('PAGINATION', function (style) { return style.type || 'NONE'; }, function (style) { return style.location || 'OUTSET1'; });
+    var createPagination = createComponent('PAGINATION', function (style) { return style.type || 'NONE'; }, function (style) { return style.location || 'OUTSET1'; }, paginationNormalStyle.type || 'NONE', paginationNormalStyle.size || 'MEDIUM');
     var components = [
         createPagination(paginationNormalStyle, paginationHoverStyle, isHovered)
     ].filter(function (component) { return component !== undefined; });
@@ -143,10 +151,10 @@ function ContentsList(props) {
         bottom: '0px',
         left: '0px'
     };
-    var renderElements = function (component) {
+    var renderElements = function (component, positionStyle) {
         switch (component.type) {
             case 'PAGINATION':
-                return ((0, jsx_runtime_1.jsx)(CustomPagination_1.CustomPagination, { styles: isHovered ? paginationHoverStyle : paginationNormalStyle, current: currentPage, total: totalPage, onPageClick: handlePageClick }));
+                return ((0, jsx_runtime_1.jsx)("div", __assign({ style: positionStyle }, { children: (0, jsx_runtime_1.jsx)(CustomPagination_1.CustomPagination, { styles: isHovered ? paginationHoverStyle : paginationNormalStyle, current: currentPage, total: totalPage, onPageClick: handlePageClick, style: positionStyle }) })));
             default:
                 return null;
         }
@@ -169,8 +177,10 @@ function ContentsList(props) {
                         else {
                             delete positionRefs.current[position];
                         }
-                    }, style: __assign(__assign({}, getPositionStyle(position, ccbInset)), { zIndex: 3 }) }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-contentslist-button-layout-box", style: getComponentGroupLayout(groupComponents, position) }, { children: groupComponents.map(function (component) { return renderElements(component); }) })) }), position));
-            }), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsxs)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ id: "contentslist-box", className: "cb-layout-box ccb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), editModeStyle), { overflow: 'hidden' }), hoverStyle: __assign(__assign({}, hoverStyle), { overflow: 'hidden' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, "data-number-of-items": CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS.length, "data-number-of-columns": Math.min(CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS.length), "data-row-gap": rowGap, "data-column-gap": columnGap, "data-cols": Math.min(CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS.length), "data-min-width": listMinWidth, "data-min-height": listMinHeight, "data-inset-top": parseFloat(ccbInset.top), "data-inset-bottom": parseFloat(ccbInset.bottom) }, { children: [(0, jsx_runtime_1.jsx)(S_CustomBackgroundWrapper, __assign({ ref: backgroundRef, style: __assign(__assign({}, effect), { background: style.background }) }, { children: isBgMedia && CB_STYLE_PROP_BGMEDIA && ((0, jsx_runtime_1.jsx)(CustomSectionBackgroundMedia_1.CustomSectionBackgroundMedia, { specs: CB_STYLE_PROP_BGMEDIA, componentStyle: style, playerId: index, mediaType: mediaType || 'NONE', device: isMobile ? 'MOBILE' : 'DESKTOP', backgroundRef: backgroundRef })) })), (0, jsx_runtime_1.jsx)(S_Overlay, { style: overlayStyle }), (0, jsx_runtime_1.jsx)(S_ContentsListLayout, __assign({ className: "cb-contentslist-layout-box", ref: layoutRef, style: {
+                    }, style: __assign(__assign({}, getPositionStyle(position, ccbInset, 'GROUP', 'GROUP', 'GROUP')), { zIndex: 3, position: 'absolute' }) }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "cb-contentslist-button-layout-box", style: getComponentGroupLayout(groupComponents, position) }, { children: groupComponents.map(function (component) {
+                            return renderElements(component, getPositionStyle(position, ccbInset, component.designType, component.size, component.type));
+                        }) })) }), position));
+            }), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsxs)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ id: "contentslist-box", className: "cb-layout-box ccb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), editModeStyle), { overflow: 'hidden' }), hoverStyle: __assign(__assign({}, hoverStyle), { overflow: 'hidden' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, "data-number-of-items": CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS.length, "data-number-of-columns": Math.min(numberOfColumns, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS.length), "data-row-gap": rowGap, "data-column-gap": columnGap, "data-cols": Math.min(numberOfColumns, CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS.length), "data-min-width": listMinWidth, "data-min-height": listMinHeight, "data-inset-top": parseFloat(ccbInset.top), "data-inset-bottom": parseFloat(ccbInset.bottom) }, { children: [(0, jsx_runtime_1.jsx)(S_CustomBackgroundWrapper, __assign({ ref: backgroundRef, style: __assign(__assign({}, effect), { background: style.background }) }, { children: isBgMedia && CB_STYLE_PROP_BGMEDIA && ((0, jsx_runtime_1.jsx)(CustomSectionBackgroundMedia_1.CustomSectionBackgroundMedia, { specs: CB_STYLE_PROP_BGMEDIA, componentStyle: style, playerId: index, mediaType: mediaType || 'NONE', device: isMobile ? 'MOBILE' : 'DESKTOP', backgroundRef: backgroundRef })) })), (0, jsx_runtime_1.jsx)(S_Overlay, { style: overlayStyle }), orderedCompositions.length > 0 ? ((0, jsx_runtime_1.jsx)(S_ContentsListLayout, __assign({ className: "cb-contentslist-layout-box", ref: layoutRef, style: {
                                 display: layout.display,
                                 flexDirection: layout.flexDirection,
                                 justifyContent: layout.justifyContent
@@ -182,7 +192,7 @@ function ContentsList(props) {
                                     limit: displayCounts,
                                     queryData: queryData,
                                     compositions: orderedCompositions
-                                }).slice(startIndex, endIndex + 1) })) }))] })) }))] }));
+                                }).slice(startIndex, endIndex + 1) })) }))) : ((0, jsx_runtime_1.jsx)(EmptyString, {}))] })) }))] }));
 }
 function getIsBgMedia(isMobile, specs) {
     if (!specs) {
@@ -272,5 +282,22 @@ function getCompositionMinValue(composition, device) {
         };
     }
 }
+function EmptyString() {
+    var t = (0, react_i18next_1.useTranslation)('translation').t;
+    return (0, jsx_runtime_1.jsx)(S_EmptyLayer, { children: t('str_9806') });
+}
+var S_EmptyLayer = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: rgba(0, 0, 0, 0.6);\n  color: white;\n  display: flex;\n  font-size: ", ";\n  font-weight: ", ";\n  justify-content: center;\n  line-height: ", ";\n  margin: auto;\n  padding: ", ";\n  text-align: center;\n  width: 100%;\n  word-break: keep-all;\n"], ["\n  background-color: rgba(0, 0, 0, 0.6);\n  color: white;\n  display: flex;\n  font-size: ", ";\n  font-weight: ", ";\n  justify-content: center;\n  line-height: ", ";\n  margin: auto;\n  padding: ", ";\n  text-align: center;\n  width: 100%;\n  word-break: keep-all;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.desktopFontSize.body2;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.fontWeight.bold;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.desktopLineHeight.body2;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+});
 exports.default = ContentsList;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -4,7 +4,8 @@ interface Props {
     current: number;
     total: number;
     styles: CustomPaginationProps;
+    style: React.CSSProperties;
     onPageClick: (page: number) => void;
 }
-export declare const CustomPagination: ({ current, total, styles, onPageClick }: Props) => JSX.Element;
+export declare const CustomPagination: ({ current, total, styles, style, onPageClick }: Props) => JSX.Element;
 export default CustomPagination;