화면 고치기

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;
-        // 가로를 우선으로 하되, 세로가 넘치지 않도록 제한
+        // 가로 기준으로 스케일 설정 (ScreenList와 일관성 유지)
-        const newScale = Math.min(scaleX, scaleY);
+        const newScale = scaleX;
 
         setScale(newScale);
         // 컨테이너 너비 업데이트

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,

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 등