src/hooks/useCanvasEvent.js

@@ -15,6 +15,7 @@ export function useCanvasEvent() {
   const [currentObject, setCurrentObject] = useRecoilState(currentObjectState)
   const canvasSize = useRecoilValue(canvasSizeState)
   const [canvasZoom, setCanvasZoom] = useRecoilState(canvasZoomState)
+  const [shouldCenter, setShouldCenter] = useState(false) // 중앙 정렬 플래그 추가
   const lengthTextOption = useRecoilValue(fontSelector('lengthText'))
   const currentMenu = useRecoilValue(currentMenuState)
   const { changeCorridorDimensionText } = useText()
@@ -23,6 +24,17 @@ export function useCanvasEvent() {
   useEffect(() => {
     canvas?.setZoom(canvasZoom / 100)
   }, [canvasZoom])
+  
+  // canvasZoom이 100으로 변경되고 shouldCenter가 true일 때만 중앙 정렬 실행
+  useEffect(() => {
+    if (canvasZoom === 100 && canvas && shouldCenter) {
+      setTimeout(() => {
+        zoomToAllObjects()
+        canvas.renderAll()
+        setShouldCenter(false) // 실행 후 플래그 초기화
+      }, 100)
+    }
+  }, [canvasZoom, shouldCenter])
 
   useEffect(() => {
     attachDefaultEventOnCanvas()
@@ -416,15 +428,35 @@ export function useCanvasEvent() {
   }
 
   const handleZoomClear = () => {
+    setShouldCenter(true) // 중앙 정렬 플래그 설정
     setCanvasZoom(100)
-
-    zoomToAllObjects()
-    canvas.renderAll()
   }
 
   const zoomToAllObjects = () => {
-    const objects = canvas.getObjects().filter((obj) => obj.visible)
-    if (objects.length === 0) return
+    const allObjects = canvas.getObjects()
+    // 주요 도형 객체만 필터링 (roof, arrow 등)
+    const objects = allObjects.filter((obj) => {
+      // 주요 도형 객체만 포함
+      return obj.name === 'roof' || 
+             obj.name === 'arrow' ||
+             obj.name === 'module' ||
+             obj.name === 'dormer' ||
+             obj.name === 'object'
+    })
+    
+    console.log('🔍 All objects:', allObjects.length)
+    console.log('🔍 Main objects for centering:', objects.length)
+    console.log('🔍 Main object details:', objects.map(obj => ({
+      name: obj.name,
+      type: obj.type,
+      visible: obj.visible,
+      id: obj.id
+    })))
+    
+    if (objects.length === 0) {
+      console.log('❌ No main objects found for centering')
+      return
+    }
 
     let minX = Infinity,
       minY = Infinity
@@ -439,11 +471,24 @@ export function useCanvasEvent() {
       maxY = Math.max(maxY, bounds.top + bounds.height)
     })
 
-    const centerX = (minX + maxX) / 2
-    const centerY = (minY + maxY) / 2
-    const centerPoint = new fabric.Point(centerX, centerY)
-
-    canvas.zoomToPoint(centerPoint, 1)
+    const objectsCenterX = (minX + maxX) / 2
+    const objectsCenterY = (minY + maxY) / 2
+    
+    // 화면 중앙 좌표 (메뉴 높이 고려하여 Y 위치 조정)
+    const screenCenterX = canvas.getWidth() / 2
+    const menuHeightOffset = 80 // 위쪽 메뉴 높이만큼 위로 조정
+    const screenCenterY = canvas.getHeight() / 2 - menuHeightOffset
+    
+    // 객체 중심을 화면 중앙으로 이동
+    const deltaX = screenCenterX - objectsCenterX
+    const deltaY = screenCenterY - objectsCenterY
+    
+    // canvas viewport transform 조정
+    const viewportTransform = canvas.viewportTransform
+    viewportTransform[4] += deltaX
+    viewportTransform[5] += deltaY
+    
+    canvas.setViewportTransform(viewportTransform)
     canvas.renderAll()
   }