pds-dev-kit-web-test 2.7.453 → 2.7.455

package/dist/src/sub/DynamicLayout/utils/groupHelpers.d.ts

@@ -0,0 +1,57 @@
+import type { Block } from 'publ-echo/dist/lib/GridLayoutEditor/group';
+export declare function findAllChildrenCbIds(block: Block, targetGroupId: string): number[];
+export declare function gridAreaObjToString(area: {
+    rowStart: number;
+    colStart: number;
+    rowEnd: number;
+    colEnd: number;
+}): string;
+export declare function getGridAreaFromGroup(position: {
+    x: number;
+    y: number;
+    cols: number;
+    rows: number;
+}): {
+    rowStart: number;
+    colStart: number;
+    rowEnd: number;
+    colEnd: number;
+};
+interface GridArea {
+    rowStart: number;
+    colStart: number;
+    rowEnd: number;
+    colEnd: number;
+}
+/**
+ * grid-area 문자열을 파싱하여 객체로 변환합니다.
+ * 예: "1 / 2 / 3 / 4" => { rowStart: 1, colStart: 2, rowEnd: 3, colEnd: 4 }
+ */
+export declare function parseGridArea(gridArea: string): GridArea;
+/**
+ * 부모 그룹 영역을 기준으로 컴포넌트의 상대적 위치를 계산합니다.
+ * 예: 부모가 row 21에서 시작하고 컴포넌트가 row 21에 있다면, 상대적으로는 row 1에 위치하게 됩니다.
+ */
+export declare function calculateRelativeGridArea(componentArea: {
+    rowStart: number;
+    colStart: number;
+    rowEnd: number;
+    colEnd: number;
+}, parentArea: {
+    rowStart: number;
+    colStart: number;
+    rowEnd: number;
+    colEnd: number;
+}): {
+    rowStart: number;
+    colStart: number;
+    rowEnd: number;
+    colEnd: number;
+};
+export declare function getMaxHeight(props: {
+    cols: number;
+    rows: number;
+    x: number;
+    y: number;
+}, rowHeight: number): number;
+export {};

package/dist/src/sub/DynamicLayout/utils/groupHelpers.js

@@ -0,0 +1,86 @@
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getMaxHeight = exports.calculateRelativeGridArea = exports.parseGridArea = exports.getGridAreaFromGroup = exports.gridAreaObjToString = exports.findAllChildrenCbIds = void 0;
+function findAllChildrenCbIds(block, targetGroupId) {
+    // 현재 블록이 target group이면, 모든 하위 컴포넌트 블록 ID를 수집
+    if (block.blockId === targetGroupId) {
+        if (block.type === 'COMPONENT_BLOCK') {
+            return [block.componentBlockId];
+        }
+        // GROUP_BLOCK인 경우 모든 자식들의 ID를 재귀적으로 수집
+        return block.children.reduce(function (acc, child) {
+            return __spreadArray(__spreadArray([], acc, true), findAllChildrenCbIds(child, child.blockId), true);
+        }, []);
+    }
+    // 현재 블록이 target group이 아니고 COMPONENT_BLOCK이면 빈 배열 반환
+    if (block.type === 'COMPONENT_BLOCK') {
+        return [];
+    }
+    // GROUP_BLOCK이면 자식들에 대해 재귀적으로 탐색
+    return block.children.reduce(function (acc, child) {
+        return __spreadArray(__spreadArray([], acc, true), findAllChildrenCbIds(child, targetGroupId), true);
+    }, []);
+}
+exports.findAllChildrenCbIds = findAllChildrenCbIds;
+function clamp(num, min, max) {
+    return Math.max(Math.min(num, max), min);
+}
+function gridAreaObjToString(area) {
+    var rowStart = area.rowStart, colStart = area.colStart, rowEnd = area.rowEnd, colEnd = area.colEnd;
+    return "".concat(rowStart, " / ").concat(colStart, " / ").concat(rowEnd, " / ").concat(colEnd);
+}
+exports.gridAreaObjToString = gridAreaObjToString;
+function getGridAreaFromGroup(position) {
+    var x = position.x, y = position.y, cols = position.cols, rows = position.rows;
+    var colStart = clamp(x + 1, 1, Math.max(1, 25 - cols));
+    var rowStart = clamp(y + 1, 1, Infinity);
+    var rowEnd = clamp(rows + rowStart, rowStart + 1, Infinity);
+    var colEnd = clamp(colStart + cols, colStart + 1, 25);
+    return {
+        rowStart: rowStart,
+        colStart: colStart,
+        rowEnd: rowEnd,
+        colEnd: colEnd
+    };
+}
+exports.getGridAreaFromGroup = getGridAreaFromGroup;
+/**
+ * grid-area 문자열을 파싱하여 객체로 변환합니다.
+ * 예: "1 / 2 / 3 / 4" => { rowStart: 1, colStart: 2, rowEnd: 3, colEnd: 4 }
+ */
+function parseGridArea(gridArea) {
+    var _a = gridArea
+        .split('/')
+        .map(function (str) { return parseInt(str.trim(), 10); }), rowStart = _a[0], colStart = _a[1], rowEnd = _a[2], colEnd = _a[3];
+    return { rowStart: rowStart, colStart: colStart, rowEnd: rowEnd, colEnd: colEnd };
+}
+exports.parseGridArea = parseGridArea;
+/**
+ * 부모 그룹 영역을 기준으로 컴포넌트의 상대적 위치를 계산합니다.
+ * 예: 부모가 row 21에서 시작하고 컴포넌트가 row 21에 있다면, 상대적으로는 row 1에 위치하게 됩니다.
+ */
+function calculateRelativeGridArea(componentArea, parentArea) {
+    return {
+        rowStart: componentArea.rowStart - parentArea.rowStart + 1,
+        colStart: componentArea.colStart - parentArea.colStart + 1,
+        rowEnd: componentArea.rowEnd - parentArea.rowStart + 1,
+        colEnd: componentArea.colEnd - parentArea.colStart + 1
+    };
+}
+exports.calculateRelativeGridArea = calculateRelativeGridArea;
+function getMaxHeight(props, rowHeight) {
+    var gap = 10;
+    var rows = props.rows;
+    var height = rows * rowHeight + (rows - 1) * gap;
+    return height;
+}
+exports.getMaxHeight = getMaxHeight;

