임의그리드 이벤트 수정

src/hooks/useEvent.js

@@ -6,6 +6,8 @@ import { calculateDistance, calculateDistancePoint, calculateIntersection, dista
 import { useAdsorptionPoint } from '@/hooks/useAdsorptionPoint'
 import { useDotLineGrid } from '@/hooks/useDotLineGrid'
 import { useTempGrid } from '@/hooks/useTempGrid'
+import { gridColorState } from '@/store/gridAtom'
+import { gridDisplaySelector } from '@/store/settingAtom'
 
 export function useEvent() {
   const canvas = useRecoilValue(canvasState)
@@ -13,10 +15,12 @@ export function useEvent() {
   const documentEventListeners = useRef([])
   const mouseEventListeners = useRef([])
   const setCanvasZoom = useSetRecoilState(canvasZoomState)
+  const gridColor = useRecoilValue(gridColorState)
+  const isGridDisplay = useRecoilValue(gridDisplaySelector)
 
   const { adsorptionPointAddMode, adsorptionPointMode, adsorptionRange, getAdsorptionPoints, adsorptionPointAddModeStateEvent } = useAdsorptionPoint()
   const { dotLineGridSetting, interval, getClosestLineGrid } = useDotLineGrid()
-  const { tempGridModeStateLeftClickEvent, tempGridMode, tempGridRightClickEvent } = useTempGrid()
+  const { tempGridModeStateLeftClickEvent, tempGridMode } = useTempGrid()
 
   const textMode = useRecoilValue(textModeState)
 
@@ -249,6 +253,34 @@ export function useEvent() {
       })
   }
 
+  const tempGridRightClickEvent = (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+    //임의 그리드 모드일 경우
+    let pointer = { x: e.offsetX, y: e.offsetY }
+
+    const tempGrid = new fabric.Line([-1500, pointer.y, 2500, pointer.y], {
+      stroke: gridColor,
+      strokeWidth: 1,
+      selectable: true,
+      lockMovementX: true,
+      lockMovementY: true,
+      lockRotation: true,
+      lockScalingX: true,
+      lockScalingY: true,
+      strokeDashArray: [5, 2],
+      opacity: 0.3,
+      padding: 5,
+      name: 'tempGrid',
+      visible: isGridDisplay,
+      direction: 'horizontal',
+    })
+
+    canvas.add(tempGrid)
+
+    canvas.renderAll()
+  }
+
   const defaultKeyboardEvent = (e) => {
     if (e.key === 'Escape') {
       console.log('defaultKeyboardEvent')

src/hooks/useTempGrid.js

@@ -7,8 +7,9 @@ const GRID_PADDING = 5
 export function useTempGrid() {
   const canvas = useRecoilValue(canvasState)
   const gridColor = useRecoilValue(gridColorState)
-  const [tempGridMode, setTempGridMode] = useRecoilState(tempGridModeState)
   const isGridDisplay = useRecoilValue(gridDisplaySelector)
+  const [tempGridMode, setTempGridMode] = useRecoilState(tempGridModeState)
+
   const tempGridModeStateLeftClickEvent = (e) => {
     //임의 그리드 모드일 경우
     let pointer = canvas.getPointer(e.e)
@@ -35,37 +36,8 @@ export function useTempGrid() {
     canvas.renderAll()
   }
 
-  const tempGridRightClickEvent = (e) => {
-    e.preventDefault()
-    e.stopPropagation()
-    //임의 그리드 모드일 경우
-    let pointer = { x: e.offsetX, y: e.offsetY }
-
-    const tempGrid = new fabric.Line([-1500, pointer.y, 2500, pointer.y], {
-      stroke: gridColor,
-      strokeWidth: 1,
-      selectable: true,
-      lockMovementX: true,
-      lockMovementY: true,
-      lockRotation: true,
-      lockScalingX: true,
-      lockScalingY: true,
-      strokeDashArray: [5, 2],
-      opacity: 0.3,
-      padding: GRID_PADDING,
-      name: 'tempGrid',
-      visible: isGridDisplay,
-      direction: 'horizontal',
-    })
-
-    canvas.add(tempGrid)
-
-    canvas.renderAll()
-  }
-
   return {
     tempGridModeStateLeftClickEvent,
-    tempGridRightClickEvent,
     tempGridMode,
     setTempGridMode,
   }