123

frontend/components/screen/RealtimePreviewDynamic.tsx

@@ -362,15 +362,15 @@ const RealtimePreviewDynamicComponent: React.FC<RealtimePreviewProps> = ({
     // 런타임 모드에서 컴포넌트 타입별 높이 처리
     if (!isDesignMode) {
       const compType = (component as any).componentType || component.componentConfig?.type || "";
-      // 테이블: 부모 flex 컨테이너가 높이 관리 (flex: 1)
-      const flexGrowTypes = [
+      // 레이아웃 계열: 부모 래퍼를 꽉 채움 (ResponsiveGridRenderer가 % 높이 관리)
+      const fillParentTypes = [
         "table-list", "v2-table-list",
         "split-panel-layout", "split-panel-layout2",
         "v2-split-panel-layout", "screen-split-panel",
         "v2-tab-container", "tab-container",
         "tabs-widget", "v2-tabs-widget",
       ];
-      if (flexGrowTypes.some(t => compType === t)) {
+      if (fillParentTypes.some(t => compType === t)) {
         return "100%";
       }
       const autoHeightTypes = [

frontend/components/screen/ResponsiveGridRenderer.tsx

@@ -23,8 +23,9 @@ function getComponentTypeId(component: ComponentData): string {
 }
 
 /**
- * 디자이너 절대좌표를 캔버스 대비 비율로 변환하여 렌더링.
- * 화면이 줄어들면 비율에 맞게 축소, 늘어나면 확대.
+ * 디자이너 절대좌표를 캔버스 대비 비율(%)로 변환하여 렌더링.
+ * 가로: 컨테이너 너비 대비 % → 반응형 스케일
+ * 세로: 컨테이너 높이 대비 % → 뷰포트에 맞게 자동 조절
  */
 function ProportionalRenderer({
   components,
@@ -47,19 +48,12 @@ function ProportionalRenderer({
   }, []);
 
   const topLevel = components.filter((c) => !c.parentId);
-  const ratio = containerW > 0 ? containerW / canvasWidth : 1;
-
-  const maxBottom = topLevel.reduce((max, c) => {
-    const bottom = c.position.y + (c.size?.height || 40);
-    return Math.max(max, bottom);
-  }, 0);
 
   return (
     <div
       ref={containerRef}
       data-screen-runtime="true"
-      className="bg-background relative w-full overflow-x-hidden"
-      style={{ minHeight: containerW > 0 ? `${maxBottom * ratio}px` : "200px" }}
+      className="bg-background relative h-full w-full overflow-hidden"
     >
       {containerW > 0 &&
         topLevel.map((component) => {
@@ -72,9 +66,9 @@ function ProportionalRenderer({
               style={{
                 position: "absolute",
                 left: `${(component.position.x / canvasWidth) * 100}%`,
-                top: `${component.position.y * ratio}px`,
+                top: `${(component.position.y / canvasHeight) * 100}%`,
                 width: `${((component.size?.width || 100) / canvasWidth) * 100}%`,
-                height: `${(component.size?.height || 40) * ratio}px`,
+                height: `${((component.size?.height || 40) / canvasHeight) * 100}%`,
                 zIndex: component.position.z || 1,
               }}
             >