Merge branch 'main' of http://39.117.244.52:3000/kjs/ERP-node into feature/screen-management

frontend/components/screen/RealtimePreviewDynamic.tsx

@@ -54,7 +54,7 @@ interface RealtimePreviewProps {
   // 폼 데이터 관련 props
   formData?: Record<string, any>;
   onFormDataChange?: (fieldName: string, value: any) => void;
-  
+
   // 테이블 정렬 정보
   sortBy?: string;
   sortOrder?: "asc" | "desc";
@@ -229,10 +229,10 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
     }
 
     // 2순위: x=0인 컴포넌트는 전체 너비 사용 (버튼 제외)
-    const isButtonComponent = 
+    const isButtonComponent =
       (component.type === "widget" && (component as WidgetComponent).widgetType === "button") ||
       (component.type === "component" && (component as any).componentType?.includes("button"));
-    
+
     if (position.x === 0 && !isButtonComponent) {
       console.log("⚠️ [getWidth] 100% 사용 (x=0):", {
         componentId: id,
@@ -269,9 +269,9 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
       return `${actualHeight}px`;
     }
 
-    // 1순위: style.height가 있으면 우선 사용
+    // 1순위: style.height가 있으면 우선 사용 (문자열 그대로 또는 숫자+px)
     if (componentStyle?.height) {
-      return componentStyle.height;
+      return typeof componentStyle.height === "number" ? `${componentStyle.height}px` : componentStyle.height;
     }
 
     // 2순위: size.height (픽셀)
@@ -283,6 +283,20 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
     return `${size?.height || 10}px`;
   };
 
+  // layout 타입 컴포넌트인지 확인
+  const isLayoutComponent = component.type === "layout" || (component.componentConfig as any)?.type?.includes("layout");
+
+  // layout 컴포넌트는 component 객체에 style.height 추가
+  const enhancedComponent = isLayoutComponent
+    ? {
+        ...component,
+        style: {
+          ...component.style,
+          height: getHeight(),
+        },
+      }
+    : component;
+
   const baseStyle = {
     left: `${position.x}px`,
     top: `${position.y}px`,
@@ -296,14 +310,14 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
   // 🔍 DOM 렌더링 후 실제 크기 측정
   const innerDivRef = React.useRef<HTMLDivElement>(null);
   const outerDivRef = React.useRef<HTMLDivElement>(null);
-  
+
   React.useEffect(() => {
     if (outerDivRef.current && innerDivRef.current) {
       const outerRect = outerDivRef.current.getBoundingClientRect();
       const innerRect = innerDivRef.current.getBoundingClientRect();
       const computedOuter = window.getComputedStyle(outerDivRef.current);
       const computedInner = window.getComputedStyle(innerDivRef.current);
-      
+
       console.log("📐 [DOM 실제 크기 상세]:", {
         componentId: id,
         label: component.label,
@@ -325,7 +339,7 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
         },
         "4. 너비 비교": {
           "외부 / 내부": `${outerRect.width}px / ${innerRect.width}px`,
-          "비율": `${((innerRect.width / outerRect.width) * 100).toFixed(2)}%`,
+          비율: `${((innerRect.width / outerRect.width) * 100).toFixed(2)}%`,
         },
       });
     }
@@ -376,7 +390,7 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
         style={{ width: "100%", maxWidth: "100%" }}
       >
         <DynamicComponentRenderer
-          component={component}
+          component={enhancedComponent}
           isSelected={isSelected}
           isDesignMode={isDesignMode}
           isInteractive={!isDesignMode} // 편집 모드가 아닐 때만 인터랙티브