fix: useEvent context 변경

- useContext로 전역으로 옮김

src/app/floor-plan/EventProvider.js

@@ -0,0 +1,34 @@
+import { useEvent } from '@/hooks/useEvent'
+import { createContext, useState } from 'react'
+
+export const EventContext = createContext({})
+
+const EventProvider = ({ children }) => {
+  const {
+    addDocumentEventListener,
+    addCanvasMouseEventListener,
+    addTargetMouseEventListener,
+    removeAllMouseEventListeners,
+    removeAllDocumentEventListeners,
+    removeDocumentEvent,
+    removeMouseEvent,
+    removeMouseLine,
+    initEvent,
+  } = useEvent()
+
+  const [value, setValue] = useState({
+    addDocumentEventListener,
+    addCanvasMouseEventListener,
+    addTargetMouseEventListener,
+    removeAllMouseEventListeners,
+    removeAllDocumentEventListeners,
+    removeDocumentEvent,
+    removeMouseEvent,
+    removeMouseLine,
+    initEvent,
+  })
+
+  return <EventContext.Provider value={value}>{children}</EventContext.Provider>
+}
+
+export default EventProvider

src/app/floor-plan/layout.js

@@ -3,17 +3,20 @@
 import FloorPlanProvider from './FloorPlanProvider'
 import FloorPlan from '@/components/floor-plan/FloorPlan'
 import CanvasLayout from '@/components/floor-plan/CanvasLayout'
+import EventProvider from './EventProvider'
 
 export default function FloorPlanLayout({ children }) {
   console.log('🚀 ~ FloorPlanLayout ~ FloorPlanLayout:')
 
   return (
     <>
+      <EventProvider>
         <FloorPlanProvider>
           <FloorPlan>
             <CanvasLayout>{children}</CanvasLayout>
           </FloorPlan>
         </FloorPlanProvider>
+      </EventProvider>
     </>
   )
 }

src/components/common/context-menu/QContextMenu.jsx

@@ -1,11 +1,12 @@
 'use client'
-import { useEffect } from 'react'
+import { useContext, useEffect } from 'react'
 import '@/styles/contents.scss'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { contextMenuListState, contextMenuState } from '@/store/contextMenu'
 import { useTempGrid } from '@/hooks/useTempGrid'
 import { useContextMenu } from '@/hooks/useContextMenu'
 import { useEvent } from '@/hooks/useEvent'
