기준선 긋기모드 추가

src/app/mode.js

@@ -1,11 +1,21 @@
 import { useRef, useState } from 'react'
 
+export const MODE = {
+  DRAW_LINE: 'drawLine', // 기준선 긋기모드
+  EDIT: 'edit',
+  TEMPLATE: 'template',
+  TEXTBOX: 'textbox',
+}
+
 export function useMode() {
   const [mode, setMode] = useState(MODE.EDIT)
   const points = useRef([])
 
   const addEvent = (canvas, mode) => {
     switch (mode) {
+      case 'drawLine':
+        drawLineMode(canvas)
+        break
       case 'edit':
         editMode(canvas)
         break
@@ -166,11 +176,23 @@ export function useMode() {
     })
   }
 
+  const drawLineMode = (canvas) => {
+    canvas?.on('mouse:down', function (options) {
+      const pointer = canvas?.getPointer(options.e)
+
+      const line = new fabric.Line(
+        [pointer.x, 0, pointer.x, canvas.height], // y축에 1자 선을 그립니다.
+        {
+          stroke: 'black',
+          strokeWidth: 2,
+          selectable: false,
+        },
+      )
+
+      canvas?.add(line)
+      canvas?.renderAll()
+    })
+  }
+
   return { mode, changeMode }
 }
-
-export const MODE = {
-  EDIT: 'edit',
-  TEMPLATE: 'template',
-  TEXTBOX: 'textbox',
-}

src/components/Roof2.jsx

@@ -17,23 +17,29 @@ export default function Roof2() {
   return (
     <>
       <div className="flex justify-center my-8">
+        <button
+          className={`w-30 mx-2 p-2 rounded ${mode === MODE.DRAW_LINE ? 'bg-blue-500' : 'bg-gray-500'} text-white`}
+          onClick={() => changeMode(canvas, MODE.DRAW_LINE)}
+        >
+          기준선 긋기 모드
+        </button>
         <button
           className={`w-30 mx-2 p-2 rounded ${mode === MODE.EDIT ? 'bg-blue-500' : 'bg-gray-500'} text-white`}
           onClick={() => changeMode(canvas, MODE.EDIT)}
         >
-          Editing
+          에디팅모드
         </button>
         <button
           className={`w-30 mx-2 p-2 rounded ${mode === MODE.TEMPLATE ? 'bg-blue-500' : 'bg-gray-500'} text-white`}
           onClick={() => changeMode(canvas, MODE.TEMPLATE)}
         >
-          Template
+          템플릿모드
         </button>
         <button
           className={`w-30 mx-2 p-2 rounded ${mode === MODE.TEXTBOX ? 'bg-blue-500' : 'bg-gray-500'} text-white`}
           onClick={() => changeMode(canvas, MODE.TEXTBOX)}
         >
-          텍스트박스 mode
+          텍스트박스 모드
         </button>
       </div>