Revert "useContext -> useEvent 원복"

This reverts commit a084b5dbf3483b4884bdeb59bb422ef27bc85bba.

src/app/floor-plan/layout.js

@@ -3,19 +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>*/}
+      <EventProvider>
-      <FloorPlanProvider>
+        <FloorPlanProvider>
-        <FloorPlan>
+          <FloorPlan>
-          <CanvasLayout>{children}</CanvasLayout>
+            <CanvasLayout>{children}</CanvasLayout>
-        </FloorPlan>
+          </FloorPlan>
-      </FloorPlanProvider>
+        </FloorPlanProvider>
-      {/*</EventProvider>*/}
+      </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,8 +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)
+  const { addDocumentEventListener, removeDocumentEvent } = useContext(EventContext)
 
   let contextType = ''
 

src/components/floor-plan/CanvasMenu.jsx

@@ -33,12 +33,15 @@ import useMenu from '@/hooks/common/useMenu'
 import { MENU } from '@/common/common'
 
 import { useEstimateController } from '@/hooks/floorPlan/estimate/useEstimateController'
-import { estimateState, floorPlanObjectState } from '@/store/floorPlanObjectAtom'
+import { estimateState } from '@/store/floorPlanObjectAtom'
 import DocDownOptionPop from '../estimate/popup/DocDownOptionPop'
 import { FloorPlanContext } from '@/app/floor-plan/FloorPlanProvider'
 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
