화면 자동맞춤 기능 제거 및 전체 화면 표시 개선

- ResponsiveScreenContainer에서 자동맞춤 모드들(fit, scale, fullwidth) 제거
- 기본값을 original 모드로 변경하여 설계한 크기 그대로 표시
- 화면 컨테이너가 전체 높이를 사용하도록 레이아웃 수정
- 스크롤 문제 해결을 위해 overflow 설정 최적화

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

@@ -147,7 +147,8 @@ export default function ScreenViewPage() {
   const screenHeight = layout?.screenResolution?.height || 800;
 
   return (
-    <ResponsiveScreenContainer designWidth={screenWidth} designHeight={screenHeight} screenName={screen?.screenName}>
+    <div className="h-full w-full">
+      <ResponsiveScreenContainer designWidth={screenWidth} designHeight={screenHeight} screenName={screen?.screenName}>
       {layout && layout.components.length > 0 ? (
         // 캔버스 컴포넌트들을 정확한 해상도로 표시
         <div
@@ -407,6 +408,7 @@ export default function ScreenViewPage() {
           });
         }}
       />
-    </ResponsiveScreenContainer>
+      </ResponsiveScreenContainer>
+    </div>
   );
 }

frontend/components/screen/ResponsiveScreenContainer.tsx

@@ -1,7 +1,4 @@
-import React, { useState, useRef } from "react";
-import { Button } from "@/components/ui/button";
-import { Monitor, Smartphone, Maximize2, Minimize2 } from "lucide-react";
-import { useContainerSize } from "@/hooks/useViewportSize";
+import React, { useRef } from "react";
 
 interface ResponsiveScreenContainerProps {
   children: React.ReactNode;
@@ -10,11 +7,9 @@ interface ResponsiveScreenContainerProps {
   screenName?: string;
 }
 
-type ViewMode = "fit" | "scale" | "original" | "fullwidth";
-
 /**
- * 반응형 화면 컨테이너
- * 다양한 모니터 크기에 맞춰 화면을 자동 조정합니다.
+ * 화면 컨테이너
+ * 설계된 원본 크기 그대로 화면을 표시합니다.
  */
 export const ResponsiveScreenContainer: React.FC<ResponsiveScreenContainerProps> = ({
   children,
@@ -23,137 +18,22 @@ export const ResponsiveScreenContainer: React.FC<ResponsiveScreenContainerProps>
   screenName,
 }) => {
   const containerRef = useRef<HTMLDivElement>(null);
-  const [viewMode, setViewMode] = useState<ViewMode>("fit");
-  const containerSize = useContainerSize(containerRef);
-
-  // 스케일 계산 (실시간 계산으로 변경)
-  const calculateScale = (): number => {
-    if (containerSize.width === 0 || containerSize.height === 0) return 1;
-
-    let newScale = 1;
-
-    switch (viewMode) {
-      case "fit":
-        // 컨테이너에 맞춰 비율 유지하며 조정 (여백 허용)
-        const scaleX = (containerSize.width - 40) / designWidth; // 20px 여백
-        const scaleY = (containerSize.height - 40) / designHeight; // 20px 여백
-        newScale = Math.min(scaleX, scaleY, 1); // 최대 1배까지만
-        break;
-
-      case "scale":
-        // 컨테이너를 가득 채우도록 조정 (비율 유지)
-        const fillScaleX = containerSize.width / designWidth;
-        const fillScaleY = containerSize.height / designHeight;
-        newScale = Math.min(fillScaleX, fillScaleY);
-        break;
-
-      case "fullwidth":
-        // 가로폭을 컨테이너에 맞춤 (세로는 비율 유지)
-        newScale = containerSize.width / designWidth;
-        break;
-
-      case "original":
-      default:
-        // 원본 크기 유지
-        newScale = 1;
-        break;
-    }
-
-    return Math.max(newScale, 0.1); // 최소 0.1배
-  };
-
-  const scale = calculateScale();
-
-  const getViewModeInfo = (mode: ViewMode) => {
-    switch (mode) {
-      case "fit":
-        return {
-          label: "화면 맞춤",
-          description: "모니터 크기에 맞춰 비율 유지하며 조정",
-          icon: <Monitor className="h-4 w-4" />,
-        };
-      case "scale":
-        return {
-          label: "전체 채움",
-          description: "화면을 가득 채우도록 조정",
-          icon: <Maximize2 className="h-4 w-4" />,
-        };
-      case "fullwidth":
-        return {
-          label: "가로 맞춤",
-          description: "가로폭을 화면에 맞춤",
-          icon: <Smartphone className="h-4 w-4" />,
-        };
-      case "original":
-        return {
-          label: "원본 크기",
-          description: "설계된 원본 크기로 표시",
-          icon: <Minimize2 className="h-4 w-4" />,
-        };
-    }
-  };
 
   const screenStyle = {
     width: `${designWidth}px`,
     height: `${designHeight}px`,
-    transform: `scale(${scale})`,
-    transformOrigin: "top left",
-    transition: "transform 0.3s ease-in-out",
   };
 
   const wrapperStyle = {
-    width: `${designWidth * scale}px`,
-    height: `${designHeight * scale}px`,
-    overflow: viewMode === "original" ? "auto" : "hidden",
+    width: `${designWidth}px`,
+    height: `${designHeight}px`,
+    overflow: "auto",
   };
 
   return (
-    <div className="flex h-full w-full flex-col bg-gray-50">
-      {/* 상단 컨트롤 바 */}
-      <div className="flex items-center justify-between border-b bg-white px-4 py-2 shadow-sm">
-        <div className="flex items-center space-x-2">
-          <span className="text-sm font-medium text-gray-700">
-            {screenName && `${screenName} - `}
-            {designWidth} × {designHeight}
-          </span>
-          <span className="text-xs text-gray-500">
-            (배율: {Math.round(scale * 100)}% | 사용 가능: {containerSize.width}×{containerSize.height})
-          </span>
-        </div>
-
-        <div className="flex items-center space-x-1">
-          {(["fit", "scale", "fullwidth", "original"] as ViewMode[]).map((mode) => {
-            const info = getViewModeInfo(mode);
-            return (
-              <Button
-                key={mode}
-                variant={viewMode === mode ? "default" : "ghost"}
-                size="sm"
-                onClick={() => setViewMode(mode)}
-                className="h-8 text-xs"
-                title={info.description}
-              >
-                {info.icon}
-                <span className="ml-1 hidden sm:inline">{info.label}</span>
-              </Button>
-            );
-          })}
-        </div>
-      </div>
-
-      {/* 화면 컨텐츠 영역 */}
-      <div
-        ref={containerRef}
-        className="flex-1 overflow-auto p-4"
-        style={{
-          justifyContent: viewMode === "original" ? "flex-start" : "center",
-          alignItems: viewMode === "original" ? "flex-start" : "center",
-          display: "flex",
-        }}
-      >
-        <div style={wrapperStyle}>
-          <div style={screenStyle}>{children}</div>
-        </div>
+    <div className="h-full w-full overflow-auto bg-gray-50">
+      <div style={wrapperStyle}>
+        <div style={screenStyle}>{children}</div>
       </div>
     </div>
   );