pds-dev-kit-web-test 2.7.246 → 2.7.249

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

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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];
+        }
+        var val = POS_OUTSET_PAGINATION[position];
+        return val;
+    }
+    if (elementType === 'GROUP') {
+        return exports.POS_INSET[position];
+    }
+    return {};
+}
+exports.getPosition = getPosition;
+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%)' }
+};
+var POS_OUTSET_PAGINATION = {
+    OUTSET1: { bottom: 15 },
+    OUTSET2: { bottom: 15 },
+    OUTSET3: { bottom: 15 },
+    OUTSET4: { left: 15 },
+    OUTSET5: { left: 15 },
+    OUTSET6: { left: 15 },
+    OUTSET7: { top: 15 },
+    OUTSET8: { top: 15 },
+    OUTSET9: { top: 15 },
+    OUTSET10: { right: 15 },
+    OUTSET11: { right: 15 },
+    OUTSET12: { right: 15 }
+};
+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
+    }
+};

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

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import type { ContentsListElementsProps } from '../ContentsList';
-import type { CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE_TYPE } from '../types';
 import type { CSSProperties } from 'styled-components';
 export declare const useFlexGridLayout: ({ components }: {
     components: ContentsListElementsProps[];
@@ -14,6 +13,6 @@ export declare const useFlexGridLayout: ({ components }: {
         left: string;
     };
     componentGroups: Record<string, ContentsListElementsProps[]>;
-    getPositionStyle: (position: string, ccbInset: Record<string, string>, designType: CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE_TYPE) => CSSProperties;
+    getPositionStyle: (position: string, ccbInset: Record<string, string>, designType: string, size: 'LARGE' | 'MEDIUM' | 'SMALL' | 'GROUP', elementType: string) => CSSProperties;
     getComponentGroupLayout: (components: ContentsListElementsProps[], position: string) => CSSProperties;
 };

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

@@ -13,13 +13,13 @@ 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("./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];
     var _c = (0, react_1.useState)({ width: 0, height: 0 }), layoutSize = _c[0], setLayoutSize = _c[1];
     var layoutRef = (0, react_1.useRef)(null);
     var positionRefs = (0, react_1.useRef)({});
-    console.log('useFlexGridLayout components:', components);
     // 위치별로 컴포넌트 그룹화
     var getComponentsByPosition = function () {
         var groups = {};
@@ -60,51 +60,33 @@ var useFlexGridLayout = function (_a) {
         };
         return directions[position];
     };
-    // 위치에 따른 스타일 결정 (CCB 크기를 고려)
-    var getPositionStyle = function (position, ccbInset, designType) {
+    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) {
@@ -130,8 +112,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/ContentsList/types.d.ts

@@ -7,7 +7,7 @@ export type CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMSPACING_TYPE = 'WIDE' | 'NORMAL'
 export type CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMLINEHEIGHT_TYPE = NUMBER_INTEGER | null;
 export type CB_STYLE_PROP_CONTENTSLIST_SPEC_ITEMHEIGHTFITCONTENT_TYPE = boolean | null;
 export type CB_STYLE_PROP_CONTENTSLIST_SPEC_INFINITESCROLL_TYPE = boolean | null;
-export type CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE_TYPE = 'NONE' | 'DESIGN1' | 'DESIGN2' | 'DESIGN3' | 'DESIGN4' | 'DESIGN5' | 'DESIGN6' | 'DESIGN7' | 'DESIGN8' | 'DESIGN9' | 'DESIGN10' | 'DESIGN11' | 'DESIGN12' | 'DESIGN13' | 'DESIGN14' | 'DESIGN15' | 'DESIGN16' | 'DESIGN17' | null;
+export type CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSTYLE_TYPE = 'NONE' | 'DESIGN1' | 'DESIGN2' | 'DESIGN3' | 'DESIGN4' | 'DESIGN5' | 'DESIGN6' | 'DESIGN7' | 'DESIGN8' | 'DESIGN9' | 'DESIGN10' | 'DESIGN11' | 'DESIGN12' | 'DESIGN13' | 'DESIGN14' | 'DESIGN15' | 'DESIGN16' | 'DESIGN17';
 export type CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONLOCATION_TYPE = OUTSET_POSTIION | INSET_POSTIION;
 export type CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONSIZE_TYPE = 'SMALL' | 'MEDIUM' | 'LARGE' | null;
 export type CB_STYLE_PROP_CONTENTSLIST_SPEC_PAGINATIONPRIMARYCOLOR = string;

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

@@ -1,5 +1,5 @@
 import type { SlideBannerElementsProps } from '../SlideBanner';
 import type { CSSProperties } from 'styled-components';
 export declare function getPosition(position: string, designType: string, size: string, elementType: SlideBannerElementsProps['type'] | 'GROUP'): CSSProperties;
-export declare const POS_INSET: Record<string, Record<string, 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/SlideBanner/hooks/elementPositions.js

@@ -3,13 +3,12 @@ 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) {
-    var _a, _b;
     if (position.startsWith('OUTSET')) {
         if (elementType === 'GROUP') {
             return POS_OUTSET_GROUP[position];
         }
         if (elementType === 'PROGRESSBAR') {
-            return (_a = exports.POS_INSET[position]) === null || _a === void 0 ? void 0 : _a.LARGE;
+            return exports.POS_INSET[position];
         }
         if (elementType === 'NEXT' || elementType === 'PREV') {
             return exports.POS_OUTSET_NAVIGATION[position];
@@ -19,7 +18,7 @@ function getPosition(position, designType, size, elementType) {
         // return POS_OUTSET_PAGINATION[position][designType][size];
     }
     if (elementType === 'GROUP') {
-        return (_b = exports.POS_INSET[position]) === null || _b === void 0 ? void 0 : _b.LARGE;
+        return exports.POS_INSET[position];
     }
     return {};
 }
@@ -147,46 +146,14 @@ var POS_OUTSET_PAGINATION = {
     }
 };
 exports.POS_INSET = {
-    INSET1: {
-        LARGE: { top: GAP, left: GAP },
-        MEDIUM: { top: GAP, left: GAP },
-        SMALL: { top: GAP, left: GAP }
-    },
-    INSET2: {
-        LARGE: { top: GAP, left: '50%', transform: 'translateX(-50%)' },
-        MEDIUM: { top: GAP, left: '50%', transform: 'translateX(-50%)' },
-        SMALL: { top: GAP, left: '50%', transform: 'translateX(-50%)' }
-    },
-    INSET3: {
-        LARGE: { top: GAP, right: GAP },
-        MEDIUM: { top: GAP, right: GAP },
-        SMALL: { top: GAP, right: GAP }
-    },
-    INSET4: {
-        LARGE: { top: '50%', right: GAP, transform: 'translateY(-50%)' },
-        MEDIUM: { top: '50%', right: GAP, transform: 'translateY(-50%)' },
-        SMALL: { top: '50%', right: GAP, transform: 'translateY(-50%)' }
-    },
-    INSET5: {
-        LARGE: { bottom: GAP, right: GAP },
-        MEDIUM: { bottom: GAP, right: GAP },
-        SMALL: { bottom: GAP, right: GAP }
-    },
-    INSET6: {
-        LARGE: { bottom: GAP, left: '50%', transform: 'translateX(-50%)' },
-        MEDIUM: { bottom: GAP, left: '50%', transform: 'translateX(-50%)' },
-        SMALL: { bottom: GAP, left: '50%', transform: 'translateX(-50%)' }
-    },
-    INSET7: {
-        LARGE: { left: GAP, bottom: GAP },
-        MEDIUM: { left: GAP, bottom: GAP },
-        SMALL: { left: GAP, bottom: GAP }
-    },
-    INSET8: {
-        LARGE: { top: '50%', left: GAP, transform: 'translateY(-50%)' },
-        MEDIUM: { top: '50%', left: GAP, transform: 'translateY(-50%)' },
-        SMALL: { top: '50%', left: GAP, transform: 'translateY(-50%)' }
-    }
+    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 },

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

@@ -76,42 +76,16 @@ var useFlexGridLayout = function (_a) {
             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, left: 'calc(-100% + 50px)' },
-            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%)' }
-        };
+        // // 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);
     };

package/package.json

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