From 337bd4fc4b6671e65563d45d36db7589797642cd Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Thu, 19 Sep 2024 17:20:25 +0900
Subject: [PATCH] =?UTF-8?q?=ED=9C=A0=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/floor-plan/CanvasMenu.jsx |  7 ++++---
 src/hooks/useEvent.js                    | 26 ++++++++++++++++++++++--
 src/store/canvasAtom.js                  |  5 +++++
 3 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx
index 23b9626d..c916a0fc 100644
--- a/src/components/floor-plan/CanvasMenu.jsx
+++ b/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">
diff --git a/src/hooks/useEvent.js b/src/hooks/useEvent.js
index ab17ccaa..a8eca1a4 100644
--- a/src/hooks/useEvent.js
+++ b/src/hooks/useEvent.js
@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react'
-import { useRecoilValue } from 'recoil'
-import { canvasState, currentMenuState } from '@/store/canvasAtom'
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
+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()
   }
diff --git a/src/store/canvasAtom.js b/src/store/canvasAtom.js
index ec720275..2d9ef2dd 100644
--- a/src/store/canvasAtom.js
+++ b/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',