컴포넌트 그룹화기능

frontend/lib/utils/groupingUtils.ts

@@ -12,14 +12,19 @@ export function createGroupComponent(
   componentIds: string[],
   title: string = "새 그룹",
   position: Position = { x: 0, y: 0 },
+  boundingBox?: { width: number; height: number },
   style?: any,
 ): GroupComponent {
+  // 격자 기반 크기 계산
+  const gridWidth = Math.max(6, Math.ceil(boundingBox?.width / 80) + 2); // 최소 6 그리드, 여백 2
+  const gridHeight = Math.max(100, (boundingBox?.height || 200) + 40); // 최소 100px, 여백 40px
+
   return {
     id: generateComponentId(),
     type: "group",
     position,
-    size: { width: 12, height: 200 }, // 기본 크기
-    title,
+    size: { width: gridWidth, height: gridHeight },
+    label: title, // title 대신 label 사용
     backgroundColor: "#f8f9fa",
     border: "1px solid #dee2e6",
     borderRadius: 8,
@@ -34,7 +39,7 @@ export function createGroupComponent(
   };
 }
 
-// 선택된 컴포넌트들의 경계 박스 계산
+// 선택된 컴포넌트들의 경계 박스 계산 (격자 기반)
 export function calculateBoundingBox(components: ComponentData[]): {
   minX: number;
   minY: number;
@@ -49,7 +54,7 @@ export function calculateBoundingBox(components: ComponentData[]): {
 
   const minX = Math.min(...components.map((c) => c.position.x));
   const minY = Math.min(...components.map((c) => c.position.y));
-  const maxX = Math.max(...components.map((c) => c.position.x + (c.size.width * 80 - 16)));
+  const maxX = Math.max(...components.map((c) => c.position.x + c.size.width * 80));
   const maxY = Math.max(...components.map((c) => c.position.y + c.size.height));
 
   return {
@@ -63,14 +68,18 @@ export function calculateBoundingBox(components: ComponentData[]): {
 }
 
 // 그룹 내 컴포넌트들의 상대 위치 계산
-export function calculateRelativePositions(components: ComponentData[], groupPosition: Position): ComponentData[] {
+export function calculateRelativePositions(
+  components: ComponentData[],
+  groupPosition: Position,
+  groupId: string,
+): ComponentData[] {
   return components.map((component) => ({
     ...component,
     position: {
       x: component.position.x - groupPosition.x,
       y: component.position.y - groupPosition.y,
     },
-    parentId: components[0]?.id, // 임시로 첫 번째 컴포넌트 ID 사용
+    parentId: groupId, // 그룹 ID를 부모로 설정
   }));
 }