레이아웃 컴포넌트 단순화

frontend/components/screen/RealtimePreviewDynamic.tsx

@@ -28,7 +28,9 @@ interface RealtimePreviewProps {
   onDragEnd?: () => void;
   onGroupToggle?: (groupId: string) => void; // 그룹 접기/펼치기
   children?: React.ReactNode; // 그룹 내 자식 컴포넌트들
-  selectedScreen?: any; // 선택된 화면 정보
+  selectedScreen?: any;
+  onZoneComponentDrop?: (e: React.DragEvent, zoneId: string, layoutId: string) => void; // 존별 드롭 핸들러
+  onZoneClick?: (zoneId: string) => void; // 존 클릭 핸들러
 }
 
 // 동적 위젯 타입 아이콘 (레지스트리에서 조회)
@@ -67,6 +69,8 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
   onGroupToggle,
   children,
   selectedScreen,
+  onZoneComponentDrop,
+  onZoneClick,
 }) => {
   const { id, type, position, size, style: componentStyle } = component;
 
@@ -79,13 +83,13 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
       }
     : {};
 
-  // 컴포넌트 기본 스타일
+  // 컴포넌트 기본 스타일 - 레이아웃은 항상 맨 아래
   const baseStyle = {
     left: `${position.x}px`,
     top: `${position.y}px`,
-    width: `${size.width}px`,
-    height: `${size.height}px`,
-    zIndex: position.z || 1,
+    width: `${size?.width || 100}px`,
+    height: `${size?.height || 36}px`,
+    zIndex: component.type === "layout" ? 1 : position.z || 2, // 레이아웃은 z-index 1, 다른 컴포넌트는 2 이상
     ...componentStyle,
   };
 
@@ -123,6 +127,8 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
           onDragEnd={onDragEnd}
           children={children}
           selectedScreen={selectedScreen}
+          onZoneComponentDrop={onZoneComponentDrop}
+          onZoneClick={onZoneClick}
         />
       </div>