diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js
index cdad9d7f..87291181 100644
--- a/src/hooks/useMode.js
+++ b/src/hooks/useMode.js
@@ -401,12 +401,14 @@ export function useMode() {
     const newOuterlines = []
     for (let i = 0; i < historyLines.current.length; i++) {
       const next = historyLines.current[i + 1]
-      const prev = historyLines.current[i - 1] ?? historyLines.current[historyLines.current.length - 1]
+      const prev =
+        historyLines.current[i - 1] ??
+        historyLines.current[historyLines.current.length - 1]
       if (next) {
         if (next.direction === 'right') {
           // 다름 라인이 오른쪽으로 이동
           if (historyLines.current[i].direction === 'top') {
-            if(prev.direction !== 'right') {
+            if (prev.direction !== 'right') {
               newOuterlines.push({
                 x1: historyLines.current[i].x1 + 50,
                 y1: historyLines.current[i].y1 - 50,
@@ -423,11 +425,11 @@ export function useMode() {
             }
           } else {
             // bottom
-            if(prev?.direction !== 'right') {
+            if (prev?.direction !== 'right') {
               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 {
@@ -441,7 +443,7 @@ export function useMode() {
           }
         } else if (next.direction === 'left') {
           if (historyLines.current[i].direction === 'top') {
-            if(prev?.direction !== 'left') {
+            if (prev?.direction !== 'left') {
               newOuterlines.push({
                 x1: historyLines.current[i].x1 + 50,
                 y1: historyLines.current[i].y1 + 50,
@@ -450,15 +452,15 @@ export function useMode() {
               })
             } 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,
+                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') {
+            if (prev?.direction !== 'left') {
               newOuterlines.push({
                 x1: historyLines.current[i].x1 + 50,
                 y1: historyLines.current[i].y1 - 50,
@@ -473,11 +475,10 @@ export function useMode() {
                 y2: historyLines.current[i].y2 - 50,
               })
             }
-
           }
         } else if (next.direction === 'top') {
           if (historyLines.current[i].direction === 'right') {
-            if(prev?.direction !== 'top') {
+            if (prev?.direction !== 'top') {
               newOuterlines.push({
                 x1: historyLines.current[i].x1 - 50,
                 y1: historyLines.current[i].y1 + 50,
@@ -494,25 +495,25 @@ export function useMode() {
             }
           } else {
             // left
-            if(prev?.direction !== 'top') {
+            if (prev?.direction !== 'top') {
               newOuterlines.push({
-                x1: historyLines.current[i].x1 - 50,
+                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 {
               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,
+                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') {
+            if (prev?.direction !== 'bottom') {
               newOuterlines.push({
                 x1: historyLines.current[i].x1 - 50,
                 y1: historyLines.current[i].y1 - 50,
@@ -521,20 +522,20 @@ export function useMode() {
               })
             } 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,
+                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 {
             // left
-            if(prev.direction !== 'bottom') {
+            if (prev.direction !== 'bottom') {
               newOuterlines.push({
                 x1: historyLines.current[i].x1 + 50,
-                y1: historyLines.current[i].y1 + 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 {
               newOuterlines.push({