지붕 외곽선 자동 그려주기 - 디버깅중

src/hooks/useMode.js

@@ -400,45 +400,84 @@ export function useMode() {
   const handleOuterlines = () => {
     const newOuterlines = []
     for (let i = 0; i < historyLines.current.length; i++) {
-      const tmp = historyLines.current[i + 1]
+      const next = historyLines.current[i + 1]
-      if (tmp !== undefined) {
+      const prev = historyLines.current[i - 1] ?? historyLines.current[historyLines.current.length - 1]
-        if (tmp.direction === 'right') {
+      if (next) {
+        if (next.direction === 'right') {
           // 다름 라인이 오른쪽으로 이동
           if (historyLines.current[i].direction === 'top') {
+            if(prev.direction !== 'right') {
+              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,
+              })
+            } else {
+              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,
+              })
+            }
+          } else {
+            // bottom
+            if(prev?.direction !== 'right') {
+              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,
+              })
+            } else {
               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,
-            })
-          } 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,
               })
             }
-        } else if (tmp.direction === 'left') {
+          }
+        } else if (next.direction === 'left') {
           if (historyLines.current[i].direction === 'top') {
+            if(prev?.direction !== '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,
               })
+            } else {
+              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,
+              })
+            }
           } else {
             // bottom
+            if(prev?.direction !== '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,
               })
+            } else {
+              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,
+              })
             }
-        } else if (tmp.direction === 'top') {
+
+          }
+        } else if (next.direction === 'top') {
           if (historyLines.current[i].direction === 'right') {
+            if(prev?.direction !== 'top') {
               newOuterlines.push({
                 x1: historyLines.current[i].x1 - 50,
                 y1: historyLines.current[i].y1 + 50,
@@ -446,16 +485,34 @@ export function useMode() {
                 y2: historyLines.current[i].y2 + 50,
               })
             } else {
-            // left
               newOuterlines.push({
                 x1: historyLines.current[i].x1 + 50,
                 y1: historyLines.current[i].y1 + 50,
-              x2: historyLines.current[i].x2 - 50,
+                x2: historyLines.current[i].x2 + 50,
                 y2: historyLines.current[i].y2 + 50,
               })
             }
-        } else if (tmp.direction === 'bottom') {
+          } else {
-          if (historyLines.current[i].direction === 'right') {
+            // left
+            if(prev?.direction !== 'top') {
+              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,
+              })
+            } else {
+              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,
+              })
+            }
+          }
+        } else if (next.direction === 'bottom') {
+          if (historyLines.current[i].direction === 'right') {
+            if(prev?.direction !== 'bottom') {
               newOuterlines.push({
                 x1: historyLines.current[i].x1 - 50,
                 y1: historyLines.current[i].y1 - 50,
@@ -463,14 +520,31 @@ export function useMode() {
                 y2: historyLines.current[i].y2 - 50,
               })
             } else {
-            // left
               newOuterlines.push({
                 x1: historyLines.current[i].x1 + 50,
                 y1: historyLines.current[i].y1 - 50,
-              x2: historyLines.current[i].x2 - 50,
+                x2: historyLines.current[i].x2 + 50,
                 y2: historyLines.current[i].y2 - 50,
               })
             }
+          } else {
+            // left
+            if(prev.direction !== '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,
+              })
+            } else {
+              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,
+              })
+            }
+          }
         }
       } else {
         const tmp = newOuterlines[newOuterlines.length - 1]