pds-dev-kit-web-test 2.5.413 → 2.5.414

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

@@ -32,11 +32,15 @@ var contentsListUtils_1 = require("./contentsListUtils");
 function ContentsList(props) {
     var _a = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _a.device, mode = _a.mode, queryData = _a.queryData;
     var index = props.index, compositions = props.compositions, CB_CONTENT_PROP_CONTENTSLIST = props.CB_CONTENT_PROP_CONTENTSLIST, CB_STYLE_PROP_CONTENTSLIST = props.CB_STYLE_PROP_CONTENTSLIST, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
-    var 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;
+    var 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;
     var _b = (0, react_1.useState)(false), isHovered = _b[0], setIsHovered = _b[1];
     var _c = (0, react_1.useState)(1), currentPage = _c[0], setCurrentPage = _c[1];
     var itemCounts = CB_CONTENT_PROP_CONTENTSLIST.CB_CONTENT_PROP_CONTENTSLIST_SPEC_ITEMCOUNTS;
-    var totalPage = Math.ceil(compositions.length / itemCounts);
+    var parsedQueryPath = removeFirstSegment(CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA);
+    var queryDataValue = queryData === null || queryData === void 0 ? void 0 : queryData[parsedQueryPath];
+    var totalPage = Math.ceil((CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE === 'DATA' && queryDataValue
+        ? queryDataValue === null || queryDataValue === void 0 ? void 0 : queryDataValue.length
+        : compositions.length) / itemCounts);
     var _d = (0, util_1.parseProperties)(props, device), style = _d.style, hoverStyle = _d.hoverStyle, layout = _d.layout, effect = _d.effect;
     var contentPropCss = (0, contentsListUtils_1.parseGridContentProp)({
         props: CB_CONTENT_PROP_CONTENTSLIST
@@ -64,37 +68,45 @@ function ContentsList(props) {
     var effectVisibleStyle = hasEffect
         ? { opacity: isVisible ? 1 : 0, position: 'relative' }
         : { position: 'relative' };
-    // eslint-disable-next-line
-    var handlePrevBtnClick = function () {
-        if (currentPage === 1)
-            return;
-        setCurrentPage(function (prev) { return prev - 1; });
-    };
-    // eslint-disable-next-line
-    var handleNextBtnClick = function () {
-        if (currentPage === totalPage)
-            return;
-        setCurrentPage(function (prev) { return prev + 1; });
-    };
-    var handleBulletClick = function (index) {
-        setCurrentPage(index + 1);
+    var handlePageClick = function (page) {
+        setCurrentPage(page);
     };
     var startIndex = (currentPage - 1) * itemCounts;
     var endIndex = startIndex + itemCounts;
-    return ((0, jsx_runtime_1.jsxs)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: [(0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ id: "contentslist-box", className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), editModeStyle), { position: 'relative', overflow: 'hidden' }), hoverStyle: __assign(__assign({}, hoverStyle), { position: 'relative', overflow: 'hidden' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, "data-number-of-items": itemCounts, "data-number-of-columns": CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS, "data-row-gap": 1, "data-column-gap": 24 }, { children: (0, jsx_runtime_1.jsx)(S_ContentsListWrapper, __assign({ id: "contentslist-wrapper" }, { children: (0, jsx_runtime_1.jsx)(S_ContentsListGrid, __assign({ id: "contentslist-grid", contentPropCss: contentPropCss, stylePropCss: isHovered ? hoverStylePropCss : stylePropCss }, { children: (0, createCompositions_1.createCompositions)({
+    return ((0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ id: "contentslist-box", className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), editModeStyle), hoverStyle: __assign({}, hoverStyle), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: (0, jsx_runtime_1.jsxs)(S_ContentsListWrapper, { children: [(0, jsx_runtime_1.jsx)(S_ContentsListLayout, __assign({ contentPropCss: contentPropCss, stylePropCss: isHovered ? hoverStylePropCss : stylePropCss, borderStyle: {
+                            borderBottomLeftRadius: style.borderBottomLeftRadius,
+                            borderBottomRightRadius: style.borderBottomRightRadius,
+                            borderTopLeftRadius: style.borderTopLeftRadius,
+                            borderTopRightRadius: style.borderTopRightRadius,
+                            borderWidth: style.borderWidth,
+                            borderColor: style.borderColor,
+                            borderStyle: style.borderStyle
+                        }, hoverBorderStyle: {
+                            borderBottomLeftRadius: hoverStyle.borderBottomLeftRadius,
+                            borderBottomRightRadius: hoverStyle.borderBottomRightRadius,
+                            borderTopLeftRadius: hoverStyle.borderTopLeftRadius,
+                            borderTopRightRadius: hoverStyle.borderTopRightRadius,
+                            borderWidth: hoverStyle.borderWidth,
+                            borderColor: hoverStyle.borderColor,
+                            borderStyle: hoverStyle.borderStyle
+                        } }, { children: (0, createCompositions_1.createCompositions)({
                             valueType: CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE,
                             queryPath: CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA,
                             queryData: queryData,
                             compositions: compositions
-                        }).slice(startIndex, endIndex) })) })) })), (0, jsx_runtime_1.jsx)(CustomPagination_1.CustomPagination, { effectVisibleStyle: effectVisibleStyle, type: isHovered ? paginationHoverStyle.type : paginationNormalStyle.type, offset: isHovered ? paginationHoverStyle.offset : paginationNormalStyle.offset, current: currentPage, total: totalPage, size: isHovered ? paginationHoverStyle.size : paginationNormalStyle.size, onBulletClick: handleBulletClick })] })));
+                        }).slice(startIndex, endIndex) })), (0, jsx_runtime_1.jsx)(CustomPagination_1.CustomPagination, { type: isHovered ? paginationHoverStyle.type : paginationNormalStyle.type, offset: isHovered ? paginationHoverStyle.offset : paginationNormalStyle.offset, current: currentPage, total: totalPage, size: isHovered ? paginationHoverStyle.size : paginationNormalStyle.size, onPageClick: handlePageClick })] }) })) })));
 }
