publ-echo-test 0.0.345 → 0.0.347

package/dist/lib/GridLayoutEditor/Placeholder.d.ts

@@ -1,13 +1,13 @@
 import { LayoutItem } from "./types";
 type PlaceholderProps = {
     margin: [number, number];
-    width: number;
     rowHeight: number;
     colWidth: number;
     backgroundWidth: string | undefined;
     backgroundHeight: string | undefined;
     activeDrag: LayoutItem;
     selectedBlockId: string | null;
+    totalCols: number;
 };
-export declare function GridBackgroundPlaceholder({ margin, width, rowHeight, colWidth, backgroundWidth, backgroundHeight, activeDrag, selectedBlockId, }: PlaceholderProps): import("react/jsx-runtime").JSX.Element;
+export declare function GridBackgroundPlaceholder({ margin, rowHeight, colWidth, backgroundWidth, backgroundHeight, activeDrag, selectedBlockId, totalCols, }: PlaceholderProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/lib/GridLayoutEditor/Placeholder.js

@@ -1,41 +1,36 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled from "styled-components"; // 1. styled-components import
-// --- 2. Styled Components 정의 ---
-// 기본 그리드 패턴용 rect
-var GridPatternRect = styled.rect(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  fill: #f0f0f0;\n  stroke: #ddd;\n  stroke-width: 1px;\n"], ["\n  fill: #f0f0f0;\n  stroke: #ddd;\n  stroke-width: 1px;\n"])));
-// 활성화된 셀(개별)용 rect
-var ActiveCellRect = styled.rect(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  fill: rgba(0, 255, 0, 0.2);\n  stroke: rgba(0, 255, 8, 0.5);\n  stroke-width: 1px;\n"], ["\n  fill: rgba(0, 255, 0, 0.2);\n  stroke: rgba(0, 255, 8, 0.5);\n  stroke-width: 1px;\n"])));
-// "↕ 가변" 텍스트용 text
-var IndicatorText = styled.text(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  fill: rgba(0, 255, 8, 0.5);\n  font-size: 12px;\n  font-weight: 600;\n  /* y \uC88C\uD45C \uAE30\uC900 \uC138\uB85C \uC911\uC559 \uC815\uB82C */\n  dominant-baseline: central;\n  /* x \uC88C\uD45C \uAE30\uC900 \uC67C\uCABD \uC815\uB82C */\n  text-anchor: start;\n"], ["\n  fill: rgba(0, 255, 8, 0.5);\n  font-size: 12px;\n  font-weight: 600;\n  /* y \uC88C\uD45C \uAE30\uC900 \uC138\uB85C \uC911\uC559 \uC815\uB82C */\n  dominant-baseline: central;\n  /* x \uC88C\uD45C \uAE30\uC900 \uC67C\uCABD \uC815\uB82C */\n  text-anchor: start;\n"])));
 export function GridBackgroundPlaceholder(_a) {
-    var margin = _a.margin, width = _a.width, rowHeight = _a.rowHeight, colWidth = _a.colWidth, backgroundWidth = _a.backgroundWidth, backgroundHeight = _a.backgroundHeight, activeDrag = _a.activeDrag, selectedBlockId = _a.selectedBlockId;
-    // 활성화된 행 인덱스
+    var margin = _a.margin, 
+    // width, // 🚨 제거
+    rowHeight = _a.rowHeight, colWidth = _a.colWidth, backgroundWidth = _a.backgroundWidth, backgroundHeight = _a.backgroundHeight, activeDrag = _a.activeDrag, selectedBlockId = _a.selectedBlockId, totalCols = _a.totalCols;
+    // 활성화된 행(row) 인덱스 배열
     var activeRows = Array.from({ length: activeDrag.h }, function (_, i) { return activeDrag.y + i; });
-    // 모든 열 인덱스 (0부터 23까지)
-    var activeCols = Array.from({ length: 24 }, function (_, i) { return 0 + i; });
-    // 텍스트 여백
+    // 🚨 activeCols도 totalCols prop으로 받아서 사용
+    // const activeCols = Array.from({ length: 24 }, (_, i) => 0 + i);
+    var activeCols = Array.from({ length: totalCols }, function (_, i) { return 0 + i; });
     var textPadding = 10;
+    // 💡 SVG 캔버스 내부에서 그리드가 차지하는 '실제' 너비를 계산
+    // (총 열 수 * (각 열의 너비 + 가로 마진)) - 마지막 열의 추가 마진
+    // 패턴은 colWidth + margin[0] 단위로 반복되므로, 마지막 열에서는 margin[0]이 필요 없습니다.
+    // 또는, 마지막 요소에는 margin[0]이 없다고 가정하고 계산합니다.
+    var gridContentWidth = totalCols * (colWidth + margin[0]) - margin[0];
     return (_jsx("div", { className: "grid-placeholder", style: {
             marginTop: margin[1] + "px",
             marginBottom: margin[1] + "px",
             marginLeft: margin[0] + "px",
             marginRight: margin[0] + "px",
-        }, children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: backgroundWidth, height: backgroundHeight, overflow: "visible" // 3. 텍스트가 잘리지 않도록 overflow="visible" 추가
-            , children: [_jsx("defs", { children: _jsx("pattern", { id: "grid-pattern", height: rowHeight + margin[1], width: colWidth + margin[0], patternUnits: "userSpaceOnUse", children: _jsx(GridPatternRect, { x: 0.5, y: 0.5, height: rowHeight, width: colWidth }) }) }), _jsx("rect", { width: width, height: "100%", fill: "url(#grid-pattern)" }), activeDrag &&
+        }, children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", 
+            // 💡 backgroundWidth는 string("100%")으로 사용하되,
+            //    내부 요소 배치에는 gridContentWidth를 사용합니다.
+            width: backgroundWidth, height: backgroundHeight, overflow: "visible", children: [_jsx("defs", { children: _jsx("pattern", { id: "grid-pattern", height: rowHeight + margin[1], width: colWidth + margin[0], patternUnits: "userSpaceOnUse", children: _jsx("rect", { x: 0.5, y: 0.5, className: "grid-pattern-rect", height: rowHeight, width: colWidth }) }) }), _jsx("rect", { width: gridContentWidth, height: "100%", fill: "url(#grid-pattern)" }), activeDrag &&
                     activeRows.map(function (row) {
-                        // 이 행의 y 좌표 계산
                         var y_top = row * (rowHeight + margin[1]) + 0.5;
-                        // 텍스트를 위한 행의 세로 중앙 y 좌표
                         var y_center = y_top + rowHeight / 2;
-                        // 5. <g> 태그로 각 행의 요소들을 그룹화
                         return (_jsxs("g", { children: [activeCols.map(function (col) {
                                     var x = col * (colWidth + margin[0]) + 0.5;
-                                    return (_jsx(ActiveCellRect, { x: x, y: y_top, width: colWidth, height: rowHeight }, "".concat(row, "-").concat(col)));
-                                }), _jsx(IndicatorText, { x: width + textPadding, y: y_center, children: "\u2195 \uAC00\uBCC0" })] }, row));
+                                    return (_jsx("rect", { x: x, y: y_top, width: colWidth, height: rowHeight, className: "grid-active-cell-placeholder" }, "active-".concat(row, "-").concat(col)));
+                                }), _jsx("text", { 
+                                    // 💡 텍스트 x 위치도 gridContentWidth를 기준으로 계산
+                                    x: gridContentWidth + textPadding, y: y_center, className: "grid-indicator-text", children: "\u2195 \uAC00\uBCC0" })] }, "active-row-".concat(row)));
                     })] }) }));
 }
