context menu 버그 수정

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

@@ -1,16 +1,20 @@
 'use client'
 import { useEffect } from 'react'
 import '@/styles/contents.scss'
-import { useRecoilState } from 'recoil'
+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'
 
 export default function QContextMenu(props) {
-  const { contextRef, canvasProps, handleKeyup } = props
+  const { contextRef, canvasProps } = props
   const [contextMenu, setContextMenu] = useRecoilState(contextMenuState)
-  const [contextMenuList, setContextMenuList] = useRecoilState(contextMenuListState)
+  const contextMenuList = useRecoilValue(contextMenuListState)
   const activeObject = canvasProps?.getActiveObject() //액티브된 객체를 가져옴
   const { tempGridMode, setTempGridMode } = useTempGrid()
+  const { handleKeyup } = useContextMenu()
+  const { addDocumentEventListener, removeDocumentEvent } = useEvent()
 
   let contextType = ''
 
@@ -22,13 +26,13 @@ export default function QContextMenu(props) {
       }
     }
   }
-
   const getYPosition = (e) => {
     const contextLength = contextMenuList.reduce((acc, cur, index) => {
       return acc + cur.length
     }, 0)
     return e?.clientY - (contextLength * 25 + contextMenuList.length * 2 * 17)
   }
+
   useEffect(() => {
     if (!contextRef.current) return
 
@@ -40,7 +44,7 @@ export default function QContextMenu(props) {
         y: window.innerHeight / 2 < e.pageY ? getYPosition(e) : e.pageY,
       }
       setContextMenu({ visible: true, ...position })
-      document.addEventListener('keyup', (e) => handleKeyup(e))
+      addDocumentEventListener('keyup', document, handleKeyup)
       canvasProps?.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu) //한번 노출 후 이벤트 삭제
     }
 
@@ -51,8 +55,9 @@ export default function QContextMenu(props) {
 
     const handleOutsideClick = (e) => {
       // e.preventDefault()
-      if (contextMenu.visible && !ref.current.contains(e.target)) {
+      if (contextMenu.visible) {
         setContextMenu({ ...contextMenu, visible: false })
+        removeDocumentEvent('keyup')
       }
     }
 
@@ -61,10 +66,11 @@ export default function QContextMenu(props) {
     document.addEventListener('click', handleOutsideClick)
 
     return () => {
+      removeDocumentEvent('keyup')
       document.removeEventListener('click', handleClick)
       document.removeEventListener('click', handleOutsideClick)
     }
-  }, [contextRef, contextMenu])
+  }, [contextRef, contextMenuList])
 
   const handleObjectMove = () => {
     activeObject.set({

src/components/floor-plan/CanvasFrame.jsx

@@ -19,7 +19,7 @@ export default function CanvasFrame() {
   const { canvas } = useCanvas('canvas')
   const { canvasLoadInit, gridInit } = useCanvasConfigInitialize()
   const currentMenu = useRecoilValue(currentMenuState)
-  const { contextMenu, handleClick, handleKeyup } = useContextMenu()
+  const { contextMenu, handleClick } = useContextMenu()
   const { selectedPlan, modifiedPlanFlag, checkCanvasObjectEvent, resetModifiedPlans } = usePlan()
   useEvent()
 
@@ -57,7 +57,7 @@ export default function CanvasFrame() {
     <div className="canvas-frame">
       <canvas ref={canvasRef} id="canvas" style={{ position: 'relative' }}></canvas>
 
-      <QContextMenu contextRef={canvasRef} canvasProps={canvas} handleKeyup={handleKeyup}>
+      <QContextMenu contextRef={canvasRef} canvasProps={canvas}>
         {contextMenu?.map((menus, index) => (
           <ul key={index}>
             {menus.map((menu) => (

src/hooks/useContextMenu.js

@@ -230,12 +230,12 @@ export function useContextMenu() {
       y: 180,
     })
     setCurrentContextMenu(menu)
+    currentMenuSetting()
     setQContextMenu({ ...qContextMenu, visible: false })
   }
 
   const handleKeyup = (e) => {
     let menu = null
-
     for (let i = 0; i < contextMenu.length; i++) {
       const temp = contextMenu[i].filter((menu) => {
         return menu.shortcut?.includes(e.key)
@@ -257,7 +257,6 @@ export function useContextMenu() {
 
   useEffect(() => {
     if (currentObject?.name) {
-      console.log(currentObject?.name)
       switch (currentObject.name) {
         case 'triangleDormer':
         case 'pentagonDormer':

src/hooks/useEvent.js

@@ -1,12 +1,11 @@
 import { useEffect, useRef } from 'react'
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
+import { useRecoilValue, useSetRecoilState } from 'recoil'
 import { canvasState, canvasZoomState, currentMenuState, textModeState } from '@/store/canvasAtom'
 import { fabric } from 'fabric'
-import { calculateDistance, calculateIntersection, distanceBetweenPoints, findClosestPoint, polygonToTurfPolygon } from '@/util/canvas-util'
+import { calculateDistance, calculateIntersection, distanceBetweenPoints, findClosestPoint } from '@/util/canvas-util'
 import { useAdsorptionPoint } from '@/hooks/useAdsorptionPoint'
 import { useDotLineGrid } from '@/hooks/useDotLineGrid'
 import { useTempGrid } from '@/hooks/useTempGrid'
-import { gridDisplaySelector } from '@/store/settingAtom'
 
 export function useEvent() {
   const canvas = useRecoilValue(canvasState)
@@ -100,7 +99,13 @@ export function useEvent() {
           const distance = calculateDistance(pointer, closestLine)
 
           if (distance < adsorptionRange) {
-            arrivalPoint = closestLine.direction === 'vertical' ? { x: closestLine.x1, y: pointer.y } : { x: pointer.x, y: closestLine.y1 }
+            arrivalPoint =
+              closestLine.direction === 'vertical'
+                ? { x: closestLine.x1, y: pointer.y }
+                : {
+                    x: pointer.x,
+                    y: closestLine.y1,
+                  }
           }
         }
       }
@@ -261,6 +266,7 @@ export function useEvent() {
     addCanvasMouseEventListener,
     removeAllMouseEventListeners,
     removeAllDocumentEventListeners,
+    removeDocumentEvent,
     removeMouseEvent,
     removeMouseLine,
     initEvent,