From 1d0c4fe5034b1f187033beffcbc5ab177f25d359 Mon Sep 17 00:00:00 2001
From: leeheejin <imleesinok@gmail.com>
Date: Tue, 21 Oct 2025 17:48:24 +0900
Subject: [PATCH] =?UTF-8?q?=ED=99=94=EB=A9=B4=20=ED=99=95=EB=8C=80?=
 =?UTF-8?q?=EC=8B=9C=20=EC=8A=A4=ED=8E=98=EC=9D=B4=EC=8A=A4=EB=B0=94=20?=
 =?UTF-8?q?=EB=88=84=EB=A5=B4=EA=B3=A0=20=EC=9D=B4=EB=8F=99=20=EA=B0=80?=
 =?UTF-8?q?=EB=8A=A5=ED=95=98=EA=B2=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../screen/ResponsivePreviewModal.tsx         |  9 ++-----
 frontend/components/screen/ScreenDesigner.tsx | 25 +++++++++++++------
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/frontend/components/screen/ResponsivePreviewModal.tsx b/frontend/components/screen/ResponsivePreviewModal.tsx
index d3f80c3c..1e05a86b 100644
--- a/frontend/components/screen/ResponsivePreviewModal.tsx
+++ b/frontend/components/screen/ResponsivePreviewModal.tsx
@@ -3,7 +3,7 @@
 import React, { useState, createContext, useContext } from "react";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
-import { Monitor, Tablet, Smartphone, X } from "lucide-react";
+import { Monitor, Tablet, Smartphone } from "lucide-react";
 import { ComponentData } from "@/types/screen";
 import { ResponsiveLayoutEngine } from "./ResponsiveLayoutEngine";
 import { Breakpoint } from "@/types/responsive";
@@ -76,12 +76,7 @@ export const ResponsivePreviewModal: React.FC<ResponsivePreviewModalProps> = ({
     <Dialog open={isOpen} onOpenChange={onClose}>
       <DialogContent className="max-h-[95vh] max-w-[95vw] p-0">
         <DialogHeader className="border-b px-6 pt-6 pb-4">
-          <div className="flex items-center justify-between">
-            <DialogTitle>반응형 미리보기</DialogTitle>
-            <Button variant="ghost" size="icon" onClick={onClose}>
-              <X className="h-4 w-4" />
-            </Button>
-          </div>
+          <DialogTitle>반응형 미리보기</DialogTitle>
 
           {/* 디바이스 선택 버튼들 */}
           <div className="mt-4 flex gap-2">
diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx
index 1b9ec180..33d17a31 100644
--- a/frontend/components/screen/ScreenDesigner.tsx
+++ b/frontend/components/screen/ScreenDesigner.tsx
@@ -4014,18 +4014,26 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
             🔍 {Math.round(zoomLevel * 100)}%
           </div>
 
-          {/* 실제 작업 캔버스 (해상도 크기) - 반응형 개선 + 줌 적용 */}
+          {/* 🔥 줌 적용 시 스크롤 영역 확보를 위한 래퍼 */}
           <div
-            className="mx-auto bg-white shadow-lg"
+            className="mx-auto"
             style={{
-              width: screenResolution.width,
-              height: Math.max(screenResolution.height, 800), // 최소 높이 보장
-              minHeight: screenResolution.height,
-              transform: `scale(${zoomLevel})`, // 줌 레벨에 따라 시각적으로 확대/축소
-              transformOrigin: "top center",
-              transition: "transform 0.1s ease-out",
+              width: screenResolution.width * zoomLevel,
+              height: Math.max(screenResolution.height, 800) * zoomLevel,
             }}
           >
+            {/* 실제 작업 캔버스 (해상도 크기) - 반응형 개선 + 줌 적용 */}
+            <div
+              className="bg-white shadow-lg"
+              style={{
+                width: screenResolution.width,
+                height: Math.max(screenResolution.height, 800), // 최소 높이 보장
+                minHeight: screenResolution.height,
+                transform: `scale(${zoomLevel})`, // 줌 레벨에 따라 시각적으로 확대/축소
+                transformOrigin: "top center",
+                transition: "transform 0.1s ease-out",
+              }}
+            >
             <div
               ref={canvasRef}
               className="relative h-full w-full overflow-auto bg-gradient-to-br from-slate-50/30 to-gray-100/20"
@@ -4307,6 +4315,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
               )}
             </div>
           </div>
+          </div> {/* 🔥 줌 래퍼 닫기 */}
         </div>
       </div>{" "}
       {/* 메인 컨테이너 닫기 */}