-var templateObject_1, templateObject_2, templateObject_3;

package/dist/lib/GridLayoutEditor/ReactGridLayout.js

@@ -67,7 +67,6 @@ var ReactGridLayout = function (_a) {
     var selectedBlock = blockStructure && selectedBlockId
         ? findBlockByBlockId(blockStructure, selectedBlockId)
         : null;
-    console.log("selectedBlockId:", selectedBlock);
     var editingGroupAllChildren = blockStructure && editingGroupBlock
         ? findAllChildrenCbIds(blockStructure, editingGroupBlock).map(function (i) {
             return i.toString();
@@ -747,6 +746,8 @@ var ReactGridLayout = function (_a) {
     var currentGroupBlocks = blockStructure
         ? findGroupBlocks(blockStructure, editingGroupBlock)
         : [];
-    return (_jsxs("div", { ref: innerRef, className: mergedClassName, style: mergedStyle, onDrop: isDroppable ? onDropHandler : noop, onDragLeave: isDroppable ? onDragLeaveHandler : noop, onDragEnter: isDroppable ? onDragEnterHandler : noop, onDragOver: isDroppable ? onDragOverHandler : noop, "data-grid-row-height": rowHeight, "data-grid-cols": cols, "data-section-id": sectionId, children: [currentGroupBlocks.map(function (each) { return processGroup(each); }), React.Children.map(children, function (child) { return processGridItem(child); }), placeholder(), activeDrag && _jsx("div", { className: "grid-guide-line-center" }), activeDrag && (_jsx(GridBackgroundPlaceholder, { backgroundWidth: getBackgroundWidth(), backgroundHeight: getBackgroundHeight(), margin: margin, width: width, rowHeight: rowHeight, colWidth: colWidth, activeDrag: activeDrag, selectedBlockId: selectedBlockId }))] }));
+    return (_jsxs("div", { ref: innerRef, className: mergedClassName, style: mergedStyle, onDrop: isDroppable ? onDropHandler : noop, onDragLeave: isDroppable ? onDragLeaveHandler : noop, onDragEnter: isDroppable ? onDragEnterHandler : noop, onDragOver: isDroppable ? onDragOverHandler : noop, "data-grid-row-height": rowHeight, "data-grid-cols": cols, "data-section-id": sectionId, children: [currentGroupBlocks.map(function (each) { return processGroup(each); }), React.Children.map(children, function (child) { return processGridItem(child); }), placeholder(), activeDrag && _jsx("div", { className: "grid-guide-line-center" }), activeDrag && (_jsx(GridBackgroundPlaceholder, { backgroundWidth: getBackgroundWidth(), backgroundHeight: getBackgroundHeight(), margin: margin, 
+                // width={width}
+                rowHeight: rowHeight, colWidth: colWidth, activeDrag: activeDrag, selectedBlockId: selectedBlockId, totalCols: cols }))] }));
 };
 export default ReactGridLayout;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "publ-echo-test",
-  "version": "0.0.345",
+  "version": "0.0.347",
   "private": false,
   "main": "dist/lib/index.js",
   "types": "dist/lib/index.d.js",