반응형 미리보기 기능

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

@@ -24,6 +24,9 @@ export default function ScreenViewPage() {
   const [error, setError] = useState<string | null>(null);
   const [formData, setFormData] = useState<Record<string, any>>({});
 
+  // 화면 너비에 따라 Y좌표 유지 여부 결정
+  const [preserveYPosition, setPreserveYPosition] = useState(true);
+
   const breakpoint = useBreakpoint();
 
   // 편집 모달 상태
@@ -111,6 +114,24 @@ export default function ScreenViewPage() {
     }
   }, [screenId]);
 
+  // 윈도우 크기 변경 감지 - layout이 로드된 후에만 실행
+  useEffect(() => {
+    if (!layout) return;
+
+    const screenWidth = layout?.screenResolution?.width || 1200;
+
+    const handleResize = () => {
+      const shouldPreserve = window.innerWidth >= screenWidth - 100;
+      setPreserveYPosition(shouldPreserve);
+    };
+
+    window.addEventListener("resize", handleResize);
+    // 초기 값도 설정
+    handleResize();
+
+    return () => window.removeEventListener("resize", handleResize);
+  }, [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">
@@ -152,6 +173,7 @@ export default function ScreenViewPage() {
             breakpoint={breakpoint}
             containerWidth={window.innerWidth}
             screenWidth={screenWidth}
+            preserveYPosition={preserveYPosition}
           />
         ) : (
           // 빈 화면일 때