Merge branch 'main' of http://39.117.244.52:3000/kjs/ERP-node into feat/dashboard

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

@@ -456,8 +456,8 @@ function AppLayoutInner({ children }: AppLayoutProps) {
           </div>
         </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-auto bg-white p-4">{children}</main>
       </div>
 
       {/* 프로필 수정 모달 */}

frontend/components/screen/ScreenDesigner.tsx

@@ -4185,7 +4185,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
             className="flex justify-center"
             style={{
               width: "100%",
-              minHeight: Math.max(screenResolution.height, 800) * zoomLevel,
+              minHeight: screenResolution.height * zoomLevel,
             }}
           >
             {/* 실제 작업 캔버스 (해상도 크기) - 고정 크기 + 줌 적용 */}
@@ -4193,7 +4193,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
               className="bg-background border-border border shadow-lg"
               style={{
                 width: `${screenResolution.width}px`,
-                height: `${Math.max(screenResolution.height, 800)}px`,
+                height: `${screenResolution.height}px`,
                 minWidth: `${screenResolution.width}px`,
                 maxWidth: `${screenResolution.width}px`,
                 minHeight: `${screenResolution.height}px`,