package/dist/src/sub/DynamicLayout/utils/groupUtils.d.ts

@@ -1,9 +1,8 @@
 /// <reference types="react" />
-import { type Block } from 'publ-echo-test/dist/lib/GridLayoutEditor/group';
 import type { ComponentBlock } from '../sections/CustomSection/types';
 import type { Device } from '../sections/CustomSection/util/types';
 import type { LayoutItem } from 'publ-echo/dist/lib';
-export declare function findAllChildrenCbIds(block: Block, targetGroupId: string): number[];
+import type { Block } from 'publ-echo/dist/lib/GridLayoutEditor/group';
 export default function RenderPedigreeRecursively({ isEditMode, block, layoutItems, cbs, parentGroupArea, rowHeight, device, selectedRows, isParentGroupHeightVariable }: {
     isEditMode: boolean;
     block: Block;

package/dist/src/sub/DynamicLayout/utils/groupUtils.js

@@ -14,100 +14,44 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.findAllChildrenCbIds = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var group_1 = require("publ-echo-test/dist/lib/GridLayoutEditor/group");
-var renderHelpers_1 = require("publ-echo-test/dist/lib/GridLayoutEditor/utils/renderHelpers");
+var group_1 = require("publ-echo/dist/lib/GridLayoutEditor/group");
+var renderHelpers_1 = require("publ-echo/dist/lib/GridLayoutEditor/utils/renderHelpers");
 var styled_components_1 = __importDefault(require("styled-components"));
 var ErrorBoundary_1 = require("../components/Section/ErrorBoundary");
-var FlexGridItem_1 = __importStar(require("../CompositionRenderer/FlexGridItem"));
-function findAllChildrenCbIds(block, targetGroupId) {
-    // 현재 블록이 target group이면, 모든 하위 컴포넌트 블록 ID를 수집
-    if (block.blockId === targetGroupId) {
-        if (block.type === 'COMPONENT_BLOCK') {
-            return [block.componentBlockId];
-        }
-        // GROUP_BLOCK인 경우 모든 자식들의 ID를 재귀적으로 수집
-        return block.children.reduce(function (acc, child) {
-            return __spreadArray(__spreadArray([], acc, true), findAllChildrenCbIds(child, child.blockId), true);
-        }, []);
-    }
-    // 현재 블록이 target group이 아니고 COMPONENT_BLOCK이면 빈 배열 반환
-    if (block.type === 'COMPONENT_BLOCK') {
-        return [];
-    }
-    // GROUP_BLOCK이면 자식들에 대해 재귀적으로 탐색
-    return block.children.reduce(function (acc, child) {
-        return __spreadArray(__spreadArray([], acc, true), findAllChildrenCbIds(child, targetGroupId), true);
-    }, []);
-}
-exports.findAllChildrenCbIds = findAllChildrenCbIds;
+var CompositionRenderer_1 = require("../CompositionRenderer");
+var FlexGridItem_1 = require("../CompositionRenderer/FlexGridItem");
+var groupHelpers_1 = require("./groupHelpers");
 function RenderPedigreeRecursively(_a) {
-    var isEditMode = _a.isEditMode, block = _a.block, layoutItems = _a.layoutItems, cbs = _a.cbs, parentGroupArea = _a.parentGroupArea, rowHeight = _a.rowHeight, device = _a.device, selectedRows = _a.selectedRows, 
-    // pinnedGBs,
-    _b = _a.isParentGroupHeightVariable, 
-    // pinnedGBs,
-    isParentGroupHeightVariable = _b === void 0 ? false : _b;
+    var isEditMode = _a.isEditMode, block = _a.block, layoutItems = _a.layoutItems, cbs = _a.cbs, parentGroupArea = _a.parentGroupArea, rowHeight = _a.rowHeight, device = _a.device, selectedRows = _a.selectedRows, _b = _a.isParentGroupHeightVariable, isParentGroupHeightVariable = _b === void 0 ? false : _b;
     var type = block.type;
     if (type === 'GROUP_BLOCK') {
-        var childrenIds = findAllChildrenCbIds(block, block.blockId).map(function (i) { return i.toString(); });
+        var childrenIds = (0, groupHelpers_1.findAllChildrenCbIds)(block, block.blockId).map(function (i) { return i.toString(); });
         var bounding_1 = (0, renderHelpers_1.getBoundingArea)(layoutItems, childrenIds);
         if (!bounding_1) {
             return (0, jsx_runtime_1.jsx)("div", { children: "GROUP: NO BOUNDING AREA" });
         }
-        var gridArea_1 = getGridAreaFromGroup({
+        var gridArea_1 = (0, groupHelpers_1.getGridAreaFromGroup)({
             x: bounding_1.x,
             y: bounding_1.y,
             cols: bounding_1.w,
             rows: bounding_1.h
         });
         var relativeGridArea_1 = parentGroupArea
-            ? calculateRelativeGridArea(gridArea_1, parentGroupArea)
+            ? (0, groupHelpers_1.calculateRelativeGridArea)(gridArea_1, parentGroupArea)
             : gridArea_1;
         // 그룹의 시작 행을 기준으로 상대적인 selectedRows 계산
         var relativeSelectedRows_1 = selectedRows
             .map(function (row) { return row - gridArea_1.rowStart + 1; })
             .filter(function (row) { return row >= 0 && row <= bounding_1.h; });
         var isGBHeightVariable_1 = device === 'DESKTOP' ? block.isHeightVariableDesktop : block.isHeightVariableMobile;
-        var defaultHeight = getMaxHeight({ cols: bounding_1.w, rows: bounding_1.h, x: bounding_1.x, y: bounding_1.y }, rowHeight);
+        var defaultHeight = (0, groupHelpers_1.getMaxHeight)({ cols: bounding_1.w, rows: bounding_1.h, x: bounding_1.x, y: bounding_1.y }, rowHeight);
         return ((0, jsx_runtime_1.jsx)(S_GroupItem, __assign({ cols: bounding_1.w, sectionRow: bounding_1.h, isEditMode: isEditMode, rowHeight: rowHeight, selectedRows: relativeSelectedRows_1, style: {
-                gridArea: gridAreaObjToString(relativeGridArea_1),
+                gridArea: (0, groupHelpers_1.gridAreaObjToString)(relativeGridArea_1),
                 display: 'grid',
                 zIndex: device === 'DESKTOP'
                     ? block.zOrderDesktopInternal
@@ -133,98 +77,23 @@ function RenderPedigreeRecursively(_a) {
         return (0, jsx_runtime_1.jsxs)("div", { children: ["NO CB FOUND FOR ", block.blockId] });
     }
     var originalGridAreaString = (0, FlexGridItem_1.getGridAreaFromCB)(cb.jsonProperties.data.CB_PLACEMENT_PROP_PLACEMENT, device);
-    var originalGridArea = parseGridArea(originalGridAreaString);
+    var originalGridArea = (0, groupHelpers_1.parseGridArea)(originalGridAreaString);
     // 부모 그룹이 있는 경우, 상대적 위치 계산
     var relativeGridArea = parentGroupArea
-        ? calculateRelativeGridArea(originalGridArea, parentGroupArea)
+        ? (0, groupHelpers_1.calculateRelativeGridArea)(originalGridArea, parentGroupArea)
         : originalGridArea;
-    return (
-    // <S_GridItem
-    //   style={{
-    //     gridArea: gridAreaObjToString(relativeGridArea)
-    //   }}
-    //   data-og-grid-area={originalGridAreaString}
-    //   data-rel-grid-area={gridAreaObjToString(relativeGridArea)}
-    // >
-    (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(FlexGridItem_1.default, { cb: cb, index: cbIndex, device: device, rowHeight: rowHeight, block: block, zIndex: device === 'DESKTOP'
+    return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(CompositionRenderer_1.FlexGridItem, { cb: cb, index: cbIndex, device: device, rowHeight: rowHeight, block: block, zIndex: device === 'DESKTOP'
                 ? block.zOrderDesktopInternal
                 : block.zOrderMobileInternal, style: {
-                gridArea: gridAreaObjToString(relativeGridArea),
+                gridArea: (0, groupHelpers_1.gridAreaObjToString)(relativeGridArea),
                 pointerEvents: isEditMode ? 'none' : 'auto',
                 boxShadow: isEditMode ? '0 0 0 3px #027aff' : ''
-            }, showPinned: isEditMode && !parentGroupArea, isParentGroupHeightVariable: isParentGroupHeightVariable }) }, cb.id)
-    // </S_GridItem>
-    );
+            }, showPinned: isEditMode && !parentGroupArea, isParentGroupHeightVariable: isParentGroupHeightVariable }) }, cb.id));
 }
 exports.default = RenderPedigreeRecursively;
-function clamp(num, min, max) {
-    return Math.max(Math.min(num, max), min);
-}
-function gridAreaObjToString(area) {
-    var rowStart = area.rowStart, colStart = area.colStart, rowEnd = area.rowEnd, colEnd = area.colEnd;
-    return "".concat(rowStart, " / ").concat(colStart, " / ").concat(rowEnd, " / ").concat(colEnd);
-}
-function getGridAreaFromGroup(position) {
-    var x = position.x, y = position.y, cols = position.cols, rows = position.rows;
-    var colStart = clamp(x + 1, 1, Math.max(1, 25 - cols));
-    var rowStart = clamp(y + 1, 1, Infinity);
-    var rowEnd = clamp(rows + rowStart, rowStart + 1, Infinity);
-    var colEnd = clamp(colStart + cols, colStart + 1, 25);
-    return {
-        rowStart: rowStart,
-        colStart: colStart,
-        rowEnd: rowEnd,
-        colEnd: colEnd
-    };
-}
-/**
- * grid-area 문자열을 파싱하여 객체로 변환합니다.
- * 예: "1 / 2 / 3 / 4" => { rowStart: 1, colStart: 2, rowEnd: 3, colEnd: 4 }
- */
-function parseGridArea(gridArea) {
-    var _a = gridArea
-        .split('/')
-        .map(function (str) { return parseInt(str.trim(), 10); }), rowStart = _a[0], colStart = _a[1], rowEnd = _a[2], colEnd = _a[3];
-    return { rowStart: rowStart, colStart: colStart, rowEnd: rowEnd, colEnd: colEnd };
-}
-/**
- * 부모 그룹 영역을 기준으로 컴포넌트의 상대적 위치를 계산합니다.
- * 예: 부모가 row 21에서 시작하고 컴포넌트가 row 21에 있다면, 상대적으로는 row 1에 위치하게 됩니다.
- */
-function calculateRelativeGridArea(componentArea, parentArea) {
-    return {
-        // 컴포넌트의 시작 위치에서 부모의 시작 위치를 빼서 상대적 위치 계산
-        rowStart: componentArea.rowStart - parentArea.rowStart + 1,
-        colStart: componentArea.colStart - parentArea.colStart + 1,
-        // 상대적 끝 위치도 같은 방식으로 계산
-        rowEnd: componentArea.rowEnd - parentArea.rowStart + 1,
-        colEnd: componentArea.colEnd - parentArea.colStart + 1
-    };
-}
-function getMaxHeight(props, rowHeight) {
-    var gap = 10;
-    var rows = props.rows;
-    var height = rows * rowHeight + (rows - 1) * gap;
-    return height;
-    // if (device === 'DESKTOP') {
-    //   const { rows } = props;
-    //   const height = rows * rowHeight + (rows - 1) * gap;
-    //   return height;
-    // }
-    // const rowsMobile = props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE'];
-    // const height = rowsMobile * rowHeight + (rowsMobile - 1) * gap;
-    // return height;
-}
-var S_GroupItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-shadow: ", ";\n  gap: 10px;\n  grid-template-columns: repeat(", ", 1fr);\n  grid-template-rows: ", ";\n  pointer-events: none;\n  position: relative; /* \uBC30\uC5F4\uC744 \uACF5\uBC31\uC73C\uB85C \uAD6C\uBD84\uB41C \uBB38\uC790\uC5F4\uB85C \uD569\uCE69\uB2C8\uB2E4. */\n"], ["\n  box-shadow: ", ";\n  gap: 10px;\n  grid-template-columns: repeat(", ", 1fr);\n  grid-template-rows: ", ";\n  pointer-events: none;\n  position: relative; /* \uBC30\uC5F4\uC744 \uACF5\uBC31\uC73C\uB85C \uAD6C\uBD84\uB41C \uBB38\uC790\uC5F4\uB85C \uD569\uCE69\uB2C8\uB2E4. */\n"])), function (props) { return (props.isEditMode ? '0 0 0 2px #027aff' : 'none'); }, function (props) { return props.cols; }, function (props) {
-    //     // 전체 행 개수만큼 배열을 생성하여 각 행의 CSS 값을 정의합니다.
+var S_GroupItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-shadow: ", ";\n  gap: 10px;\n  grid-template-columns: repeat(", ", 1fr);\n  grid-template-rows: ", ";\n  pointer-events: none;\n  position: relative;\n"], ["\n  box-shadow: ", ";\n  gap: 10px;\n  grid-template-columns: repeat(", ", 1fr);\n  grid-template-rows: ", ";\n  pointer-events: none;\n  position: relative;\n"])), function (props) { return (props.isEditMode ? '0 0 0 2px #027aff' : 'none'); }, function (props) { return props.cols; }, function (props) {
     return Array.from({ length: props.sectionRow })
-        .map(function () {
-        // props로 받은 selectedRows 배열에 현재 행(index)이 포함되어 있는지 확인합니다.
-        // props.selectedRows.includes(index)
-        //   ? `minmax(${props.rowHeight}px, auto)` // 포함되어 있다면 minmax 사용
-        //   : `${props.rowHeight}px` // 포함되어 있지 않다면 고정 높이 사용
-        return "minmax(".concat(props.rowHeight, "px, auto)");
-    })
+        .map(function () { return "minmax(".concat(props.rowHeight, "px, auto)"); })
         .join(' ');
 });
 var templateObject_1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web-test",
-  "version": "2.7.453",
+  "version": "2.7.455",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",
@@ -24,8 +24,7 @@
     "i18next-intervalplural-postprocessor": "^3.0.0",
     "lottie-react": "^2.3.1",
     "nuka-carousel": "^4.8.4",
-    "publ-echo": "^0.0.120",
-    "publ-echo-test": "^0.0.396",
+    "publ-echo": "^0.0.122",
     "react-hook-form": "^7.28.1",
     "react-i18next": "^11.12.0",
     "react-router-dom": "^5.2.0",

package/release-note.md

@@ -1,8 +1,7 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.2.262]
+## [v2.2.270]
 ## daily|https://design.storybook.publ.biz/
 
 ### 업데이트 사항
 
-* [PDS-1382] BrandLogo id props 추가
-
+* [PATCH][PUB-1388] ChatBubbleListItem의 다운로드 버튼이 항상 가운데에 머물도록 수정