canvas menu 삭제 버튼 삭제 및 zoom 버튼기능 수정

src/components/floor-plan/CanvasMenu.jsx

@@ -49,7 +49,7 @@ export default function CanvasMenu(props) {
   const sessionState = useRecoilValue(sessionStore)
   const globalLocale = useRecoilValue(globalLocaleStore)
   const canvas = useRecoilValue(canvasState)
-  const { handleZoomClear } = useCanvasEvent()
+  const { handleZoomClear, handleZoom } = useCanvasEvent()
   const { handleMenu } = useMenu()
 
   const { getMessage } = useMessage()
@@ -201,14 +201,18 @@ export default function CanvasMenu(props) {
                 <button
                   className="control-btn minus"
                   onClick={() => {
-                    canvas.setZoom(canvas.getZoom() - 0.1)
+                    handleZoom(false)
                   }}
                 ></button>
                 <span>{canvasZoom}%</span>
-                <button className="control-btn plus" onClick={handleZoomClear}></button>
+                <button
+                  className="control-btn plus"
+                  onClick={() => {
+                    handleZoom(true)
+                  }}
+                ></button>
               </div>
               <div className="btn-from">
-                <button className="btn07" onClick={handleClear}></button>
                 <button className="btn08" onClick={handleSaveCanvas}></button>
                 <button className="btn09"></button>
               </div>

src/hooks/useCanvasEvent.js

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { v4 as uuidv4 } from 'uuid'
 import { canvasSizeState, canvasState, canvasZoomState, currentObjectState, fontFamilyState, fontSizeState } from '@/store/canvasAtom'
@@ -18,6 +18,10 @@ export function useCanvasEvent() {
   const lengthTextOption = useRecoilValue(fontSelector('lengthText'))
   const { modifiedPlanFlag, setModifiedPlanFlag } = usePlan()
 
+  useEffect(() => {
+    canvas?.setZoom(canvasZoom / 100)
+  }, [canvasZoom])
+
   // 기본적인 이벤트 필요시 추가
   const attachDefaultEventOnCanvas = () => {
     removeEventOnCanvas()
@@ -365,6 +369,14 @@ export function useCanvasEvent() {
     })
   }
 
+  const handleZoom = (isZoom) => {
+    if (isZoom) {
+      setCanvasZoom(canvasZoom + 10)
+    } else {
+      setCanvasZoom(canvasZoom - 10)
+    }
+  }
+
   const handleZoomClear = () => {
     setCanvasZoom(100)
     canvas.set({ zoom: 1 })
@@ -376,5 +388,6 @@ export function useCanvasEvent() {
     setCanvasForEvent,
     attachDefaultEventOnCanvas,
     handleZoomClear,
+    handleZoom,
   }
 }