context menu 위치 조정

src/components/common/color-picker/ColorPickerModal.jsx

@@ -3,9 +3,12 @@ import ColorPicker from '@/components/common/color-picker/ColorPicker'
 import { useMessage } from '@/hooks/useMessage'
 import { useEffect, useState } from 'react'
 import { usePopup } from '@/hooks/usePopup'
+import { useRecoilValue } from 'recoil'
+import { contextPopupPositionState } from '@/store/popupAtom'
 
 export default function ColorPickerModal(props) {
-  const { isShow, setIsShow, pos = { x: 770, y: -815 }, color = '#ff0000', setColor, id } = props
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState) // 현재 메뉴
+  const { isShow, setIsShow, pos = contextPopupPosition, color = '#ff0000', setColor, id } = props
   const { getMessage } = useMessage()
   const [originColor, setOriginColor] = useState(color)
   const { closePopup } = usePopup()
@@ -15,14 +18,17 @@ export default function ColorPickerModal(props) {
   }, [isShow])
 
   return (
-    <WithDraggable isShow={true} pos={pos}>
+    <WithDraggable isShow={true} pos={pos ?? ''}>
       <div className={`modal-pop-wrap lr mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.color.picker.title')}</h1>
           <button
             className="modal-close"
             onClick={() => {
-              setIsShow(false)
+              if (setIsShow) {
+                setIsShow(false)
+              }
+              console.log(id)
               closePopup(id)
             }}
           >
@@ -40,8 +46,9 @@ export default function ColorPickerModal(props) {
             <button
               className="btn-frame modal act"
               onClick={() => {
-                setColor(originColor)
+                if (setColor) setColor(originColor)
-                setIsShow(false)
+                if (setIsShow) setIsShow(false)
+
                 closePopup(id)
               }}
             >

src/components/common/font/FontSetting.jsx

@@ -1,11 +1,11 @@
 import WithDraggable from '@/components/common/draggable/WithDraggable'
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { usePopup } from '@/hooks/usePopup'
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { fontSelector, globalFontAtom } from '@/store/fontAtom'
-import { useFont } from '@/hooks/common/useFont'
+import { contextPopupPositionState } from '@/store/popupAtom'
 
 const fonts = [
   { name: 'MS PGothic', value: 'MS PGothic' },
@@ -46,7 +46,8 @@ const fontColors = [
   { name: '남색', value: 'darkblue' },
 ]
 export default function FontSetting(props) {
-  const { id, setIsShow, pos = { x: 455, y: 180 }, type } = props
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const { id, setIsShow, pos = contextPopupPosition, type } = props
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
   const [globalFont, setGlobalFont] = useRecoilState(globalFontAtom)
@@ -69,7 +70,7 @@ export default function FontSetting(props) {
         },
       }
     })
-    setIsShow(false)
+    if (setIsShow) setIsShow(false)
     closePopup(id)
   }
 
@@ -81,7 +82,7 @@ export default function FontSetting(props) {
           <button
             className="modal-close"
             onClick={() => {
-              setIsShow(false)
+              if (setIsShow) setIsShow(false)
               closePopup(id)
             }}
           >

src/components/floor-plan/CanvasFrame.jsx

@@ -15,7 +15,7 @@ export default function CanvasFrame({ plan }) {
   const canvasRef = useRef(null)
   const { canvas } = useCanvas('canvas')
   const { handleZoomClear } = useCanvasEvent()
-  const { contextMenu, currentContextMenu, setCurrentContextMenu } = useContextMenu({
+  const { contextMenu, currentContextMenu, setCurrentContextMenu, handleClick } = useContextMenu({
     externalFn: {
       handleZoomClear,
     },
@@ -91,7 +91,7 @@ export default function CanvasFrame({ plan }) {
                   if (menu.fn) {
                     menu.fn()
                   }
-                  setCurrentContextMenu(menu)
+                  handleClick(e, menu)
                 }}
               >
                 {menu.name}
@@ -100,7 +100,6 @@ export default function CanvasFrame({ plan }) {
           </ul>
         ))}
       </QContextMenu>
-      {currentContextMenu?.component}
     </div>
   )
 }

src/components/floor-plan/FloorPlan.jsx

@@ -5,14 +5,13 @@ import { useRecoilState, useRecoilValue } from 'recoil'
 import { useAxios } from '@/hooks/useAxios'
 import { globalLocaleStore } from '@/store/localeAtom'
 import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
-import '@/styles/contents.scss'
 import CanvasMenu from '@/components/floor-plan/CanvasMenu'
 import CanvasLayout from '@/components/floor-plan/CanvasLayout'
+import '@/styles/contents.scss'
 
 export default function FloorPlan() {
   const globalLocaleState = useRecoilValue(globalLocaleStore)
   const { get } = useAxios(globalLocaleState)
-
   const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
   const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
   const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
@@ -23,7 +22,6 @@ export default function FloorPlan() {
     menuNumber,
     setMenuNumber,
   }
-
   useEffect(() => {
     console.log('FloorPlan useEffect 실행')
     fetchSettings()

src/components/floor-plan/modal/auxiliary/AuxiliaryMove.jsx

@@ -1,14 +1,20 @@
 import { useMessage } from '@/hooks/useMessage'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
+import { useRecoilValue } from 'recoil'
+import { contextPopupPositionState } from '@/store/popupAtom'
+import { usePopup } from '@/hooks/usePopup'
 
-export default function AuxiliaryMove({ setCurrentContextMenu }) {
+export default function AuxiliaryMove(props) {
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const { id, pos = contextPopupPosition } = props
   const { getMessage } = useMessage()
+  const { closePopup } = usePopup()
   return (
-    <WithDraggable isShow={true} pos={{ x: 0, y: 150 }}>
+    <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xm`}>
         <div className="modal-head">
           <h1 className="title">補助線の移動 </h1>
-          <button className="modal-close" onClick={() => setCurrentContextMenu(null)}>
+          <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
           </button>
         </div>

src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx

@@ -1,14 +1,20 @@
 import { useMessage } from '@/hooks/useMessage'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
+import { usePopup } from '@/hooks/usePopup'
+import { useRecoilValue } from 'recoil'
+import { contextPopupPositionState } from '@/store/popupAtom'
 
-export default function AuxiliarySize({ setCurrentContextMenu }) {
+export default function AuxiliarySize(props) {
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const { id, pos = contextPopupPosition } = props
   const { getMessage } = useMessage()
+  const { closePopup } = usePopup()
   return (
-    <WithDraggable isShow={true} pos={{ x: 0, y: 150 }}>
+    <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xm`}>
         <div className="modal-head">
           <h1 className="title">補助線サイズ変更 </h1>
-          <button className="modal-close" onClick={() => setCurrentContextMenu(null)}>
+          <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
           </button>
         </div>

src/components/floor-plan/modal/grid/GridCopy.jsx

@@ -1,16 +1,21 @@
 import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { useMessage } from '@/hooks/useMessage'
+import { usePopup } from '@/hooks/usePopup'
+import { useRecoilValue } from 'recoil'
+import { contextPopupPositionState } from '@/store/popupAtom'
 
 export default function GridCopy(props) {
-  const { setShowGridMoveModal, setShowGridCopyModal } = props
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const { id, pos = contextPopupPosition } = props
   const { getMessage } = useMessage()
+  const { closePopup } = usePopup()
 
   return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: 380 }}>
+    <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xm mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.grid.copy')} </h1>
-          <button className="modal-close" onClick={() => setShowGridCopyModal(false)}>
+          <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
           </button>
         </div>

src/components/floor-plan/modal/grid/GridMove.jsx

@@ -1,16 +1,21 @@
 import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { useMessage } from '@/hooks/useMessage'
+import { usePopup } from '@/hooks/usePopup'
+import { useRecoilValue } from 'recoil'
+import { contextPopupPositionState } from '@/store/popupAtom'
 
 export default function GridMove(props) {
-  const { setShowGridMoveModal, setShowGridCopyModal } = props
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const { id, pos = contextPopupPosition } = props
   const { getMessage } = useMessage()
+  const { closePopup } = usePopup()
 
   return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: 30 }}>
+    <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xm mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.grid.move')} </h1>
-          <button className="modal-close" onClick={() => setShowGridMoveModal(false)}>
+          <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
           </button>
         </div>

src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx

@@ -3,8 +3,12 @@ import WithDraggable from '@/components/common/draggable/WithDraggable'
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { useRoofAllocationSetting } from '@/hooks/roofcover/useRoofAllocationSetting'
 import { usePopup } from '@/hooks/usePopup'
+import { useRecoilValue } from 'recoil'
+import { contextPopupPositionState } from '@/store/popupAtom'
 
-export default function RoofAllocationSetting({ id, pos = { x: 50, y: 230 } }) {
+export default function RoofAllocationSetting(props) {
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const { id, pos = contextPopupPosition } = props
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
   const { handleSave, onAddRoofMaterial, onDeleteRoofMaterial, values, roofMaterials, selectedRoofMaterial, setSelectedRoofMaterial } =

src/hooks/common/useCommonUtils.js

@@ -4,11 +4,15 @@ import { wordDisplaySelector } from '@/store/settingAtom'
 import { useEvent } from '@/hooks/useEvent'
 import { checkLineOrientation, getDistance } from '@/util/canvas-util'
 import { dimensionLineSettingsState } from '@/store/commonUtilsAtom'
+import { v4 as uuidv4 } from 'uuid'
+import { usePopup } from '@/hooks/usePopup'
+import Distance from '@/components/floor-plan/modal/distance/Distance'
 
 export function useCommonUtils({ canvas, commonFunctionState, setCommonFunctionState }) {
   const wordDisplay = useRecoilValue(wordDisplaySelector)
   const { addCanvasMouseEventListener, addDocumentEventListener, initEvent } = useEvent()
   const dimensionSettings = useRecoilValue(dimensionLineSettingsState)
+  const { addPopup } = usePopup()
 
   useEffect(() => {
     initEvent()
@@ -98,7 +102,8 @@ export function useCommonUtils({ canvas, commonFunctionState, setCommonFunctionS
       const lineOptions = {
         stroke: dimensionSettings.color,
         strokeWidth: dimensionSettings.pixel,
-        selectable: false,
+        name: 'dimensionLine',
+        selectable: true,
       }
 
       // 캔버스에 클릭 이벤트 추가
@@ -273,6 +278,7 @@ export function useCommonUtils({ canvas, commonFunctionState, setCommonFunctionS
         const pointer = canvas.getPointer(options.e)
         let point
 
+        console.log(options)
         if (points.length === 0) {
           // 첫 번째 포인트는 그대로 클릭한 위치에 추가
           point = new fabric.Circle({
@@ -285,7 +291,6 @@ export function useCommonUtils({ canvas, commonFunctionState, setCommonFunctionS
         } else if (points.length === 1) {
           // 두 번째 포인트는 첫 번째 포인트를 기준으로 수평 또는 수직으로만 배치
           const p1 = points[0]
-
           point = new fabric.Circle({
             left: pointer.x - 5, // 반지름 반영
             top: pointer.y - 5, // 반지름 반영
@@ -313,9 +318,9 @@ export function useCommonUtils({ canvas, commonFunctionState, setCommonFunctionS
           canvas.add(line2)
           canvas.add(line3)
 
-          const distance1 = getDistance(p1CenterX, p1CenterY, p2CenterX, p2CenterY)
+          const distance1 = getDistance(p1CenterX, p1CenterY, p2CenterX, p2CenterY) // 대각선
-          const distance2 = getDistance(p2CenterX, p2CenterY, p3.x, p3.y)
+          const distance2 = getDistance(p2CenterX, p2CenterY, p3.x, p3.y) // 수직거리
-          const distance3 = getDistance(p3.x, p3.y, p1CenterX, p1CenterY)
+          const distance3 = getDistance(p3.x, p3.y, p1CenterX, p1CenterY) // 수평거리
 
           // 거리 텍스트가 이미 있으면 업데이트하고, 없으면 새로 생성
           distanceText = new fabric.Text(`${distance1 * 10}`, {
@@ -339,6 +344,19 @@ export function useCommonUtils({ canvas, commonFunctionState, setCommonFunctionS
 
           // 거리 계산 후, 다음 측정을 위해 초기화
           points = []
+          const id = uuidv4()
+          addPopup(
+            id,
+            1,
+            <Distance
+              id={id}
+              distance={{
+                horizon: distance3 * 10,
+                vertical: distance2 * 10,
+                diagonal: distance1 * 10,
+              }}
+            />,
+          )
         }
 
         // 캔버스 다시 그리기

src/hooks/roofcover/useRoofAllocationSetting.js

@@ -86,6 +86,12 @@ export function useRoofAllocationSetting(id) {
       swalFire({ text: '할당할 지붕이 없습니다.' })
       closePopup(id)
     }
+    // if (type === 'roofBase') {
+    //   // 지붕면 할당
+    //
+    // } else if ('roof') {
+    //   // 지붕재 변경
+    // }
   }, [])
 
   const onAddRoofMaterial = () => {

src/hooks/useContextMenu.js

@@ -1,18 +1,36 @@
-import { useRecoilValue } from 'recoil'
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
 import { currentMenuState, currentObjectState } from '@/store/canvasAtom'
 import { useEffect, useState } from 'react'
 import { MENU } from '@/common/common'
 import AuxiliaryMove from '@/components/floor-plan/modal/auxiliary/AuxiliaryMove'
 import AuxiliarySize from '@/components/floor-plan/modal/auxiliary/AuxiliarySize'
+import { usePopup } from '@/hooks/usePopup'
+import { v4 as uuidv4 } from 'uuid'
+import GridMove from '@/components/floor-plan/modal/grid/GridMove'
+import GridCopy from '@/components/floor-plan/modal/grid/GridCopy'
+import ColorPickerModal from '@/components/common/color-picker/ColorPickerModal'
+import { gridColorState } from '@/store/gridAtom'
+import { contextPopupPositionState } from '@/store/popupAtom'
+import AuxiliaryCopy from '@/components/floor-plan/modal/auxiliary/AuxiliaryCopy'
+import SizeSetting from '@/components/floor-plan/modal/object/SizeSetting'
+import RoofMaterialSetting from '@/components/floor-plan/modal/object/RoofMaterialSetting'
+import DormerOffset from '@/components/floor-plan/modal/object/DormerOffset'
+import FontSetting from '@/components/common/font/FontSetting'
+import DimensionLineSetting from '@/components/floor-plan/modal/dimensionLine/DimensionLineSetting'
+import RoofAllocationSetting from '@/components/floor-plan/modal/roofAllocation/RoofAllocationSetting'
+import LinePropertySetting from '@/components/floor-plan/modal/lineProperty/LinePropertySetting'
+import FlowDirectionSetting from '@/components/floor-plan/modal/flowDirection/FlowDirectionSetting'
 
 export function useContextMenu({ externalFn }) {
-  const currentMenu = useRecoilValue(currentMenuState)
+  const currentMenu = useRecoilValue(currentMenuState) // 현재 메뉴
-  const [contextMenu, setContextMenu] = useState([[]])
+  const setContextPopupPosition = useSetRecoilState(contextPopupPositionState) // 현재 메뉴
-  const [currentContextMenu, setCurrentContextMenu] = useState(null)
+  const [contextMenu, setContextMenu] = useState([[]]) // 메뉴.object 별 context menu
+  const [currentContextMenu, setCurrentContextMenu] = useState(null) // 선택한 contextMenu
   const currentObject = useRecoilValue(currentObjectState)
-
+  const { addPopup } = usePopup()
-  const currentMenuSetting = () => {
+  const [popupId, setPopupId] = useState(uuidv4())
-    console.log(currentMenu)
+  const [gridColor, setGridColor] = useRecoilState(gridColorState)
+  const currentMenuSetting = (position) => {
     switch (currentMenu) {
       case MENU.PLAN_DRAWING:
         setContextMenu([
@@ -20,14 +38,17 @@ export function useContextMenu({ externalFn }) {
             {
               id: 'gridMove',
               name: '그리드 이동',
+              component: <GridMove id={popupId} />,
             },
             {
               id: 'gridCopy',
               name: '그리드 복사',
+              component: <GridCopy id={popupId} />,
             },
             {
               id: 'gridColorEdit',
               name: '그리드 색 변경',
+              component: <ColorPickerModal id={popupId} color={gridColor} setColor={setGridColor} />,
             },
             {
               id: 'remove',
@@ -84,16 +105,17 @@ export function useContextMenu({ externalFn }) {
             {
               id: 'sizeEdit',
               name: '사이즈 변경',
-              component: <AuxiliarySize setCurrentContextMenu={setCurrentContextMenu} />,
+              component: <AuxiliarySize id={popupId} />,
             },
             {
               id: 'auxiliaryMove',
               name: '보조선 이동(M)',
-              component: <AuxiliaryMove setCurrentContextMenu={setCurrentContextMenu} />,
+              component: <AuxiliaryMove id={popupId} />,
             },
             {
               id: 'auxiliaryCopy',
               name: '보조선 복사(C)',
+              component: <AuxiliaryCopy id={popupId} />,
             },
             {
               id: 'auxiliaryRemove',
@@ -160,19 +182,35 @@ export function useContextMenu({ externalFn }) {
         break
     }
   }
-  useEffect(() => {
+
-    currentMenuSetting()
+  const handleClick = (e, menu) => {
-  }, [currentMenu])
+    setContextPopupPosition({
+      x: e.clientX,
+      y: e.clientY,
+    })
+    setCurrentContextMenu(menu)
+  }
 
   useEffect(() => {
+    currentMenuSetting()
+  }, [gridColor, currentMenu])
+
+  useEffect(() => {
+    if (currentContextMenu?.component) addPopup(popupId, 1, currentContextMenu?.component)
+  }, [currentContextMenu])
+
+  useEffect(() => {
+    console.log('object name', currentObject?.name)
     if (currentObject?.name) {
       switch (currentObject.name) {
         case 'triangleDormer':
+        case 'pentagonDormer':
           setContextMenu([
             [
               {
                 id: 'sizeEdit',
                 name: '사이즈 변경',
+                component: <SizeSetting id={popupId} />,
               },
               {
                 id: 'dormerRemove',
@@ -189,10 +227,12 @@ export function useContextMenu({ externalFn }) {
               {
                 id: 'roofMaterialEdit',
                 name: '지붕재 변경',
+                component: <RoofMaterialSetting id={popupId} />,
               },
               {
                 id: 'dormerOffset',
                 name: '도머 오프셋',
+                component: <DormerOffset id={popupId} />,
               },
             ],
           ])
@@ -203,6 +243,7 @@ export function useContextMenu({ externalFn }) {
               {
                 id: 'sizeEdit',
                 name: '사이즈 변경',
+                component: <SizeSetting id={popupId} />,
               },
               {
                 id: 'roofMaterialRemove',
@@ -221,14 +262,17 @@ export function useContextMenu({ externalFn }) {
               {
                 id: 'roofMaterialEdit',
                 name: '지붕재 변경',
+                component: <RoofAllocationSetting id={popupId} />,
               },
               {
                 id: 'linePropertyEdit',
                 name: '각 변 속성 변경',
+                component: <LinePropertySetting id={popupId} />,
               },
               {
                 id: 'flowDirectionEdit',
                 name: '흐름 뱡향 변경',
+                component: <FlowDirectionSetting id={popupId} />,
               },
             ],
           ])
@@ -259,6 +303,127 @@ export function useContextMenu({ externalFn }) {
             ],
           ])
           break
+        case 'lengthText':
+          setContextMenu([
+            [
+              {
+                id: 'lengthTextRemove',
+                name: '삭제',
+              },
+              {
+                id: 'lengthTextMove',
+                name: '이동',
+              },
+              {
+                id: 'lengthTextAuxiliaryLineEdit',
+                name: '치수 보조선 변경',
+              },
+              {
+                id: 'displayEdit',
+                name: '표시 변경',
+              },
+            ],
+          ])
+          break
+        case 'commonText':
+          setContextMenu([
+            [
+              {
+                id: 'commonTextRemove',
+                name: '삭제',
+              },
+              {
+                id: 'commonTextMove',
+                name: '이동',
+              },
+              {
+                id: 'commonTextCopy',
+                name: '복사',
+              },
+              {
+                id: 'commonTextFontSetting',
+                name: '폰트 설정',
+                component: <FontSetting id={popupId} type={'commonText'} />,
+              },
+              {
+                id: 'commonTextEdit',
+                name: '편집',
+              },
+            ],
+          ])
+          break
+        case 'lineGrid':
+          setContextMenu([
+            [
+              {
+                id: 'gridMove',
+                name: '그리드 이동',
+              },
+              {
+                id: 'gridCopy',
+                name: '그리드 복사',
+              },
+              {
+                id: 'gridColorEdit',
+                name: '그리드 색 변경',
+              },
+              {
+                id: 'remove',
+                name: '삭제',
+              },
+              {
+                id: 'removeAll',
+                name: '전체 삭제',
+              },
+            ],
+          ])
+          break
+        case 'dimensionLine':
+          setContextMenu([
+            [
+              {
+                id: 'dimensionLineRemove',
+                name: '삭제',
+              },
+              {
+                id: 'dimensionLineMove',
+                name: '이동',
+              },
+              {
+                id: 'dimensionAuxiliaryLineEdit',
+                name: '치수 보조선 변경',
+              },
+              {
+                id: 'dimensionLineDisplayEdit',
+                name: '표시 변경',
+                component: <DimensionLineSetting id={popupId} />,
+              },
+            ],
+          ])
+          break
+        case 'shadow':
+          setContextMenu([
+            [
+              {
+                id: 'sizeEdit',
+                name: '사이즈 변경',
+                component: <SizeSetting id={popupId} />,
+              },
+              {
+                id: 'remove',
+                name: '삭제(D)',
+              },
+              {
+                id: 'move',
+                name: '이동(M)',
+              },
+              {
+                id: 'copy',
+                name: '복사(C)',
+              },
+            ],
+          ])
+          break
         default:
           currentMenuSetting()
       }
@@ -267,13 +432,10 @@ export function useContextMenu({ externalFn }) {
     }
   }, [currentObject])
 
-  useEffect(() => {
-    console.log(currentContextMenu)
-  }, [currentContextMenu])
-
   return {
     contextMenu,
     currentContextMenu,
     setCurrentContextMenu,
+    handleClick,
   }
 }

src/hooks/usePopup.js

@@ -1,20 +1,14 @@
 import { useRecoilState } from 'recoil'
 import { popupState } from '@/store/popupAtom'
-import { useEffect } from 'react'
 
 export function usePopup() {
   const [popup, setPopup] = useRecoilState(popupState)
 
-  useEffect(() => {
-    console.log(popup)
-  }, [popup])
-
   const addPopup = (id, depth, component) => {
     setPopup({ children: [...filterDepth(depth), { id: id, depth: depth, component: component }] })
   }
 
   const closePopup = (id) => {
-    console.log(id)
     setPopup({ children: [...filterChildrenPopup(id).filter((child) => child.id !== id)] })
   }
 

src/store/popupAtom.js

@@ -11,3 +11,12 @@ export const popupState = atom({
   },
   dangerouslyAllowMutability: true,
 })
+
+export const contextPopupPositionState = atom({
+  key: 'contextPopupPositionState',
+  default: {
+    x: 50,
+    y: 180,
+  },
+  dangerouslyAllowMutability: true,
+})