contextmenu modal 추가

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

@@ -3,12 +3,14 @@ import { useEffect } from 'react'
 import '@/styles/contents.scss'
 import { useRecoilState } from 'recoil'
 import { contextMenuListState, contextMenuState } from '@/store/contextMenu'
+import { useTempGrid } from '@/hooks/useTempGrid'
 
 export default function QContextMenu(props) {
   const { contextRef, canvasProps, handleKeyup } = props
   const [contextMenu, setContextMenu] = useRecoilState(contextMenuState)
   const [contextMenuList, setContextMenuList] = useRecoilState(contextMenuListState)
   const activeObject = canvasProps?.getActiveObject() //액티브된 객체를 가져옴
+  const { tempGridMode, setTempGridMode } = useTempGrid()
 
   let contextType = ''
 
@@ -32,6 +34,7 @@ export default function QContextMenu(props) {
 
     const handleContextMenu = (e) => {
       // e.preventDefault() //기존 contextmenu 막고
+      if (tempGridMode) return
       const position = {
         x: window.innerWidth / 2 < e.pageX ? e.pageX - 240 : e.pageX,
         y: window.innerHeight / 2 < e.pageY ? getYPosition(e) : e.pageY,

src/hooks/useContextMenu.js

@@ -43,12 +43,11 @@ export function useContextMenu() {
   const { addPopup } = usePopup()
   const [popupId, setPopupId] = useState(uuidv4())
   const [gridColor, setGridColor] = useRecoilState(gridColorState)
-  const { deleteObject, moveObject, copyObject, editText, changeDimensionExtendLine } = useCommonUtils()
+  const { deleteObject, moveObject, copyObject, editText, changeDimensionExtendLine, deleteOuterLineObject } = useCommonUtils()
   const [qContextMenu, setQContextMenu] = useRecoilState(contextMenuState)
   const [cell, setCell] = useState(null)
   const [column, setColumn] = useState(null)
   const { handleZoomClear } = useCanvasEvent()
-
   const currentMenuSetting = () => {
     switch (currentMenu) {
       case MENU.PLAN_DRAWING:
@@ -172,6 +171,7 @@ export function useContextMenu() {
             {
               id: 'sizeEdit',
               name: getMessage('contextmenu.size.edit'),
+              component: <SizeSetting id={popupId} target={currentObject} />,
             },
             {
               id: 'remove',
@@ -207,6 +207,7 @@ export function useContextMenu() {
             {
               id: 'flowDirectionEdit',
               name: getMessage('contextmenu.flow.direction.edit'),
+              component: <FlowDirectionSetting id={popupId} />,
             },
           ],
         ])
@@ -241,7 +242,7 @@ export function useContextMenu() {
       if (temp.length > 0) menu = temp
     }
 
-    handleClick(null, menu)
+    if (menu) handleClick(null, menu)
   }
 
   useEffect(() => {
@@ -342,6 +343,7 @@ export function useContextMenu() {
               {
                 id: 'sizeEdit',
                 name: getMessage('contextmenu.size.edit'),
+                component: <SizeSetting id={popupId} target={currentObject} />,
               },
               {
                 id: 'openingRemove',
@@ -419,19 +421,23 @@ export function useContextMenu() {
           ])
           break
         case 'lineGrid':
+        case 'tempGrid':
           setContextMenu([
             [
               {
                 id: 'gridMove',
                 name: getMessage('modal.grid.move'),
+                component: <GridMove id={popupId} />,
               },
               {
                 id: 'gridCopy',
                 name: getMessage('modal.grid.copy'),
+                component: <GridCopy id={popupId} />,
               },
               {
                 id: 'gridColorEdit',
                 name: getMessage('contextmenu.grid.color.edit'),
+                component: <ColorPickerModal id={popupId} color={gridColor} setColor={setGridColor} />,
               },
               {
                 id: 'remove',
@@ -561,7 +567,6 @@ export function useContextMenu() {
           ])
           break
         case 'module':
-        case 'dimensionLineText':
           setContextMenu([
             [
               {