diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js
index 033b0a7f..1ee98028 100644
--- a/src/hooks/useMode.js
+++ b/src/hooks/useMode.js
@@ -2226,6 +2226,7 @@ export function useMode() {
     let edgeIndexArray = []
 
     if (concavePointIndices[0] % 2 === 0) {
+      //concave가 짝수면 좌우로 그려진 ㄷ자
       //케라바 색을 바꾼다
       lines.forEach((line, index) => {
         if (index % 2 === 0) {
@@ -2236,8 +2237,6 @@ export function useMode() {
         }
       })
 
-      console.log('edgeIndexArray', edgeIndexArray)
-
       outLines = reSortQlineArray(outLines)
       edgeIndexArray.forEach((idx, index) => {
         //가로라인이 케라바 라인임
@@ -2257,8 +2256,6 @@ export function useMode() {
         }
       })
 
-      console.log('halfHoriCenterLinePoint', halfHoriCenterLinePoint)
-
       // //각 센터 라인을 그림
       halfHoriCenterLinePoint.forEach((centerPoint) => {
         let tmpX2 = parallelLinesIdx !== centerPoint.index ? concaveLine.line.x2 : outLines[concavePointIndices[0]].x1 //평행선에서 내려오는 선은 아웃라인에 닿아야한다
@@ -2273,8 +2270,6 @@ export function useMode() {
       vertCenterLine = reSortQlineArray(vertCenterLine)
       lines = reSortQlineArray(lines)
 
-      console.log('parallelLinesIdx', parallelLinesIdx)
-
       //해당라인에서 만나는점을 계산
       vertCenterLine.forEach((vertLine) => {
         if (parallelLinesIdx !== vertLine.arrayIndex) {
@@ -2302,118 +2297,136 @@ export function useMode() {
           canvas.remove(nearOutline)
           outLines.splice(nearOutline.idx, 1, centerExtendHoriLine) //아웃라인에 데이터를 다시 넣는다
 
-          let centerExtendLine = new QLine([vertLine.line.x2, vertLine.line.y2, centerExtendHoriLine.x2, centerExtendHoriLine.y2], centerLineOpt)
+          //가로형에선 기본으로 ㄷ자 형태로 한다
+          let centerExtendLine = new QLine([vertLine.line.x1, vertLine.line.y1, centerExtendHoriLine.x1, centerExtendHoriLine.y1], centerLineOpt)
+
+          //오목이가 배열에 반보다 작으면 역 ㄷ자 여서 변경
+          if (concavePointIndices[0] < outLines.length / 2) {
+            centerExtendLine = new QLine([vertLine.line.x2, vertLine.line.y2, centerExtendHoriLine.x2, centerExtendHoriLine.y2], centerLineOpt)
+          }
+
           canvas.add(centerExtendLine) //새로그리고
 
           let betweenCenterLine = (vertLine.line.x1 + vertLine.line.x2) / 2
-          let centerDashLine = new QLine([vertLine.line.y1, betweenCenterLine, nearOutline.y1, betweenCenterLine], dashedCenterLineOpt)
+          let centerDashLine = new QLine([betweenCenterLine, centerExtendLine.y1, betweenCenterLine, centerExtendLine.y2], dashedCenterLineOpt)
 
           canvas.add(centerDashLine)
           horiCenterLine.push(centerDashLine)
           shorVertCenterLine.push(vertLine) //마지막에 가운데 선을 긋기 위해 담음
         } else {
-          let longDashLine = halfHoriCenterLinePoint.find((obj) => obj.index === parallelLinesIdx)
+          let longDashLine = halfHoriCenterLinePoint.find((obj) => obj.index === parallelLinesIdx) //평행선
 
-          let dashCenterExtendLineLength = longDashLine.x2 - longDashLine.x1
-          let betweenCenterLine = (vertLine.line.y1 + vertLine.line.y2) / 2
-          let totalLength = ((longDashLine.x2 - longDashLine.x1) * 2) / dashCenterExtendLineLength
+          let dashCenterExtendLineLength = longDashLine.y2 - longDashLine.y1 //y반개 길이
+          let betweenCenterLine = (vertLine.line.x1 + vertLine.line.x2) / 2 //y의 길이
+          let totalLength = ((longDashLine.y2 - longDashLine.y1) * 2) / dashCenterExtendLineLength //2개로 나눔
 
           //반 쪼개서 그린다
           for (let i = 0; i < totalLength; i++) {
-            let startX = i === 0 ? longDashLine.x1 : longDashLine.x1 + dashCenterExtendLineLength
-            let centerDashLine = new QLine([startX, betweenCenterLine, startX + dashCenterExtendLineLength, betweenCenterLine], dashedCenterLineOpt)
+            //2번에 나눠서
+            let startY = i === 0 ? longDashLine.y1 : longDashLine.y1 + dashCenterExtendLineLength //시작 하는 y의 좌표
+            //x값은 고정이임 //TODO: 지붕 각도 계산법에 의해 재계산해야함
+            let centerDashLine = new QLine([betweenCenterLine, startY, betweenCenterLine, startY + dashCenterExtendLineLength], dashedCenterLineOpt)
             canvas.add(centerDashLine)
             horiCenterLine.push(centerDashLine)
           }
         }
       })
 
-      // //마지막에 오목한 외곽선을 연장한다
-      // const tmpLastOutLine = outLines[concavePointIndices[0]]
-      // const lastOutLine = new QLine([shorVertCenterLine[0].x1, tmpLastOutLine.y1, shorVertCenterLine[1].x1, tmpLastOutLine.y2], centerLineOpt)
-      // canvas.add(lastOutLine)
-      // canvas.remove(tmpLastOutLine)
+      //마지막에 오목한 외곽선을 연장한다
+      const tmpLastOutLine = outLines[concavePointIndices[0]]
+      const lastOutLine = new QLine([tmpLastOutLine.x1, shorVertCenterLine[0].y1, tmpLastOutLine.x1, shorVertCenterLine[1].y1], centerLineOpt)
+      canvas.add(lastOutLine)
+      canvas.remove(tmpLastOutLine)
 
-      // let tmpVertCenterLine = outLines.filter((x, index) => index % 2 === 0) //세로만 찾음
-      // tmpVertCenterLine = tmpVertCenterLine.concat(vertCenterLine)
-      // tmpVertCenterLine.sort((a, b) => a.x1 - b.x1)
-      // tmpVertCenterLine.push(lastOutLine)
+      //폴리곤 패턴을 그리기 위해 작성
+      let tmpVertCenterLine = outLines.filter((x, index) => index % 2 !== 0) //세로만 찾음
+      tmpVertCenterLine = tmpVertCenterLine.concat(vertCenterLine)
+      tmpVertCenterLine.sort((a, b) => a.y1 - b.y1)
+      tmpVertCenterLine.push(lastOutLine)
 
-      // let roofPatternPolygonArray = []
-      // let tmpArray = []
-      // let tmpBigArray = []
+      let roofPatternPolygonArray = []
+      let tmpArray = []
+      let tmpBigArray = []
 
-      // const lastCenterLine = tmpVertCenterLine[tmpVertCenterLine.length - 1] //마지막 센터라인을 정의
+      console.log('tmpVertCenterLine', tmpVertCenterLine)
 
-      // for (let i = 0; i < tmpVertCenterLine.length - 1; i++) {
-      //   //-1인건 마지막은 오목한 선이라 돌 필요 없음
-      //   //라인 하나에 두점씩 나온다
-      //   let firstPointObj = {}
-      //   let secondPointObj = {}
+      const lastCenterLine = tmpVertCenterLine[tmpVertCenterLine.length - 1] //마지막 센터라인을 정의
 
-      //   let x1 = tmpVertCenterLine[i].x1
-      //   let y1 = tmpVertCenterLine[i].y1
-      //   let x2 = tmpVertCenterLine[i].x2
-      //   let y2 = tmpVertCenterLine[i].y2
+      for (let i = 0; i < tmpVertCenterLine.length - 1; i++) {
+        //-1인건 마지막은 오목한 선이라 돌 필요 없음
+        //라인 하나에 두점씩 나온다
+        let firstPointObj = {}
+        let secondPointObj = {}
 
-      //   if (i === 2 || i === 4) {
-      //     tmpArray = []
-      //     const prevLine = tmpVertCenterLine[i - 1] //뒤에서 앞라인을 찾는다
-      //     const nextLine = tmpVertCenterLine[i + 1]
+        let x1 = tmpVertCenterLine[i].x1
+        let y1 = tmpVertCenterLine[i].y1
+        let x2 = tmpVertCenterLine[i].x2
+        let y2 = tmpVertCenterLine[i].y2
 
-      //     //내 앞뒤 라인
-      //     const tmpX1 = i === 2 ? prevLine.x1 : nextLine.x1
-      //     const tmpY1 = i === 2 ? prevLine.y1 : nextLine.y1
-      //     const tmpX2 = i === 2 ? prevLine.x2 : nextLine.x2
-      //     const tmpY2 = i === 2 ? prevLine.y2 : nextLine.y2
+        if (i === 2 || i === 4) {
+          //작은 네모들
+          tmpArray = []
+          const prevLine = tmpVertCenterLine[i - 1] //뒤에서 앞라인을 찾는다
+          const nextLine = tmpVertCenterLine[i + 1]
 
-      //     firstPointObj = { x: tmpX1, y: tmpY1 }
-      //     secondPointObj = { x: tmpX2, y: tmpY2 }
-      //     tmpArray.push(firstPointObj)
-      //     tmpArray.push(secondPointObj)
+          //내 앞뒤 라인
+          const tmpX1 = i === 2 ? prevLine.x1 : nextLine.x1
+          const tmpY1 = i === 2 ? prevLine.y1 : nextLine.y1
+          const tmpX2 = i === 2 ? prevLine.x2 : nextLine.x2
+          const tmpY2 = i === 2 ? prevLine.y2 : nextLine.y2
 
-      //     //현재 내 선
-      //     firstPointObj = { x: x1, y: y1 }
-      //     secondPointObj = { x: x2, y: y2 }
-      //     tmpArray.push(firstPointObj)
-      //     tmpArray.push(secondPointObj)
-      //     roofPatternPolygonArray.push(tmpArray)
-      //   } else {
-      //     if (i === 1 || i === 5) {
-      //       // 큰 폴리곤은 가운데 선으로 되야됨
-      //       if (outLines.length / 2 < concavePointIndices[0]) {
-      //         //오목이가 배열 전체보다 크면 위쪽 방향
-      //         x2 = i === 1 ? lastCenterLine.x2 : lastCenterLine.x1
-      //         y2 = i === 1 ? lastCenterLine.y2 : lastCenterLine.y1
-      //       } else {
-      //         x1 = i === 1 ? lastCenterLine.x1 : lastCenterLine.x2
-      //         y1 = i === 1 ? lastCenterLine.y1 : lastCenterLine.y2
-      //       }
-      //     }
+          firstPointObj = { x: tmpX1, y: tmpY1 }
+          secondPointObj = { x: tmpX2, y: tmpY2 }
+          tmpArray.push(firstPointObj)
+          tmpArray.push(secondPointObj)
 
-      //     if (i === 5) {
-      //       //5번일때는 앞에 3번에 선이 필요하다
-      //       let prevX1 = tmpVertCenterLine[i - 2].x1
-      //       let prevY1 = tmpVertCenterLine[i - 2].y1
-      //       let prevX2 = tmpVertCenterLine[i - 2].x2
-      //       let prevY2 = tmpVertCenterLine[i - 2].y2
-      //       firstPointObj = { x: prevX1, y: prevY1 }
-      //       secondPointObj = { x: prevX2, y: prevY2 }
-      //       tmpBigArray.push(firstPointObj)
-      //       tmpBigArray.push(secondPointObj)
-      //     }
+          //현재 내 선
+          firstPointObj = { x: x1, y: y1 }
+          secondPointObj = { x: x2, y: y2 }
+          tmpArray.push(firstPointObj)
+          tmpArray.push(secondPointObj)
+          roofPatternPolygonArray.push(tmpArray)
+        } else {
+          //큰 육각
+          if (i === 1 || i === 5) {
+            // 큰 폴리곤은 가운데 선으로 되야됨
+            if (outLines.length / 2 > concavePointIndices[0]) {
+              x2 = i === 1 ? lastCenterLine.x1 : lastCenterLine.x2
+              y2 = i === 1 ? lastCenterLine.y1 : lastCenterLine.y2
+            } else {
+              //오목이가 배열 전체보다 크면 오른쪽 오목이
+              x1 = i === 1 ? lastCenterLine.x1 : lastCenterLine.x2
+              y1 = i === 1 ? lastCenterLine.y2 : lastCenterLine.y1
+            }
+          }
 
-      //     firstPointObj = { x: x1, y: y1 }
-      //     secondPointObj = { x: x2, y: y2 }
-      //     tmpBigArray.push(firstPointObj)
-      //     tmpBigArray.push(secondPointObj)
+          if (i === 5) {
+            //5번일때는 앞에 3번에 선이 필요하다
+            let prevX1 = tmpVertCenterLine[i - 2].x1
+            let prevY1 = tmpVertCenterLine[i - 2].y1
+            let prevX2 = tmpVertCenterLine[i - 2].x2
+            let prevY2 = tmpVertCenterLine[i - 2].y2
+            firstPointObj = { x: prevX1, y: prevY1 }
+            secondPointObj = { x: prevX2, y: prevY2 }
+            tmpBigArray.push(firstPointObj)
+            tmpBigArray.push(secondPointObj)
+          }
 
-      //     if (i === 3 || i === 6) {
-      //       roofPatternPolygonArray.push(tmpBigArray)
-      //       tmpBigArray = []
-      //     }
-      //   }
-      // }
+          firstPointObj = { x: x1, y: y1 }
+          secondPointObj = { x: x2, y: y2 }
+          tmpBigArray.push(firstPointObj)
+          tmpBigArray.push(secondPointObj)
+
+          if (i === 3 || i === 6) {
+            roofPatternPolygonArray.push(tmpBigArray)
+            tmpBigArray = []
+          }
+        }
+      }
+
+      console.log('roofPatternPolygonArray', roofPatternPolygonArray)
+
+      setRoofPolygonPattern({ roofPatternPolygonArray, lines })
     } else {
       // 오목한 부분이 세로선일때 아래ㄷ, 위ㄷ
       //라인들을 좌측에서 -> 우측으로 그리는거처럼 데이터 보정