테이블 리스트 수정

frontend/app/(main)/screens/[screenId]/page.tsx

@@ -41,6 +41,10 @@ export default function ScreenViewPage() {
     modalDescription?: string;
   }>({});
 
+  // 자동 스케일 조정 (사용자 화면 크기에 맞춤)
+  const [scale, setScale] = useState(1);
+  const containerRef = React.useRef<HTMLDivElement>(null);
+
   useEffect(() => {
     const initComponents = async () => {
       try {
@@ -125,6 +129,40 @@ export default function ScreenViewPage() {
     }
   }, [screenId]);
 
+  // 자동 스케일 조정 useEffect (항상 화면에 꽉 차게)
+  useEffect(() => {
+    const updateScale = () => {
+      if (containerRef.current && layout) {
+        const screenWidth = layout?.screenResolution?.width || 1200;
+        const containerWidth = containerRef.current.offsetWidth;
+        const availableWidth = containerWidth - 32; // 좌우 패딩 16px * 2
+
+        // 항상 화면에 맞춰서 스케일 조정 (늘리거나 줄임)
+        const newScale = availableWidth / screenWidth;
+
+        console.log("📏 스케일 계산 (화면 꽉 차게):", {
+          screenWidth,
+          containerWidth,
+          availableWidth,
+          scale: newScale,
+        });
+
+        setScale(newScale);
+      }
+    };
+
+    // 초기 측정 (DOM이 완전히 렌더링된 후)
+    const timer = setTimeout(() => {
+      updateScale();
+    }, 100);
+
+    window.addEventListener("resize", updateScale);
+    return () => {
+      clearTimeout(timer);
+      window.removeEventListener("resize", updateScale);
+    };
+  }, [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">
@@ -158,14 +196,19 @@ export default function ScreenViewPage() {
   const screenHeight = layout?.screenResolution?.height || 800;
 
   return (
-    <div className="bg-background h-full w-full">
+    <div ref={containerRef} className="bg-background flex h-full w-full flex-col overflow-hidden">
       {/* 절대 위치 기반 렌더링 */}
       {layout && layout.components.length > 0 ? (
         <div
-          className="bg-background relative mx-auto"
+          className="bg-background relative flex-1"
           style={{
             width: screenWidth,
-            minHeight: screenHeight,
+            height: "100%",
+            transform: `scale(${scale})`,
+            transformOrigin: "top left",
+            overflow: "hidden",
+            display: "flex",
+            flexDirection: "column",
           }}
         >
           {/* 최상위 컴포넌트들 렌더링 */}

frontend/components/layout/AppLayout.tsx

@@ -457,7 +457,7 @@ function AppLayoutInner({ children }: AppLayoutProps) {
         </aside>
 
         {/* 가운데 컨텐츠 영역 - overflow 문제 해결 */}
-        <main className="min-w-0 flex-1 bg-white">{children}</main>
+        <main className="h-[calc(100vh-3.5rem)] min-w-0 flex-1 overflow-hidden bg-white p-4">{children}</main>
       </div>
 
       {/* 프로필 수정 모달 */}