카드 레이아웃 구현

frontend/components/screen/ScreenDesigner.tsx

@@ -306,9 +306,62 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
         timestamp: new Date().toISOString(),
       });
 
+      const targetComponent = layout.components.find((comp) => comp.id === componentId);
+      const isLayoutComponent = targetComponent?.type === "layout";
+
+      // 레이아웃 컴포넌트의 위치가 변경되는 경우 존에 속한 컴포넌트들도 함께 이동
+      let positionDelta = { x: 0, y: 0 };
+      if (isLayoutComponent && (path === "position.x" || path === "position.y" || path === "position")) {
+        const oldPosition = targetComponent.position;
+        let newPosition = { ...oldPosition };
+
+        if (path === "position.x") {
+          newPosition.x = value;
+          positionDelta.x = value - oldPosition.x;
+        } else if (path === "position.y") {
+          newPosition.y = value;
+          positionDelta.y = value - oldPosition.y;
+        } else if (path === "position") {
+          newPosition = value;
+          positionDelta.x = value.x - oldPosition.x;
+          positionDelta.y = value.y - oldPosition.y;
+        }
+
+        console.log("📐 레이아웃 이동 감지:", {
+          layoutId: componentId,
+          oldPosition,
+          newPosition,
+          positionDelta,
+        });
+      }
+
       const pathParts = path.split(".");
       const updatedComponents = layout.components.map((comp) => {
-        if (comp.id !== componentId) return comp;
+        if (comp.id !== componentId) {
+          // 레이아웃 이동 시 존에 속한 컴포넌트들도 함께 이동
+          if (isLayoutComponent && (positionDelta.x !== 0 || positionDelta.y !== 0)) {
+            // 이 레이아웃의 존에 속한 컴포넌트인지 확인
+            const isInLayoutZone = comp.parentId === componentId && comp.zoneId;
+            if (isInLayoutZone) {
+              console.log("🔄 존 컴포넌트 함께 이동:", {
+                componentId: comp.id,
+                zoneId: comp.zoneId,
+                oldPosition: comp.position,
+                delta: positionDelta,
+              });
+
+              return {
+                ...comp,
+                position: {
+                  ...comp.position,
+                  x: comp.position.x + positionDelta.x,
+                  y: comp.position.y + positionDelta.y,
+                },
+              };
+            }
+          }
+          return comp;
+        }
 
         const newComp = { ...comp };
         let current: any = newComp;
@@ -1839,10 +1892,26 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
 
       // 다중 선택된 컴포넌트들 확인
       const isDraggedComponentSelected = groupState.selectedComponents.includes(component.id);
-      const componentsToMove = isDraggedComponentSelected
+      let componentsToMove = isDraggedComponentSelected
         ? layout.components.filter((comp) => groupState.selectedComponents.includes(comp.id))
         : [component];
 
+      // 레이아웃 컴포넌트인 경우 존에 속한 컴포넌트들도 함께 이동
+      if (component.type === "layout") {
+        const zoneComponents = layout.components.filter((comp) => comp.parentId === component.id && comp.zoneId);
+
+        console.log("🏗️ 레이아웃 드래그 - 존 컴포넌트들 포함:", {
+          layoutId: component.id,
+          zoneComponentsCount: zoneComponents.length,
+          zoneComponents: zoneComponents.map((c) => ({ id: c.id, zoneId: c.zoneId })),
+        });
+
+        // 중복 제거하여 추가
+        const allComponentIds = new Set(componentsToMove.map((c) => c.id));
+        const additionalComponents = zoneComponents.filter((c) => !allComponentIds.has(c.id));
+        componentsToMove = [...componentsToMove, ...additionalComponents];
+      }
+
       console.log("드래그 시작:", component.id, "이동할 컴포넌트 수:", componentsToMove.length);
       console.log("마우스 위치:", {
         clientX: event.clientX,
@@ -3035,6 +3104,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
                     onClick={(e) => handleComponentClick(component, e)}
                     onDragStart={(e) => startComponentDrag(component, e)}
                     onDragEnd={endDrag}
+                    selectedScreen={selectedScreen}
                   >
                     {/* 컨테이너, 그룹, 영역의 자식 컴포넌트들 렌더링 */}
                     {(component.type === "group" || component.type === "container" || component.type === "area") &&
@@ -3111,6 +3181,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
                               onClick={(e) => handleComponentClick(child, e)}
                               onDragStart={(e) => startComponentDrag(child, e)}
                               onDragEnd={endDrag}
+                              selectedScreen={selectedScreen}
                             />
                           );
                         })}