From 2a2bf86d12769ec8af6e8bc5d7852b39c95281e3 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 10 Nov 2025 15:09:27 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20calculateGridInfo=20=EB=8D=94=EB=AF=B8?=
 =?UTF-8?q?=20=ED=95=A8=EC=88=98=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20?=
 =?UTF-8?q?=EB=93=9C=EB=9E=98=EA=B7=B8=20=EC=95=A4=20=EB=93=9C=EB=A1=AD=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/components/screen/ScreenDesigner.tsx | 64 +++++--------------
 1 file changed, 16 insertions(+), 48 deletions(-)

diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx
index 20f158a6..60435ab9 100644
--- a/frontend/components/screen/ScreenDesigner.tsx
+++ b/frontend/components/screen/ScreenDesigner.tsx
@@ -44,6 +44,18 @@ const snapSizeTo10px = (size: { width: number; height: number }): { width: numbe
     height: snapTo10px(size.height),
   };
 };
+
+// calculateGridInfo 더미 함수 (하위 호환성을 위해 유지)
+const calculateGridInfo = (width: number, height: number, settings: any) => {
+  return {
+    columnWidth: 10,
+    totalWidth: width,
+    totalHeight: height,
+    columns: settings.columns || 12,
+    gap: settings.gap || 0,
+    padding: settings.padding || 0,
+  };
+};
 import { GroupingToolbar } from "./GroupingToolbar";
 import { screenApi, tableTypeApi } from "@/lib/api/screen";
 import { tableManagementApi } from "@/lib/api/tableManagement";
@@ -2292,34 +2304,6 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
           };
         } else if (type === "column") {
           // console.log("🔄 컬럼 드롭 처리:", { webType: column.widgetType, columnName: column.columnName });
-          // 현재 해상도에 맞는 격자 정보로 기본 크기 계산
-          const currentGridInfo = layout.gridSettings
-            ? calculateGridInfo(screenResolution.width, screenResolution.height, {
-                columns: layout.gridSettings.columns,
-                gap: layout.gridSettings.gap,
-                padding: layout.gridSettings.padding,
-                snapToGrid: layout.gridSettings.snapToGrid || false,
-              })
-            : null;
-
-          // 격자 스냅이 활성화된 경우 정확한 격자 크기로 생성, 아니면 기본값
-          const defaultWidth =
-            currentGridInfo && layout.gridSettings?.snapToGrid
-              ? calculateWidthFromColumns(1, currentGridInfo, layout.gridSettings as GridUtilSettings)
-              : 200;
-
-          console.log("🎯 컴포넌트 생성 시 크기 계산:", {
-            screenResolution: `${screenResolution.width}x${screenResolution.height}`,
-            gridSettings: layout.gridSettings,
-            currentGridInfo: currentGridInfo
-              ? {
-                  columnWidth: currentGridInfo.columnWidth.toFixed(2),
-                  totalWidth: currentGridInfo.totalWidth,
-                }
-              : null,
-            defaultWidth: defaultWidth.toFixed(2),
-            snapToGrid: true,
-          });
 
           // 웹타입별 기본 너비 계산 (10px 단위 고정)
           const getDefaultWidth = (widgetType: string): number => {
@@ -2627,31 +2611,15 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
           return;
         }
 
-        // 격자 스냅 적용 (그룹 컴포넌트 제외)
+        // 10px 단위 스냅 적용 (그룹 컴포넌트 제외)
         if (layout.gridSettings?.snapToGrid && newComponent.type !== "group") {
-          // 현재 해상도에 맞는 격자 정보 계산
-          const currentGridInfo = calculateGridInfo(screenResolution.width, screenResolution.height, {
-            columns: layout.gridSettings.columns,
-            gap: layout.gridSettings.gap,
-            padding: layout.gridSettings.padding,
-            snapToGrid: layout.gridSettings.snapToGrid || false,
-          });
+          newComponent.position = snapPositionTo10px(newComponent.position);
+          newComponent.size = snapSizeTo10px(newComponent.size);
 
-          const gridUtilSettings = {
-            columns: layout.gridSettings.columns,
-            gap: layout.gridSettings.gap,
-            padding: layout.gridSettings.padding,
-            snapToGrid: layout.gridSettings.snapToGrid || false,
-          };
-          newComponent.position = snapPositionTo10px(newComponent.position, currentGridInfo, gridUtilSettings);
-          newComponent.size = snapSizeTo10px(newComponent.size, currentGridInfo, gridUtilSettings);
-
-          console.log("🧲 새 컴포넌트 격자 스냅 적용:", {
+          console.log("🧲 새 컴포넌트 10px 스냅 적용:", {
             type: newComponent.type,
-            resolution: `${screenResolution.width}x${screenResolution.height}`,
             snappedPosition: newComponent.position,
             snappedSize: newComponent.size,
-            columnWidth: currentGridInfo.columnWidth,
           });
         }