Merge branch 'feature/test' of https://git.jetbrains.space/nalpari/q-cast-iii/qcast-front into feature/hj

src/hooks/useMode.js

@@ -1389,6 +1389,11 @@ export function useMode() {
     let vertCenterLine
     let secondVertCenterLine
     let templatePolygonObj = {}
+    let roofPatternPolygonArray = []
+
+    let bigRoofPolygon = []
+    let middleRoofPolygon = []
+    let smallRoofPolygon = []
 
     if (prevHighIndex === 1) {
       if (horizontalDirection === 'left') {
@@ -1514,7 +1519,7 @@ export function useMode() {
         let drawLastInLine2 = new QLine([secondVertCenterLine.x1, vertCenterLine.y2, vertCenterLine.x2, vertCenterLine.y2], centerLineOpt)
         canvas.add(drawLastInLine2)
 
-        const bigRoofPolygon = [
+        bigRoofPolygon = [
           { x: outLines[2].x1, y: outLines[2].y1 },
           { x: outLines[2].x2, y: outLines[2].y2 },
           { x: outLines[0].x1, y: outLines[0].y1 },
@@ -1523,20 +1528,19 @@ export function useMode() {
           { x: outLines[1].x2, y: outLines[1].y2 },
         ]
 
-        const middleRoofPolygon = [
+        middleRoofPolygon = [
           { x: outLines[0].x2, y: outLines[0].y2 },
           { x: outLines[0].x1, y: outLines[0].y1 },
           { x: outLines[3].x2, y: outLines[3].y2 },
           { x: outLines[3].x1, y: outLines[3].y1 },
         ]
 
-        const smallRoofPolygon = [
+        smallRoofPolygon = [
           { x: outLines[1].x2, y: outLines[1].y2 },
           { x: outLines[1].x1, y: outLines[1].y1 },
           { x: outLines[4].x2, y: outLines[4].y2 },
           { x: outLines[4].x1, y: outLines[4].y1 },
         ]
-        setRoofPolygonPattern({ bigRoofPolygon, middleRoofPolygon, smallRoofPolygon, lines })
       } else {
         //아래쪽 길게 오른쪽 방향
         //배열 순서대로 뒤에꺼를 찾아서 계산한다
@@ -1664,7 +1668,7 @@ export function useMode() {
         let drawLastInLine2 = new QLine([secondVertCenterLine.x2, vertCenterLine.y1, vertCenterLine.x1, vertCenterLine.y1], centerLineOpt)
         canvas.add(drawLastInLine2)
 
-        const bigRoofPolygon = [
+        bigRoofPolygon = [
           { x: outLines[0].x1, y: outLines[0].y1 },
           { x: outLines[0].x2, y: outLines[0].y2 },
           { x: outLines[3].x1, y: outLines[3].y1 },
@@ -1673,20 +1677,19 @@ export function useMode() {
           { x: outLines[1].x2, y: outLines[0].y1 },
         ]
 
-        const middleRoofPolygon = [
+        middleRoofPolygon = [
           { x: outLines[2].x1, y: outLines[2].y1 },
           { x: outLines[2].x2, y: outLines[2].y2 },
           { x: outLines[0].x2, y: outLines[0].y2 },
           { x: outLines[0].x1, y: outLines[0].y1 },
         ]
 
-        const smallRoofPolygon = [
+        smallRoofPolygon = [
           { x: outLines[4].x1, y: outLines[4].y1 },
           { x: outLines[4].x2, y: outLines[4].y2 },
           { x: outLines[1].x2, y: outLines[1].y2 },
           { x: outLines[1].x1, y: outLines[1].y1 },
         ]
-        setRoofPolygonPattern({ bigRoofPolygon, middleRoofPolygon, smallRoofPolygon, lines })
       }
     } else {
       if (horizontalDirection === 'left') {
@@ -1808,7 +1811,7 @@ export function useMode() {
         let drawLastInLine2 = new QLine([vertCenterLine.x1, vertCenterLine.y2, secondVertCenterLine.x2, vertCenterLine.y2], centerLineOpt)
         canvas.add(drawLastInLine2)
 
-        const bigRoofPolygon = [
+        bigRoofPolygon = [
           { x: outLines[2].x1, y: outLines[2].y1 },
           { x: outLines[2].x2, y: outLines[2].y2 },
           { x: outLines[1].x1, y: outLines[1].y1 },
@@ -1817,21 +1820,19 @@ export function useMode() {
           { x: outLines[0].x1, y: outLines[0].y1 },
         ]
 
-        const middleRoofPolygon = [
+        middleRoofPolygon = [
           { x: outLines[0].x1, y: outLines[0].y1 },
           { x: outLines[0].x2, y: outLines[0].y2 },
           { x: outLines[4].x2, y: outLines[4].y2 },
           { x: outLines[4].x1, y: outLines[4].y1 },
         ]
 
-        const smallRoofPolygon = [
+        smallRoofPolygon = [
           { x: outLines[1].x2, y: outLines[1].y2 },
           { x: outLines[1].x1, y: outLines[1].y1 },
           { x: outLines[3].x2, y: outLines[3].y2 },
           { x: outLines[3].x1, y: outLines[3].y1 },
         ]
-
-        setRoofPolygonPattern({ bigRoofPolygon, middleRoofPolygon, smallRoofPolygon, lines })
       } else {
         //윗쪽 길게 오른쪽 방향
         //배열 순서대로 뒤에꺼를 찾아서 계산한다
@@ -1953,7 +1954,7 @@ export function useMode() {
         let drawLastInLine2 = new QLine([secondLine.x2 - eaves, secondLine.y1, drawLastLine1.x2, secondLine.y1], centerLineOpt)
         canvas.add(drawLastInLine2)
 
-        const bigRoofPolygon = [
+        bigRoofPolygon = [
           { x: outLines[0].x1, y: outLines[0].y1 },
           { x: outLines[0].x2, y: outLines[0].y2 },
           { x: outLines[1].x1, y: outLines[0].y2 },
@@ -1962,24 +1963,28 @@ export function useMode() {
           { x: outLines[4].x2, y: outLines[4].y2 },
         ]
 
-        const middleRoofPolygon = [
+        middleRoofPolygon = [
           { x: outLines[2].x1, y: outLines[2].y1 },
           { x: outLines[2].x2, y: outLines[2].y2 },
           { x: outLines[0].x2, y: outLines[0].y2 },
           { x: outLines[0].x1, y: outLines[0].y1 },
         ]
 
-        const smallRoofPolygon = [
+        smallRoofPolygon = [
           { x: outLines[3].x1, y: outLines[3].y1 },
           { x: outLines[3].x2, y: outLines[3].y2 },
           { x: outLines[1].x2, y: outLines[1].y2 },
           { x: outLines[1].x1, y: outLines[1].y1 },
         ]
-
-        setRoofPolygonPattern({ bigRoofPolygon, middleRoofPolygon, smallRoofPolygon, lines })
       }
     }
 
+    roofPatternPolygonArray.push(bigRoofPolygon)
+    roofPatternPolygonArray.push(middleRoofPolygon)
+    roofPatternPolygonArray.push(smallRoofPolygon)
+
+    setRoofPolygonPattern({ roofPatternPolygonArray, lines })
+
     canvas.renderAll()
   }
 
@@ -1992,6 +1997,8 @@ export function useMode() {
     let lines = [] //내각라인
     let outLines = [] //아웃라인
     let halfLength = 0 //선길이
+    let offsetX
+    let offsetY
 
     const dashedCenterLineOpt = {
       stroke: 'black',
@@ -2044,6 +2051,32 @@ export function useMode() {
       y: line.y1,
     }))
 
+    //좌표 재정렬
+    function reSortQlineArray(array) {
+      let tmpArray = []
+      array.forEach((arr, index) => {
+        let minX, minY, maxX, maxY
+        let tmp = arr
+        if (arr.x2 < arr.x1 || arr.y2 < arr.y1) {
+          minX = arr.x2
+          minY = arr.y2
+          maxX = arr.x1
+          maxY = arr.y1
+          tmp['x1'] = minX
+          tmp['y1'] = minY
+          tmp['x2'] = maxX
+          tmp['y2'] = maxY
+          tmp.line['x1'] = minX
+          tmp.line['y1'] = minY
+          tmp.line['x2'] = maxX
+          tmp.line['y2'] = maxY
+        }
+        tmpArray.push(tmp)
+      })
+
+      return tmpArray
+    }
+
     // 외적을 계산하는 함수
     function crossProduct(p1, p2, p3) {
       const dx1 = p2.x - p1.x
@@ -2076,7 +2109,10 @@ export function useMode() {
     // 오목한 부분 인덱스 찾기
     concaveIndices = findConcavePointIndices(points) //오목한 부분을 제외한 인덱스
     const concavePoints = concaveIndices.map((index) => points[index])
-
+    const concaveLine = {
+      index: concavePointIndices[0],
+      line: lines[concavePointIndices[0]],
+    }
     for (var i = 0; i < points.length; i++) {
       var prev = points[(i - 1 + points.length) % points.length]
       var current = points[i]
@@ -2111,11 +2147,8 @@ export function useMode() {
         y: averageNormal.y / lengthNormal,
       }
 
-      let offsetX
-      let offsetY
-
       if (concavePointIndices[0] === i || concavePointIndices[1] === i) {
-        // 인덱스가 배열이랑 같으면
+        //인덱스가 배열이랑 같으면
         if ((concavePointIndices[0] === 4 && concavePointIndices[1] === 5) || (concavePointIndices[0] === 2 && concavePointIndices[1] === 3)) {
           offsetX = 1
           offsetY = (offsetInputY / transformedMax) * originalMax * 2
@@ -2157,35 +2190,121 @@ export function useMode() {
     }
 
     canvas?.remove(outlinePolygon) //임시 폴리곤을 삭제
-    canvas?.remove(outLines[concavePointIndices[0]]) //가운데 제외되는 선을 지운다
 
     //라인들을 좌측에서 -> 우측으로 그리는거처럼 데이터 보정
-    outLines.forEach((outline, index) => {
+    outLines = reSortQlineArray(outLines)
-      let minX, minY, maxX, maxY
+
-      if (outline.x2 < outline.x1 || outline.y2 < outline.y1) {
+    let parallelLinesIdx = concavePointIndices[0] + 4 //들어간선에 무조건 평행하는 선 찾기
-        outLines[index].x1 = outline.x2
+    let parallelLines = outLines[parallelLinesIdx]
-        outLines[index].y1 = outline.y2
+    if (parallelLinesIdx >= outLines.length) {
-        outLines[index].x2 = outline.x1
+      parallelLines = outLines[parallelLinesIdx - outLines.length]
-        outLines[index].y2 = outline.y1
+      parallelLinesIdx = parallelLinesIdx - outLines.length
-        outLines[index].line.x1 = minX
+    }
-        outLines[index].line.y1 = minY
+
-        outLines[index].line.x2 = maxX
+    let vertCenterLine = []
-        outLines[index].line.y2 = maxY
+    let halfHoriCenterLinePoint = [] //카라바선의 2분할의 1번 배열
+    let horiCenterLine = []
+    let shorVertCenterLine = []
+
+    if (concavePointIndices[0] % 2 === 0) {
+      // 오목한 부분이 세로선일때 ㄷ, 역ㄷ
+    } else {
+      // 오목한 부분이 세로선일때 ㄷ, 역ㄷ
+      outLines.forEach((outline, index) => {
+        if (!(index % 2 === 0)) {
+          //세로라인이 케라바 라인임
+
+          if (concavePointIndices[0] !== index) {
+            //오목이가 아니면 반으로 갈라서 계산
+
+            //카라바 선의 2분할 치수를 그림
+            let halfLength = outline.length / 2
+            let centerLine1 = new QLine([outline.x1, outline.y1, outline.x1 + halfLength, outline.y1], {
+              stroke: 'red',
+              strokeWidth: 2,
+              property: 'normal',
+              fontSize: 14,
+            })
+            canvas.add(centerLine1)
+
+            let centerLine2 = new QLine([centerLine1.x2, outline.y1, centerLine1.x2 + halfLength, outline.y1], {
+              stroke: 'red',
+              strokeWidth: 2,
+              property: 'normal',
+              fontSize: 14,
+            })
+            canvas.add(centerLine2)
+            canvas.remove(outline) //기존 라인 삭제
+
+            halfHoriCenterLinePoint.push({ index: index, x1: centerLine1.x1, y1: centerLine1.y1, x2: centerLine1.x2, y2: centerLine1.y2 }) //각 카라바 라인의 1번이 마지막점을 잡아서 센터선으로 설정
+          }
+        }
+      })
+
+      //각 센터 라인을 그림
+      halfHoriCenterLinePoint.forEach((centerPoint) => {
+        let line = new QLine([centerPoint.x2, centerPoint.y1, centerPoint.x2, concaveLine.line.y1], centerLineOpt)
+        canvas.add(line)
+
+        line['arrayIndex'] = centerPoint.index //커스텀으로 기존 index를 넣어줌
+        vertCenterLine.push(line)
+      })
+
+      vertCenterLine = reSortQlineArray(vertCenterLine)
+
+      //해당라인에서 만나는점을 계산
+      vertCenterLine.forEach((vertLine) => {
+        if (parallelLinesIdx !== vertLine.arrayIndex) {
+          //평행선을 제외한 애들만 네모를 연결
+          let nearLine
+
+          if (vertLine.arrayIndex > concaveLine.index) {
+            //센터에 인덱스가 오목점 보다 크면 다음 작으면 앞에꺼
+            nearLine = outLines[concaveLine.index + 1]
+          } else {
+            nearLine = outLines[concaveLine.index - 1]
+          }
+
+          let nearLineY = nearLine.y1
+          if (parallelLinesIdx < concaveLine.index) {
+            //오목점 위치가 평행선보다 크면 위쪽으로 오목
+            nearLineY = nearLine.y2
+          }
+
+          let centerExtendLine = new QLine([vertLine.line.x1, nearLineY, nearLine.x1, nearLineY], centerLineOpt)
+          canvas.add(centerExtendLine)
+
+          let betweenCenterLine = (vertLine.line.y1 + vertLine.line.y2) / 2
+          let centerDashLine = new QLine([vertLine.line.x1, betweenCenterLine, nearLine.x1, betweenCenterLine], dashedCenterLineOpt)
+
+          canvas.add(centerDashLine)
+          horiCenterLine.push(centerDashLine)
+          shorVertCenterLine.push(vertLine) //마지막에 가운데 선을 긋기 위해 담음
+        } else {
+          let longDashLine = halfHoriCenterLinePoint.find((obj) => obj.index === parallelLinesIdx)
+
+          let dashCenterExtendLineLength = (longDashLine.x2 - longDashLine.x1) * 2
+          let betweenCenterLine = (vertLine.line.y1 + vertLine.line.y2) / 2
+
+          let centerDashLine = new QLine(
+            [longDashLine.x1, betweenCenterLine, longDashLine.x1 + dashCenterExtendLineLength, betweenCenterLine],
+            dashedCenterLineOpt,
+          )
+          canvas.add(centerDashLine)
+          horiCenterLine.push(centerDashLine)
+        }
+      })
+
+      if (parallelLinesIdx < concaveLine.index) {
+        offsetY = offsetY * -1 // 위로올린다
       }
-    })
 
-    // for (let i = 0; i < outLines.length; i++) {
+      const lastInLine = new QLine(
-    //   if (!i % 2 === 0) {
+        [shorVertCenterLine[0].x1, lines[concavePointIndices[0]].y1 + offsetY, shorVertCenterLine[1].x1, lines[concavePointIndices[0]].y2 + offsetY],
-    //     if (i === concavePointIndices[0] - 1 || i === concavePointIndices[1] + 1) {
+        centerLineOpt,
-    //       //배열 3번이나 5번일때
+      )
-    //     } else {
+      canvas.add(lastInLine)
-    //     }
+      canvas.remove(outLines[concavePointIndices[0]])
-    //   }
-    // }
-
-    let parallelLines = concavePointIndices[0] + 4 //들어간선에 무조건 평행하는 선 찾기
-    if (parallelLines > outLines.length) {
-      parallelLines = outLines[concavePointIndices[0] + 4 - outLines.length - 1]
     }
 
     canvas.renderAll()
@@ -2206,8 +2325,10 @@ export function useMode() {
     // handleOuterLineTemplateB(params)
     console.log(polygon.lines.length)
     if (polygon.lines.length === 4) {
+      console.log('4각형')
       handleTemplateBRect(params)
-    } else if (polygon.length === 6) {
+    } else if (polygon.lines.length === 6) {
+      console.log('6각형')
       handleTemplateB(params)
     }
   }
@@ -2239,6 +2360,9 @@ export function useMode() {
       isActiveLengthText: false,
     }
 
+    const bigRoofPolygon = []
+    const middleRoofPolygon = []
+
     polygon.lines.forEach((line, index) => {
       let outline
       if (index === 0) {
@@ -2249,6 +2373,9 @@ export function useMode() {
         centerLinePoint.y2 = centeredPoint
         centerDashLinePoint.y1 = line.y1 - eaves
         centerDashLinePoint.y2 = line.y2 + eaves
+        bigRoofPolygon[0] = { x: line.x1 - edge, y: line.y1 - eaves }
+        middleRoofPolygon[0] = { x: line.x1 - edge, y: centeredPoint }
+        middleRoofPolygon[1] = { x: line.x2 - edge, y: line.y2 + eaves }
       } else if (index === 1) {
         outline = new QLine([line.x1 - edge, line.y1 + eaves, line.x2 + edge, line.y2 + eaves], qlineOpt)
         const centeredPoint = getCenterPoint(line.x1, line.x2)
@@ -2257,6 +2384,8 @@ export function useMode() {
         centerDashLinePoint.x2 = centeredPoint
       } else if (index === 2) {
         outline = new QLine([line.x1 + edge, line.y1 + eaves, line.x2 + edge, line.y2 - eaves], qlineOpt)
+        bigRoofPolygon[3] = { x: line.x2 + edge, y: line.y2 - eaves }
+        middleRoofPolygon[2] = { x: line.x1 + edge, y: line.y1 + eaves }
       } else if (index === 3) {
         outline = new QLine([line.x1 + edge, line.y1 - eaves, line.x2 - edge, line.y2 - eaves], qlineOpt)
       }
@@ -2275,6 +2404,18 @@ export function useMode() {
     )
     canvas.add(centerDashLine2)
 
+    bigRoofPolygon[1] = { x: centerLine.x1, y: centerLine.y1 }
+    bigRoofPolygon[2] = { x: centerLine.x2, y: centerLine.y2 }
+
+    middleRoofPolygon[3] = { x: centerLinePoint.x2, y: centerLinePoint.y2 }
+
+    const roofPatternPolygonArray = []
+    roofPatternPolygonArray.push(bigRoofPolygon)
+    roofPatternPolygonArray.push(middleRoofPolygon)
+    if (roofPatternPolygonArray.length > 0) {
+      setRoofPolygonPattern({ roofPatternPolygonArray, lines: polygon.lines })
+    }
+
     canvas.renderAll()
   }
 
@@ -2334,6 +2475,13 @@ export function useMode() {
       fontSize: fontSize,
     }
 
+    /**
+     * 지붕 패턴을 위한 폴리곤 좌표 생성
+     */
+    const bigRoofPolygon = []
+    const middleRoofPolygon = []
+    const smallRoofPolygon = []
+
     rerangeOdd.forEach((line, index) => {
       const centeredPoint = getCenterPoint(line.y1, line.y2)
       let points1 = []
@@ -2347,26 +2495,50 @@ export function useMode() {
           centralLinePoint.y2 = centeredPoint
           centralDashLinePoint.y1 = line.y1 - eaves
           centralDashLinePoint.y2 = line.y2 + eaves
+          if (polygon.shape === 2) {
+            middleRoofPolygon[0] = { x: line.x1 - edge, y: line.y1 - eaves }
+            middleRoofPolygon[1] = { x: line.x1 - edge, y: centeredPoint }
+          } else {
+            bigRoofPolygon[1] = { x: line.x1 - edge, y: centeredPoint }
+            bigRoofPolygon[0] = { x: line.x1 - edge, y: line.y1 - eaves }
+            middleRoofPolygon[1] = { x: line.x2 - edge, y: line.y2 + eaves }
+          }
         } else if (index === 1) {
           if (polygon.shape === 2) {
             points1 = [line.x1 + edge, line.y1 - eaves, line.x1 + edge, centeredPoint]
             points2 = [line.x1 + edge, centeredPoint, line.x2 + edge, line.y2 + eaves]
             centralSubLinePoint.x2 = line.x1 + edge
             centralSubLinePoint.y2 = centeredPoint
+            bigRoofPolygon[2] = { x: line.x2 + edge, y: line.y2 + eaves }
+            bigRoofPolygon[3] = { x: line.x2 + edge, y: centeredPoint }
+            smallRoofPolygon[0] = { x: line.x1 + edge, y: centeredPoint }
+            smallRoofPolygon[1] = { x: line.x1 + edge, y: line.y1 - eaves }
           } else {
             points1 = [line.x1 + edge, getCenterPoint(rerangeOdd[2].y1, rerangeOdd[2].y2), line.x2 + edge, line.y2 + eaves]
             points2 = [line.x1, getCenterPoint(rerangeOdd[2].y1, rerangeOdd[2].y2), line.x1, line.y1 + eaves]
             centralLinePoint.x2 = line.x1 + edge
             centralSubLinePoint.y1 = getCenterPoint(rerangeOdd[2].y1, rerangeOdd[2].y2)
             centralSubLinePoint.y2 = getCenterPoint(rerangeOdd[2].y1, rerangeOdd[2].y2)
+            bigRoofPolygon[3] = { x: line.x1 + edge, y: centralSubLinePoint.y1 }
+            middleRoofPolygon[2] = { x: line.x2 + edge, y: line.y2 + eaves }
+            smallRoofPolygon[0] = { x: line.x1, y: centralSubLinePoint.y1 }
+            smallRoofPolygon[1] = { x: line.x1, y: line.y1 + eaves }
           }
         } else if (index === 2) {
           if (polygon.shape === 2) {
             points1 = [line.x1 + edge, line.y1 - eaves, line.x2 + edge, centralSubLinePoint.y2]
             points2 = [line.x2, line.y2 - eaves, line.x2, centralSubLinePoint.y2]
+            bigRoofPolygon[4] = { x: line.x2 + edge, y: centralSubLinePoint.y2 }
+            middleRoofPolygon[3] = { x: line.x1 + edge, y: line.y1 - eaves }
+            smallRoofPolygon[2] = { x: line.x2, y: line.y2 - eaves }
+            smallRoofPolygon[3] = { x: line.x2, y: centralSubLinePoint.y2 }
           } else {
             points1 = [line.x1 + edge, line.y1 - eaves, line.x2 + edge, centeredPoint]
             points2 = [line.x2 + edge, centeredPoint, line.x2 + edge, line.y2 + eaves]
+            bigRoofPolygon[4] = { x: line.x1 + edge, y: centralSubLinePoint.y2 }
+            bigRoofPolygon[5] = { x: line.x1 + edge, y: line.y1 - eaves }
+            smallRoofPolygon[2] = { x: line.x2 + edge, y: line.y2 + eaves }
+            smallRoofPolygon[3] = { x: line.x2 + edge, y: centeredPoint }
           }
         }
       } else {
@@ -2375,12 +2547,26 @@ export function useMode() {
           centralSubLinePoint.x1 = line.x1 - edge
           centralSubLinePoint.y1 = getCenterPoint(line.y1, line.y2)
           centralSubLinePoint.y2 = getCenterPoint(line.y1, line.y2)
+          if (polygon.shape === 1) {
+            bigRoofPolygon[0] = { x: line.x1 - edge, y: line.y1 - eaves }
+            bigRoofPolygon[1] = { x: line.x1 - edge, y: getCenterPoint(line.y1, line.y2) }
+            smallRoofPolygon[0] = { x: line.x1 - edge, y: getCenterPoint(line.y1, line.y2) }
+            smallRoofPolygon[1] = { x: line.x2 - edge, y: line.y2 + eaves }
+          } else {
+            bigRoofPolygon[0] = { x: line.x1 - edge, y: centeredPoint }
+            bigRoofPolygon[1] = { x: line.x1 - edge, y: line.y2 + eaves }
+            smallRoofPolygon[0] = { x: line.x1 - edge, y: line.y1 - eaves }
+            smallRoofPolygon[1] = { x: centralSubLinePoint.x1, y: centralSubLinePoint.y1 }
+          }
         } else if (index === 1) {
           if (polygon.shape === 1) {
             points1 = [line.x1 - edge, centralSubLinePoint.y1, line.x2 - edge, line.y2 + eaves]
             points2 = [line.x1, centralSubLinePoint.y1, line.x1, line.y1 + eaves]
             centralLinePoint.x1 = line.x1 - edge
             centralSubLinePoint.x2 = line.x2
+            bigRoofPolygon[2] = { x: line.x1 - edge, y: centralSubLinePoint.y2 }
+            middleRoofPolygon[1] = { x: line.x2 - edge, y: line.y2 + eaves }
+            smallRoofPolygon[2] = { x: line.x1, y: line.y1 + eaves }
           } else {
             points1 = [line.x1 + edge, line.y1 - eaves, line.x2 + edge, centeredPoint]
             points2 = [line.x2 + edge, centeredPoint, line.x2 + edge, line.y2 + eaves]
@@ -2389,6 +2575,9 @@ export function useMode() {
             centralLinePoint.y2 = centeredPoint
             centralDashLinePoint.y1 = line.y1 - eaves
             centralDashLinePoint.y2 = line.y2 + eaves
+            bigRoofPolygon[2] = { x: line.x2 + edge, y: line.y2 + eaves }
+            bigRoofPolygon[3] = { x: line.x2 + edge, y: centralLinePoint.y2 }
+            middleRoofPolygon[3] = { x: line.x1 + edge, y: line.y1 - eaves }
           }
         } else {
           if (polygon.shape === 1) {
@@ -2399,11 +2588,18 @@ export function useMode() {
             centralLinePoint.y2 = centeredPoint
             centralDashLinePoint.y1 = line.y1 - eaves
             centralDashLinePoint.y2 = line.y2 + eaves
+            bigRoofPolygon[5] = { x: line.x1 + edge, y: line.y1 - eaves }
+            middleRoofPolygon[2] = { x: line.x2 + edge, y: line.y2 + eaves }
           } else {
             points1 = [line.x1 - edge, line.y1 - eaves, line.x2 - edge, centralSubLinePoint.y1]
             points2 = [line.x2, line.y2 - eaves, line.x2, centralSubLinePoint.y2]
             centralLinePoint.x1 = line.x1 - edge
             centralSubLinePoint.x2 = line.x2
+            bigRoofPolygon[4] = { x: line.x2 - edge, y: centralLinePoint.y1 }
+            bigRoofPolygon[5] = { x: line.x2 - edge, y: centralSubLinePoint.y2 }
+            middleRoofPolygon[0] = { x: line.x1 - edge, y: line.y1 - eaves }
+            smallRoofPolygon[2] = { x: line.x2, y: centralSubLinePoint.y2 }
+            smallRoofPolygon[3] = { x: line.x2, y: line.y2 - eaves }
           }
         }
       }
@@ -2529,6 +2725,34 @@ export function useMode() {
     )
     canvas.add(centralSubDashLine)
 
+    if (polygon.shape === 1) {
+      bigRoofPolygon[3] = { x: centralLine.x1, y: centralLine.y1 }
+      bigRoofPolygon[4] = { x: centralLine.x2, y: centralLine.y2 }
+      middleRoofPolygon[0] = { x: centralLine.x1, y: centralLine.y1 }
+      middleRoofPolygon[3] = { x: centralLine.x2, y: centralLine.y2 }
+      smallRoofPolygon[3] = { x: centralSubLinePoint.x2, y: centralSubLinePoint.y2 }
+    } else if (polygon.shape === 2) {
+      bigRoofPolygon[0] = { x: centralLinePoint.x1, y: centralLinePoint.y1 }
+      bigRoofPolygon[1] = { x: centralLinePoint.x1, y: centralDashLinePoint.y2 }
+      bigRoofPolygon[5] = { x: centralLinePoint.x2, y: centralLinePoint.y2 }
+      middleRoofPolygon[2] = { x: centralLine.x2, y: centralLine.y2 }
+    } else if (polygon.shape === 3) {
+      bigRoofPolygon[2] = { x: centralLine.x2, y: centralLine.y2 }
+      middleRoofPolygon[0] = { x: centralLine.x1, y: centralLine.y1 }
+      middleRoofPolygon[3] = { x: centralLine.x2, y: centralLine.y2 }
+    } else if (polygon.shape === 4) {
+      middleRoofPolygon[1] = { x: centralLine.x1, y: centralLine.y1 }
+      middleRoofPolygon[2] = { x: centralLine.x2, y: centralLine.y2 }
+    }
+
+    const roofPatternPolygonArray = []
+    // if (bigRoofPolygon.length > 0 && middleRoofPolygon.length > 0 && smallRoofPolygon.length > 0) {
+    roofPatternPolygonArray.push(bigRoofPolygon)
+    roofPatternPolygonArray.push(middleRoofPolygon)
+    roofPatternPolygonArray.push(smallRoofPolygon)
+    setRoofPolygonPattern({ roofPatternPolygonArray, lines: polygon.lines })
+    // }
+
     canvas.renderAll()
   }
 
@@ -2611,6 +2835,8 @@ export function useMode() {
   }
 
   const makeRoofPatternPolygon = (roofStyle) => {
+    console.log('roofPolygonPattern', roofPolygonPattern)
+
     if (Object.keys(roofPolygonPattern).length === 0 && roofPolygonPattern.constructor === Object) {
       alert('객체가 비어있습니다.')
       return
@@ -2660,21 +2886,12 @@ export function useMode() {
       fontSize: 15, // fontSize는 필요에 따라 조정
     }
 
-    const bigRoof = new QPolygon(roofPolygonPattern.bigRoofPolygon, commonOption)
+    roofPolygonPattern.roofPatternPolygonArray.forEach((patternPolygon, index) => {
-    const middleRoof = new QPolygon(roofPolygonPattern.middleRoofPolygon, commonOption)
+      const drawPolygon = new QPolygon(patternPolygon, commonOption)
-    const smallRoof = new QPolygon(roofPolygonPattern.smallRoofPolygon, commonOption)
+      drawPolygon.setViewLengthText(false)
-
+      drawPolygon.sendToBack()
-    bigRoof.setViewLengthText(false) //치수 필요없음
+      canvas.add(drawPolygon)
-    middleRoof.setViewLengthText(false)
+    })
-    smallRoof.setViewLengthText(false)
-
-    bigRoof.sendToBack() //객체를 가장 뒤로
-    middleRoof.sendToBack()
-    smallRoof.sendToBack()
-
-    canvas.add(bigRoof) //캔버스 객체 추가
-    canvas.add(middleRoof)
-    canvas.add(smallRoof)
     canvas.renderAll()
   }