Merge branch 'dev' of https://git.jetbrains.space/nalpari/q-cast-iii/qcast-front into dev

2024-10-28 10:33:07 +09:00 · 2024-10-28 10:33:07 +09:00 · c6fe1f22b2
commit c6fe1f22b2
parent 31a89aab4d c70f39ec45
9 changed files with 88 additions and 48 deletions
--- a/src/components/common/context-menu/QContextMenu.jsx
+++ b/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 children = useRecoilValue(modalContent)
-  const [contextMenu, setContextMenu] = useState({ visible: false, x: 0, y: 0 })
-
+  const { contextRef, canvasProps, handleKeyup } = props
+  const [contextMenu, setContextMenu] = useRecoilState(contextMenuState)
  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) //한번 노출 후 이벤트 삭제
    }

--- a/src/components/floor-plan/CanvasFrame.jsx
+++ b/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
-                key={menu.id}
-                onClick={(e) => {
-                  if (menu.fn) {
-                    menu.fn()
-                  }
-                  handleClick(e, menu)
-                }}
-              >
+              <li key={menu.id} onClick={(e) => handleClick(e, menu)}>
                {menu.name}
              </li>
            ))}
--- a/src/components/management/Stuff.jsx
+++ b/src/components/management/Stuff.jsx
@ -33,8 +33,8 @@ export default function Stuff() {
  const { get } = useAxios(globalLocaleState)
  const gridRef = useRef()

-  const [selectedRowData, setSelectedRowData] = useState([])
-  const [selectedRowDataCount, setSelectedRowDataCount] = useState(0)
+  // const [selectedRowData, setSelectedRowData] = useState([])
+  // const [selectedRowDataCount, setSelectedRowDataCount] = useState(0)

  const router = useRouter()
  const pathname = usePathname()
@ -165,11 +165,11 @@ export default function Stuff() {
    }
  }

-  //그리드 체크박스 선택시
-  const getSelectedRowdata = (data) => {
-    setSelectedRowData(data)
-    setSelectedRowDataCount(data.length)
-  }
+  //그리드 체크박스 선택시 미사용
+  // const getSelectedRowdata = (data) => {
+  //   setSelectedRowData(data)
+  //   setSelectedRowDataCount(data.length)
+  // }

  //물건삭제
  // const fnDeleteRowData = (data) => {
@ -405,8 +405,8 @@ export default function Stuff() {
                <span>{convertNumberToPriceDecimal(totalCount)}</span>
              </li>
              <li>
-                {getMessage('stuff.search.grid.selected')}
-                <span className="red">{convertNumberToPriceDecimal(selectedRowDataCount)}</span>
+                {/* {getMessage('stuff.search.grid.selected')} */}
+                {/* <span className="red">{convertNumberToPriceDecimal(selectedRowDataCount)}</span> */}
              </li>
            </ul>
          </div>
@ -428,7 +428,7 @@ export default function Stuff() {
        </div>
        <div className="grid-table-wrap">
          <div className="q-grid">
-            <StuffQGrid {...gridProps} getSelectedRowdata={getSelectedRowdata} getCellDoubleClicked={getCellDoubleClicked} gridRef={gridRef} />
+            <StuffQGrid {...gridProps} getCellDoubleClicked={getCellDoubleClicked} gridRef={gridRef} />
            <div className="pagination-wrap">
              <QPagination pageNo={pageNo} pageSize={pageSize} pagePerBlock={10} totalCount={totalCount} handleChangePage={handleChangePage} />
            </div>
--- a/src/components/management/StuffPlanQGrid.jsx
+++ b/src/components/management/StuffPlanQGrid.jsx
@ -6,7 +6,7 @@ export default function StuffPlanQGrid(props) {
  const { planGridData, planGridColumns, isPageable = true } = props

  const [rowData, setRowData] = useState(null)
-  const [gridApi, setGridApi] = useState(null)
+  // const [gridApi, setGridApi] = useState(null)
  const [colDefs, setColDefs] = useState(planGridColumns)

  const defaultColDef = useMemo(() => {
@ -20,24 +20,24 @@ export default function StuffPlanQGrid(props) {
    }
  }, [])

-  const rowBuffer = 100
+  const rowBuffer = 10

  useEffect(() => {
    planGridData ? setRowData(planGridData) : ''
  }, [planGridData])

-  const onGridReady = useCallback(
-    (params) => {
-      setGridApi(params.api)
-      planGridData ? setRowData(planGridData) : ''
-    },
-    [planGridData],
-  )
+  // const onGridReady = useCallback(
+  //   (params) => {
+  //     setGridApi(params.api)
+  //     planGridData ? setRowData(planGridData) : ''
+  //   },
+  //   [planGridData],
+  // )

  return (
    <div className="ag-theme-quartz" style={{ height: '100%' }}>
      <AgGridReact
-        onGridReady={onGridReady}
+        // onGridReady={onGridReady}
        rowBuffer={rowBuffer}
        rowData={rowData}
        columnDefs={colDefs}
--- a/src/components/management/StuffQGrid.jsx
+++ b/src/components/management/StuffQGrid.jsx
@ -62,10 +62,10 @@ export default function StuffQGrid(props) {
    [count],
  )

-  // 체크박스 체크시
-  const onSelectionChanged = useCallback((event) => {
-    props.getSelectedRowdata(event.api.getSelectedRows())
-  }, [])
+  // 체크박스 체크시 체크박스 미사용
+  // const onSelectionChanged = useCallback((event) => {
+  //   props.getSelectedRowdata(event.api.getSelectedRows())
+  // }, [])

  //더블클릭
  const onCellDoubleClicked = useCallback((event) => {
@ -95,7 +95,7 @@ export default function StuffQGrid(props) {
        isRowSelectable={isRowSelectable}
        rowSelection={'multiple'}
        suppressRowClickSelection={true}
-        onSelectionChanged={onSelectionChanged}
+        // onSelectionChanged={onSelectionChanged}
        onCellDoubleClicked={onCellDoubleClicked}
        pagination={isPageable}
        overlayNoRowsTemplate={`<span className="ag-overlay-loading-center">${getMessage('stuff.grid.noData')}</span>`}
--- a/src/components/management/popup/FindAddressPopQGrid.jsx
+++ b/src/components/management/popup/FindAddressPopQGrid.jsx
@ -28,7 +28,7 @@ export default function FindAddressPopGrid(props) {
    }
  }, [])

-  const rowBuffer = 100
+  const rowBuffer = 10

  useEffect(() => {
    gridData ? setRowData(gridData) : ''
--- a/src/components/management/popup/PlanRequestPopQGrid.jsx
+++ b/src/components/management/popup/PlanRequestPopQGrid.jsx
@ -28,7 +28,7 @@ export default function PlanRequestPopQGrid(props) {
    }
  }, [])

-  const rowBuffer = 100
+  const rowBuffer = 20

  useEffect(() => {
    gridData ? setRowData(gridData) : ''
--- a/src/hooks/useContextMenu.js
+++ b/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,
-      y: e.clientY,
+      x: e?.clientX,
+      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,
  }
 }
--- a/src/store/contextMenu.js
+++ b/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,
+})