@@ -68,8 +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 { 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,8 +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 { 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 { useEffect, useState } 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,8 +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 { initEvent } = useContext(EventContext)
 
   const properties = [
     { name: getMessage('eaves.line'), value: LINE_TYPE.WALLLINE.EAVES },

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

@@ -1,11 +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)
+  const { addDocumentEventListener, initEvent } = useContext(EventContext)
 
   useEffect(() => {
     addDocumentEventListener('keydown', document, keyDown)

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

@@ -1,11 +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 { 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,12 +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 { addCanvasMouseEventListener, addDocumentEventListener, initEvent } = useContext(EventContext)
   const dimensionSettings = useRecoilValue(dimensionLineSettingsState)
   const dimensionLineTextFont = useRecoilValue(fontSelector('dimensionLineText'))
   const commonTextFont = useRecoilValue(fontSelector('commonText'))

src/hooks/module/useModuleBasicSetting.js

@@ -1,22 +1,25 @@
-import { useRecoilState, useRecoilValue } from 'recoil'
+import { useContext, useEffect, useState } from 'react'
-import { canvasState, moduleIsSetupState, moduleSetupSurfaceState } from '@/store/canvasAtom'
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
+import { canvasState } from '@/store/canvasAtom'
 import { rectToPolygon, setSurfaceShapePattern } from '@/util/canvas-util'
 import { roofDisplaySelector } from '@/store/settingAtom'
 import offsetPolygon from '@/util/qpolygon-utils'
 import { QPolygon } from '@/components/fabric/QPolygon'
 import { QLine } from '@/components/fabric/QLine'
+import { moduleSetupSurfaceState, moduleIsSetupState } from '@/store/canvasAtom'
 import { useEvent } from '@/hooks/useEvent'
-import { BATCH_TYPE, POLYGON_TYPE } from '@/common/common'
+import { POLYGON_TYPE, BATCH_TYPE } from '@/common/common'
 
 import * as turf from '@turf/turf'
+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)
+  const { addTargetMouseEventListener, addCanvasMouseEventListener, initEvent } = useContext(EventContext)
   let selectedModuleInstSurfaceArray = []
 
   const makeModuleInstArea = () => {
@@ -697,7 +700,7 @@ export function useModuleBasicSetting() {
       }
       if (leftBottomCnt + rightBottomCnt === 0) {
         exposedBottom++
-
+        return
       }
     })
     // 노출상면 체크
@@ -725,7 +728,7 @@ export function useModuleBasicSetting() {
       }
       if (leftTopCnt + rightTopCnt === 0) {
         exposedTop++
-
+        return
       }
     })
     return {

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,12 +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 { 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,12 +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 { 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,13 +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 { addCanvasMouseEventListener, initEvent } = useContext(EventContext)
   const { closePopup } = usePopup()
   const TYPES = {
     EAVES: 'eaves',

src/hooks/roofcover/useMovementSetting.js

@@ -2,10 +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) {
@@ -14,8 +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 { initEvent, addCanvasMouseEventListener } = useContext(EventContext)
   const { closePopup } = usePopup()
   const { getMessage } = useMessage()
   const currentObject = useRecoilValue(currentObjectState)

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,8 +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 { addCanvasMouseEventListener, initEvent } = useContext(EventContext)
   const { drawRoofPolygon } = useMode()
   const { addPolygonByLines } = usePolygon()
   const currentObject = useRecoilValue(currentObjectState)
@@ -203,11 +204,7 @@ export function useRoofShapePassivitySetting(id) {
       wall = addPolygonByLines(lines, { name: POLYGON_TYPE.WALL, fill: 'transparent', stroke: 'black' })
     } else {
       // 그냥 닫을 경우 처리
-      wall = addPolygonByLines([...initLines.current], {
+      wall = addPolygonByLines([...initLines.current], { name: POLYGON_TYPE.WALL, fill: 'transparent', stroke: 'black' })
-        name: POLYGON_TYPE.WALL,
-        fill: 'transparent',
-        stroke: 'black',
-      })
       lines.forEach((line, idx) => {
         line.attributes = initLines.current[idx].attributes
       })

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,8 +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 { 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,15 +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 } =
-  //   useContext(EventContext)
+  //   useEvent()
+  const { addCanvasMouseEventListener, addDocumentEventListener, removeAllMouseEventListeners, removeAllDocumentEventListeners, removeMouseEvent } =
+    useContext(EventContext)
   const { getIntersectMousePoint } = useMouse()
   const { addLine, removeLine } = useLine()
   const { addPolygonByLines, drawDirectionArrow } = usePolygon()
@@ -432,104 +432,56 @@ export function usePlacementShapeDrawing(id) {
           if (prev.length === 0) {
             return []
           }
-          return [
+          return [...prev, { x: prev[prev.length - 1].x + length1Value / 10, y: prev[prev.length - 1].y + length2Value / 10 }]
-            ...prev,
-            {
-              x: prev[prev.length - 1].x + length1Value / 10,
-              y: prev[prev.length - 1].y + length2Value / 10,
-            },
-          ]
         })
       } else if (arrow1Value === '↓' && arrow2Value === '←') {
         setPoints((prev) => {
           if (prev.length === 0) {
             return []
           }
-          return [
+          return [...prev, { x: prev[prev.length - 1].x - length1Value / 10, y: prev[prev.length - 1].y + length2Value / 10 }]
-            ...prev,
-            {
-              x: prev[prev.length - 1].x - length1Value / 10,
-              y: prev[prev.length - 1].y + length2Value / 10,
-            },
-          ]
         })
       } else if (arrow1Value === '↑' && arrow2Value === '→') {
         setPoints((prev) => {
           if (prev.length === 0) {
             return []
           }
-          return [
+          return [...prev, { x: prev[prev.length - 1].x + length1Value / 10, y: prev[prev.length - 1].y - length2Value / 10 }]
-            ...prev,
-            {
-              x: prev[prev.length - 1].x + length1Value / 10,
-              y: prev[prev.length - 1].y - length2Value / 10,
-            },
-          ]
         })
       } else if (arrow1Value === '↑' && arrow2Value === '←') {
         setPoints((prev) => {
           if (prev.length === 0) {
             return []
           }
-          return [
+          return [...prev, { x: prev[prev.length - 1].x - length1Value / 10, y: prev[prev.length - 1].y - length2Value / 10 }]
-            ...prev,
-            {
-              x: prev[prev.length - 1].x - length1Value / 10,
-              y: prev[prev.length - 1].y - length2Value / 10,
-            },
-          ]
         })
       } else if (arrow1Value === '→' && arrow2Value === '↓') {
         setPoints((prev) => {
           if (prev.length === 0) {
             return []
           }
-          return [
+          return [...prev, { x: prev[prev.length - 1].x + length2Value / 10, y: prev[prev.length - 1].y + length1Value / 10 }]
-            ...prev,
-            {
-              x: prev[prev.length - 1].x + length2Value / 10,
-              y: prev[prev.length - 1].y + length1Value / 10,
-            },
-          ]
         })
       } else if (arrow1Value === '→' && arrow2Value === '↑') {
         setPoints((prev) => {
           if (prev.length === 0) {
             return []
           }
-          return [
+          return [...prev, { x: prev[prev.length - 1].x + length2Value / 10, y: prev[prev.length - 1].y - length1Value / 10 }]
-            ...prev,
-            {
-              x: prev[prev.length - 1].x + length2Value / 10,
-              y: prev[prev.length - 1].y - length1Value / 10,
-            },
-          ]
         })
       } else if (arrow1Value === '←' && arrow2Value === '↓') {
         setPoints((prev) => {
           if (prev.length === 0) {
             return []
           }
-          return [
+          return [...prev, { x: prev[prev.length - 1].x - length2Value / 10, y: prev[prev.length - 1].y + length1Value / 10 }]
-            ...prev,
-            {
-              x: prev[prev.length - 1].x - length2Value / 10,
-              y: prev[prev.length - 1].y + length1Value / 10,
-            },
-          ]
         })
       } else if (arrow1Value === '←' && arrow2Value === '↑') {
         setPoints((prev) => {
           if (prev.length === 0) {
             return []
           }
-          return [
+          return [...prev, { x: prev[prev.length - 1].x - length2Value / 10, y: prev[prev.length - 1].y - length1Value / 10 }]
-            ...prev,
-            {
-              x: prev[prev.length - 1].x - length2Value / 10,
-              y: prev[prev.length - 1].y - length1Value / 10,
-            },
-          ]
         })
       }
 
@@ -585,65 +537,35 @@ export function usePlacementShapeDrawing(id) {
           if (prev.length === 0) {
             return []
           }
-          return [
+          return [...prev, { x: prev[prev.length - 1].x + length2Value / 10, y: prev[prev.length - 1].y + length1Value / 10 }]
-            ...prev,
-            {
-              x: prev[prev.length - 1].x + length2Value / 10,
-              y: prev[prev.length - 1].y + length1Value / 10,
-            },
-          ]
         })
       } else if (arrow1Value === '↓' && arrow2Value === '←') {
         setPoints((prev) => {
           if (prev.length === 0) {
             return []
           }
-          return [
+          return [...prev, { x: prev[prev.length - 1].x - length2Value / 10, y: prev[prev.length - 1].y + length1Value / 10 }]
-            ...prev,
-            {
-              x: prev[prev.length - 1].x - length2Value / 10,
-              y: prev[prev.length - 1].y + length1Value / 10,
-            },
-          ]
         })
       } else if (arrow1Value === '↑' && arrow2Value === '→') {
         setPoints((prev) => {
           if (prev.length === 0) {
             return []
           }
-          return [
+          return [...prev, { x: prev[prev.length - 1].x + length2Value / 10, y: prev[prev.length - 1].y - length1Value / 10 }]
-            ...prev,
-            {
-              x: prev[prev.length - 1].x + length2Value / 10,
-              y: prev[prev.length - 1].y - length1Value / 10,
-            },
-          ]
         })
       } else if (arrow1Value === '↑' && arrow2Value === '←') {
         setPoints((prev) => {
           if (prev.length === 0) {
             return []
           }
-          return [
+          return [...prev, { x: prev[prev.length - 1].x - length2Value / 10, y: prev[prev.length - 1].y - length1Value / 10 }]
-            ...prev,
-            {
-              x: prev[prev.length - 1].x - length2Value / 10,
-              y: prev[prev.length - 1].y - length1Value / 10,
-            },
-          ]
         })
       } else if (arrow1Value === '→' && arrow2Value === '↓') {
         setPoints((prev) => {
           if (prev.length === 0) {
             return []
           }
-          return [
+          return [...prev, { x: prev[prev.length - 1].x + length1Value / 10, y: prev[prev.length - 1].y + length2Value / 10 }]
-            ...prev,
-            {
-              x: prev[prev.length - 1].x + length1Value / 10,
-              y: prev[prev.length - 1].y + length2Value / 10,
-            },
-          ]
         })
       } else if (arrow1Value === '→' && arrow2Value === '↑') {
         setPoints((prev) => {

src/hooks/surface/useSurfaceShapeBatch.js

@@ -2,7 +2,7 @@
 
 import { useRecoilValue } from 'recoil'
 import { canvasState, globalPitchState } from '@/store/canvasAtom'
-import { MENU, POLYGON_TYPE } from '@/common/common'
+import { MENU, BATCH_TYPE, POLYGON_TYPE } from '@/common/common'
 import { getIntersectionPoint, setSurfaceShapePattern } from '@/util/canvas-util'
 import { degreesToRadians } from '@turf/turf'
 import { QPolygon } from '@/components/fabric/QPolygon'
@@ -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,8 +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 { addCanvasMouseEventListener, initEvent } = useContext(EventContext)
   const { closePopup } = usePopup()
 
   const applySurfaceShape = (surfaceRefs, selectedType, id) => {
@@ -327,14 +329,8 @@ export function useSurfaceShapeBatch() {
         const angleInRadians = Math.asin(length2 / length3)
         points = [
           { x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
-          {
+          { x: pointer.x - length1 / 2 + length3 * Math.cos(angleInRadians), y: pointer.y + length2 / 2 - length3 * Math.sin(angleInRadians) },
-            x: pointer.x - length1 / 2 + length3 * Math.cos(angleInRadians),
+          { x: pointer.x + length1 / 2 + length3 * Math.cos(angleInRadians), y: pointer.y + length2 / 2 - length3 * Math.sin(angleInRadians) },
-            y: pointer.y + length2 / 2 - length3 * Math.sin(angleInRadians),
-          },
-          {
-            x: pointer.x + length1 / 2 + length3 * Math.cos(angleInRadians),
-            y: pointer.y + length2 / 2 - length3 * Math.sin(angleInRadians),
-          },
           { x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
         ]
 
@@ -345,18 +341,9 @@ export function useSurfaceShapeBatch() {
           { x: pointer.x - (length1 + length2 + length3) / 2, y: pointer.y - (length4 + length5) / 2 },
           { x: pointer.x - (length1 + length2 + length3) / 2, y: pointer.y + (length4 + length5) / 2 },
           { x: pointer.x - (length1 + length2 + length3) / 2 + length1, y: pointer.y + (length4 + length5) / 2 },
-          {
+          { x: pointer.x - (length1 + length2 + length3) / 2 + length1, y: pointer.y + (length4 + length5) / 2 - length5 },
-            x: pointer.x - (length1 + length2 + length3) / 2 + length1,
+          { x: pointer.x - (length1 + length2 + length3) / 2 + length1 + length2, y: pointer.y + (length4 + length5) / 2 - length5 },
-            y: pointer.y + (length4 + length5) / 2 - length5,
+          { x: pointer.x - (length1 + length2 + length3) / 2 + length1 + length2, y: pointer.y + (length4 + length5) / 2 - length5 + length5 },
-          },
-          {
-            x: pointer.x - (length1 + length2 + length3) / 2 + length1 + length2,
-            y: pointer.y + (length4 + length5) / 2 - length5,
-          },
-          {
-            x: pointer.x - (length1 + length2 + length3) / 2 + length1 + length2,
-            y: pointer.y + (length4 + length5) / 2 - length5 + length5,
-          },
           {
             x: pointer.x - (length1 + length2 + length3) / 2 + length1 + length2 + length3,
             y: pointer.y + (length4 + length5) / 2 - length5 + length5,
@@ -375,14 +362,8 @@ export function useSurfaceShapeBatch() {
           { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 },
           { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length3 },
           { x: pointer.x - length1 / 2 + length1 - (length1 - length2), y: pointer.y + length4 / 2 - length3 },
-          {
+          { x: pointer.x - length1 / 2 + length1 - (length1 - length2), y: pointer.y + length4 / 2 - length3 + (length3 - length4) },
-            x: pointer.x - length1 / 2 + length1 - (length1 - length2),
+          { x: pointer.x - length1 / 2 + length1 - (length1 - length2) - length2, y: pointer.y + length4 / 2 - length3 + (length3 - length4) },
-            y: pointer.y + length4 / 2 - length3 + (length3 - length4),
-          },
-          {
-            x: pointer.x - length1 / 2 + length1 - (length1 - length2) - length2,
-            y: pointer.y + length4 / 2 - length3 + (length3 - length4),
-          },
         ]
 
         break
@@ -393,14 +374,8 @@ export function useSurfaceShapeBatch() {
           { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 },
           { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length4 },
           { x: pointer.x - length1 / 2 + length1 - length3, y: pointer.y + length4 / 2 - length4 },
-          {
+          { x: pointer.x - length1 / 2 + length1 - length3, y: pointer.y + length4 / 2 - length4 + (length4 - length5) },
-            x: pointer.x - length1 / 2 + length1 - length3,
+          { x: pointer.x - length1 / 2 + length1 - length3 - length2, y: pointer.y + length4 / 2 - length4 + (length4 - length5) },
-            y: pointer.y + length4 / 2 - length4 + (length4 - length5),
-          },
-          {
-            x: pointer.x - length1 / 2 + length1 - length3 - length2,
-            y: pointer.y + length4 / 2 - length4 + (length4 - length5),
-          },
         ]
         break
       }
@@ -410,14 +385,8 @@ export function useSurfaceShapeBatch() {
           { x: pointer.x + length1 / 2 - length1, y: pointer.y + length4 / 2 },
           { x: pointer.x + length1 / 2 - length1, y: pointer.y + length4 / 2 - length5 },
           { x: pointer.x + length1 / 2 - length1 + length2, y: pointer.y + length4 / 2 - length5 },
-          {
+          { x: pointer.x + length1 / 2 - length1 + length2, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
-            x: pointer.x + length1 / 2 - length1 + length2,
+          { x: pointer.x + length1 / 2 - length1 + length2 + length3, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
-            y: pointer.y + length4 / 2 - length5 - (length4 - length5),
-          },
-          {
-            x: pointer.x + length1 / 2 - length1 + length2 + length3,
-            y: pointer.y + length4 / 2 - length5 - (length4 - length5),
-          },
         ]
         break
       }
@@ -427,14 +396,8 @@ export function useSurfaceShapeBatch() {
           { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 },
           { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length5 },
           { x: pointer.x - length1 / 2 + length1 - length2, y: pointer.y + length4 / 2 - length5 },
-          {
+          { x: pointer.x - length1 / 2 + length1 - length2, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
-            x: pointer.x - length1 / 2 + length1 - length2,
+          { x: pointer.x - length1 / 2 + length1 - length2 - length3, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
-            y: pointer.y + length4 / 2 - length5 - (length4 - length5),
-          },
-          {
-            x: pointer.x - length1 / 2 + length1 - length2 - length3,
-            y: pointer.y + length4 / 2 - length5 - (length4 - length5),
-          },
         ]
         break
       }
@@ -445,10 +408,7 @@ export function useSurfaceShapeBatch() {
         const leftAngle = Math.acos((length1 - length2) / 2 / leftHypotenuse)
 
         points = [
-          {
+          { x: pointer.x - length1 / 2 + leftHypotenuse * Math.cos(leftAngle), y: pointer.y + length3 / 2 - leftHypotenuse * Math.sin(leftAngle) },
-            x: pointer.x - length1 / 2 + leftHypotenuse * Math.cos(leftAngle),
-            y: pointer.y + length3 / 2 - leftHypotenuse * Math.sin(leftAngle),
-          },
           { x: pointer.x - length1 / 2, y: pointer.y + length3 / 2 },
           { x: pointer.x + length1 / 2, y: pointer.y + length3 / 2 },
           {
@@ -537,10 +497,7 @@ export function useSurfaceShapeBatch() {
           { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length4 },
           { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length4 + length4 },
           { x: pointer.x - length1 / 2 + length1 - length3, y: pointer.y + length4 / 2 - length4 + length4 },
-          {
+          { x: pointer.x - length1 / 2 + length2 + (length1 - length2 - length3) / 2, y: pointer.y + length4 / 2 - length4 + length5 },
-            x: pointer.x - length1 / 2 + length2 + (length1 - length2 - length3) / 2,
-            y: pointer.y + length4 / 2 - length4 + length5,
-          },
         ]
         break
       }

src/hooks/useCanvas.js

@@ -13,7 +13,7 @@ import { writeImage } from '@/lib/canvas'
 import { useCanvasEvent } from '@/hooks/useCanvasEvent'
 import { useAxios } from '@/hooks/useAxios'
 import { useFont } from '@/hooks/common/useFont'
-import { OBJECT_PROTOTYPE, SAVE_KEY } from '@/common/common'
+import { OBJECT_PROTOTYPE, RELOAD_TYPE_PROTOTYPE, SAVE_KEY } from '@/common/common'
 
 export function useCanvas(id) {
   const [canvas, setCanvas] = useRecoilState(canvasState)
@@ -37,7 +37,6 @@ export function useCanvas(id) {
       selection: false,
     })
 
-    console.log('canvas', c)
     setCanvas(c)
     setCanvasForEvent(c)
     attachDefaultEventOnCanvas()
@@ -395,14 +394,7 @@ export function useCanvas(id) {
 
     await post({ url: '/api/canvas-management/canvas-statuses', data: patternData })
 
-    setThumbnails((prev) => [
+    setThumbnails((prev) => [...prev, { imageName: `/canvasState/${title}.png`, userId, canvasStatus: JSON.stringify(canvasStatus) }])
-      ...prev,
-      {
-        imageName: `/canvasState/${title}.png`,
-        userId,
-        canvasStatus: JSON.stringify(canvasStatus),
-      },
-    ])
   }
 
   const handleFlip = () => {

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'
@@ -41,7 +41,6 @@ export function useEvent() {
 
   const addDefaultEvent = () => {
     //default Event 추가
-    console.log('addDefaultEvent', canvas)
     addCanvasMouseEventListener('mouse:move', defaultMouseMoveEvent)
     addCanvasMouseEventListener('mouse:out', defaultMouseOutEvent)
     addDocumentEventListener('contextmenu', document, defaultContextMenuEvent)