-var S_ContentsListWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  position: relative;\n  width: 100%;\n"], ["\n  height: 100%;\n  position: relative;\n  width: 100%;\n"])));
-var S_ContentsListGrid = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: grid;\n  height: 100%;\n\n  ", "\n  ", "\n"], ["\n  display: grid;\n  height: 100%;\n\n  ", "\n  ", "\n"])), function (_a) {
+var S_ContentsListWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  width: 100%;\n"], ["\n  height: 100%;\n  width: 100%;\n"])));
+var S_ContentsListLayout = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: grid;\n  height: 100%;\n  overflow: hidden;\n  width: 100%;\n\n  ", ";\n  ", ";\n"], ["\n  display: grid;\n  height: 100%;\n  overflow: hidden;\n  width: 100%;\n\n  ", ";\n  ", ";\n"])), function (_a) {
     var contentPropCss = _a.contentPropCss;
     return contentPropCss;
 }, function (_a) {
     var stylePropCss = _a.stylePropCss;
     return stylePropCss;
 });
+function removeFirstSegment(path) {
+    var segments = path.split('/');
+    return segments.slice(1).join('/');
+}
 exports.default = ContentsList;
 var templateObject_1, templateObject_2;

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

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import type { CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE_TYPE } from '../types';
 export interface CustomPaginationProps {
-    effectVisibleStyle?: React.CSSProperties;
     current?: number;
     total?: number;
     type?: CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE_TYPE;
@@ -15,9 +14,10 @@ export interface CustomPaginationProps {
         transformOrigin?: string;
     };
     size?: number;
-    onBulletClick?: (index: number) => void;
 }
