수정

src/hooks/useMode.js

@@ -344,7 +344,7 @@ export function useMode() {
   const makePolygon = (otherLines) => {
     // 캔버스에서 모든 라인 객체를 찾습니다.
     const lines = otherLines || historyLines.current
-    if(!otherLines) {
+    if (!otherLines) {
       historyLines.current = []
     }
 
@@ -353,7 +353,12 @@ export function useMode() {
 
     // 모든 라인 객체를 캔버스에서 제거합니다.
     lines.forEach((line) => {
+      if (line.type === 'line') {
+        canvas?.remove(line)
+      }
+      if (line.type === 'QLine') {
         line.delete()
+      }
     })
 
     // 점 배열을 사용하여 새로운 다각형 객체를 생성합니다.
@@ -368,7 +373,7 @@ export function useMode() {
     canvas.add(polygon)
 
     // 캔버스를 다시 그립니다.
-    if(!otherLines) {
+    if (!otherLines) {
       polygon.fillCell()
       canvas.renderAll()
     }
@@ -396,9 +401,9 @@ export function useMode() {
 
   const handleOuterlines = () => {
     const newOuterlines = []
-    for(let i = 0; i < historyLines.current.length; i++) {
+    for (let i = 0; i < historyLines.current.length; i++) {
       const tmp = historyLines.current[i + 1]
-      if(tmp !== undefined) {
+      if (tmp !== undefined) {
         if (tmp.direction === 'right') {
           // 다름 라인이 오른쪽으로 이동
           if (historyLines.current[i].direction === 'top') {
@@ -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,
+        })
       }
     }