From 20e2729bf7edb1236c6195683459065411aa87de Mon Sep 17 00:00:00 2001
From: leeheejin <imleesinok@gmail.com>
Date: Thu, 6 Nov 2025 19:01:44 +0900
Subject: [PATCH] =?UTF-8?q?=EC=98=A4=EB=8A=98=EC=9D=98=20=ED=83=80?=
 =?UTF-8?q?=ED=98=91=EC=A0=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/(main)/screens/[screenId]/page.tsx    | 31 +++++++---
 .../screen/RealtimePreviewDynamic.tsx         | 59 +++----------------
 2 files changed, 31 insertions(+), 59 deletions(-)

diff --git a/frontend/app/(main)/screens/[screenId]/page.tsx b/frontend/app/(main)/screens/[screenId]/page.tsx
index 9e827c53..d7ea2039 100644
--- a/frontend/app/(main)/screens/[screenId]/page.tsx
+++ b/frontend/app/(main)/screens/[screenId]/page.tsx
@@ -225,12 +225,21 @@ export default function ScreenViewPage() {
         const containerWidth = containerRef.current.offsetWidth;
         const containerHeight = containerRef.current.offsetHeight;
 
-        // 가로를 기준으로 스케일 조정 (세로는 스크롤 허용)
-        // ScreenList.tsx와 동일한 방식으로 가로를 꽉 채움
+        // 화면이 잘리지 않도록 가로/세로 중 작은 쪽 기준으로 스케일 조정
         const scaleX = containerWidth / designWidth;
         const scaleY = containerHeight / designHeight;
-        // 가로 기준으로 스케일 설정 (ScreenList와 일관성 유지)
-        const newScale = scaleX;
+        // 전체 화면이 보이도록 작은 쪽 기준으로 스케일 설정
+        const newScale = Math.min(scaleX, scaleY);
+        
+        console.log("📐 스케일 계산:", {
+          containerWidth,
+          containerHeight,
+          designWidth,
+          designHeight,
+          scaleX,
+          scaleY,
+          finalScale: newScale,
+        });
 
         setScale(newScale);
         // 컨테이너 너비 업데이트
@@ -285,7 +294,7 @@ export default function ScreenViewPage() {
 
   return (
     <ScreenPreviewProvider isPreviewMode={false}>
-      <div ref={containerRef} className="bg-background h-full w-full overflow-hidden">
+      <div ref={containerRef} className="bg-background flex h-full w-full items-center justify-center overflow-hidden">
         {/* 레이아웃 준비 중 로딩 표시 */}
         {!layoutReady && (
           <div className="from-muted to-muted/50 flex h-full w-full items-center justify-center bg-gradient-to-br">
@@ -296,17 +305,21 @@ export default function ScreenViewPage() {
           </div>
         )}
 
-        {/* 절대 위치 기반 렌더링 */}
+        {/* 절대 위치 기반 렌더링 (화면관리와 동일한 방식) */}
         {layoutReady && layout && layout.components.length > 0 ? (
           <div
-            className="bg-background relative flex h-full origin-top-left items-start justify-start"
+            className="bg-background relative"
             style={{
-              transform: `scale(${scale})`,
-              transformOrigin: "top left",
               width: `${screenWidth}px`,
               height: `${screenHeight}px`,
               minWidth: `${screenWidth}px`,
+              maxWidth: `${screenWidth}px`,
               minHeight: `${screenHeight}px`,
+              maxHeight: `${screenHeight}px`,
+              flexShrink: 0,
+              transform: `scale(${scale})`,
+              transformOrigin: "center center",
+              overflow: "visible",
             }}
           >
             {/* 최상위 컴포넌트들 렌더링 */}
diff --git a/frontend/components/screen/RealtimePreviewDynamic.tsx b/frontend/components/screen/RealtimePreviewDynamic.tsx
index 37402e9a..777f791d 100644
--- a/frontend/components/screen/RealtimePreviewDynamic.tsx
+++ b/frontend/components/screen/RealtimePreviewDynamic.tsx
@@ -208,64 +208,23 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
     : {};
 
   // 컴포넌트 기본 스타일 - 레이아웃은 항상 맨 아래
-  // 너비 우선순위: table-list 100% > style.width > 조건부 100% > size.width (픽셀값)
+  // 🔥 모든 컴포넌트를 픽셀 기준으로 통일 (스케일로만 조정)
   const getWidth = () => {
-    // 🔥 최우선: table-list는 항상 100% 사용 (화면 전체를 채움)
+    // table-list는 화면 너비 전체 사용
     if (component.componentConfig?.type === "table-list") {
-      console.log("📏 [getWidth] 100% 사용 (table-list 최우선):", {
+      // 디자인 해상도 기준으로 픽셀 반환
+      const screenWidth = 1920; // 기본 디자인 해상도
+      console.log("📏 [getWidth] table-list 픽셀 사용:", {
         componentId: id,
         label: component.label,
-        positionX: position.x,
-        hasStyleWidth: !!componentStyle?.width,
-        styleWidth: componentStyle?.width,
+        width: `${screenWidth}px`,
       });
-      return "100%";
-    }
-
-    // 1순위: style.width가 있으면 우선 사용 (퍼센트 값)
-    if (componentStyle?.width) {
-      console.log("✅ [getWidth] style.width 사용:", {
-        componentId: id,
-        label: component.label,
-        styleWidth: componentStyle.width,
-        gridColumns: (component as any).gridColumns,
-        componentStyle: componentStyle,
-        baseStyle: {
-          left: `${position.x}px`,
-          top: `${position.y}px`,
-          width: componentStyle.width,
-          height: getHeight(),
-        },
-      });
-      return componentStyle.width;
-    }
-
-    // 2순위: x=0인 컴포넌트는 전체 너비 사용 (버튼 제외)
-    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,
-        label: component.label,
-      });
-      return "100%";
-    }
-
-    // 3순위: size.width (픽셀) - 버튼의 경우 항상 픽셀 사용
-    if (isButtonComponent && size?.width) {
-      const width = `${size.width}px`;
-      console.log("🔘 [getWidth] 버튼 픽셀 사용:", {
-        componentId: id,
-        label: component.label,
-        width,
-      });
-      return width;
+      return `${screenWidth}px`;
     }
 
+    // 모든 컴포넌트는 size.width 픽셀 사용
     const width = `${size?.width || 100}px`;
-    console.log("📏 [getWidth] 픽셀 사용 (기본):", {
+    console.log("📐 [getWidth] 픽셀 기준 통일:", {
       componentId: id,
       label: component.label,
       width,