pds-dev-kit-web-test 2.7.252 → 2.7.253

package/dist/src/sub/DynamicLayout/mock_contentsList.js

@@ -5325,12 +5325,14 @@ exports.SAMPLE_LIST_CB = {
         currentVersion: '2025-01-10',
         data: {
             CB_CONTENT_PROP_CONTENTSLIST: {
-                CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS: 1,
+                CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS: 2,
+                CB_CONTENT_PROP_CONTENTSLIST_SPEC_MCOLUMNS: 1,
                 CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA: 'NONE',
                 CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATAFILTER: 'NONE',
                 CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATAOFFSET: 0,
                 CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATASORTING: 'PAPPQUERY_SORTING_ITEM_TITLE_ASC',
                 CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS: 1,
+                CB_CONTENT_PROP_CONTENTSLIST_SPEC_MDISPLAYCOUNTS: 1,
                 CB_CONTENT_PROP_CONTENTSLIST_SPEC_EDITCOMMONITEM: null,
                 CB_CONTENT_PROP_CONTENTSLIST_SPEC_ITEMCOUNTS: 1,
                 CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS: [

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

@@ -69,16 +69,24 @@ function ContentsList(props) {
     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];
+    // 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) / displayCounts);
+    console.log('columns', numberOfColumns);
+    console.log('displayCounts', displayCounts);
+    console.log('totalPage', totalPage);
     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,
@@ -106,13 +114,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 = device === 'DESKTOP'
-        ? CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS
-        : CB_CONTENT_PROP_CONTENTSLIST_SPEC_MCOLUMNS;
     // NOTE: edit환경에서 hover가 작동하지 않아서 제외함 필요시 추가..
     var columnGapEnum = device === 'DESKTOP'
         ? CB_STYLE_PROP_CONTENTSLIST.CB_STYLE_PROP_CONTENTSLISTDESIGN_SPEC_ITEMSPACING

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

@@ -8,6 +8,7 @@ type ParseContentsListStyleToCarouselCoreProps = {
 };
 type ParseContentsListContentToCarouselCoreProps = {
     props: CB_CONTENT_PROP_CONTENTSLIST;
+    device: Device;
 };
 type ParseContentsListStyleToCustomPaginationProps = {
     props: CB_STYLE_PROP_CONTENTSLIST_SPECS;
@@ -18,7 +19,7 @@ export declare function parseGridStyleProp({ props, device }: ParseContentsListS
     stylePropCss: CssFragment;
     hoverStylePropCss: CssFragment;
 };
-export declare function parseGridContentProp({ props }: ParseContentsListContentToCarouselCoreProps): {
+export declare function parseGridContentProp({ props, device }: ParseContentsListContentToCarouselCoreProps): {
     contentPropCss: CssFragment;
 };
 export declare function parsePaginationStyleProp({ props, device }: ParseContentsListStyleToCustomPaginationProps): {

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

@@ -42,10 +42,18 @@ function parseStylePropertyStyles(key, value) {
 function getColumnsPropStyleValues(value, rows) {
     return (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    grid-template-columns: repeat(", ", 1fr);\n    grid-template-rows: repeat(", ", 1fr);\n  "], ["\n    grid-template-columns: repeat(", ", 1fr);\n    grid-template-rows: repeat(", ", 1fr);\n  "])), value, rows);
 }
-function parseContentPropertyStyles(key, value, rows) {
-    switch (key) {
-        case 'CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS':
-            return getColumnsPropStyleValues(value, rows);
+function parseContentPropertyStyles(key, value, rows, device) {
+    if (device === 'DESKTOP') {
+        switch (key) {
+            case 'CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS':
+                return getColumnsPropStyleValues(value, rows);
+        }
+    }
+    if (device === 'MOBILE') {
+        switch (key) {
+            case 'CB_CONTENT_PROP_CONTENTSLIST_SPEC_MCOLUMNS':
+                return getColumnsPropStyleValues(value, rows);
+        }
     }
     return undefined;
 }
@@ -70,16 +78,19 @@ function parseGridStyleProp(_a) {
 }
 exports.parseGridStyleProp = parseGridStyleProp;
 function parseGridContentProp(_a) {
-    var props = _a.props;
+    var props = _a.props, device = _a.device;
     var availableSpecCodes = Object.keys(props).filter(function (key) { return !key.includes(':HOVER') && !key.includes(':MOBILE'); });
     var displayCounts = props.CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS ||
         props.CB_CONTENT_PROP_CONTENTSLIST_SPEC_ITEMCOUNTS ||
         1;
-    var columns = Math.min(props.CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS, displayCounts);
+    var columnsByDevice = device === 'DESKTOP'
+        ? props.CB_CONTENT_PROP_CONTENTSLIST_SPEC_COLUMNS
+        : props.CB_CONTENT_PROP_CONTENTSLIST_SPEC_MCOLUMNS;
+    var columns = Math.min(columnsByDevice, displayCounts);
     var rows = Math.ceil(displayCounts / columns);
     return availableSpecCodes.reduce(function (acc, currentKey) {
         var value = props[currentKey];
-        var styles = parseContentPropertyStyles(currentKey, value, rows);
+        var styles = parseContentPropertyStyles(currentKey, value, rows, device);
         return {
             contentPropCss: (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n          ", "\n          ", "\n        "], ["\n          ", "\n          ", "\n        "])), acc.contentPropCss, styles)
         };

package/package.json

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