From f5d1783972af02f29dc98647fc4f204e7bafa95a Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Tue, 27 Aug 2024 14:02:06 +0900
Subject: [PATCH 1/3] =?UTF-8?q?=EA=B7=B8=EB=A6=AC=EB=93=9C=20=EC=B4=88?=
 =?UTF-8?q?=EA=B8=B0=ED=99=94=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Roof2.jsx | 35 ++++++++++++++++++++++++++---------
 1 file changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx
index 217d0521..6c8c4155 100644
--- a/src/components/Roof2.jsx
+++ b/src/components/Roof2.jsx
@@ -13,6 +13,7 @@ import {
   compassState,
   currentObjectState,
   fontSizeState,
+  guideLineState,
   roofMaterialState,
   roofState,
   sortedPolygonArray,
@@ -30,6 +31,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 { isObjectNotEmpty } from '@/util/common-utils'
 
 export default function Roof2(props) {
   const { name, userId, email, isLoggedIn } = props
@@ -72,6 +74,8 @@ export default function Roof2(props) {
   const [scale, setScale] = useState(1)
   const currentObject = useRecoilValue(currentObjectState)
 
+  const [guideLine, setGuideLine] = useRecoilState(guideLineState)
+
   //canvas 썸네일
   const [thumbnails, setThumbnails] = useState([])
   const thumbnailProps = {
@@ -575,15 +579,28 @@ export default function Roof2(props) {
       {canvas && (
         <>
           <div className=" my-8 w-full text:pretty">
-            <Button
-              className="m-1 p-2"
-              onClick={() => {
-                setContent(<SettingsModal canvasProps={canvas} />)
-                setOpen(true)
-              }}
-            >
-              그리드 설정
-            </Button>
+            {!isObjectNotEmpty(guideLine) ? (
+              <Button
+                className="m-1 p-2"
+                onClick={() => {
+                  setContent(<SettingsModal canvasProps={canvas} />)
+                  setOpen(true)
+                }}
+              >
+                그리드 설정
+              </Button>
+            ) : (
+              <Button
+                className="m-1 p-2"
+                onClick={() => {
+                  const guideLines = canvas?._objects.filter((obj) => obj.name === 'guideLine' || obj.name === 'guideDot')
+                  guideLines?.forEach((item) => canvas?.remove(item))
+                  setGuideLine({})
+                }}
+              >
+                그리드 초기화
+              </Button>
+            )}
             <Button className="m-1 p-2" color={`${mode === Mode.DEFAULT ? 'primary' : 'default'}`} onClick={() => setMode(Mode.DEFAULT)}>
               모드 DEFAULT
             </Button>

From 771cd32dfeba8a02e6fe7144be76b2d240c900c5 Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Tue, 27 Aug 2024 15:00:28 +0900
Subject: [PATCH 2/3] =?UTF-8?q?=EC=9B=90=EB=B3=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Roof2.jsx | 35 +++++++++--------------------------
 1 file changed, 9 insertions(+), 26 deletions(-)

diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx
index 6c8c4155..217d0521 100644
--- a/src/components/Roof2.jsx
+++ b/src/components/Roof2.jsx
@@ -13,7 +13,6 @@ import {
   compassState,
   currentObjectState,
   fontSizeState,
-  guideLineState,
   roofMaterialState,
   roofState,
   sortedPolygonArray,
@@ -31,7 +30,6 @@ 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 { isObjectNotEmpty } from '@/util/common-utils'
 
 export default function Roof2(props) {
   const { name, userId, email, isLoggedIn } = props
@@ -74,8 +72,6 @@ export default function Roof2(props) {
   const [scale, setScale] = useState(1)
   const currentObject = useRecoilValue(currentObjectState)
 
-  const [guideLine, setGuideLine] = useRecoilState(guideLineState)
-
   //canvas 썸네일
   const [thumbnails, setThumbnails] = useState([])
   const thumbnailProps = {
@@ -579,28 +575,15 @@ export default function Roof2(props) {
       {canvas && (
         <>
           <div className=" my-8 w-full text:pretty">
-            {!isObjectNotEmpty(guideLine) ? (
-              <Button
-                className="m-1 p-2"
-                onClick={() => {
-                  setContent(<SettingsModal canvasProps={canvas} />)
-                  setOpen(true)
-                }}
-              >
-                그리드 설정
-              </Button>
-            ) : (
-              <Button
-                className="m-1 p-2"
-                onClick={() => {
-                  const guideLines = canvas?._objects.filter((obj) => obj.name === 'guideLine' || obj.name === 'guideDot')
-                  guideLines?.forEach((item) => canvas?.remove(item))
-                  setGuideLine({})
-                }}
-              >
-                그리드 초기화
-              </Button>
-            )}
+            <Button
+              className="m-1 p-2"
+              onClick={() => {
+                setContent(<SettingsModal canvasProps={canvas} />)
+                setOpen(true)
+              }}
+            >
+              그리드 설정
+            </Button>
             <Button className="m-1 p-2" color={`${mode === Mode.DEFAULT ? 'primary' : 'default'}`} onClick={() => setMode(Mode.DEFAULT)}>
               모드 DEFAULT
             </Button>

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 3/3] =?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)