살짝 수정

src/components/Roof2.jsx

@@ -1,49 +1,49 @@
 import { useCanvas } from '@/hooks/useCanvas'
 import { useEffect } from 'react'
-import { UseMode, useMode } from '@/hooks/useMode'
+import { Mode, UseMode, useMode } from '@/hooks/useMode'
 
 export default function Roof2() {
-  const { canvas, handleRedo, handleUndo, handleClear } = useCanvas('canvas')
+  const { canvas, handleRedo, handleUndo } = useCanvas('canvas')
 
-  const { mode, changeMode, setCanvas } = useMode()
+  const { mode, changeMode, setCanvas, handleClear } = useMode()
 
   useEffect(() => {
-    // canvas가 없는 경우
+    if (!canvas) {
-    if (!canvas) return
+      return
-    // canvas가 있는 경우
+    }
     changeMode(canvas, mode)
-  }, [mode, canvas])
+  }, [canvas, mode])
 
   return (
     <>
       <div className="flex justify-center my-8">
         <button
-          className={`w-30 mx-2 p-2 rounded ${mode === UseMode.DRAW_LINE ? 'bg-blue-500' : 'bg-gray-500'} text-white`}
+          className={`w-30 mx-2 p-2 rounded ${mode === Mode.DRAW_LINE ? 'bg-blue-500' : 'bg-gray-500'} text-white`}
-          onClick={() => changeMode(canvas, UseMode.DRAW_LINE)}
+          onClick={() => changeMode(canvas, Mode.DRAW_LINE)}
         >
           기준선 긋기 모드
         </button>
         <button
-          className={`w-30 mx-2 p-2 rounded ${mode === UseMode.EDIT ? 'bg-blue-500' : 'bg-gray-500'} text-white`}
+          className={`w-30 mx-2 p-2 rounded ${mode === Mode.EDIT ? 'bg-blue-500' : 'bg-gray-500'} text-white`}
-          onClick={() => changeMode(canvas, UseMode.EDIT)}
+          onClick={() => changeMode(canvas, Mode.EDIT)}
         >
           에디팅모드
         </button>
         <button
-          className={`w-30 mx-2 p-2 rounded ${mode === UseMode.TEMPLATE ? 'bg-blue-500' : 'bg-gray-500'} text-white`}
+          className={`w-30 mx-2 p-2 rounded ${mode === Mode.TEMPLATE ? 'bg-blue-500' : 'bg-gray-500'} text-white`}
-          onClick={() => changeMode(canvas, UseMode.TEMPLATE)}
+          onClick={() => changeMode(canvas, Mode.TEMPLATE)}
         >
           템플릿모드
         </button>
         <button
-          className={`w-30 mx-2 p-2 rounded ${mode === UseMode.TEXTBOX ? 'bg-blue-500' : 'bg-gray-500'} text-white`}
+          className={`w-30 mx-2 p-2 rounded ${mode === Mode.TEXTBOX ? 'bg-blue-500' : 'bg-gray-500'} text-white`}
-          onClick={() => changeMode(canvas, UseMode.TEXTBOX)}
+          onClick={() => changeMode(canvas, Mode.TEXTBOX)}
         >
           텍스트박스 모드
         </button>
         <button
-          className={`w-30 mx-2 p-2 rounded ${mode === UseMode.DRAW_RECT ? 'bg-blue-500' : 'bg-gray-500'} text-white`}
+          className={`w-30 mx-2 p-2 rounded ${mode === Mode.DRAW_RECT ? 'bg-blue-500' : 'bg-gray-500'} text-white`}
-          onClick={() => changeMode(canvas, UseMode.DRAW_RECT)}
+          onClick={() => changeMode(canvas, Mode.DRAW_RECT)}
         >
           사각형 생성 모드
         </button>

src/hooks/useCanvas.js

@@ -238,14 +238,6 @@ export function useCanvas(id) {
     }
   }
 
-  /**
-   * 해당 캔버스를 비운다.
-   */
-  const handleClear = () => {
-    canvas?.clear()
-    initialize()
-  }
-
   /**
    * 선택한 도형을 복사한다.
    */
@@ -506,7 +498,6 @@ export function useCanvas(id) {
     addShape,
     handleUndo,
     handleRedo,
-    handleClear,
     handleCopy,
     handleDelete,
     handleSave,

src/hooks/useMode.js

@@ -1,6 +1,6 @@
 import { useRef, useState } from 'react'
 
-export const UseMode = {
+export const Mode = {
   DRAW_LINE: 'drawLine', // 기준선 긋기모드
   EDIT: 'edit',
   TEMPLATE: 'template',
@@ -9,13 +9,13 @@ export const UseMode = {
 }
 
 export function useMode() {
-  const [mode, setMode] = useState(UseMode.EDIT)
+  const [mode, setMode] = useState(Mode.EDIT)
   const points = useRef([])
   const historyPoints = useRef([])
   const historyLines = useRef([])
   const [canvas, setCanvas] = useState(null)
 
-  const addEvent = (mode) => {
+  const addEvent = (mode = Mode.EDIT) => {
     switch (mode) {
       case 'drawLine':
         drawLineMode()
@@ -35,11 +35,11 @@ export function useMode() {
     }
   }
 
-  const changeMode = (canvas, mode) => {
+  const changeMode = (canvas, mode = Mode.EDIT) => {
     setMode(mode)
     // mode변경 시 이전 이벤트 제거
-    canvas?.off('mouse:down')
     setCanvas(canvas)
+    canvas?.off('mouse:down')
     addEvent(mode)
   }
 
@@ -112,7 +112,6 @@ export function useMode() {
           )
 
           historyLines.current.push(line)
-          console.log(line)
           const text = new fabric.Text(length.toString(), {
             left:
               (points.current[0].left +
@@ -140,8 +139,6 @@ export function useMode() {
             selectable: false,
           })
 
-          console.log(endPointCircle)
-
           canvas?.add(line)
           canvas?.add(text)
           canvas?.add(endPointCircle)
@@ -160,7 +157,7 @@ export function useMode() {
   }
 
   const templateMode = () => {
-    changeMode(canvas, UseMode.EDIT)
+    changeMode(canvas, Mode.EDIT)
 
     if (historyPoints.current.length >= 4) {
       const firstPoint = historyPoints.current[0]
@@ -277,6 +274,7 @@ export function useMode() {
 
   /**
    * 두 점을 연결하는 선과 길이를 그립니다.
+   * a : 시작점, b : 끝점
    */
   const drawLineWithLength = (a, b) => {
     const vector = {
@@ -333,5 +331,15 @@ export function useMode() {
     canvas.renderAll()
   }
 
-  return { mode, changeMode, setCanvas }
+  /**
+   * 해당 캔버스를 비운다.
+   */
+  const handleClear = () => {
+    canvas?.clear()
+    points.current = []
+    historyPoints.current = []
+    historyLines.current = []
+  }
+
+  return { mode, changeMode, setCanvas, handleClear }
 }