src/components/floor-plan/modal/lineTypes/RightAngle.jsx

@@ -61,40 +61,28 @@ export default function RightAngle({ props }) {
           <div className="grid-direction">
             <button
               className={`direction up ${arrow1 === '↑' ? 'act' : ''}`}
-              onMouseDown={(e) => {
+              onClick={() => {
-                e.preventDefault(); // 포커스가 input에서 버튼으로 옮겨가는 것을 원천 차단
-              }}
-              onClick={(e) => {
                 setArrow1('↑')
                 document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
               }}
             ></button>
             <button
               className={`direction down ${arrow1 === '↓' ? 'act' : ''}`}
-              onMouseDown={(e) => {
+              onClick={() => {
-                e.preventDefault(); // 포커스가 input에서 버튼으로 옮겨가는 것을 원천 차단
-              }}
-              onClick={(e) => {
                 setArrow1('↓')
                 document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
               }}
             ></button>
             <button
               className={`direction left ${arrow1 === '←' ? 'act' : ''}`}
-              onMouseDown={(e) => {
+              onClick={() => {
-                e.preventDefault(); // 포커스가 input에서 버튼으로 옮겨가는 것을 원천 차단
-              }}
-              onClick={(e) => {
                 setArrow1('←')
                 document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
               }}
             ></button>
             <button
               className={`direction right ${arrow1 === '→' ? 'act' : ''}`}
-              onMouseDown={(e) => {
+              onClick={() => {
-                e.preventDefault(); // 포커스가 input에서 버튼으로 옮겨가는 것을 원천 차단
-              }}
-                onClick={(e) => {
                 setArrow1('→')
                 document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
               }}

src/hooks/roofcover/useRoofAllocationSetting.js

@@ -323,19 +323,42 @@ export function useRoofAllocationSetting(id) {
   }
 
   const drawOriginRoofLine = () => {
-    const wallLines = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.WALL)
+    // outerLinePoints 배열을 이용하여 빨간색 Line 객체들 생성
-    /** 벽면 삭제 */
+    if (outerLinePoints && outerLinePoints.length > 1) {
-    wallLines.forEach((wallLine) => {
+      // 연속된 점들을 연결하여 라인 생성
-      wallLine.set({
+      for (let i = 0; i < outerLinePoints.length - 1; i++) {
-        stroke: 'black',
+        const point1 = outerLinePoints[i]
-        strokeDashArray: [5, 2],
+        const point2 = outerLinePoints[i + 1]
-        strokeWidth: 1,
+
-        selectable: false,
+        const line = new fabric.Line([point1.x, point1.y, point2.x, point2.y], {
-        name: 'originRoofOuterLine',
+          stroke: 'black',
-        visible: outlineDisplay,
+          strokeDashArray: [5, 2],
-      })
+          strokeWidth: 1,
-    })
+          selectable: false,
-    canvas.renderAll()
+          name: 'originRoofOuterLine',
+          visible: outlineDisplay,
+        })
+
+        canvas.add(line)
+      }
+
+      // 마지막 점과 첫 점을 연결하여 폐곡선 만들기
+      if (outerLinePoints.length > 2) {
+        const lastPoint = outerLinePoints[outerLinePoints.length - 1]
+        const firstPoint = outerLinePoints[0]
+
+        const closingLine = new fabric.Line([lastPoint.x, lastPoint.y, firstPoint.x, firstPoint.y], {
+          stroke: 'red',
+          strokeWidth: 2,
+          selectable: false,
+          name: 'originRoofOuterLine',
+        })
+
+        canvas.add(closingLine)
+      }
+
+      canvas.renderAll()
+    }
   }
 
   /**

src/hooks/usePolygon.js

@@ -1,7 +1,19 @@
-import { ANGLE_TYPE, canvasState, currentAngleTypeSelector, globalPitchState, pitchTextSelector } from '@/store/canvasAtom'
+import {
+  ANGLE_TYPE,
+  canvasState,
+  currentAngleTypeSelector,
+  globalPitchState,
+  pitchTextSelector,
+} from '@/store/canvasAtom'
 import { useRecoilValue } from 'recoil'
 import { fabric } from 'fabric'
-import { calculateIntersection, findAndRemoveClosestPoint, getDegreeByChon, getDegreeInOrientation, isPointOnLine } from '@/util/canvas-util'
+import {
+  calculateIntersection,
+  findAndRemoveClosestPoint,
+  getDegreeByChon,
+  getDegreeInOrientation,
+  isPointOnLine,
+} from '@/util/canvas-util'
 import { QPolygon } from '@/components/fabric/QPolygon'
 import { isSamePoint, removeDuplicatePolygons } from '@/util/qpolygon-utils'
 import { basicSettingState, flowDisplaySelector } from '@/store/settingAtom'
@@ -1380,8 +1392,6 @@ export const usePolygon = () => {
     // 나눠서 중복 제거된 roof return
     let newRoofs = getSplitRoofsPoints(allLines)
 
-    const createdRoofs = []
-
     newRoofs = newRoofs.filter((roof) => roof.length !== 0)
     newRoofs.forEach((roofPoint, index) => {
       let defense, pitch
@@ -1624,8 +1634,8 @@ export const usePolygon = () => {
         })
       })
 
-      // canvas.add(roof)
+      canvas.add(roof)
-      createdRoofs.push(roof)
+      addLengthText(roof)
       canvas.remove(polygon)
       canvas.renderAll()
     })
@@ -1635,11 +1645,6 @@ export const usePolygon = () => {
     auxiliaryLines.forEach((line) => {
       canvas.remove(line)
     })
-
-    createdRoofs.forEach((roof) => {
-      canvas.add(roof)
-    })
-
     canvas.renderAll()
     canvas.discardActiveObject()
   }
@@ -1965,6 +1970,38 @@ export const usePolygon = () => {
     canvas.renderAll()
   }
 
+  /**
+   * 폴리곤의 라인 길이가 10 이하로 차이나는 경우 작은 값으로 통일
+   * @param polygon
+   */
+  const unifyLineLengths = (polygon) => {
+    if (!polygon.lines || polygon.lines.length === 0) {
+      return
+    }
+
+    const lines = polygon.lines
+
+    for (let i = 0; i < lines.length; i++) {
+      for (let j = i + 1; j < lines.length; j++) {
+        const length1 = lines[i].getLength()
+        const length2 = lines[j].getLength()
+        const diff = Math.abs(length1 - length2)
+
+        if (diff > 0 && diff <= 10) {
+          const minLength = Math.min(length1, length2)
+          if (length1 > length2) {
+            lines[i].setLengthByValue(minLength)
+          } else {
+            lines[j].setLengthByValue(minLength)
+          }
+        }
+      }
+    }
+
+    addLengthText(polygon)
+    canvas.renderAll()
+  }
+
   /**
    * 폴리곤의 라인 속성을 복도치수, 실제치수에 따라 actualSize 설정
    * @param polygon
@@ -1973,23 +2010,7 @@ export const usePolygon = () => {
     if (!polygon.lines || polygon.lines.length === 0 || !polygon.roofMaterial) {
       return
     }
-
+    unifyLineLengths(polygon)
-    // createdRoofs들의 모든 lines를 확인해서 length값이 1이하인 차이가 있으면 통일 시킨다.
-    const allRoofs = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
-    const allRoofLines = allRoofs.flatMap((roof) => roof.lines)
-    for (let i = 0; i < allRoofLines.length; i++) {
-      for (let j = i + 1; j < allRoofLines.length; j++) {
-        const line1 = allRoofLines[i]
-        const line2 = allRoofLines[j]
-        const diff = Math.abs(line1.length - line2.length)
-        if (diff > 0 && diff <= 1) {
-          const minLength = Math.min(line1.length, line2.length)
-          line1.setLengthByValue(minLength * 10)
-          line2.setLengthByValue(minLength * 10)
-        }
-      }
-    }
-
     polygon.lines.forEach((line) => {
       setActualSize(line, polygon.direction, +polygon.roofMaterial?.pitch)
     })
@@ -2006,5 +2027,6 @@ export const usePolygon = () => {
     splitPolygonWithLines,
     splitPolygonWithSeparate,
     setPolygonLinesActualSize,
+    unifyLineLengths,
   }
 }