점 2개 이상 생성 시 guide line 추가

src/components/floor-plan/modal/outerlinesetting/OuterLineWall.jsx

@@ -116,6 +116,12 @@ export default function OuterLineWall(props) {
         canvas?.remove(obj)
         removeLineText(obj)
       })
+
+    canvas
+      ?.getObjects()
+      .filter((obj) => obj.name === 'helpGuideLine' || (obj.name === 'lengthTxt' && obj.parent?.name === 'helpGuideLine'))
+      .forEach((obj) => canvas?.remove(obj))
+
     canvas?.remove(canvas?.getObjects().find((obj) => obj.name === 'startPoint'))
 
     // point가 변경 될때마다 이벤트 리스너를 제거하고 다시 등록
@@ -145,13 +151,55 @@ export default function OuterLineWall(props) {
         }
         drawLine(points[idx - 1], point, idx)
       })
+
+      const lastPoint = points[points.length - 1]
+      const firstPoint = points[0]
+
+      if (points.length < 3) {
+        return
+      }
+
+      if (lastPoint.x === firstPoint.x && lastPoint.y === firstPoint.y) {
+        return
+      }
+
+      if (lastPoint.x === firstPoint.x || lastPoint.y === firstPoint.y) {
+        const line = new QLine([lastPoint.x, lastPoint.y, firstPoint.x, firstPoint.y], {
+          stroke: 'grey',
+          strokeWidth: 1,
+          selectable: false,
+          name: 'helpGuideLine',
+        })
+
+        canvas?.add(line)
+        addLineText(line)
+      } else {
+        const guideLine1 = new QLine([lastPoint.x, lastPoint.y, lastPoint.x, firstPoint.y], {
+          stroke: 'grey',
+          strokeWidth: 1,
+          strokeDashArray: [1, 1, 1],
+          name: 'helpGuideLine',
+        })
+
+        const guideLine2 = new QLine([guideLine1.x2, guideLine1.y2, firstPoint.x, firstPoint.y], {
+          stroke: 'grey',
+          strokeWidth: 1,
+          strokeDashArray: [1, 1, 1],
+          name: 'helpGuideLine',
+        })
+        canvas?.add(guideLine1)
+        canvas?.add(guideLine2)
+
+        addLineText(guideLine1)
+        addLineText(guideLine2)
+      }
     }
   }, [points])
 
   const drawLine = (point1, point2, idx) => {
     const line = new QLine([point1.x, point1.y, point2.x, point2.y], {
       stroke: 'black',
-      strokeWidth: 1,
+      strokeWidth: 3,
       idx: idx,
       selectable: false,
       name: 'outerLine',