수정

src/hooks/useMode.js

@@ -353,7 +353,12 @@ export function useMode() {
 
     // 모든 라인 객체를 캔버스에서 제거합니다.
     lines.forEach((line) => {
+      if (line.type === 'line') {
+        canvas?.remove(line)
+      }
+      if (line.type === 'QLine') {
         line.delete()
+      }
     })
 
     // 점 배열을 사용하여 새로운 다각형 객체를 생성합니다.
@@ -406,14 +411,15 @@ export function useMode() {
               x1: historyLines.current[i].x1 - 50,
               y1: historyLines.current[i].y1 + 50,
               x2: historyLines.current[i].x2 - 50,
-              y2: historyLines.current[i].y2 - 50
+              y2: historyLines.current[i].y2 - 50,
             })
-          } else { // bottom
+          } else {
+            // bottom
             newOuterlines.push({
               x1: historyLines.current[i].x1 - 50,
               y1: historyLines.current[i].y1 - 50,
               x2: historyLines.current[i].x2 - 50,
-              y2: historyLines.current[i].y2 + 50
+              y2: historyLines.current[i].y2 + 50,
             })
           }
         } else if (tmp.direction === 'left') {
@@ -422,14 +428,15 @@ export function useMode() {
               x1: historyLines.current[i].x1 + 50,
               y1: historyLines.current[i].y1 + 50,
               x2: historyLines.current[i].x2 + 50,
-              y2: historyLines.current[i].y2 - 50
+              y2: historyLines.current[i].y2 - 50,
             })
-          } else { // bottom
+          } else {
+            // bottom
             newOuterlines.push({
               x1: historyLines.current[i].x1 + 50,
               y1: historyLines.current[i].y1 - 50,
               x2: historyLines.current[i].x2 + 50,
-              y2: historyLines.current[i].y2 + 50
+              y2: historyLines.current[i].y2 + 50,
             })
           }
         } else if (tmp.direction === 'top') {
@@ -438,14 +445,15 @@ export function useMode() {
               x1: historyLines.current[i].x1 - 50,
               y1: historyLines.current[i].y1 + 50,
               x2: historyLines.current[i].x2 + 50,
-              y2: historyLines.current[i].y2 + 50
+              y2: historyLines.current[i].y2 + 50,
             })
-          } else { // left
+          } else {
+            // left
             newOuterlines.push({
               x1: historyLines.current[i].x1 + 50,
               y1: historyLines.current[i].y1 + 50,
               x2: historyLines.current[i].x2 - 50,
-              y2: historyLines.current[i].y2 + 50
+              y2: historyLines.current[i].y2 + 50,
             })
           }
         } else if (tmp.direction === 'bottom') {
@@ -454,20 +462,26 @@ export function useMode() {
               x1: historyLines.current[i].x1 - 50,
               y1: historyLines.current[i].y1 - 50,
               x2: historyLines.current[i].x2 + 50,
-              y2: historyLines.current[i].y2 - 50
+              y2: historyLines.current[i].y2 - 50,
             })
-          } else { // left
+          } else {
+            // left
             newOuterlines.push({
               x1: historyLines.current[i].x1 + 50,
               y1: historyLines.current[i].y1 - 50,
               x2: historyLines.current[i].x2 - 50,
-              y2: historyLines.current[i].y2 - 50
+              y2: historyLines.current[i].y2 - 50,
             })
           }
         }
       } else {
         const tmp = newOuterlines[newOuterlines.length - 1]
-        newOuterlines.push({x1: tmp.x2, y1: tmp.y2, x2: newOuterlines[0].x1, y2: newOuterlines[0].y1})
+        newOuterlines.push({
+          x1: tmp.x2,
+          y1: tmp.y2,
+          x2: newOuterlines[0].x1,
+          y2: newOuterlines[0].y1,
+        })
       }
     }