-export declare const CustomPagination: ({ effectVisibleStyle, current, total, type, offset, size, onBulletClick }: CustomPaginationProps) => JSX.Element;
+export declare const CustomPagination: ({ current, total, type, offset, size, onPageClick }: CustomPaginationProps & {
+    onPageClick: (page: number) => void;
+}) => JSX.Element;
 export interface FlexBoxProps {
     direction?: 'row' | 'column';
     justifyContent?: string;

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

@@ -40,70 +40,69 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomPagination = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var components_1 = require("../../../../../../../../DynamicLayout/components");
 var styled_components_1 = __importStar(require("styled-components"));
+var paginationConfigs_1 = require("./paginationConfigs");
 var CustomPagination = function (_a) {
-    var effectVisibleStyle = _a.effectVisibleStyle, _b = _a.current, current = _b === void 0 ? 1 : _b, _c = _a.total, total = _c === void 0 ? 1 : _c, _d = _a.type, type = _d === void 0 ? 'NONE' : _d, _e = _a.offset, offset = _e === void 0 ? { top: '0' } : _e, _f = _a.size, size = _f === void 0 ? 1 : _f, onBulletClick = _a.onBulletClick;
-    var bullets = Array.from({ length: total }, function (_, i) { return i; });
-    return ((0, jsx_runtime_1.jsx)(S_Pagination, __assign({ className: "custom-pagination_".concat(current), "$offset": offset, "$size": size, effectVisibleStyle: effectVisibleStyle }, { children: (function () {
-            switch (type) {
-                case 'NONE':
-                case 'DESIGN1':
-                    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-                case 'DESIGN2':
-                    return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ styleTheme: "body2Bold", colorTheme: "sysTextBlack" }, { children: current })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { opacity: 0.6 }, styleTheme: "body2Regular", colorTheme: "sysTextBlack" }, { children: "/ ".concat(total) }))] })));
-                case 'DESIGN3':
-                    return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ styleTheme: "body2Bold" }, { children: current })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { opacity: 0.6 }, styleTheme: "body2Regular" }, { children: "/ ".concat(total) }))] })));
-                case 'DESIGN4':
-                    return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "8px" }, { children: [(0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ styleTheme: "body2Bold", colorTheme: "sysTextBlack" }, { children: current })), (0, jsx_runtime_1.jsx)(S_Divider, { type: "VERTICAL", color: "WHITE" }), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { opacity: 0.6 }, styleTheme: "body2Regular", colorTheme: "sysTextBlack" }, { children: total }))] })));
-                case 'DESIGN5':
-                    return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "8px" }, { children: [(0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ styleTheme: "body2Bold" }, { children: current })), (0, jsx_runtime_1.jsx)(S_Divider, { type: "VERTICAL", color: "WHITE" }), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { opacity: 0.6 }, styleTheme: "body2Regular" }, { children: total }))] })));
-                case 'DESIGN6':
-                    return ((0, jsx_runtime_1.jsxs)(FlexBox, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { marginLeft: '8px', marginRight: '4px' }, styleTheme: "body2Bold", colorTheme: "sysTextBlack" }, { children: current })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { marginRight: '8px', marginLeft: '4px', opacity: 0.6 }, styleTheme: "body2Regular", colorTheme: "sysTextBlack" }, { children: "/ ".concat(total) })), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark" })] }));
-                case 'DESIGN7':
-                    return ((0, jsx_runtime_1.jsxs)(FlexBox, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16 }), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { marginLeft: '8px', marginRight: '4px' }, styleTheme: "body2Bold", colorTheme: "sysTextWhite" }, { children: current })), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { marginRight: '8px', marginLeft: '4px', opacity: 0.6 }, styleTheme: "body2Regular", colorTheme: "sysTextWhite" }, { children: "/ ".concat(total) })), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16 })] }));
-                case 'DESIGN8':
-                    return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "8px" }, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ styleTheme: "body2Bold", colorTheme: "sysTextBlack" }, { children: current })), (0, jsx_runtime_1.jsx)(S_Divider, { type: "VERTICAL" }), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { opacity: 0.6 }, styleTheme: "body2Regular", colorTheme: "sysTextBlack" }, { children: total })), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark" })] })));
-                case 'DESIGN9':
-                    return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "8px" }, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16 }), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ styleTheme: "body2Bold", colorTheme: "sysTextWhite" }, { children: current })), (0, jsx_runtime_1.jsx)(S_Divider, { type: "VERTICAL", color: "WHITE" }), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { opacity: 0.6 }, styleTheme: "body2Regular", colorTheme: "sysTextWhite" }, { children: total })), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16 })] })));
-                case 'DESIGN10':
-                    return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ direction: "column", gap: "8px" }, { children: [(0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { paddingLeft: '8px', paddingRight: '8px' }, styleTheme: "body2Bold", colorTheme: "sysTextBlack" }, { children: current })), (0, jsx_runtime_1.jsx)(S_Divider, { type: "HORIZONTAL" }), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { opacity: 0.6 }, styleTheme: "body2Regular", colorTheme: "sysTextBlack" }, { children: total }))] })));
-                case 'DESIGN11':
-                    return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ direction: "column", gap: "8px" }, { children: [(0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { paddingLeft: '8px', paddingRight: '8px' }, styleTheme: "body2Bold", colorTheme: "sysTextWhite" }, { children: current })), (0, jsx_runtime_1.jsx)(S_Divider, { type: "HORIZONTAL", color: "DARK" }), (0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ style: { opacity: 0.6 }, styleTheme: "body2Regular", colorTheme: "sysTextWhite" }, { children: total }))] })));
-                case 'DESIGN12':
-                    return ((0, jsx_runtime_1.jsx)(FlexBox, __assign({ gap: "8px" }, { children: bullets.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(S_Dot, { color: "DARK", isActive: index + 1 === current, onClick: onBulletClick ? function () { return onBulletClick(index); } : undefined }, index)); }) })));
-                case 'DESIGN13':
-                    return ((0, jsx_runtime_1.jsx)(FlexBox, __assign({ gap: "8px" }, { children: bullets.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(S_Dot, { color: "WHITE", isActive: index + 1 === current, onClick: onBulletClick ? function () { return onBulletClick(index); } : undefined }, index)); }) })));
-                case 'DESIGN14':
-                    return ((0, jsx_runtime_1.jsx)(FlexBox, __assign({ direction: "column", gap: "12px" }, { children: bullets.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(S_Dot, { color: "DARK", isActive: index + 1 === current, onClick: onBulletClick ? function () { return onBulletClick(index); } : undefined }, index)); }) })));
-                case 'DESIGN15':
-                    return ((0, jsx_runtime_1.jsx)(FlexBox, __assign({ direction: "column", gap: "12px" }, { children: bullets.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(S_Dot, { color: "WHITE", isActive: index + 1 === current, onClick: onBulletClick ? function () { return onBulletClick(index); } : undefined }, index)); }) })));
-                case 'DESIGN16':
-                    return ((0, jsx_runtime_1.jsx)(FlexBox, __assign({ gap: "8px" }, { children: bullets.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(S_Bar, { color: "DARK", isActive: index + 1 === current, onClick: onBulletClick ? function () { return onBulletClick(index); } : undefined }, index)); }) })));
-                case 'DESIGN17':
-                    return ((0, jsx_runtime_1.jsx)(FlexBox, __assign({ gap: "8px" }, { children: bullets.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(S_Bar, { color: "WHITE", isActive: index + 1 === current, onClick: onBulletClick ? function () { return onBulletClick(index); } : undefined }, index)); }) })));
-                default:
-                    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-            }
-        })() })));
+    var _b = _a.current, current = _b === void 0 ? 1 : _b, _c = _a.total, total = _c === void 0 ? 1 : _c, _d = _a.type, type = _d === void 0 ? 'NONE' : _d, _e = _a.offset, offset = _e === void 0 ? { top: '0' } : _e, _f = _a.size, size = _f === void 0 ? 1 : _f, onPageClick = _a.onPageClick;
+    var getPageGroupStart = function (page) {
+        return Math.floor((page - 1) / 5) * 5 + 1;
+    };
+    var groupStart = getPageGroupStart(current);
+    var groupEnd = Math.min(groupStart + 4, total);
+    var pageNumbers = Array.from({ length: groupEnd - groupStart + 1 }, function (_, index) { return groupStart + index; });
+    var handlePrevious = function () {
+        if (current > 1) {
+            onPageClick(current - 1);
+        }
+    };
+    var handleNext = function () {
+        if (current < total) {
+            onPageClick(current + 1);
+        }
+    };
+    var handlePageClick = function (pageNumber) {
+        onPageClick(pageNumber);
+    };
+    var renderProgressByType = function () {
+        switch (type) {
+            case 'NONE':
+                return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+            case 'DESIGN1':
+                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design1, { total: total, current: current, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
+            case 'DESIGN2':
+                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design2, { total: total, current: current, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
+            case 'DESIGN3':
+                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design3, { total: total, current: current, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
+            case 'DESIGN4':
+                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design4, { total: total, current: current, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
+            case 'DESIGN5':
+                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design5, { total: total, current: current, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
+            case 'DESIGN6':
+                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design6, { total: total, current: current, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
+            case 'DESIGN7':
+                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design7, { total: total, current: current, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
+            case 'DESIGN8':
+                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design8, { total: total, current: current, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
+            case 'DESIGN9':
+                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design9, { total: total, current: current, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
+            case 'DESIGN10':
+                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design10, { total: total, current: current, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
+            case 'DESIGN11':
+                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design11, { total: total, current: current, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
+            case 'DESIGN12':
+                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design12, { total: total, current: current, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
+            case 'DESIGN13':
+                return ((0, jsx_runtime_1.jsx)(paginationConfigs_1.Design13, { total: total, current: current, pages: pageNumbers, onNext: handleNext, onPrevious: handlePrevious, onPageChange: handlePageClick }));
+            default:
+                return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(S_Pagination, __assign({ className: "custom-pagination_".concat(current), "$offset": offset, "$size": size }, { children: renderProgressByType() })));
 };
 exports.CustomPagination = CustomPagination;
-var FlexBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: ", ";\n  display: flex;\n  flex-direction: ", ";\n  gap: ", ";\n  justify-content: ", ";\n"], ["\n  align-items: ", ";\n  display: flex;\n  flex-direction: ", ";\n  gap: ", ";\n  justify-content: ", ";\n"])), function (_a) {
-    var _b = _a.alignItems, alignItems = _b === void 0 ? 'center' : _b;
-    return alignItems;
-}, function (_a) {
-    var _b = _a.direction, direction = _b === void 0 ? 'row' : _b;
-    return direction;
-}, function (_a) {
-    var _b = _a.gap, gap = _b === void 0 ? '0' : _b;
-    return gap;
-}, function (_a) {
-    var _b = _a.justifyContent, justifyContent = _b === void 0 ? 'center' : _b;
-    return justifyContent;
-});
-var S_Pagination = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: 5px;\n  position: absolute;\n  ", ";\n  transform: ", ";\n  transform-origin: ", ";\n  width: max-content;\n  z-index: 2;\n  /* ", "; */\n"], ["\n  padding: 5px;\n  position: absolute;\n  ", ";\n  transform: ", ";\n  transform-origin: ", ";\n  width: max-content;\n  z-index: 2;\n  /* ", "; */\n"])), function (_a) {
+var S_Pagination = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 5px;\n  position: absolute;\n  ", ";\n  transform: ", ";\n  transform-origin: ", ";\n  width: max-content;\n  z-index: 2;\n"], ["\n  padding: 5px;\n  position: absolute;\n  ", ";\n  transform: ", ";\n  transform-origin: ", ";\n  width: max-content;\n  z-index: 2;\n"])), function (_a) {
     var $offset = _a.$offset;
-    return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      ", "\n      ", "\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n      ", "\n      ", "\n    "])), $offset.top !== undefined ? "top: ".concat($offset.top, ";") : '', $offset.bottom !== undefined ? "bottom: ".concat($offset.bottom, ";") : '', $offset.left !== undefined ? "left: ".concat($offset.left, ";") : '', $offset.right !== undefined ? "right: ".concat($offset.right, ";") : '');
+    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      ", "\n      ", "\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n      ", "\n      ", "\n    "])), $offset.top !== undefined ? "top: ".concat($offset.top, ";") : '', $offset.bottom !== undefined ? "bottom: ".concat($offset.bottom, ";") : '', $offset.left !== undefined ? "left: ".concat($offset.left, ";") : '', $offset.right !== undefined ? "right: ".concat($offset.right, ";") : '');
 }, function (_a) {
     var _b, _c;
     var $size = _a.$size, $offset = _a.$offset;
@@ -111,78 +110,6 @@ var S_Pagination = styled_components_1.default.div(templateObject_3 || (template
 }, function (_a) {
     var $offset = _a.$offset;
     return $offset.transformOrigin || 'center center';
-}, function (_a) {
-    var effectVisibleStyle = _a.effectVisibleStyle;
-    return effectVisibleStyle && __assign({}, effectVisibleStyle);
-});
-var body2Bold = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\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;
-});
-var body2Regular = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.desktopFontSize.body2;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.fontWeight.normal;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.desktopLineHeight.body2;
-});
-var sysTextWhite = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_textlabel_sys_white;
-});
-var sysTextBlack = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_textlabel_sys_black;
-});
-var S_TextLabel = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  ", ";\n\n  ", ";\n"], ["\n  ", ";\n\n  ", ";\n"])), function (_a) {
-    var styleTheme = _a.styleTheme;
-    return styleTheme &&
-        {
-            body2Bold: body2Bold,
-            body2Regular: body2Regular
-        }[styleTheme];
-}, function (_a) {
-    var colorTheme = _a.colorTheme;
-    return colorTheme
-        ? {
-            sysTextWhite: sysTextWhite,
-            sysTextBlack: sysTextBlack
-        }[colorTheme]
-        : sysTextWhite;
-});
-var verticalDivider = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  height: 16px;\n  width: 1px;\n"], ["\n  height: 16px;\n  width: 1px;\n"])));
-var horizontalDivider = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  height: 1px;\n  width: 100%;\n"], ["\n  height: 1px;\n  width: 100%;\n"])));
-var S_Divider = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  background-color: ", ";\n  opacity: 0.6;\n  ", ";\n"], ["\n  background-color: ", ";\n  opacity: 0.6;\n  ", ";\n"])), function (_a) {
-    var color = _a.color;
-    return (color === 'WHITE' ? '#ffffff' : '#000000');
-}, function (_a) {
-    var type = _a.type;
-    return (type === 'VERTICAL' ? verticalDivider : horizontalDivider);
-});
-var whiteBullet = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  background-color: #ffffff;\n  opacity: ", ";\n"], ["\n  background-color: #ffffff;\n  opacity: ", ";\n"])), function (_a) {
-    var isActive = _a.isActive;
-    return (isActive ? 1 : 0.2);
-});
-var darkBullet = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  background-color: #000000;\n  opacity: ", ";\n"], ["\n  background-color: #000000;\n  opacity: ", ";\n"])), function (_a) {
-    var isActive = _a.isActive;
-    return (isActive ? 1 : 0.3);
-});
-var S_Dot = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  border-radius: 50%;\n  cursor: pointer;\n  height: 8px;\n  width: 8px;\n  ", ";\n"], ["\n  border-radius: 50%;\n  cursor: pointer;\n  height: 8px;\n  width: 8px;\n  ", ";\n"])), function (_a) {
-    var color = _a.color;
-    return (color === 'WHITE' ? whiteBullet : darkBullet);
-});
-var S_Bar = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  cursor: pointer;\n  height: 2px;\n  width: 40px;\n  ", ";\n"], ["\n  cursor: pointer;\n  height: 2px;\n  width: 40px;\n  ", ";\n"])), function (_a) {
-    var color = _a.color;
-    return (color === 'WHITE' ? whiteBullet : darkBullet);
 });
 exports.default = exports.CustomPagination;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
