Merge branch 'dev' into dev-yj

src/components/Roof2.jsx

@@ -29,6 +29,7 @@ import { modalContent, modalState } from '@/store/modalAtom'
 import { useAxios } from '@/hooks/useAxios'
 import QPolygonContextMenu from '@/components/common/context-menu/QPolygonContextMenu'
 import QLineContextMenu from '@/components/common/context-menu/QLineContextMenu'
+import QEmptyContextMenu from '@/components/common/context-menu/QEmptyContextMenu'
 
 import InitSettingsModal from './InitSettingsModal'
 import GridSettingsModal from './GridSettingsModal'
@@ -599,7 +600,7 @@ export default function Roof2(props) {
               모드 DEFAULT
             </Button>
             <Button className="m-1 p-2" color={`${mode === Mode.DRAW_LINE ? 'primary' : 'default'}`} onClick={() => setMode(Mode.DRAW_LINE)}>
-              기준선 긋기 모드
+              임의 그리드 모드
             </Button>
             <Button className="m-1 p-2" color={`${mode === Mode.EDIT ? 'primary' : 'default'}`} onClick={() => setMode(Mode.EDIT)}>
               에디팅모드
@@ -767,7 +768,9 @@ export default function Roof2(props) {
       <ThumbnailList {...thumbnailProps} />
       <div className="flex justify-start my-8 mx-2 w-full">
         <canvas ref={canvasRef} id="canvas" style={{ border: '1px solid black' }} />
-        {!canvas ? null : currentObject?.type === 'QPolygon' ? (
+        {!canvas ? null : mode === Mode.DRAW_LINE ? (
+          <QEmptyContextMenu contextRef={canvasRef} canvasProps={canvas} />
+        ) : currentObject?.type === 'QPolygon' ? (
           <QPolygonContextMenu contextRef={canvasRef} canvasProps={canvas} />
         ) : currentObject?.type === 'QLine' ? (
           <QLineContextMenu contextRef={canvasRef} canvasProps={canvas} />

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

@@ -0,0 +1,50 @@
+'use client'
+import { useEffect, useState } from 'react'
+import { useRecoilState, useRecoilValue } from 'recoil'
+
+export default function QEmptyContextMenu(props) {
+  const { contextRef, canvasProps } = props
+
+  //   const children = useRecoilValue(modalContent)
+  const [contextMenu, setContextMenu] = useState({ visible: false, x: 0, y: 0 })
+
+  useEffect(() => {
+    if (!contextRef.current) return
+
+    const handleContextMenu = (e) => {
+      e.preventDefault() //기존 contextmenu 막고
+      setContextMenu({ visible: true, x: e.pageX, y: e.pageY })
+      canvasProps.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu) //한번 노출 후 이벤트 삭제
+    }
+
+    const handleClick = (e) => {
+      e.preventDefault()
+      setContextMenu({ ...contextMenu, visible: false })
+    }
+
+    const handleOutsideClick = (e) => {
+      e.preventDefault()
+      if (contextMenu.visible && !ref.current.contains(e.target)) {
+        setContextMenu({ ...contextMenu, visible: false })
+      }
+    }
+
+    // Prevent the default context menu from appearing on the canvas
+    canvasProps.upperCanvasEl.addEventListener('contextmenu', handleContextMenu)
+    document.addEventListener('click', handleClick)
+    document.addEventListener('click', handleOutsideClick)
+
+    return () => {
+      // canvasProps.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu)
+      document.removeEventListener('click', handleClick)
+      document.removeEventListener('click', handleOutsideClick)
+    }
+  }, [contextRef, contextMenu])
+
+  const handleMenuClick = (option) => {
+    alert(`option ${option} clicked`)
+    setContextMenu({ ...contextMenu, visible: false })
+  }
+
+  return <></>
+}

src/hooks/useMode.js

@@ -365,10 +365,13 @@ export function useMode() {
     canvas?.off('mouse:down')
     switch (mode) {
       case 'drawLine':
-        canvas?.on('mouse:down', mouseEvent.drawLineMode)
+        canvas?.on('mouse:down', mouseEvent.drawLineModeLeftClick)
+        window.document.removeEventListener('contextmenu', mouseEvent.drawLineModeRightClick)
+        window.document.addEventListener('contextmenu', mouseEvent.drawLineModeRightClick)
         break
       case 'edit':
         canvas?.on('mouse:down', mouseEvent.editMode)
+
         break
       case 'textbox':
         canvas?.on('mouse:down', mouseEvent.textboxMode)
@@ -655,7 +658,7 @@ export function useMode() {
   }
 
   const mouseEvent = {
-    drawLineMode: (options) => {
+    drawLineModeLeftClick: (options) => {
       const pointer = canvas?.getPointer(options.e)
 
       const line = new QLine(
@@ -672,6 +675,21 @@ export function useMode() {
       canvas?.add(line)
       canvas?.renderAll()
     },
+    drawLineModeRightClick: (options) => {
+      const line = new fabric.Line(
+        [0, options.offsetY, canvas.width, options.offsetY], // y축에 1자 선을 그립니다.
+        {
+          stroke: 'black',
+          strokeWidth: 2,
+          viewLengthText: true,
+          selectable: false,
+          fontSize: fontSize,
+        },
+      )
+
+      canvas?.add(line)
+      canvas?.renderAll()
+    },
     editMode: (options) => {
       let pointer = canvas?.getPointer(options.e)