Merge branch 'qcast-pub' into dev

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

@@ -1,15 +1,13 @@
 'use client'
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 import '@/styles/contents.scss'
+import { useRecoilState } from 'recoil'
+import { contextMenuState } from '@/store/contextMenu'
 
 export default function QContextMenu(props) {
-  const { contextRef, canvasProps } = props
+  const { contextRef, canvasProps, handleKeyup } = props
-
+  const [contextMenu, setContextMenu] = useRecoilState(contextMenuState)
-  //   const children = useRecoilValue(modalContent)
-  const [contextMenu, setContextMenu] = useState({ visible: false, x: 0, y: 0 })
-
   const activeObject = canvasProps?.getActiveObject() //액티브된 객체를 가져옴
-
   let contextType = ''
 
   if (activeObject) {
@@ -27,7 +25,7 @@ export default function QContextMenu(props) {
     const handleContextMenu = (e) => {
       // e.preventDefault() //기존 contextmenu 막고
       setContextMenu({ visible: true, x: e.pageX, y: e.pageY })
-      // console.log(111, canvasProps)
+      document.addEventListener('keyup', (e) => handleKeyup(e))
       canvasProps?.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu) //한번 노출 후 이벤트 삭제
     }
 

src/components/floor-plan/CanvasFrame.jsx

@@ -23,7 +23,7 @@ export default function CanvasFrame({ plan }) {
   const { canvasLoadInit, gridInit } = useCanvasConfigInitialize()
   const currentObject = useRecoilValue(currentObjectState)
   const currentMenu = useRecoilValue(currentMenuState)
-  const { contextMenu, handleClick } = useContextMenu()
+  const { contextMenu, handleClick, handleKeyup } = useContextMenu()
   const { checkCanvasObjectEvent, checkUnsavedCanvasPlan, resetModifiedPlans } = usePlan()
   useEvent()
 
@@ -55,19 +55,11 @@ export default function CanvasFrame({ plan }) {
     <div className="canvas-frame">
       <canvas ref={canvasRef} id="canvas" style={{ position: 'relative' }}></canvas>
 
-      <QContextMenu contextRef={canvasRef} canvasProps={canvas}>
+      <QContextMenu contextRef={canvasRef} canvasProps={canvas} handleKeyup={handleKeyup}>
         {contextMenu.map((menus, index) => (
           <ul key={index}>
             {menus.map((menu) => (
-              <li
+              <li key={menu.id} onClick={(e) => handleClick(e, menu)}>
-                key={menu.id}
-                onClick={(e) => {
-                  if (menu.fn) {
-                    menu.fn()
-                  }
-                  handleClick(e, menu)
-                }}
-              >
                 {menu.name}
               </li>
             ))}

src/hooks/useContextMenu.js

@@ -22,6 +22,7 @@ import LinePropertySetting from '@/components/floor-plan/modal/lineProperty/Line
 import FlowDirectionSetting from '@/components/floor-plan/modal/flowDirection/FlowDirectionSetting'
 import { useMessage } from '@/hooks/useMessage'
 import { useCanvasEvent } from '@/hooks/useCanvasEvent'
+import { contextMenuState } from '@/store/contextMenu'
 
 export function useContextMenu() {
   const currentMenu = useRecoilValue(currentMenuState) // 현재 메뉴
@@ -33,6 +34,7 @@ export function useContextMenu() {
   const { addPopup } = usePopup()
   const [popupId, setPopupId] = useState(uuidv4())
   const [gridColor, setGridColor] = useRecoilState(gridColorState)
+  const [qContextMenu, setQContextMenu] = useRecoilState(contextMenuState)
   const { handleZoomClear } = useCanvasEvent()
   const currentMenuSetting = (position) => {
     switch (currentMenu) {
@@ -112,15 +114,18 @@ export function useContextMenu() {
             {
               id: 'auxiliaryMove',
               name: `${getMessage('contextmenu.auxiliary.move')}(M)`,
+              shortcut: ['m', 'M'],
               component: <AuxiliaryMove id={popupId} />,
             },
             {
               id: 'auxiliaryCopy',
               name: `${getMessage('contextmenu.auxiliary.copy')}(C)`,
+              shortcut: ['c', 'C'],
               component: <AuxiliaryCopy id={popupId} />,
             },
             {
               id: 'auxiliaryRemove',
+              shortcut: ['d', 'D'],
               name: `${getMessage('contextmenu.auxiliary.remove')}(D)`,
             },
             {
@@ -152,14 +157,17 @@ export function useContextMenu() {
             },
             {
               id: 'remove',
+              shortcut: ['d', 'D'],
               name: `${getMessage('contextmenu.remove')}(D)`,
             },
             {
               id: 'move',
+              shortcut: ['m', 'M'],
               name: `${getMessage('contextmenu.move')}(M)`,
             },
             {
               id: 'copy',
+              shortcut: ['c', 'C'],
               name: `${getMessage('contextmenu.copy')}(C)`,
             },
           ],
@@ -187,11 +195,29 @@ export function useContextMenu() {
   }
 
   const handleClick = (e, menu) => {
+    if (menu?.fn) {
+      menu.fn()
+    }
     setContextPopupPosition({
-      x: e.clientX,
+      x: e?.clientX,
-      y: e.clientY,
+      y: e?.clientY,
     })
     setCurrentContextMenu(menu)
+    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)
+      })
+
+      if (temp.length > 0) menu = temp
+    }
+
+    handleClick(null, menu)
   }
 
   useEffect(() => {
@@ -216,14 +242,17 @@ export function useContextMenu() {
               },
               {
                 id: 'dormerRemove',
+                shortcut: ['d', 'D'],
                 name: `${getMessage('contextmenu.remove')}(D)`,
               },
               {
                 id: 'dormerMove',
+                shortcut: ['m', 'M'],
                 name: `${getMessage('contextmenu.move')}(M)`,
               },
               {
                 id: 'dormerCopy',
+                shortcut: ['c', 'C'],
                 name: `${getMessage('contextmenu.copy')}(C)`,
               },
               {
@@ -249,14 +278,17 @@ export function useContextMenu() {
               },
               {
                 id: 'roofMaterialRemove',
+                shortcut: ['d', 'D'],
                 name: `${getMessage('contextmenu.remove')}(D)`,
               },
               {
                 id: 'roofMaterialMove',
+                shortcut: ['m', 'M'],
                 name: `${getMessage('contextmenu.move')}(M)`,
               },
               {
                 id: 'roofMaterialCopy',
+                shortcut: ['c', 'C'],
                 name: `${getMessage('contextmenu.copy')}(C)`,
               },
             ],
@@ -288,14 +320,17 @@ export function useContextMenu() {
               },
               {
                 id: 'openingRemove',
+                shortcut: ['d', 'D'],
                 name: `${getMessage('contextmenu.remove')}(D)`,
               },
               {
                 id: 'openingMove',
+                shortcut: ['m', 'M'],
                 name: `${getMessage('contextmenu.move')}(M)`,
               },
               {
                 id: 'openingCopy',
+                shortcut: ['c', 'C'],
                 name: `${getMessage('contextmenu.copy')}(C)`,
               },
               {
@@ -413,14 +448,17 @@ export function useContextMenu() {
               },
               {
                 id: 'remove',
+                shortcut: ['d', 'D'],
                 name: `${getMessage('contextmenu.remove')}(D)`,
               },
               {
                 id: 'move',
+                shortcut: ['m', 'M'],
                 name: `${getMessage('contextmenu.move')}(M)`,
               },
               {
                 id: 'copy',
+                shortcut: ['c', 'C'],
                 name: `${getMessage('contextmenu.copy')}(C)`,
               },
             ],
@@ -439,5 +477,6 @@ export function useContextMenu() {
     currentContextMenu,
     setCurrentContextMenu,
     handleClick,
+    handleKeyup,
   }
 }

src/store/contextMenu.js

@@ -0,0 +1,11 @@
+import { atom } from 'recoil'
+
+export const contextMenuState = atom({
+  key: 'contextMenuState',
+  default: {
+    visible: false,
+    x: 0,
+    y: 0,
+  },
+  dangerouslyAllowMutability: true,
+})