From bd64762d4a071bbef31c180e34ca9698576e72a1 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Thu, 16 Oct 2025 16:54:21 +0900
Subject: [PATCH] =?UTF-8?q?=EC=9D=B4=EC=A4=91=20=EC=8A=A4=ED=81=AC?=
 =?UTF-8?q?=EB=A1=A4=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/(main)/screens/[screenId]/page.tsx    | 53 ++++++++++++++++---
 1 file changed, 46 insertions(+), 7 deletions(-)

diff --git a/frontend/app/(main)/screens/[screenId]/page.tsx b/frontend/app/(main)/screens/[screenId]/page.tsx
index 72356cf0..81e7ee49 100644
--- a/frontend/app/(main)/screens/[screenId]/page.tsx
+++ b/frontend/app/(main)/screens/[screenId]/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState, useRef } from "react";
+import React, { useEffect, useState, useRef, useMemo } from "react";
 import { useParams } from "next/navigation";
 import { Button } from "@/components/ui/button";
 import { Loader2 } from "lucide-react";
@@ -152,6 +152,43 @@ export default function ScreenViewPage() {
     updateScale();
   }, [layout]);
 
+  // 실제 컨텐츠의 동적 높이 상태
+  const [actualContentHeight, setActualContentHeight] = useState(layout?.screenResolution?.height || 800);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  // ResizeObserver로 컨텐츠 높이 실시간 모니터링
+  useEffect(() => {
+    if (!contentRef.current) return;
+
+    const resizeObserver = new ResizeObserver(() => {
+      if (!contentRef.current) return;
+
+      // 모든 컴포넌트의 실제 높이를 측정
+      const components = contentRef.current.querySelectorAll("[data-component-id]");
+      let maxBottom = layout?.screenResolution?.height || 800;
+
+      components.forEach((element) => {
+        const rect = element.getBoundingClientRect();
+        const parentRect = contentRef.current!.getBoundingClientRect();
+        const relativeTop = rect.top - parentRect.top;
+        const bottom = relativeTop + rect.height;
+        maxBottom = Math.max(maxBottom, bottom);
+      });
+
+      setActualContentHeight(maxBottom);
+    });
+
+    resizeObserver.observe(contentRef.current);
+
+    // 모든 자식 요소도 관찰
+    const childElements = contentRef.current.querySelectorAll("[data-component-id]");
+    childElements.forEach((child) => resizeObserver.observe(child));
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [layout]);
+
   if (loading) {
     return (
       <div className="flex h-full min-h-[400px] w-full items-center justify-center bg-gradient-to-br from-gray-50 to-slate-100">
@@ -185,23 +222,24 @@ export default function ScreenViewPage() {
   const screenHeight = layout?.screenResolution?.height || 800;
 
   return (
-    <div className="h-full w-full overflow-auto bg-white" style={{ padding: "16px 0" }}>
+    <div className="h-full w-full bg-white" style={{ padding: "16px 0" }}>
       {layout && layout.components.length > 0 ? (
         // 스케일링된 화면을 감싸는 래퍼 (실제 크기 조정 + 좌우 마진 16px)
         <div
           style={{
             width: `${screenWidth * scale}px`,
-            height: `${screenHeight * scale}px`,
+            minHeight: `${actualContentHeight * scale}px`,
             marginLeft: "16px",
             marginRight: "16px",
           }}
         >
           {/* 캔버스 컴포넌트들을 가로폭에 맞춰 스케일링하여 표시 */}
           <div
+            ref={contentRef}
             className="relative bg-white"
             style={{
               width: `${screenWidth}px`,
-              height: `${screenHeight}px`,
+              minHeight: `${actualContentHeight}px`,
               transform: `scale(${scale})`,
               transformOrigin: "top left",
             }}
@@ -315,12 +353,13 @@ export default function ScreenViewPage() {
 
                     {/* 실제 컴포넌트 */}
                     <div
+                      data-component-id={component.id}
                       style={{
                         position: "absolute",
                         left: `${component.position.x}px`,
                         top: `${component.position.y}px`,
                         width: component.style?.width || `${component.size.width}px`,
-                        height: component.style?.height || `${component.size.height}px`,
+                        minHeight: component.style?.height || `${component.size.height}px`,
                         zIndex: component.position.z || 1,
                       }}
                       onMouseEnter={() => {
@@ -435,7 +474,7 @@ export default function ScreenViewPage() {
         <div
           style={{
             width: `${screenWidth * scale}px`,
-            height: `${screenHeight * scale}px`,
+            minHeight: `${screenHeight * scale}px`,
             marginLeft: "16px",
             marginRight: "16px",
           }}
@@ -444,7 +483,7 @@ export default function ScreenViewPage() {
             className="flex items-center justify-center bg-white"
             style={{
               width: `${screenWidth}px`,
-              height: `${screenHeight}px`,
+              minHeight: `${screenHeight}px`,
               transform: `scale(${scale})`,
               transformOrigin: "top left",
             }}