+import { EventContext } from '@/app/floor-plan/EventProvider'
 
 export default function QContextMenu(props) {
   const { contextRef, canvasProps } = props
@@ -14,7 +15,8 @@ export default function QContextMenu(props) {
   const activeObject = canvasProps?.getActiveObject() //액티브된 객체를 가져옴
   const { tempGridMode, setTempGridMode } = useTempGrid()
   const { handleKeyup } = useContextMenu()
-  const { addDocumentEventListener, removeDocumentEvent } = useEvent()
+  // const { addDocumentEventListener, removeDocumentEvent } = useEvent()
+  const { addDocumentEventListener, removeDocumentEvent } = useContext(EventContext)
 
   let contextType = ''
 

src/components/floor-plan/CanvasFrame.jsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useRef } from 'react'
+import { useContext, useEffect, useRef } from 'react'
 
 import { useRecoilValue } from 'recoil'
 
@@ -15,6 +15,7 @@ import { MENU } from '@/common/common'
 import PanelBatchStatistics from '@/components/floor-plan/modal/panelBatch/PanelBatchStatistics'
 import { totalDisplaySelector } from '@/store/settingAtom'
 import ImgLoad from '@/components/floor-plan/modal/ImgLoad'
+import { EventContext } from '@/app/floor-plan/EventProvider'
 
 export default function CanvasFrame() {
   const canvasRef = useRef(null)
@@ -24,7 +25,9 @@ export default function CanvasFrame() {
   const { contextMenu, handleClick } = useContextMenu()
   const { selectedPlan, modifiedPlanFlag, checkCanvasObjectEvent, resetModifiedPlans, currentCanvasPlan } = usePlan()
   const totalDisplay = useRecoilValue(totalDisplaySelector) // 집계표 표시 여부
-  useEvent()
+  // useEvent()
+  // const { initEvent } = useContext(EventContext)
+  // initEvent()
 
   const loadCanvas = () => {
     if (canvas) {

src/components/floor-plan/CanvasMenu.jsx

@@ -41,6 +41,7 @@ import EstimateCopyPop from '../estimate/popup/EstimateCopyPop'
 import { floorPlanObjectState } from '@/store/floorPlanObjectAtom'
 import { pwrGnrSimTypeState } from '@/store/simulatorAtom'
 import { useAxios } from '@/hooks/useAxios'
+import { EventContext } from '@/app/floor-plan/EventProvider'
 
 export default function CanvasMenu(props) {
   const { menuNumber, setMenuNumber } = props
@@ -70,7 +71,8 @@ export default function CanvasMenu(props) {
   const { getMessage } = useMessage()
   const { currentCanvasPlan, saveCanvas } = usePlan()
   const { swalFire } = useSwal()
-  const { initEvent, addCanvasMouseEventListener, addDocumentEventListener } = useEvent()
+  // const { initEvent, addCanvasMouseEventListener, addDocumentEventListener } = useEvent()
+  const { initEvent, addCanvasMouseEventListener, addDocumentEventListener } = useContext(EventContext)
   const commonUtils = useRecoilValue(commonUtilsState)
   const { commonFunctions } = useCommonUtils()
   const SelectOption = [{ name: '瓦53A' }, { name: '瓦53A' }]

src/components/floor-plan/modal/basic/BasicSetting.jsx

@@ -1,6 +1,6 @@
 import { useMessage } from '@/hooks/useMessage'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
-import { useEffect, useRef, useState } from 'react'
+import { useContext, useEffect, useRef, useState } from 'react'
 import Module from '@/components/floor-plan/modal/basic/step/Module'
 import PitchModule from '@/components/floor-plan/modal/basic/step/pitch/PitchModule'
 import PitchPlacement from '@/components/floor-plan/modal/basic/step/pitch/PitchPlacement'
@@ -11,6 +11,7 @@ import { usePopup } from '@/hooks/usePopup'
 import { Orientation } from '@/components/floor-plan/modal/basic/step/Orientation'
 import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
 import { useEvent } from '@/hooks/useEvent'
+import { EventContext } from '@/app/floor-plan/EventProvider'
 
 export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
   const { getMessage } = useMessage()
@@ -18,7 +19,8 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
   const [tabNum, setTabNum] = useState(1)
   const canvasSetting = useRecoilValue(canvasSettingState)
   const orientationRef = useRef(null)
-  const { initEvent } = useEvent()
+  // const { initEvent } = useEvent()
+  const { initEvent } = useContext(EventContext)
   const { makeModuleInstArea, manualModuleSetup, autoModuleSetup } = useModuleBasicSetting()
   const handleBtnNextStep = () => {
     if (tabNum === 1) {

src/components/floor-plan/modal/lineProperty/LinePropertySetting.jsx

@@ -3,10 +3,11 @@ import { useRecoilValue } from 'recoil'
 import { contextPopupPositionState } from '@/store/popupAtom'
 import { useMessage } from '@/hooks/useMessage'
 import { usePopup } from '@/hooks/usePopup'
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useContext } from 'react'
 import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch'
 import { useEvent } from '@/hooks/useEvent'
 import { LINE_TYPE } from '@/common/common'
+import { EventContext } from '@/app/floor-plan/EventProvider'
 
 export default function LinePropertySetting(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
@@ -14,7 +15,8 @@ export default function LinePropertySetting(props) {
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
   const { changeSurfaceLinePropertyEvent, changeSurfaceLineProperty, changeSurfaceLinePropertyReset } = useSurfaceShapeBatch()
-  const { initEvent } = useEvent()
+  // const { initEvent } = useEvent()
+  const { initEvent } = useContext(EventContext)
 
   const properties = [
     { name: getMessage('eaves.line'), value: LINE_TYPE.WALLLINE.EAVES },

src/components/floor-plan/modal/object/SizeSetting.jsx

@@ -5,11 +5,12 @@ import { useMessage } from '@/hooks/useMessage'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { usePopup } from '@/hooks/usePopup'
 import { contextPopupPositionState } from '@/store/popupAtom'
-import { useRef, useState, useEffect } from 'react'
+import { useRef, useState, useEffect, useContext } from 'react'
 import { useObjectBatch } from '@/hooks/object/useObjectBatch'
 import { useEvent } from '@/hooks/useEvent'
 import { BATCH_TYPE, POLYGON_TYPE } from '@/common/common'
 import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch'
+import { EventContext } from '@/app/floor-plan/EventProvider'
 
 export default function SizeSetting(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
@@ -22,11 +23,12 @@ export default function SizeSetting(props) {
   const widthRef = useRef(null)
   const heightRef = useRef(null)
 
-  const { initEvent } = useEvent()
+  // const { initEvent } = useEvent()
+  // const { initEvent } = useContext(EventContext)
 
-  useEffect(() => {
+  // useEffect(() => {
-    initEvent()
+  //   initEvent()
-  }, [])
+  // }, [])
 
   const handleReSizeObject = () => {
     const width = widthRef.current.value

src/components/floor-plan/modal/wallLineOffset/type/Offset.jsx

@@ -1,10 +1,12 @@
 import { useMessage } from '@/hooks/useMessage'
-import { useEffect, useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import { useEvent } from '@/hooks/useEvent'
+import { EventContext } from '@/app/floor-plan/EventProvider'
 
 export default function Offset({ length1Ref, arrow1Ref, currentWallLineRef }) {
   const { getMessage } = useMessage()
-  const { addDocumentEventListener, initEvent } = useEvent()
+  // const { addDocumentEventListener, initEvent } = useEvent()
+  const { addDocumentEventListener, initEvent } = useContext(EventContext)
 
   useEffect(() => {
     addDocumentEventListener('keydown', document, keyDown)

src/components/floor-plan/modal/wallLineOffset/type/WallLine.jsx

@@ -1,10 +1,12 @@
 import { useMessage } from '@/hooks/useMessage'
-import { forwardRef, useEffect, useImperativeHandle, useState } from 'react'
+import { forwardRef, useContext, useEffect, useImperativeHandle, useState } from 'react'
 import { useEvent } from '@/hooks/useEvent'
+import { EventContext } from '@/app/floor-plan/EventProvider'
 
 export default forwardRef(function WallLine({ length1Ref, length2Ref, arrow1Ref, arrow2Ref, radioTypeRef, currentWallLineRef }, ref) {
   const { getMessage } = useMessage()
-  const { addDocumentEventListener, initEvent } = useEvent()
+  // const { addDocumentEventListener, initEvent } = useEvent()
+  const { addDocumentEventListener, initEvent } = useContext(EventContext)
   const [type, setType] = useState(1)
   const [arrow1, setArrow1] = useState('up')
   const [arrow2, setArrow2] = useState('up')

src/hooks/common/useCommonUtils.js

@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useContext, useEffect } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { wordDisplaySelector } from '@/store/settingAtom'
 import { useEvent } from '@/hooks/useEvent'
@@ -9,11 +9,13 @@ import { canvasState } from '@/store/canvasAtom'
 import { v4 as uuidv4 } from 'uuid'
 import { usePopup } from '@/hooks/usePopup'
 import Distance from '@/components/floor-plan/modal/distance/Distance'
+import { EventContext } from '@/app/floor-plan/EventProvider'
 
 export function useCommonUtils() {
   const canvas = useRecoilValue(canvasState)
   const wordDisplay = useRecoilValue(wordDisplaySelector)
-  const { addCanvasMouseEventListener, addDocumentEventListener, initEvent } = useEvent()
+  // const { addCanvasMouseEventListener, addDocumentEventListener, initEvent } = useEvent()
+  const { addCanvasMouseEventListener, addDocumentEventListener, initEvent } = useContext(EventContext)
   const dimensionSettings = useRecoilValue(dimensionLineSettingsState)
   const dimensionLineTextFont = useRecoilValue(fontSelector('dimensionLineText'))
   const commonTextFont = useRecoilValue(fontSelector('commonText'))
@@ -21,7 +23,7 @@ export function useCommonUtils() {
   const { addPopup } = usePopup()
 
   useEffect(() => {
-    initEvent()
+    // initEvent()
     if (commonUtils.text) {
       commonTextMode()
     } else if (commonUtils.dimension) {

src/hooks/module/useModuleBasicSetting.js

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
 import { canvasState } from '@/store/canvasAtom'
 import { rectToPolygon, setSurfaceShapePattern } from '@/util/canvas-util'
@@ -11,14 +11,15 @@ import { useEvent } from '@/hooks/useEvent'
 import { POLYGON_TYPE, BATCH_TYPE } from '@/common/common'
 
 import * as turf from '@turf/turf'
-import next from 'next'
+import { EventContext } from '@/app/floor-plan/EventProvider'
 
 export function useModuleBasicSetting() {
   const canvas = useRecoilValue(canvasState)
   const roofDisplay = useRecoilValue(roofDisplaySelector)
   const [moduleSetupSurface, setModuleSetupSurface] = useRecoilState(moduleSetupSurfaceState)
   const [moduleIsSetup, setModuleIsSetup] = useRecoilState(moduleIsSetupState)
-  const { addTargetMouseEventListener, addCanvasMouseEventListener, initEvent } = useEvent()
+  // const { addTargetMouseEventListener, addCanvasMouseEventListener, initEvent } = useEvent()
+  const { addTargetMouseEventListener, addCanvasMouseEventListener, initEvent } = useContext(EventContext)
   let selectedModuleInstSurfaceArray = []
 
   const makeModuleInstArea = () => {

src/hooks/object/useObjectBatch.js

@@ -1,5 +1,5 @@
 'use client'
-import { useEffect } from 'react'
+import { useContext, useEffect } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import { useRecoilValue } from 'recoil'
 import { canvasState } from '@/store/canvasAtom'
@@ -12,11 +12,13 @@ import { usePolygon } from '@/hooks/usePolygon'
 import { QPolygon } from '@/components/fabric/QPolygon'
 import { v4 as uuidv4 } from 'uuid'
 import { fontSelector } from '@/store/fontAtom'
+import { EventContext } from '@/app/floor-plan/EventProvider'
 
 export function useObjectBatch({ isHidden, setIsHidden }) {
   const { getMessage } = useMessage()
   const canvas = useRecoilValue(canvasState)
-  const { addCanvasMouseEventListener, initEvent, addDocumentEventListener } = useEvent()
+  // const { addCanvasMouseEventListener, initEvent, addDocumentEventListener } = useEvent()
+  const { addCanvasMouseEventListener, initEvent, addDocumentEventListener } = useContext(EventContext)
   const { swalFire } = useSwal()
   const { drawDirectionArrow } = usePolygon()
   const lengthTextFont = useRecoilValue(fontSelector('lengthText'))

src/hooks/roofcover/useAuxiliaryDrawing.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react'
+import { useContext, useEffect, useRef, useState } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { adsorptionRangeState, canvasState, verticalHorizontalModeState } from '@/store/canvasAtom'
 import { useEvent } from '@/hooks/useEvent'
@@ -22,11 +22,13 @@ import { useSwal } from '@/hooks/useSwal'
 import { usePopup } from '@/hooks/usePopup'
 import { calculateAngle, isSamePoint } from '@/util/qpolygon-utils'
 import { POLYGON_TYPE } from '@/common/common'
+import { EventContext } from '@/app/floor-plan/EventProvider'
 
 // 보조선 작성
 export function useAuxiliaryDrawing(id) {
   const canvas = useRecoilValue(canvasState)
-  const { addCanvasMouseEventListener, addDocumentEventListener, removeMouseLine, initEvent } = useEvent()
+  // const { addCanvasMouseEventListener, addDocumentEventListener, removeMouseLine, initEvent } = useEvent()
+  const { addCanvasMouseEventListener, addDocumentEventListener, removeMouseLine, initEvent } = useContext(EventContext)
   const { getIntersectMousePoint } = useMouse()
   const { addLine, removeLine } = useLine()
   const { tempGridMode } = useTempGrid()

src/hooks/roofcover/useEavesGableEdit.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react'
+import { useContext, useEffect, useRef, useState } from 'react'
 import { useRecoilValue } from 'recoil'
 import { ANGLE_TYPE, canvasState, currentAngleTypeSelector, pitchTextSelector } from '@/store/canvasAtom'
 import { useMessage } from '@/hooks/useMessage'
@@ -10,12 +10,14 @@ import { outerLineFixState } from '@/store/outerLineAtom'
 import { useSwal } from '@/hooks/useSwal'
 import { usePopup } from '@/hooks/usePopup'
 import { getChonByDegree } from '@/util/canvas-util'
+import { EventContext } from '@/app/floor-plan/EventProvider'
 
 // 처마.케라바 변경
 export function useEavesGableEdit(id) {
   const canvas = useRecoilValue(canvasState)
   const { getMessage } = useMessage()
-  const { addCanvasMouseEventListener, initEvent } = useEvent()
+  // const { addCanvasMouseEventListener, initEvent } = useEvent()
+  const { addCanvasMouseEventListener, initEvent } = useContext(EventContext)
   const { closePopup } = usePopup()
   const TYPES = {
     EAVES: 'eaves',

src/hooks/roofcover/useMovementSetting.js

@@ -2,11 +2,12 @@ import { useRecoilValue } from 'recoil'
 import { canvasState, currentObjectState } from '@/store/canvasAtom'
 import { usePopup } from '@/hooks/usePopup'
 import { useMessage } from '@/hooks/useMessage'
-import { useEffect, useRef, useState } from 'react'
+import { useContext, useEffect, useRef, useState } from 'react'
 import { useEvent } from '@/hooks/useEvent'
 import { POLYGON_TYPE } from '@/common/common'
 import { OUTER_LINE_TYPE } from '@/store/outerLineAtom'
 import { QLine } from '@/components/fabric/QLine'
+import { EventContext } from '@/app/floor-plan/EventProvider'
 
 //동선이동 형 올림 내림
 export function useMovementSetting(id) {
@@ -15,7 +16,8 @@ export function useMovementSetting(id) {
     UP_DOWN: 'updown', //형 올림내림
   }
   const canvas = useRecoilValue(canvasState)
-  const { initEvent, addCanvasMouseEventListener } = useEvent()
+  // const { initEvent, addCanvasMouseEventListener } = useEvent()
+  const { initEvent, addCanvasMouseEventListener } = useContext(EventContext)
   const { closePopup } = usePopup()
   const { getMessage } = useMessage()
   const currentObject = useRecoilValue(currentObjectState)

src/hooks/roofcover/useOuterLineWall.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react'
+import { useContext, useEffect, useRef } from 'react'
 import { distanceBetweenPoints } from '@/util/canvas-util'
 import { useRecoilState, useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil'
 import {
@@ -31,6 +31,7 @@ import { fabric } from 'fabric'
 import { outlineDisplaySelector } from '@/store/settingAtom'
 import { usePopup } from '@/hooks/usePopup'
 import PropertiesSetting from '@/components/floor-plan/modal/outerlinesetting/PropertiesSetting'
+import { EventContext } from '@/app/floor-plan/EventProvider'
 
 //외벽선 그리기
 export function useOuterLineWall(id, propertiesId) {
@@ -43,6 +44,14 @@ export function useOuterLineWall(id, propertiesId) {
     removeAllDocumentEventListeners,
     removeMouseEvent,
   } = useEvent()
+  // const {
+  //   initEvent,
+  //   // addCanvasMouseEventListener,
+  //   // addDocumentEventListener,
+  //   removeAllMouseEventListeners,
+  //   removeAllDocumentEventListeners,
+  //   removeMouseEvent,
+  // } = useContext(EventContext)
   const { getIntersectMousePoint } = useMouse()
   const { addLine, removeLine } = useLine()
   const { tempGridMode } = useTempGrid()

src/hooks/roofcover/useRoofShapePassivitySetting.js

@@ -1,6 +1,6 @@
 import { ANGLE_TYPE, canvasState, currentAngleTypeSelector, currentObjectState, pitchTextSelector } from '@/store/canvasAtom'
 import { useRecoilValue } from 'recoil'
-import { useEffect, useRef, useState } from 'react'
+import { useContext, useEffect, useRef, useState } from 'react'
 import { useLine } from '@/hooks/useLine'
 import { useMessage } from '@/hooks/useMessage'
 import { useEvent } from '@/hooks/useEvent'
@@ -11,6 +11,7 @@ import { outerLineFixState } from '@/store/outerLineAtom'
 import { useSwal } from '@/hooks/useSwal'
 import { usePopup } from '@/hooks/usePopup'
 import { getChonByDegree } from '@/util/canvas-util'
+import { EventContext } from '@/app/floor-plan/EventProvider'
 
 //지붕형상 수동 설정
 export function useRoofShapePassivitySetting(id) {
@@ -25,7 +26,8 @@ export function useRoofShapePassivitySetting(id) {
   const { getMessage } = useMessage()
   const { showLine, hideLine, addPitchTextsByOuterLines } = useLine()
   const { swalFire } = useSwal()
-  const { addCanvasMouseEventListener, initEvent } = useEvent()
+  // const { addCanvasMouseEventListener, initEvent } = useEvent()
+  const { addCanvasMouseEventListener, initEvent } = useContext(EventContext)
   const { drawRoofPolygon } = useMode()
   const { addPolygonByLines } = usePolygon()
   const currentObject = useRecoilValue(currentObjectState)

src/hooks/roofcover/useWallLineOffsetSetting.js

@@ -1,11 +1,12 @@
 import { canvasState, currentObjectState } from '@/store/canvasAtom'
 import { useRecoilValue } from 'recoil'
-import { useEffect, useRef, useState } from 'react'
+import { useContext, useEffect, useRef, useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import { useEvent } from '@/hooks/useEvent'
 import { useLine } from '@/hooks/useLine'
 import { useSwal } from '@/hooks/useSwal'
 import { usePopup } from '@/hooks/usePopup'
+import { EventContext } from '@/app/floor-plan/EventProvider'
 
 // 외벽선 편집 및 오프셋
 export function useWallLineOffsetSetting(id) {
@@ -14,7 +15,8 @@ export function useWallLineOffsetSetting(id) {
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
   const { swalFire } = useSwal()
-  const { addCanvasMouseEventListener, initEvent } = useEvent()
+  // const { addCanvasMouseEventListener, initEvent } = useEvent()
+  const { addCanvasMouseEventListener, initEvent } = useContext(EventContext)
   const wallLineEditRef = useRef(null)
   const length1Ref = useRef(null)
   const length2Ref = useRef(null)

src/hooks/surface/usePlacementShapeDrawing.js

@@ -12,7 +12,7 @@ import { useEvent } from '@/hooks/useEvent'
 import { useMouse } from '@/hooks/useMouse'
 import { useLine } from '@/hooks/useLine'
 import { useTempGrid } from '@/hooks/useTempGrid'
-import { useEffect, useRef } from 'react'
+import { useContext, useEffect, useRef } from 'react'
 import { distanceBetweenPoints, setSurfaceShapePattern } from '@/util/canvas-util'
 import { fabric } from 'fabric'
 import { calculateAngle } from '@/util/qpolygon-utils'
@@ -33,12 +33,15 @@ import { POLYGON_TYPE } from '@/common/common'
 import { usePopup } from '@/hooks/usePopup'
 
 import { roofDisplaySelector } from '@/store/settingAtom'
+import { EventContext } from '@/app/floor-plan/EventProvider'
 // 면형상 배치
 export function usePlacementShapeDrawing(id) {
   const canvas = useRecoilValue(canvasState)
   const roofDisplay = useRecoilValue(roofDisplaySelector)
+  // const { addCanvasMouseEventListener, addDocumentEventListener, removeAllMouseEventListeners, removeAllDocumentEventListeners, removeMouseEvent } =
+  //   useEvent()
   const { addCanvasMouseEventListener, addDocumentEventListener, removeAllMouseEventListeners, removeAllDocumentEventListeners, removeMouseEvent } =
-    useEvent()
+    useContext(EventContext)
   const { getIntersectMousePoint } = useMouse()
   const { addLine, removeLine } = useLine()
   const { addPolygonByLines, drawDirectionArrow } = usePolygon()

src/hooks/surface/useSurfaceShapeBatch.js

@@ -15,6 +15,8 @@ import { usePolygon } from '@/hooks/usePolygon'
 import { fontSelector } from '@/store/fontAtom'
 import { slopeSelector } from '@/store/commonAtom'
 import { QLine } from '@/components/fabric/QLine'
+import { EventContext } from '@/app/floor-plan/EventProvider'
+import { useContext } from 'react'
 
 export function useSurfaceShapeBatch() {
   const { getMessage } = useMessage()
@@ -26,7 +28,8 @@ export function useSurfaceShapeBatch() {
   const roofDisplay = useRecoilValue(roofDisplaySelector)
   const slope = useRecoilValue(slopeSelector(globalPitch))
   const { swalFire } = useSwal()
-  const { addCanvasMouseEventListener, initEvent } = useEvent()
+  // const { addCanvasMouseEventListener, initEvent } = useEvent()
+  const { addCanvasMouseEventListener, initEvent } = useContext(EventContext)
   const { closePopup } = usePopup()
 
   const applySurfaceShape = (surfaceRefs, selectedType, id) => {

src/hooks/useEvent.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react'
+import { useCallback, useEffect, useRef } from 'react'
 import { useRecoilValue, useSetRecoilState } from 'recoil'
 import { canvasState, canvasZoomState, currentMenuState, textModeState } from '@/store/canvasAtom'
 import { fabric } from 'fabric'