src/hooks/useCanvasEvent.js

@@ -489,6 +489,34 @@ export function useCanvasEvent() {
     viewportTransform[5] += deltaY
     
     canvas.setViewportTransform(viewportTransform)
+    
+    // 브라우저 스크롤을 중앙으로 조정하여 전체 canvas를 모니터 중앙에 위치
+    const canvasElement = canvas.getElement()
+    const canvasRect = canvasElement.getBoundingClientRect()
+    
+    // 현재 스크롤 위치
+    const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop
+    const currentScrollLeft = window.pageXOffset || document.documentElement.scrollLeft
+    
+    // canvas의 현재 화면 위치
+    const canvasScreenTop = canvasRect.top + currentScrollTop
+    const canvasScreenLeft = canvasRect.left + currentScrollLeft
+    
+    // 모니터 중앙
+    const monitorCenterX = window.innerWidth / 2
+    const monitorCenterY = window.innerHeight / 2
+    
+    // canvas가 모니터 중앙에 오도록 스크롤 위치 계산
+    const targetScrollLeft = canvasScreenLeft + (canvasRect.width / 2) - monitorCenterX
+    const targetScrollTop = canvasScreenTop + (canvasRect.height / 2) - monitorCenterY + menuHeightOffset
+    
+    // 스크롤을 중앙으로 이동
+    window.scrollTo({
+      top: targetScrollTop,
+      left: targetScrollLeft,
+      behavior: 'smooth' // 부드러운 스크롤
+    })
+    
     canvas.renderAll()
   }