휠 이벤트 추가

src/components/floor-plan/CanvasMenu.jsx

@@ -5,9 +5,9 @@ import MenuDepth01 from './MenuDepth01'
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { useMessage } from '@/hooks/useMessage'
 import { post } from '@/lib/Axios'
-import { useRecoilState } from 'recoil'
+import { useRecoilState, useRecoilValue } from 'recoil'
 import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
-import { verticalHorizontalModeState } from '@/store/canvasAtom'
+import { canvasZoomState, verticalHorizontalModeState } from '@/store/canvasAtom'
 
 export default function CanvasMenu(props) {
   const [objectNo] = useState('test123240912001') // 이후 삭제 필요
@@ -17,6 +17,7 @@ export default function CanvasMenu(props) {
   const [vertical, setVertical] = useState(true)
   const [type, setType] = useState('')
   const { getMessage } = useMessage()
+  const canvasZoom = useRecoilValue(canvasZoomState)
   const SelectOption = [{ name: '瓦53A' }, { name: '瓦53A' }]
   const onClickNav = (number) => {
     setMenuNumber(number)
@@ -166,7 +167,7 @@ export default function CanvasMenu(props) {
               </div>
               <div className="size-control">
                 <button className="control-btn minus"></button>
-                <span>100%</span>
+                <span>{canvasZoom}%</span>
                 <button className="control-btn plus"></button>
               </div>
               <div className="btn-from">

src/hooks/useEvent.js

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react'
-import { useRecoilValue } from 'recoil'
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
-import { canvasState, currentMenuState } from '@/store/canvasAtom'
+import { canvasState, canvasZoomState, currentMenuState } from '@/store/canvasAtom'
 import { fabric } from 'fabric'
 
 export function useEvent() {
@@ -8,6 +8,7 @@ export function useEvent() {
   const currentMenu = useRecoilValue(currentMenuState)
   const keyboardEventListeners = useRef([])
   const mouseEventListeners = useRef([])
+  const setCanvasZoom = useSetRecoilState(canvasZoomState)
 
   useEffect(() => {
     if (!canvas) {
@@ -22,9 +23,30 @@ export function useEvent() {
     //default Event 추가
     addCanvasMouseEventListener('mouse:move', defaultMouseMoveEvent)
     addCanvasMouseEventListener('mouse:out', defaultMouseOutEvent)
+    addCanvasMouseEventListener('mouse:wheel', wheelEvent)
     addDocumentEventListener('keydown', document, defaultKeyboardEvent)
   }
 
+  const wheelEvent = (opt) => {
+    const delta = opt.e.deltaY // 휠 이동 값 (양수면 축소, 음수면 확대)
+    let zoom = canvas.getZoom() // 현재 줌 값
+
+    zoom += delta > 0 ? -0.1 : 0.1
+
+    // 줌 값 제한 (최소 0.5배, 최대 5배)
+    if (zoom > 5) zoom = 5
+    if (zoom < 0.5) zoom = 0.5
+
+    setCanvasZoom((zoom * 100).toFixed(0))
+
+    // 마우스 위치 기준으로 확대/축소
+    canvas.zoomToPoint({ x: opt.e.offsetX, y: opt.e.offsetY }, zoom)
+
+    // 이벤트의 기본 동작 방지 (스크롤 방지)
+    opt.e.preventDefault()
+    opt.e.stopPropagation()
+  }
+
   const defaultMouseOutEvent = (e) => {
     removeMouseLine()
   }

src/store/canvasAtom.js

@@ -12,6 +12,11 @@ export const textState = atom({
   default: 'test text',
 })
 
+export const canvasZoomState = atom({
+  key: 'canvasZoomState',
+  default: 100,
+})
+
 export const modeState = atom({
   key: 'modeState',
   default: 'default',