+var templateObject_1, templateObject_2;

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

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+type Props = {
+    total: number;
+    current: number;
+    onPrevious: () => void;
+    onNext: () => void;
+    pages?: number[];
+    onPageChange?: (page: number) => void;
+};
+export declare function Design1({ total, current, pages, onPageChange, onNext, onPrevious }: Props): JSX.Element;
+export declare function Design2({ total, current, pages, onPageChange, onNext, onPrevious }: Props): JSX.Element;
+export declare function Design3({ total, current, pages, onPageChange, onNext, onPrevious }: Props): JSX.Element;
+export declare function Design4({ total, current, pages, onPageChange, onNext, onPrevious }: Props): JSX.Element;
+export declare function Design5({ total, current, pages, onPageChange, onNext, onPrevious }: Props): JSX.Element;
+export declare function Design6({ total, current, pages, onPageChange, onNext, onPrevious }: Props): JSX.Element;
+export declare function Design7({ total, current, pages, onPageChange, onNext, onPrevious }: Props): JSX.Element;
+export declare function Design8({ total, current, pages, onPageChange, onNext, onPrevious }: Props): JSX.Element;
+export declare function Design9({ total, current, pages, onPageChange, onNext, onPrevious }: Props): JSX.Element;
+export declare function Design10({ total, current, onPageChange, onNext, onPrevious }: Props): JSX.Element;
+export declare function Design11({ total, current, onNext, onPrevious }: Props): JSX.Element;
+export declare function Design12({ total, current, onNext, onPrevious }: Props): JSX.Element;
+export declare function Design13({ total, current, onNext, onPrevious }: Props): JSX.Element;
+export {};

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

