diff --git a/src/hooks/useCanvasEvent.js b/src/hooks/useCanvasEvent.js index 0c566020..0a1de7c4 100644 --- a/src/hooks/useCanvasEvent.js +++ b/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() }