버튼 그룹 위치 수정

frontend/app/(main)/screens/[screenId]/page.tsx

@@ -310,7 +310,7 @@ export default function ScreenViewPage() {
 
                   // 🔧 임시: 버튼 그룹 기능 완전 비활성화
                   // TODO: 사용자가 명시적으로 그룹을 원하는 경우에만 활성화하도록 UI 개선 필요
-                  const DISABLE_BUTTON_GROUPS = true;
+                  const DISABLE_BUTTON_GROUPS = false;
 
                   if (
                     !DISABLE_BUTTON_GROUPS &&
@@ -457,20 +457,36 @@ export default function ScreenViewPage() {
                     const groupConfig = (firstButton as any).webTypeConfig
                       ?.flowVisibilityConfig as FlowVisibilityConfig;
 
-                    // 그룹의 위치는 모든 버튼 중 가장 왼쪽/위쪽 버튼의 위치 사용
-                    const groupPosition = buttons.reduce(
-                      (min, button) => ({
-                        x: Math.min(min.x, button.position.x),
-                        y: Math.min(min.y, button.position.y),
-                        z: min.z,
-                      }),
-                      { x: buttons[0].position.x, y: buttons[0].position.y, z: buttons[0].position.z || 2 },
-                    );
+                    // 🔍 버튼 그룹 설정 확인
+                    console.log("🔍 버튼 그룹 설정:", {
+                      groupId,
+                      buttonCount: buttons.length,
+                      buttons: buttons.map((b) => ({
+                        id: b.id,
+                        label: b.label,
+                        x: b.position.x,
+                        y: b.position.y,
+                      })),
+                      groupConfig: {
+                        layoutBehavior: groupConfig.layoutBehavior,
+                        groupDirection: groupConfig.groupDirection,
+                        groupAlign: groupConfig.groupAlign,
+                        groupGap: groupConfig.groupGap,
+                      },
+                    });
 
-                    // 버튼 그룹 위치에도 widthOffset 적용 (테이블이 늘어난 만큼 오른쪽으로 이동)
+                    // 🔧 수정: 그룹 컨테이너는 첫 번째 버튼 위치를 기준으로 하되,
+                    // 각 버튼의 상대 위치는 원래 위치를 유지
+                    const firstButtonPosition = {
+                      x: buttons[0].position.x,
+                      y: buttons[0].position.y,
+                      z: buttons[0].position.z || 2,
+                    };
+
+                    // 버튼 그룹 위치에도 widthOffset 적용
                     const adjustedGroupPosition = {
-                      ...groupPosition,
-                      x: groupPosition.x + widthOffset,
+                      ...firstButtonPosition,
+                      x: firstButtonPosition.x + widthOffset,
                     };
 
                     // 그룹의 크기 계산: 버튼들의 실제 크기 + 간격을 기준으로 계산
@@ -501,9 +517,9 @@ export default function ScreenViewPage() {
                         key={`flow-button-group-${groupId}`}
                         style={{
                           position: "absolute",
-                          left: `${groupPosition.x}px`,
-                          top: `${groupPosition.y}px`,
-                          zIndex: groupPosition.z,
+                          left: `${adjustedGroupPosition.x}px`,
+                          top: `${adjustedGroupPosition.y}px`,
+                          zIndex: adjustedGroupPosition.z,
                           width: `${groupWidth}px`,
                           height: `${groupHeight}px`,
                         }}
@@ -513,9 +529,14 @@ export default function ScreenViewPage() {
                           groupConfig={groupConfig}
                           isDesignMode={false}
                           renderButton={(button) => {
+                            // 🔧 각 버튼의 상대 위치 = 버튼의 원래 위치 - 첫 번째 버튼 위치
                             const relativeButton = {
                               ...button,
-                              position: { x: 0, y: 0, z: button.position.z || 1 },
+                              position: {
+                                x: button.position.x - firstButtonPosition.x,
+                                y: button.position.y - firstButtonPosition.y,
+                                z: button.position.z || 1,
+                              },
                             };
 
                             return (