@@ -0,0 +1,176 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Design13 = exports.Design12 = exports.Design11 = exports.Design10 = exports.Design9 = exports.Design8 = exports.Design7 = exports.Design6 = exports.Design5 = exports.Design4 = exports.Design3 = exports.Design2 = exports.Design1 = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var components_1 = require("../../../../../../../../DynamicLayout/components");
+var styled_components_1 = __importDefault(require("styled-components"));
+function Design1(_a) {
+    var total = _a.total, current = _a.current, pages = _a.pages, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
+    return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) })), pages === null || pages === void 0 ? void 0 : pages.map(function (pageNumber) { return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "rectangle", backgroundColor: "transparent", activeBackgroundColor: "#333333", textColor: "#333333", activeTextColor: "#FFFFFF", isActive: pageNumber === current, onClick: function () { return onPageChange && onPageChange(pageNumber); } }, { children: pageNumber }), pageNumber)); }), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
+}
+exports.Design1 = Design1;
+function Design2(_a) {
+    var total = _a.total, current = _a.current, pages = _a.pages, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
+    return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) })), pages === null || pages === void 0 ? void 0 : pages.map(function (pageNumber) { return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "round", radius: 8, backgroundColor: "transparent", activeBackgroundColor: "#333333", textColor: "#333333", activeTextColor: "#FFFFFF", isActive: pageNumber === current, onClick: function () { return onPageChange && onPageChange(pageNumber); } }, { children: pageNumber }), pageNumber)); }), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
+}
+exports.Design2 = Design2;
+function Design3(_a) {
+    var total = _a.total, current = _a.current, pages = _a.pages, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
+    return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) })), pages === null || pages === void 0 ? void 0 : pages.map(function (pageNumber) { return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "circle", backgroundColor: "transparent", activeBackgroundColor: "#333333", textColor: "#333333", activeTextColor: "#FFFFFF", isActive: pageNumber === current, onClick: function () { return onPageChange && onPageChange(pageNumber); } }, { children: pageNumber }), pageNumber)); }), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
+}
+exports.Design3 = Design3;
+function Design4(_a) {
+    var total = _a.total, current = _a.current, pages = _a.pages, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
+    return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) })), pages === null || pages === void 0 ? void 0 : pages.map(function (pageNumber) { return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "rectangle", backgroundColor: "transparent", activeBackgroundColor: "#e9eaeb", textColor: "#333333", activeTextColor: "#333333", isActive: pageNumber === current, onClick: function () { return onPageChange && onPageChange(pageNumber); } }, { children: pageNumber }), pageNumber)); }), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
+}
+exports.Design4 = Design4;
+function Design5(_a) {
+    var total = _a.total, current = _a.current, pages = _a.pages, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
+    return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) })), pages === null || pages === void 0 ? void 0 : pages.map(function (pageNumber) { return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "round", radius: 8, backgroundColor: "transparent", activeBackgroundColor: "#e9eaeb", textColor: "#333333", activeTextColor: "#333333", isActive: pageNumber === current, onClick: function () { return onPageChange && onPageChange(pageNumber); } }, { children: pageNumber }), pageNumber)); }), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
+}
+exports.Design5 = Design5;
+function Design6(_a) {
+    var total = _a.total, current = _a.current, pages = _a.pages, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
+    return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) })), pages === null || pages === void 0 ? void 0 : pages.map(function (pageNumber) { return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "circle", backgroundColor: "transparent", activeBackgroundColor: "#e9eaeb", textColor: "#333333", activeTextColor: "#333333", isActive: pageNumber === current, onClick: function () { return onPageChange && onPageChange(pageNumber); } }, { children: pageNumber }), pageNumber)); }), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
+}
+exports.Design6 = Design6;
+function Design7(_a) {
+    var total = _a.total, current = _a.current, pages = _a.pages, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
+    return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [pages === null || pages === void 0 ? void 0 : pages.map(function (pageNumber) { return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "rectangle", backgroundColor: "transparent", activeBackgroundColor: "#e9eaeb", textColor: "#333333", activeTextColor: "#333333", isActive: pageNumber === current, onClick: function () { return onPageChange && onPageChange(pageNumber); } }, { children: pageNumber }), pageNumber)); }), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) })), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
+}
+exports.Design7 = Design7;
+function Design8(_a) {
+    var total = _a.total, current = _a.current, pages = _a.pages, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
+    return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) })), pages === null || pages === void 0 ? void 0 : pages.map(function (pageNumber) { return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "round", radius: 8, backgroundColor: "#e9eaeb", activeBackgroundColor: "#333333", textColor: "#333333", activeTextColor: "#FFFFFF", isActive: pageNumber === current, onClick: function () { return onPageChange && onPageChange(pageNumber); } }, { children: pageNumber }), pageNumber)); }), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
+}
+exports.Design8 = Design8;
+function Design9(_a) {
+    var total = _a.total, current = _a.current, pages = _a.pages, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
+    return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) })), pages === null || pages === void 0 ? void 0 : pages.map(function (pageNumber) { return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "round", radius: 8, backgroundColor: "transparent", activeBackgroundColor: "transparent", textColor: "#e9eaeb", activeTextColor: "#333333", isActive: pageNumber === current, onClick: function () { return onPageChange && onPageChange(pageNumber); } }, { children: pageNumber }), pageNumber)); }), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
+}
+exports.Design9 = Design9;
+function Design10(_a) {
+    var total = _a.total, current = _a.current, onPageChange = _a.onPageChange, onNext = _a.onNext, onPrevious = _a.onPrevious;
+    var paginationPages = generatePaginationPages(total, current);
+    return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) })), paginationPages === null || paginationPages === void 0 ? void 0 : paginationPages.map(function (pageNumber) {
+                if (typeof pageNumber === 'string') {
+                    return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "rectangle", backgroundColor: "transparent", activeBackgroundColor: "#333333", textColor: "#333333", activeTextColor: "#FFFFFF", isActive: false, disabled: true }, { children: pageNumber }), pageNumber));
+                }
+                return ((0, jsx_runtime_1.jsx)(S_Page, __assign({ type: "button", shape: "rectangle", backgroundColor: "transparent", activeBackgroundColor: "#333333", textColor: "#333333", activeTextColor: "#FFFFFF", isActive: pageNumber === current, onClick: function () { return onPageChange && onPageChange(pageNumber); } }, { children: pageNumber }), pageNumber));
+            }), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
+}
+exports.Design10 = Design10;
+function Design11(_a) {
+    var total = _a.total, current = _a.current, onNext = _a.onNext, onPrevious = _a.onPrevious;
+    return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) })), (0, jsx_runtime_1.jsxs)(S_Text, { children: [current, " / ", total] }), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
+}
+exports.Design11 = Design11;
+function Design12(_a) {
+    var total = _a.total, current = _a.current, onNext = _a.onNext, onPrevious = _a.onPrevious;
+    return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsxs)(S_Text, { children: [current, " / ", total] }), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) })), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
+}
+exports.Design12 = Design12;
+function Design13(_a) {
+    var total = _a.total, current = _a.current, onNext = _a.onNext, onPrevious = _a.onPrevious;
+    return ((0, jsx_runtime_1.jsxs)(FlexBox, __assign({ gap: "4px" }, { children: [(0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onPrevious, disabled: current === 1 }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_left", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) })), (0, jsx_runtime_1.jsx)(S_Pointer, __assign({ onClick: onNext, disabled: current === total }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_right", size: 16, colorKey: "ui_cpnt_icon_sys_dark" }) }))] })));
+}
+exports.Design13 = Design13;
+var FlexBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: ", ";\n  display: flex;\n  flex-direction: ", ";\n  gap: ", ";\n  justify-content: ", ";\n"], ["\n  align-items: ", ";\n  display: flex;\n  flex-direction: ", ";\n  gap: ", ";\n  justify-content: ", ";\n"])), function (_a) {
+    var _b = _a.alignItems, alignItems = _b === void 0 ? 'center' : _b;
+    return alignItems;
+}, function (_a) {
+    var _b = _a.direction, direction = _b === void 0 ? 'row' : _b;
+    return direction;
+}, function (_a) {
+    var _b = _a.gap, gap = _b === void 0 ? '0' : _b;
+    return gap;
+}, function (_a) {
+    var _b = _a.justifyContent, justifyContent = _b === void 0 ? 'center' : _b;
+    return justifyContent;
+});
+var S_Pointer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  cursor: ", ";\n  height: 16px;\n  opacity: ", ";\n"], ["\n  cursor: ", ";\n  height: 16px;\n  opacity: ", ";\n"])), function (_a) {
+    var disabled = _a.disabled;
+    return (disabled ? 'not-allowed' : 'pointer');
+}, function (_a) {
+    var disabled = _a.disabled;
+    return (disabled ? 0.4 : 1);
+});
+var S_Page = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: none;\n  border-radius: ", ";\n  color: ", ";\n  display: flex;\n  font-size: ", ";\n  font-weight: ", ";\n  height: 32px;\n  justify-content: center;\n  outline: none;\n  width: 32px;\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border: none;\n  border-radius: ", ";\n  color: ", ";\n  display: flex;\n  font-size: ", ";\n  font-weight: ", ";\n  height: 32px;\n  justify-content: center;\n  outline: none;\n  width: 32px;\n"])), function (_a) {
+    var isActive = _a.isActive, backgroundColor = _a.backgroundColor, activeBackgroundColor = _a.activeBackgroundColor;
+    return isActive ? activeBackgroundColor : backgroundColor;
+}, function (_a) {
+    var shape = _a.shape, radius = _a.radius;
+    if (shape === 'rectangle')
+        return undefined;
+    return shape === 'round' ? "".concat(radius, "px") : '50%';
+}, function (_a) {
+    var isActive = _a.isActive, textColor = _a.textColor, activeTextColor = _a.activeTextColor;
+    return (isActive ? activeTextColor : textColor);
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.desktopFontSize.caption1;
+}, function (_a) {
+    var theme = _a.theme, isActive = _a.isActive;
+    return isActive ? theme.fontWeight.bold : theme.fontWeight.normal;
+});
+var S_Text = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: #e9eaeb;\n  font-size: ", ";\n"], ["\n  color: #e9eaeb;\n  font-size: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.desktopFontSize.caption1;
+});
+function generatePaginationPages(total, current) {
+    // 총 페이지가 10개 이하면 모든 페이지 표시
+    if (total <= 10) {
+        return Array.from({ length: total }, function (_, i) { return i + 1; });
+    }
+    var pages = [];
+    // 항상 첫 페이지 표시
+    pages.push(1);
+    // 현재 페이지가 1~3 범위인 경우
+    if (current <= 3) {
+        // 2, 3 표시 (1은 이미 추가됨)
+        pages.push(2, 3);
+        if (total > 3) {
+            pages.push('...');
+        }
+    }
+    // 현재 페이지가 마지막 3개 범위인 경우
+    else if (current >= total - 2) {
+        pages.push('...');
+        // 마지막 3개 페이지 표시
+        pages.push(total - 2, total - 1);
+    }
+    // 중간 범위인 경우
+    else {
+        pages.push('...');
+        // 현재 페이지와 양옆 페이지 표시
+        pages.push(current - 1, current, current + 1);
+        pages.push('...');
+    }
+    // 항상 마지막 페이지 표시 (마지막 3개 범위가 아닌 경우에만)
+    if (current < total - 2 || current === 1) {
+        pages.push(total);
+    }
+    else if (current >= total - 2) {
+        pages.push(total);
+    }
+    return pages;
+}
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;