src/hooks/usePolygon.js

@@ -847,7 +847,8 @@ export const usePolygon = () => {
           // innerLine의 type을 polygonLine의 type으로 변경
           if (polygonLine.attributes?.type && innerLine.attributes) {
             polygonLine.need = false
-            innerLine.attributes.type = polygonLine.attributes.type
+            innerLine.attributes = polygonLine.attributes
+            innerLine.direction = polygonLine.direction
             innerLine.attributes.isStart = true
           }
         }
@@ -903,6 +904,28 @@ export const usePolygon = () => {
       line.endPoint = endPoint
     })
 
+    // polygonLines과 innerLines에서 startPoint, endPoint가 같은 라인을 innerLines에서 제거하고 canvas에서도 제거
+    const linesToRemove = []
+    innerLines = innerLines.filter((innerLine) => {
+      const shouldRemove = polygonLines.some((polygonLine) => {
+        return (
+          (isSamePoint(innerLine.startPoint, polygonLine.startPoint) && isSamePoint(innerLine.endPoint, polygonLine.endPoint)) ||
+          (isSamePoint(innerLine.startPoint, polygonLine.endPoint) && isSamePoint(innerLine.endPoint, polygonLine.startPoint))
+        )
+      })
+      if (shouldRemove) {
+        linesToRemove.push(innerLine)
+      }
+      return !shouldRemove
+    })
+    
+    // 중복된 라인들을 canvas에서 제거
+    linesToRemove.forEach((line) => {
+      canvas.remove(line)
+    })
+
+    canvas.renderAll()
+
     /*polygonLines.forEach((line) => {
       line.set({ strokeWidth: 10 })
       canvas.add(line)
@@ -1251,7 +1274,10 @@ export const usePolygon = () => {
       return (
         index ===
         self.findIndex((l) => {
-          return isSamePoint(l.startPoint, line.startPoint) && isSamePoint(l.endPoint, line.endPoint)
+          return (
+            (isSamePoint(l.startPoint, line.startPoint) && isSamePoint(l.endPoint, line.endPoint)) ||
+            (isSamePoint(l.startPoint, line.endPoint) && isSamePoint(l.endPoint, line.startPoint))
+          )
         })
       )
     })