From 76f4ed1cf9e61fd28615940d0d340c17d2ca5a19 Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Tue, 27 Aug 2024 13:36:47 +0900
Subject: [PATCH 1/4] =?UTF-8?q?=EB=8F=84=EB=A8=B8=20=EC=83=9D=EC=84=B1?=
 =?UTF-8?q?=EB=AA=A8=EB=93=9C=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EA=B7=B8?=
 =?UTF-8?q?=EB=A6=AC=EB=93=9C=20=EC=84=A4=EC=A0=95=20background=20?=
 =?UTF-8?q?=EB=92=A4=EB=A1=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Roof2.jsx         |  3 ++
 src/components/SettingsModal.jsx | 16 +++++++++--
 src/hooks/useMode.js             | 47 ++++++++++++++++++--------------
 3 files changed, 43 insertions(+), 23 deletions(-)

diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx
index 794c0265..217d0521 100644
--- a/src/components/Roof2.jsx
+++ b/src/components/Roof2.jsx
@@ -632,6 +632,9 @@ export default function Roof2(props) {
             <Button className="m-1 p-2" color={`${mode === Mode.TEXTBOX ? 'primary' : 'default'}`} onClick={() => setMode(Mode.TEXTBOX)}>
               텍스트박스 모드
             </Button>
+            <Button className="m-1 p-2" color={`${mode === Mode.DRAW_RECT ? 'primary' : 'default'}`} onClick={() => setMode(Mode.DRAW_RECT)}>
+              도머 추가 모드
+            </Button>
             <Button
               className="m-1 p-2"
               color={`${mode === Mode.ADSORPTION_POINT ? 'primary' : 'default'}`}
diff --git a/src/components/SettingsModal.jsx b/src/components/SettingsModal.jsx
index 2ae6fae6..3cf9997b 100644
--- a/src/components/SettingsModal.jsx
+++ b/src/components/SettingsModal.jsx
@@ -56,7 +56,12 @@ export default function SettingsModal(props) {
           {
             stroke: 'gray',
             strokeWidth: 1,
-            selectable: false,
+            selectable: true,
+            lockMovementX: true,
+            lockMovementY: true,
+            lockRotation: true,
+            lockScalingX: true,
+            lockScalingY: true,
             name: 'guideLine',
           },
         )
@@ -70,7 +75,12 @@ export default function SettingsModal(props) {
           {
             stroke: 'gray',
             strokeWidth: 1,
-            selectable: false,
+            selectable: true,
+            lockMovementX: true,
+            lockMovementY: true,
+            lockRotation: true,
+            lockScalingX: true,
+            lockScalingY: true,
             name: 'guideLine',
           },
         )
@@ -137,7 +147,9 @@ export default function SettingsModal(props) {
           name: 'guideDot',
         },
       )
+
       canvasProps.add(backgroundPolygon)
+      backgroundPolygon.sendToBack()
       canvasProps.renderAll()
 
       const recoilObj = {
diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js
index 5666dabd..f5fe698e 100644
--- a/src/hooks/useMode.js
+++ b/src/hooks/useMode.js
@@ -802,31 +802,29 @@ export function useMode() {
         changeMode(canvas, Mode.EDIT)
       })
     },
-    drawRectMode: () => {
+    drawRectMode: (o) => {
       let rect, isDown, origX, origY
-      canvas.on('mouse:down', function (o) {
-        isDown = true
-        const pointer = canvas.getPointer(o.e)
-        origX = pointer.x
-        origY = pointer.y
-        rect = new fabric.Rect({
-          left: origX,
-          top: origY,
-          originX: 'left',
-          originY: 'top',
-          width: pointer.x - origX,
-          height: pointer.y - origY,
-          angle: 0,
-          fill: 'transparent',
-          stroke: 'black',
-          transparentCorners: false,
-        })
-        canvas.add(rect)
+      isDown = true
+      const pointer = canvas.getPointer(o.e)
+      origX = pointer.x
+      origY = pointer.y
+      rect = new fabric.Rect({
+        left: origX,
+        top: origY,
+        originX: 'left',
+        originY: 'top',
+        width: pointer.x - origX,
+        height: pointer.y - origY,
+        angle: 0,
+        fill: 'transparent',
+        stroke: 'black',
+        transparentCorners: false,
       })
+      canvas.add(rect)
 
-      canvas.on('mouse:move', function (o) {
+      canvas.on('mouse:move', function (e) {
         if (!isDown) return
-        const pointer = canvas.getPointer(o.e)
+        const pointer = canvas.getPointer(e.e)
         if (origX > pointer.x) {
           rect.set({ left: Math.abs(pointer.x) })
         }
@@ -837,6 +835,13 @@ export function useMode() {
         rect.set({ width: Math.abs(origX - pointer.x) })
         rect.set({ height: Math.abs(origY - pointer.y) })
       })
+
+      canvas.on('mouse:up', function (o) {
+        isDown = false
+        canvas.off('mouse:move')
+        canvas.off('mouse:up')
+        setMode(Mode.DEFAULT)
+      })
     },
     // 흡착점 추가
     adsorptionPoint(o) {

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