From bc77a9725e3b3919918e7d4e9daa69a4d7e282f5 Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Tue, 27 Aug 2024 15:42:46 +0900
Subject: [PATCH] =?UTF-8?q?=EC=9E=84=EC=9D=98=20=EA=B7=B8=EB=A6=AC?=
 =?UTF-8?q?=EB=93=9C=20=EB=AA=A8=EB=93=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Roof2.jsx                      |  7 ++-
 .../common/context-menu/QEmptyContextMenu.jsx | 50 +++++++++++++++++++
 src/hooks/useMode.js                          | 22 +++++++-
 3 files changed, 75 insertions(+), 4 deletions(-)
 create mode 100644 src/components/common/context-menu/QEmptyContextMenu.jsx

diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx
index 217d0521..ed2e837f 100644
--- a/src/components/Roof2.jsx
+++ b/src/components/Roof2.jsx
@@ -30,6 +30,7 @@ import SettingsModal from './SettingsModal'
 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'
 
 export default function Roof2(props) {
   const { name, userId, email, isLoggedIn } = props
@@ -588,7 +589,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)}>
               에디팅모드
@@ -756,7 +757,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} />
diff --git a/src/components/common/context-menu/QEmptyContextMenu.jsx b/src/components/common/context-menu/QEmptyContextMenu.jsx
new file mode 100644
index 00000000..c4734fc4
--- /dev/null
+++ b/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 <></>
+}
diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js
index f5fe698e..ae970461 100644
--- a/src/hooks/useMode.js
+++ b/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)