보조선 이동, 사이즈 변경 모달 추가

src/components/floor-plan/CanvasFrame.jsx

@@ -1,19 +1,23 @@
 'use client'
 
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef } from 'react'
 
 import { useCanvas } from '@/hooks/useCanvas'
 import { useEvent } from '@/hooks/useEvent'
 import QContextMenu from '@/components/common/context-menu/QContextMenu'
+import { useContextMenu } from '@/hooks/useContextMenu'
 import { useRecoilValue } from 'recoil'
-import { currentMenuState } from '@/store/canvasAtom'
+import { currentObjectState } from '@/store/canvasAtom'
-import { MENU } from '@/common/common'
 
 export default function CanvasFrame({ plan }) {
   const canvasRef = useRef(null)
   const { canvas } = useCanvas('canvas')
-  const currentMenu = useRecoilValue(currentMenuState)
+  const { contextMenu, currentContextMenu, setCurrentContextMenu } = useContextMenu()
-  const [contextMenu, setContextMenu] = useState([[]])
+  const currentObject = useRecoilValue(currentObjectState)
+
+  useEffect(() => {
+    console.log(currentObject)
+  }, [currentObject])
   useEvent()
 
   const loadCanvas = () => {
@@ -31,129 +35,7 @@ export default function CanvasFrame({ plan }) {
     loadCanvas()
   }, [plan, canvas])
 
-  useEffect(() => {
+  const onClickContextMenu = (index) => {}
-    switch (currentMenu) {
-      case MENU.PLAN_DRAWING:
-        setContextMenu([
-          [
-            {
-              name: '그리드 이동',
-            },
-            {
-              name: '그리드 복사',
-            },
-            {
-              name: '그리드 색 변경',
-            },
-            {
-              name: '삭제',
-            },
-            {
-              name: '전체 삭제',
-            },
-          ],
-        ])
-        break
-      case MENU.ROOF_COVERING.EXTERIOR_WALL_LINE:
-      case MENU.ROOF_COVERING.ROOF_SHAPE_SETTINGS:
-      case MENU.ROOF_COVERING.ROOF_SHAPE_PASSIVITY_SETTINGS:
-      case MENU.ROOF_COVERING.ROOF_SHAPE_EDITING:
-      case MENU.ROOF_COVERING.HELP_LINE_DRAWING:
-      case MENU.ROOF_COVERING.EAVES_KERAVA_EDIT:
-      case MENU.ROOF_COVERING.MOVEMENT_SHAPE_UPDOWN:
-      case MENU.ROOF_COVERING.OUTLINE_EDIT_OFFSET:
-      case MENU.ROOF_COVERING.ROOF_SHAPE_ALLOC:
-      case MENU.ROOF_COVERING.DEFAULT:
-        console.log('지붕덮개')
-        setContextMenu([
-          [
-            {
-              name: '지붕재 배치',
-            },
-            {
-              name: '지붕재 삭제',
-            },
-            {
-              name: '지붕재 전체 삭제',
-            },
-            {
-              name: '선택・이동',
-            },
-            {
-              name: '외벽선 삭제',
-            },
-          ],
-          [
-            {
-              name: '사이즈 변경',
-            },
-            {
-              name: '보조선 이동(M)',
-            },
-            {
-              name: '보조선 복사(C)',
-            },
-            {
-              name: '보조선 삭제(D)',
-            },
-            {
-              name: '보조선 수직이등분선',
-            },
-            {
-              name: '보조선 절삭',
-            },
-            {
-              name: '보조선 전체 삭제',
-            },
-          ],
-        ])
-        break
-      case MENU.BATCH_CANVAS.SLOPE_SETTING:
-      case MENU.BATCH_CANVAS.BATCH_DRAWING:
-      case MENU.BATCH_CANVAS.SURFACE_SHAPE_BATCH:
-      case MENU.BATCH_CANVAS.OBJECT_BATCH:
-      case MENU.BATCH_CANVAS.ALL_REMOVE:
-      case MENU.BATCH_CANVAS.DEFAULT:
-        console.log('배치면')
-        setContextMenu([
-          [
-            {
-              name: '사이즈 변경',
-            },
-            {
-              name: '삭제(D)',
-            },
-            {
-              name: '이동(M)',
-            },
-            {
-              name: '복사(C)',
-            },
-          ],
-          [
-            {
-              name: '지붕재 변경',
-            },
-            {
-              name: '각 변 속성 변경',
-            },
-            {
-              name: '흐름 방향 변경',
-            },
-          ],
-        ])
-        break
-      default:
-        console.log('default')
-        setContextMenu([])
-        break
-    }
-  }, [currentMenu])
-
-  useEffect(() => {
-    console.log('currentMenu', currentMenu)
-    console.log('contextMenu', contextMenu)
-  }, [contextMenu])
 
   return (
     <div className="canvas-frame flex justify-center">
@@ -162,11 +44,12 @@ export default function CanvasFrame({ plan }) {
         {contextMenu.map((menus, index) => (
           <ul key={index}>
             {menus.map((menu) => (
-              <li>{menu.name}</li>
+              <li onClick={(e) => setCurrentContextMenu(menu)}>{menu.name}</li>
             ))}
           </ul>
         ))}
       </QContextMenu>
+      {currentContextMenu?.component}
     </div>
   )
 }

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

@@ -1,14 +1,16 @@
 import { useMessage } from '@/hooks/useMessage'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
 
-export default function AuxiliaryMove({ setShowAuxiliaryModal }) {
+export default function AuxiliaryMove({ setCurrentContextMenu }) {
   const { getMessage } = useMessage()
   return (
-    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+    <WithDraggable isShow={true} pos={{ x: 0, y: 150 }}>
       <div className={`modal-pop-wrap xm`}>
         <div className="modal-head">
           <h1 className="title">補助線の移動 </h1>
-          <button className="modal-close">닫기</button>
+          <button className="modal-close" onClick={() => setCurrentContextMenu(null)}>
+            닫기
+          </button>
         </div>
         <div className="modal-body">
           <div className="grid-option-tit">移動する方向を入力してください</div>

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

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