From 2f39b541ddd26f274f9fa09c3e9bc59cca3e40ea Mon Sep 17 00:00:00 2001
From: leeheejin <imleesinok@gmail.com>
Date: Thu, 6 Nov 2025 18:08:28 +0900
Subject: [PATCH] =?UTF-8?q?=ED=99=94=EB=A9=B4=20=EA=B3=A0=EC=B9=98?=
 =?UTF-8?q?=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/(main)/screens/[screenId]/page.tsx    |  8 +++----
 .../screen/RealtimePreviewDynamic.tsx         | 24 ++++++++++---------
 frontend/components/screen/ScreenDesigner.tsx |  2 ++
 3 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/frontend/app/(main)/screens/[screenId]/page.tsx b/frontend/app/(main)/screens/[screenId]/page.tsx
index fa763690..9e827c53 100644
--- a/frontend/app/(main)/screens/[screenId]/page.tsx
+++ b/frontend/app/(main)/screens/[screenId]/page.tsx
@@ -225,12 +225,12 @@ export default function ScreenViewPage() {
         const containerWidth = containerRef.current.offsetWidth;
         const containerHeight = containerRef.current.offsetHeight;
 
-        // 가로/세로 비율 중 작은 것을 선택하여 화면에 맞게 스케일 조정
-        // 하지만 화면이 컨테이너 전체 너비를 차지하도록 하기 위해 가로를 우선시
+        // 가로를 기준으로 스케일 조정 (세로는 스크롤 허용)
+        // ScreenList.tsx와 동일한 방식으로 가로를 꽉 채움
         const scaleX = containerWidth / designWidth;
         const scaleY = containerHeight / designHeight;
-        // 가로를 우선으로 하되, 세로가 넘치지 않도록 제한
-        const newScale = Math.min(scaleX, scaleY);
+        // 가로 기준으로 스케일 설정 (ScreenList와 일관성 유지)
+        const newScale = scaleX;
 
         setScale(newScale);
         // 컨테이너 너비 업데이트
diff --git a/frontend/components/screen/RealtimePreviewDynamic.tsx b/frontend/components/screen/RealtimePreviewDynamic.tsx
index bf76ba1d..37402e9a 100644
--- a/frontend/components/screen/RealtimePreviewDynamic.tsx
+++ b/frontend/components/screen/RealtimePreviewDynamic.tsx
@@ -208,8 +208,20 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
     : {};
 
   // 컴포넌트 기본 스타일 - 레이아웃은 항상 맨 아래
-  // 너비 우선순위: style.width > 조건부 100% > size.width (픽셀값)
+  // 너비 우선순위: table-list 100% > style.width > 조건부 100% > size.width (픽셀값)
   const getWidth = () => {
+    // 🔥 최우선: table-list는 항상 100% 사용 (화면 전체를 채움)
+    if (component.componentConfig?.type === "table-list") {
+      console.log("📏 [getWidth] 100% 사용 (table-list 최우선):", {
+        componentId: id,
+        label: component.label,
+        positionX: position.x,
+        hasStyleWidth: !!componentStyle?.width,
+        styleWidth: componentStyle?.width,
+      });
+      return "100%";
+    }
+
     // 1순위: style.width가 있으면 우선 사용 (퍼센트 값)
     if (componentStyle?.width) {
       console.log("✅ [getWidth] style.width 사용:", {
@@ -252,16 +264,6 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
       return width;
     }
 
-    if (component.componentConfig?.type === "table-list") {
-      const width = `${Math.max(size?.width || 120, 120)}px`;
-      console.log("📏 [getWidth] 픽셀 사용 (table-list):", {
-        componentId: id,
-        label: component.label,
-        width,
-      });
-      return width;
-    }
-
     const width = `${size?.width || 100}px`;
     console.log("📏 [getWidth] 픽셀 사용 (기본):", {
       componentId: id,
diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx
index 3561fdec..0ea9f352 100644
--- a/frontend/components/screen/ScreenDesigner.tsx
+++ b/frontend/components/screen/ScreenDesigner.tsx
@@ -2566,6 +2566,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
                   labelColor: "#212121",
                   labelFontWeight: "500",
                   labelMarginBottom: "6px",
+                  width: `${(calculatedGridColumns / (layout.gridSettings?.columns || 12)) * 100}%`, // 퍼센트 너비
                 },
                 componentConfig: {
                   type: componentId, // text-input, number-input 등
@@ -2640,6 +2641,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
                 labelColor: "#000000", // 순수한 검정
                 labelFontWeight: "500",
                 labelMarginBottom: "8px",
+                width: `${(calculatedGridColumns / (layout.gridSettings?.columns || 12)) * 100}%`, // 퍼센트 너비
               },
               componentConfig: {
                 type: componentId, // text-input, number-input 등