diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx
index 8e326c7f..3cfff65c 100644
--- a/src/components/Roof2.jsx
+++ b/src/components/Roof2.jsx
@@ -39,7 +39,7 @@ import QEmptyContextMenu from '@/components/common/context-menu/QEmptyContextMen
 import InitSettingsModal from './InitSettingsModal'
 import GridSettingsModal from './GridSettingsModal'
 import { SurfaceShapeModal } from '@/components/ui/SurfaceShape'
-import { changeAllGableRoof, drawDirectionStringToArrow } from '@/util/qpolygon-utils'
+import { changeAllHipAndGableRoof, drawDirectionStringToArrow } from '@/util/qpolygon-utils'
 import ThumbnailList from '@/components/ui/ThumbnailLIst'
 import ObjectPlacement from '@/components/ui/ObjectPlacement'
 import { globalLocaleStore } from '@/store/localeAtom'
@@ -425,7 +425,7 @@ export default function Roof2(props) {
       { x: 450, y: 850 },
     ]
 
-    const polygon = new QPolygon(type1C, {
+    const polygon = new QPolygon(twelvePoint, {
       fill: 'transparent',
       stroke: 'green',
       strokeWidth: 1,
@@ -640,13 +640,14 @@ export default function Roof2(props) {
     drawDirectionStringToArrow(canvas, globalCampass)
   }
 
-  const setAllGableRoof = () => {
+  // 팔작지붕, 합각지붕
+  const setAllHipAndGableRoof = () => {
     let offset = Number(prompt('gable roof offset', '50'))
     if (!isNaN(offset) && offset > 0) {
       const polygon = canvas?.getObjects()
       console.log('gable roof offset : ', offset)
       console.log('polygon : ', polygon)
-      changeAllGableRoof(polygon, offset, canvas)
+      changeAllHipAndGableRoof(polygon, offset, canvas)
     } else {
       alert('offset 은 0 보다 커야 함')
     }
@@ -777,7 +778,7 @@ export default function Roof2(props) {
                 </Button>
               </>
             )}
-            <Button className={'m-1 p-2'} onClick={setAllGableRoof}>
+            <Button className={'m-1 p-2'} onClick={setAllHipAndGableRoof}>
               팔작지붕
             </Button>
             <Button className="m-1 p-2" onClick={() => saveImage(uuidv4(), userId, setThumbnails)}>
diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js
index 0ea0c065..465b56e5 100644
--- a/src/hooks/useMode.js
+++ b/src/hooks/useMode.js
@@ -1472,9 +1472,9 @@ export function useMode() {
    *벽 지붕 외곽선 생성 polygon을 입력받아 만들기
    */
   const handleOuterlinesTest2 = (polygon, offset = 50) => {
-    const roof = drawRoofPolygon(polygon)
+    const roof = drawRoofPolygon(polygon) //지붕 그리기
     roof.drawHelpLine()
-    roof.divideLine()
+    // roof.divideLine()
   }
 
   function inwardEdgeNormal(vertex1, vertex2) {
@@ -1640,20 +1640,21 @@ export function useMode() {
   }
 
   const drawRoofPolygon = (wall) => {
-    let walls = wall.lines
-    walls.forEach((wall, index) => {
-      if (index === walls.length - 1 || index === 3) {
-        wall.attributes = {
+    // TODO [ljyoung] : offset 입력 처리 후 제거 해야함.
+    wall.lines.forEach((line, index) => {
+      if (index === wall.lines.length - 1 || index === 3) {
+        line.attributes = {
           type: 'gable',
           offset: 30,
         }
       } else {
-        wall.attributes = {
+        line.attributes = {
           type: 'hip',
           offset: 50,
         }
       }
     })
+
     const polygon = createRoofPolygon(wall.points)
     const originPolygon = new QPolygon(wall.points, { fontSize: 0 })
     let offsetPolygon
@@ -1673,9 +1674,14 @@ export function useMode() {
       }),
     )
     roof.name = 'roofBase'
-    roof.setWall(polygon)
+    roof.setWall(wall)
+
+    roof.lines.forEach((line, index) => {
+      line.attributes = { type: wall.lines[index].attributes.type }
+    })
+
     setRoof(roof)
-    setWall(polygon)
+    setWall(wall)
 
     return roof
   }
diff --git a/src/util/qpolygon-utils.js b/src/util/qpolygon-utils.js
index a286b743..a7bcb0e2 100644
--- a/src/util/qpolygon-utils.js
+++ b/src/util/qpolygon-utils.js
@@ -1,13 +1,6 @@
 import { fabric } from 'fabric'
 import { QLine } from '@/components/fabric/QLine'
-import {
-  calculateIntersection,
-  distanceBetweenPoints,
-  findClosestPoint,
-  getAdjacent,
-  getDirectionByPoint,
-  getRoofHypotenuse,
-} from '@/util/canvas-util'
+import { calculateIntersection, distanceBetweenPoints, findClosestPoint, getDirectionByPoint } from '@/util/canvas-util'
 import { QPolygon } from '@/components/fabric/QPolygon'
 import * as turf from '@turf/turf'
 
@@ -1194,310 +1187,294 @@ function calculateAngleBetweenLines(line1, line2) {
 
   // Calculate the angle in radians and then convert to degrees
   const angleInRadians = Math.acos(cosTheta)
-  const angleInDegrees = (angleInRadians * 180) / Math.PI
 
-  return angleInDegrees
+  return (angleInRadians * 180) / Math.PI
 }
 
 export const drawHippedRoof = (polygon, chon) => {
-  drawRoofRidge(polygon, chon)
+  const hasNonParallelLines = polygon.lines.filter((line) => line.x1 !== line.x2 && line.y1 !== line.y2)
+  if (hasNonParallelLines.length > 0) {
+    alert('대각선이 존재합니다.')
+    return
+  }
+  drawRidgeRoof(polygon, chon)
   drawHips(polygon)
   connectLinePoint(polygon)
 }
 
-const drawRoofRidge = (polygon, chon) => {
+/**
+ *
+ * @param polygon
+ * @param chon
+ */
+const drawRidgeRoof = (polygon, chon) => {
   const walls = polygon.wall.lines // 외벽의 라인
   const roofs = polygon.lines // 지붕의 라인
-  let ridgeWall = []
-  walls.forEach((wall, index) => {
-    let currentRoof, prevWall, currentWall, nextWall
+  let ridgeRoof = []
 
-    if (index === 0) {
-      prevWall = walls[walls.length - 1]
-    } else {
-      prevWall = walls[index - 1]
-    }
-    currentRoof = roofs[index]
-    currentWall = walls[index]
+  roofs.forEach((currentRoof, index) => {
+    let prevRoof,
+      nextRoof,
+      currentWall = walls[index]
 
-    if (index === walls.length - 1) {
-      nextWall = walls[0]
-    } else if (index === walls.length) {
-      nextWall = walls[1]
-    } else {
-      nextWall = walls[index + 1]
-    }
+    prevRoof = index === 0 ? walls[walls.length - 1] : walls[index - 1]
+    nextRoof = index === walls.length - 1 ? walls[0] : index === walls.length ? walls[1] : walls[index + 1]
 
-    if (prevWall.direction !== nextWall.direction && currentWall.length < currentRoof.length) {
-      ridgeWall.push({ index: index, wall: currentWall, length: currentWall.length })
+    if (prevRoof.direction !== nextRoof.direction && currentWall.length <= currentRoof.length) {
+      ridgeRoof.push({ index: index, roof: currentRoof, length: currentRoof.length })
     }
   })
 
   // 지붕의 길이가 짧은 순으로 정렬
-  ridgeWall.sort((a, b) => a.length - b.length)
+  ridgeRoof.sort((a, b) => a.length - b.length)
 
-  ridgeWall.forEach((item) => {
-    if (getMaxRidge(walls.length) > polygon.ridges.length) {
+  ridgeRoof.forEach((item) => {
+    if (getMaxRidge(roofs.length) > polygon.ridges.length) {
       let index = item.index,
-        // currentRoof = roofs[index],
-        beforePrevWall,
-        prevWall,
-        currentWall = item.wall,
-        nextWall,
-        afterNextWall
+        beforePrevRoof,
+        prevRoof,
+        currentRoof = item.roof,
+        nextRoof,
+        afterNextRoof
       let startXPoint, startYPoint, endXPoint, endYPoint
 
-      if (index === 0) {
-        prevWall = walls[walls.length - 1]
-      } else {
-        prevWall = walls[index - 1]
-      }
+      prevRoof = index === 0 ? roofs[walls.length - 1] : roofs[index - 1]
+      nextRoof = index === roofs.length - 1 ? roofs[0] : index === roofs.length ? roofs[1] : roofs[index + 1]
 
-      if (index === 0) {
-        beforePrevWall = walls[roofs.length - 2]
-      } else if (index === 1) {
-        beforePrevWall = walls[roofs.length - 1]
-      } else {
-        beforePrevWall = walls[index - 2]
-      }
+      beforePrevRoof = index <= 1 ? roofs[roofs.length - 2 + index] : roofs[index - 2]
+      afterNextRoof = index >= roofs.length - 2 ? roofs[(index + 2) % roofs.length] : roofs[index + 2]
 
-      if (index === walls.length - 1) {
-        nextWall = walls[0]
-      } else if (index === walls.length) {
-        nextWall = walls[1]
-      } else {
-        nextWall = walls[index + 1]
-      }
+      const anotherRoof = roofs.filter((roof) => roof !== currentRoof && roof !== prevRoof && roof !== nextRoof)
 
-      if (index === walls.length - 2) {
-        afterNextWall = walls[0]
-      } else if (index === walls.length - 1) {
-        afterNextWall = walls[1]
-      } else if (index === walls.length) {
-        afterNextWall = walls[2]
-      } else {
-        afterNextWall = walls[index + 2]
-      }
+      let xEqualInnerLines = anotherRoof.filter((roof) => roof.x1 === roof.x2 && isInnerLine(prevRoof, currentRoof, nextRoof, roof)), //x가 같은 내부선
+        yEqualInnerLines = anotherRoof.filter((roof) => roof.y1 === roof.y2 && isInnerLine(prevRoof, currentRoof, nextRoof, roof)) //y가 같은 내부선
 
-      const anotherRoof = walls.filter((wall) => wall !== currentWall && wall !== prevWall && wall !== nextWall)
-      let acrossRoof, xEqualInnerLines, yEqualInnerLines
-      xEqualInnerLines = anotherRoof.filter((roof) => roof.x1 === roof.x2 && isInnerLine(prevWall, currentWall, nextWall, roof)) //x가 같은 내부선
-      yEqualInnerLines = anotherRoof.filter((roof) => roof.y1 === roof.y2 && isInnerLine(prevWall, currentWall, nextWall, roof)) //y가 같은 내부선
+      let ridgeBaseLength = currentRoof.length / 2, // 지붕의 기반 길이
+        ridgeMaxLength = Math.min(prevRoof.length, nextRoof.length), // 지붕의 최대 길이. 이전, 다음 벽 중 짧은 길이
+        ridgeAcrossLength = Math.max(prevRoof.length, nextRoof.length) - currentRoof.length // 맞은편 벽까지의 길이 - 지붕의 기반 길이
 
-      let ridgeBaseLength = currentWall.length / 2, // 지붕의 기반 길이
-        ridgeMaxLength = Math.min(prevWall.length, nextWall.length), // 지붕의 최대 길이. 이전, 다음 벽 중 짧은 길이
-        ridgeAcrossLength = Math.max(prevWall.length, nextWall.length) - currentWall.length // 맞은편 벽까지의 길이 - 지붕의 기반 길이
-
-      acrossRoof = anotherRoof
+      let acrossRoof = anotherRoof
         .filter((roof) => {
-          if (currentWall.direction === 'top' && roof.direction === 'bottom') {
-            if (nextWall.direction === 'right' && roof.x1 > currentWall.x1) {
-              return roof
-            }
-            if (nextWall.direction === 'left' && roof.x1 < currentWall.x1) {
+          if (roof.x1 === roof.x2) {
+            if ((nextRoof.direction === 'right' && roof.x1 > currentRoof.x1) || (nextRoof.direction === 'left' && roof.x1 < currentRoof.x1)) {
               return roof
             }
           }
-          if (currentWall.direction === 'right' && roof.direction === 'left') {
-            if (nextWall.direction === 'top' && roof.y1 < currentWall.y1) {
-              return roof
-            }
-            if (nextWall.direction === 'bottom' && roof.y1 > currentWall.y1) {
+          if (roof.y1 === roof.y2) {
+            if ((nextRoof.direction === 'top' && roof.y1 < currentRoof.y1) || (nextRoof.direction === 'bottom' && roof.y1 > currentRoof.y1)) {
               return roof
             }
           }
         })
         .reduce((prev, current) => {
-          let hasBetweenWall = false
-          if (current.direction === 'top' || current.direction === 'bottom') {
-            hasBetweenWall = walls
-              .filter((wall) => wall !== current && wall !== currentWall)
+          let hasBetweenRoof = false
+          if (current.x1 === current.x2) {
+            hasBetweenRoof = roofs
+              .filter((roof) => roof !== current && roof !== currentRoof)
               .some((line) => {
-                let currentY2 = currentWall.y2
+                let currentY2 = currentRoof.y2
                 if (yEqualInnerLines.length > 0) {
                   yEqualInnerLines.forEach((line) => {
-                    currentY2 = Math.abs(currentWall.y1 - currentY2) < Math.abs(currentWall.y1 - line.y1) ? currentY2 : line.y1
+                    currentY2 = Math.abs(currentRoof.y1 - currentY2) < Math.abs(currentRoof.y1 - line.y1) ? currentY2 : line.y1
                   })
                 }
-                const isY1Between = (line.y1 > currentWall.y1 && line.y1 < currentY2) || (line.y1 > currentY2 && line.y1 < currentWall.y1)
-                const isY2Between = (line.y2 > currentWall.y1 && line.y2 < currentY2) || (line.y2 > currentY2 && line.y2 < currentWall.y1)
-                const isX1Between = (line.x1 > currentWall.x1 && line.x1 < current.x1) || (line.x1 > currentWall.x1 && line.x1 < current.x1)
-                const isX2Between = (line.x2 > currentWall.x1 && line.x2 < current.x1) || (line.x2 > currentWall.x1 && line.x2 < current.x1)
+                const isY1Between = (line.y1 > currentRoof.y1 && line.y1 < currentY2) || (line.y1 > currentY2 && line.y1 < currentRoof.y1)
+                const isY2Between = (line.y2 > currentRoof.y1 && line.y2 < currentY2) || (line.y2 > currentY2 && line.y2 < currentRoof.y1)
+                const isX1Between = (line.x1 > currentRoof.x1 && line.x1 < current.x1) || (line.x1 > currentRoof.x1 && line.x1 < current.x1)
+                const isX2Between = (line.x2 > currentRoof.x1 && line.x2 < current.x1) || (line.x2 > currentRoof.x1 && line.x2 < current.x1)
                 return isY1Between && isY2Between && isX1Between && isX2Between
               })
           }
-          if (current.direction === 'right' || current.direction === 'left') {
-            hasBetweenWall = walls
-              .filter((wall) => wall !== current && wall !== currentWall)
+          if (current.y1 === current.y2) {
+            hasBetweenRoof = walls
+              .filter((roof) => roof !== current && roof !== currentRoof)
               .some((line) => {
-                let currentX2 = currentWall.x2
+                let currentX2 = currentRoof.x2
                 if (xEqualInnerLines.length > 0) {
                   xEqualInnerLines.forEach((line) => {
-                    currentX2 = Math.abs(currentWall.x1 - currentX2) < Math.abs(currentWall.x1 - line.x1) ? currentX2 : line.x1
+                    currentX2 = Math.abs(currentRoof.x1 - currentX2) < Math.abs(currentRoof.x1 - line.x1) ? currentX2 : line.x1
                   })
                 }
-                const isX1Between = (line.x1 > currentWall.x1 && line.x1 < currentX2) || (line.x1 > currentX2 && line.x1 < currentWall.x1)
-                const isX2Between = (line.x2 > currentWall.x1 && line.x2 < currentX2) || (line.x2 > currentX2 && line.x2 < currentWall.x1)
-                const isY1Between = (line.y1 > currentWall.y1 && line.y1 < current.y1) || (line.y1 > currentWall.y1 && line.y1 < current.y1)
-                const isY2Between = (line.y2 > currentWall.y1 && line.y2 < current.y1) || (line.y2 > currentWall.y1 && line.y2 < current.y1)
+                const isX1Between = (line.x1 > currentRoof.x1 && line.x1 < currentX2) || (line.x1 > currentX2 && line.x1 < currentRoof.x1)
+                const isX2Between = (line.x2 > currentRoof.x1 && line.x2 < currentX2) || (line.x2 > currentX2 && line.x2 < currentRoof.x1)
+                const isY1Between = (line.y1 > currentRoof.y1 && line.y1 < current.y1) || (line.y1 > currentRoof.y1 && line.y1 < current.y1)
+                const isY2Between = (line.y2 > currentRoof.y1 && line.y2 < current.y1) || (line.y2 > currentRoof.y1 && line.y2 < current.y1)
 
                 return isX1Between && isX2Between && isY1Between && isY2Between
               })
           }
+
           if (prev !== undefined) {
-            if (currentWall.direction === 'top' || currentWall.direction === 'bottom') {
-              return Math.abs(currentWall.y1 - prev.y1) > Math.abs(currentWall.y1 - current.y1) ? prev : current
+            if (currentRoof.x1 === currentRoof.x2) {
+              return Math.abs(currentRoof.y1 - prev.y1) > Math.abs(currentRoof.y1 - current.y1) ? prev : current
             }
-            if (currentWall.direction === 'right' || currentWall.direction === 'left') {
-              return Math.abs(currentWall.x1 - prev.x1) > Math.abs(currentWall.x1 - current.x1) ? prev : current
+            if (currentRoof.y1 === currentRoof.y2) {
+              return Math.abs(currentRoof.x1 - prev.x1) > Math.abs(currentRoof.x1 - current.x1) ? prev : current
             }
           } else {
-            if (!hasBetweenWall) {
-              return current
+            if (!hasBetweenRoof) {
+              if (currentRoof.x1 === currentRoof.x2) {
+                return Math.sign(currentRoof.y1 - currentRoof.y2) !== Math.sign(current.y1 - current.y2) ? current : undefined
+              }
+              if (currentRoof.y1 === currentRoof.y2) {
+                return Math.sign(currentRoof.x1 - currentRoof.x2) !== Math.sign(current.x1 - current.x2) ? current : undefined
+              }
+              return undefined
             } else {
               return undefined
             }
           }
         }, undefined)
+
       if (acrossRoof !== undefined) {
-        if (currentWall.direction === 'top' || currentWall.direction === 'bottom') {
-          if (ridgeAcrossLength < Math.abs(currentWall.x1 - acrossRoof.x1)) {
-            ridgeAcrossLength = Math.abs(currentWall.x1 - acrossRoof.x1) - currentWall.length
+        if (currentRoof.x1 === currentRoof.x2) {
+          if (ridgeAcrossLength < Math.abs(currentRoof.x1 - acrossRoof.x1)) {
+            ridgeAcrossLength = Math.abs(currentRoof.x1 - acrossRoof.x1) - currentRoof.length
           }
         }
-        if (currentWall.direction === 'right' || currentWall.direction === 'left') {
-          if (ridgeAcrossLength < Math.abs(currentWall.y1 - acrossRoof.y1)) {
-            ridgeAcrossLength = Math.abs(currentWall.y1 - acrossRoof.y1) - currentWall.length
+        if (currentRoof.y1 === currentRoof.y2) {
+          if (ridgeAcrossLength < Math.abs(currentRoof.y1 - acrossRoof.y1)) {
+            ridgeAcrossLength = Math.abs(currentRoof.y1 - acrossRoof.y1) - currentRoof.length
           }
         }
       }
 
       if (ridgeBaseLength > 0 && ridgeMaxLength > 0 && ridgeAcrossLength > 0) {
         let ridgeLength = Math.min(ridgeMaxLength, ridgeAcrossLength)
-        if (currentWall.direction === 'top' || currentWall.direction === 'bottom') {
-          startXPoint = currentWall.x1 + (nextWall.direction === 'right' ? 1 : -1) * ridgeBaseLength
-          startYPoint = currentWall.y1 + (currentWall.direction === 'top' ? -1 : 1) * ridgeBaseLength
-          endXPoint = startXPoint + (nextWall.direction === 'right' ? 1 : -1) * ridgeLength
+        if (currentRoof.x1 === currentRoof.x2) {
+          startXPoint = currentRoof.x1 + (nextRoof.direction === 'right' ? 1 : -1) * ridgeBaseLength
+          startYPoint = currentRoof.y1 + (currentRoof.direction === 'top' ? -1 : 1) * ridgeBaseLength
+          endXPoint = startXPoint + (nextRoof.direction === 'right' ? 1 : -1) * ridgeLength
           endYPoint = startYPoint
           let adjustY
-          if (currentWall.direction === 'top') {
-            if (afterNextWall.direction === 'bottom' && beforePrevWall.direction === 'bottom') {
+          if (currentRoof.direction === 'top') {
+            if (afterNextRoof.direction === 'bottom' && beforePrevRoof.direction === 'bottom') {
               adjustY =
-                Math.abs(currentWall.x1 - afterNextWall.x1) < Math.abs(currentWall.x1 - beforePrevWall.x1) ? afterNextWall.y2 : beforePrevWall.y1
-            } else if (afterNextWall.direction === 'bottom' && afterNextWall.y2 > currentWall.y2 && afterNextWall.y2 < currentWall.y1) {
-              adjustY = afterNextWall.y2
-            } else if (beforePrevWall.direction === 'bottom' && beforePrevWall.y1 > currentWall.y2 && beforePrevWall.y1 < currentWall.y1) {
-              adjustY = beforePrevWall.y1
+                Math.abs(currentRoof.x1 - afterNextRoof.x1) < Math.abs(currentRoof.x1 - beforePrevRoof.x1) ? afterNextRoof.y2 : beforePrevRoof.y1
+            } else if (afterNextRoof.direction === 'bottom' && afterNextRoof.y2 > currentRoof.y2 && afterNextRoof.y2 < currentRoof.y1) {
+              adjustY = afterNextRoof.y2
+            } else if (beforePrevRoof.direction === 'bottom' && beforePrevRoof.y1 > currentRoof.y2 && beforePrevRoof.y1 < currentRoof.y1) {
+              adjustY = beforePrevRoof.y1
             }
             if (adjustY) {
-              startYPoint = currentWall.y1 - Math.abs(currentWall.y1 - adjustY) / 2
+              startYPoint = currentRoof.y1 - Math.abs(currentRoof.y1 - adjustY) / 2
               endYPoint = startYPoint
             }
           }
-          if (currentWall.direction === 'bottom') {
-            if (afterNextWall.direction === 'top' && beforePrevWall.direction === 'top') {
+          if (currentRoof.direction === 'bottom') {
+            if (afterNextRoof.direction === 'top' && beforePrevRoof.direction === 'top') {
               adjustY =
-                Math.abs(currentWall.x1 - afterNextWall.x1) < Math.abs(currentWall.x1 - beforePrevWall.x1) ? afterNextWall.y2 : beforePrevWall.y1
-            } else if (afterNextWall.direction === 'top' && afterNextWall.y2 < currentWall.y2 && afterNextWall.y2 > currentWall.y1) {
-              adjustY = afterNextWall.y2
-            } else if (beforePrevWall.direction === 'top' && beforePrevWall.y1 < currentWall.y2 && beforePrevWall.y1 > currentWall.y1) {
-              adjustY = beforePrevWall.y1
+                Math.abs(currentRoof.x1 - afterNextRoof.x1) < Math.abs(currentRoof.x1 - beforePrevRoof.x1) ? afterNextRoof.y2 : beforePrevRoof.y1
+            } else if (afterNextRoof.direction === 'top' && afterNextRoof.y2 < currentRoof.y2 && afterNextRoof.y2 > currentRoof.y1) {
+              adjustY = afterNextRoof.y2
+            } else if (beforePrevRoof.direction === 'top' && beforePrevRoof.y1 < currentRoof.y2 && beforePrevRoof.y1 > currentRoof.y1) {
+              adjustY = beforePrevRoof.y1
             }
             if (adjustY) {
-              startYPoint = currentWall.y1 + Math.abs(currentWall.y1 - adjustY) / 2
+              startYPoint = currentRoof.y1 + Math.abs(currentRoof.y1 - adjustY) / 2
               endYPoint = startYPoint
             }
           }
           if (yEqualInnerLines.length > 0) {
             yEqualInnerLines.reduce((prev, current) => {
               if (prev !== undefined) {
-                return Math.abs(currentWall.y1 - prev.y1) < Math.abs(currentWall.y1 - current.y1) ? prev : current
+                return Math.abs(currentRoof.y1 - prev.y1) < Math.abs(currentRoof.y1 - current.y1) ? prev : current
               } else {
                 return current
               }
             }, undefined)
             startYPoint =
-              Math.abs(currentWall.y1 - startYPoint) * 2 <= Math.abs(currentWall.y1 - yEqualInnerLines[0].y1)
+              Math.abs(currentRoof.y1 - startYPoint) * 2 <= Math.abs(currentRoof.y1 - yEqualInnerLines[0].y1)
                 ? startYPoint
-                : Math.abs(currentWall.y1 - yEqualInnerLines[0].y1)
+                : Math.abs(currentRoof.y1 - yEqualInnerLines[0].y1)
             endYPoint = startYPoint
-            ridgeAcrossLength = Math.max(prevWall.length, nextWall.length) - Math.abs(currentWall.y1 - startYPoint) * 2
+            ridgeAcrossLength = Math.max(prevRoof.length, nextRoof.length) - Math.abs(currentRoof.y1 - startYPoint) * 2
             if (
               //yEqualInnerLines 이 다음 벽보다 안쪽에 있을때
-              Math.abs(currentWall.y1 - yEqualInnerLines[0].y1) <= Math.abs(currentWall.y1 - nextWall.y1) &&
-              Math.abs(currentWall.x1 - yEqualInnerLines[0].x2) >= Math.abs(currentWall.x1 - nextWall.x2)
+              Math.abs(currentRoof.y1 - yEqualInnerLines[0].y1) <= Math.abs(currentRoof.y1 - nextRoof.y1) &&
+              Math.abs(currentRoof.x1 - yEqualInnerLines[0].x2) >= Math.abs(currentRoof.x1 - nextRoof.x2)
             ) {
-              ridgeMaxLength = Math.abs(currentWall.x1 - yEqualInnerLines[0].x2)
+              ridgeMaxLength = Math.abs(currentRoof.x1 - yEqualInnerLines[0].x2)
             }
             ridgeLength = Math.min(ridgeMaxLength, ridgeAcrossLength)
-            startXPoint = currentWall.x1 + (nextWall.direction === 'right' ? 1 : -1) * Math.abs(currentWall.y1 - startYPoint)
-            endXPoint = startXPoint + (nextWall.direction === 'right' ? 1 : -1) * ridgeLength
+            startXPoint = currentRoof.x1 + (nextRoof.direction === 'right' ? 1 : -1) * Math.abs(currentRoof.y1 - startYPoint)
+            endXPoint = startXPoint + (nextRoof.direction === 'right' ? 1 : -1) * ridgeLength
           }
         }
-        if (currentWall.direction === 'left' || currentWall.direction === 'right') {
-          startXPoint = currentWall.x1 + (currentWall.direction === 'left' ? -1 : 1) * ridgeBaseLength
-          startYPoint = currentWall.y1 + (nextWall.direction === 'bottom' ? 1 : -1) * ridgeBaseLength
+        if (currentRoof.y1 === currentRoof.y2) {
+          startXPoint = currentRoof.x1 + (currentRoof.direction === 'left' ? -1 : 1) * ridgeBaseLength
+          startYPoint = currentRoof.y1 + (nextRoof.direction === 'bottom' ? 1 : -1) * ridgeBaseLength
           endXPoint = startXPoint
-          endYPoint = startYPoint + (nextWall.direction === 'bottom' ? 1 : -1) * ridgeLength
+          endYPoint = startYPoint + (nextRoof.direction === 'bottom' ? 1 : -1) * ridgeLength
+
           let adjustX
-          if (currentWall.direction === 'right') {
-            if (afterNextWall.direction === 'left' && beforePrevWall.direction === 'left') {
+          if (currentRoof.direction === 'right') {
+            if (afterNextRoof.direction === 'left' && beforePrevRoof.direction === 'left') {
               adjustX =
-                Math.abs(currentWall.y1 - afterNextWall.y1) < Math.abs(currentWall.y1 - beforePrevWall.y1) ? afterNextWall.x2 : beforePrevWall.x1
-            } else if (afterNextWall.direction === 'left' && afterNextWall.x2 < currentWall.x2 && afterNextWall.x2 > currentWall.x1) {
-              adjustX = afterNextWall.x2
-            } else if (beforePrevWall.direction === 'left' && beforePrevWall.x1 < currentWall.x2 && beforePrevWall.x1 > currentWall.x1) {
-              adjustX = beforePrevWall.x1
+                Math.abs(currentRoof.y1 - afterNextRoof.y1) < Math.abs(currentRoof.y1 - beforePrevRoof.y1) ? afterNextRoof.x2 : beforePrevRoof.x1
+            } else if (afterNextRoof.direction === 'left' && afterNextRoof.x2 < currentRoof.x2 && afterNextRoof.x2 > currentRoof.x1) {
+              adjustX = afterNextRoof.x2
+            } else if (beforePrevRoof.direction === 'left' && beforePrevRoof.x1 < currentRoof.x2 && beforePrevRoof.x1 > currentRoof.x1) {
+              adjustX = beforePrevRoof.x1
             }
             if (adjustX) {
-              startXPoint = currentWall.x1 + Math.abs(currentWall.x1 - adjustX) / 2
+              startXPoint = currentRoof.x1 + Math.abs(currentRoof.x1 - adjustX) / 2
               endXPoint = startXPoint
             }
           }
-          if (currentWall.direction === 'left') {
-            if (afterNextWall.direction === 'right' && beforePrevWall.direction === 'right') {
+          if (currentRoof.direction === 'left') {
+            if (afterNextRoof.direction === 'right' && beforePrevRoof.direction === 'right') {
               adjustX =
-                Math.abs(currentWall.y1 - afterNextWall.y1) < Math.abs(currentWall.y1 - beforePrevWall.y1) ? afterNextWall.x2 : beforePrevWall.x1
-            } else if (afterNextWall.direction === 'right' && afterNextWall.x2 > currentWall.x2 && afterNextWall.x2 < currentWall.x1) {
-              adjustX = afterNextWall.x2
-            } else if (beforePrevWall.direction === 'right' && beforePrevWall.x1 > currentWall.x2 && beforePrevWall.x1 < currentWall.x1) {
-              adjustX = beforePrevWall.x1
+                Math.abs(currentRoof.y1 - afterNextRoof.y1) < Math.abs(currentRoof.y1 - beforePrevRoof.y1) ? afterNextRoof.x2 : beforePrevRoof.x1
+            } else if (afterNextRoof.direction === 'right' && afterNextRoof.x2 > currentRoof.x2 && afterNextRoof.x2 < currentRoof.x1) {
+              adjustX = afterNextRoof.x2
+            } else if (beforePrevRoof.direction === 'right' && beforePrevRoof.x1 > currentRoof.x2 && beforePrevRoof.x1 < currentRoof.x1) {
+              adjustX = beforePrevRoof.x1
             }
             if (adjustX) {
-              startXPoint = currentWall.x1 - Math.abs(currentWall.x1 - adjustX) / 2
+              startXPoint = currentRoof.x1 - Math.abs(currentRoof.x1 - adjustX) / 2
               endXPoint = startXPoint
             }
           }
           if (xEqualInnerLines.length > 0) {
             xEqualInnerLines.reduce((prev, current) => {
               if (prev !== undefined) {
-                return Math.abs(currentWall.x1 - prev.x1) < Math.abs(currentWall.x1 - current.x1) ? prev : current
+                return Math.abs(currentRoof.x1 - prev.x1) < Math.abs(currentRoof.x1 - current.x1) ? prev : current
               } else {
                 return current
               }
             }, undefined)
             startXPoint =
-              Math.abs(currentWall.x1 - startXPoint) * 2 <= Math.abs(currentWall.x1 - xEqualInnerLines[0].x1)
+              Math.abs(currentRoof.x1 - startXPoint) * 2 <= Math.abs(currentRoof.x1 - xEqualInnerLines[0].x1)
                 ? startXPoint
-                : Math.abs(currentWall.x1 - xEqualInnerLines[0].x1)
+                : Math.abs(currentRoof.x1 - xEqualInnerLines[0].x1)
             endXPoint = startXPoint
-            ridgeAcrossLength = Math.max(prevWall.length, nextWall.length) - Math.abs(currentWall.x1 - startXPoint) * 2
+            ridgeAcrossLength = Math.max(prevRoof.length, nextRoof.length) - Math.abs(currentRoof.x1 - startXPoint) * 2
             if (
               //xEqualInnerLines 이 다음 벽보다 안쪽에 있을때
-              Math.abs(currentWall.x1 - xEqualInnerLines[0].x1) <= Math.abs(currentWall.x1 - nextWall.x1) &&
-              Math.abs(currentWall.y1 - xEqualInnerLines[0].y2) >= Math.abs(currentWall.y1 - nextWall.y2)
+              Math.abs(currentRoof.x1 - xEqualInnerLines[0].x1) <= Math.abs(currentRoof.x1 - nextRoof.x1) &&
+              Math.abs(currentRoof.y1 - xEqualInnerLines[0].y2) >= Math.abs(currentRoof.y1 - nextRoof.y2)
             ) {
-              ridgeMaxLength = Math.abs(currentWall.y1 - xEqualInnerLines[0].y2)
+              ridgeMaxLength = Math.abs(currentRoof.y1 - xEqualInnerLines[0].y2)
             }
             ridgeLength = Math.min(ridgeMaxLength, ridgeAcrossLength)
-            startYPoint = currentWall.y1 + (nextWall.direction === 'bottom' ? 1 : -1) * Math.abs(currentWall.x1 - startXPoint)
-            endYPoint = startYPoint + (nextWall.direction === 'bottom' ? 1 : -1) * ridgeLength
+            startYPoint = currentRoof.y1 + (nextRoof.direction === 'bottom' ? 1 : -1) * Math.abs(currentRoof.x1 - startXPoint)
+            endYPoint = startYPoint + (nextRoof.direction === 'bottom' ? 1 : -1) * ridgeLength
           }
         }
       }
+      const currentWall = walls[index]
+      if (currentWall.attributes.type === 'gable') {
+        if (currentRoof.x1 === currentRoof.x2) {
+          startXPoint = currentRoof.x1
+        }
+        if (currentRoof.y1 === currentRoof.y2) {
+          startYPoint = currentRoof.y1
+        }
+      }
 
       // 마루 그리기
-      if (!(startXPoint === undefined && startYPoint === undefined && endXPoint === undefined && endYPoint === undefined)) {
+      if (startXPoint !== undefined && startYPoint !== undefined && endXPoint !== undefined && endYPoint !== undefined) {
         const ridge = new QLine(
           [Math.min(startXPoint, endXPoint), Math.min(startYPoint, endYPoint), Math.max(startXPoint, endXPoint), Math.max(startYPoint, endYPoint)],
           {
@@ -1758,7 +1735,6 @@ const drawHips = (polygon) => {
       }
     }
     if (ridge.x1 === ridge.x2) {
-      console.log('세로방향 마루')
       //위쪽 좌표 기준 45, 315도 방향 라인확인
       leftTop = polygon.lines
         .filter((line) => line.x1 < ridge.x1 && line.y1 < ridge.y1 && Math.abs(line.x1 - ridge.x1) === Math.abs(line.y1 - ridge.y1))
@@ -2225,8 +2201,9 @@ const drawHips = (polygon) => {
   })
 
   // 마루와 연결되지 않은 hip을 그린다.
-  polygon.lines.forEach((line, index) => {
+  /*polygon.lines.forEach((line, index) => {
     if (!isAlreadyHip(polygon, line)) {
+      console.log(' 확인 : ', line)
       let prevLine, currentLine, nextLine
       if (index === 0) {
         prevLine = polygon.lines[polygon.lines.length - 1]
@@ -2260,6 +2237,7 @@ const drawHips = (polygon) => {
 
       let acrossLine = getAcrossLine(polygon, currentLine, dVector)
       let hypotenuse, adjacent
+      console.log(acrossLine)
 
       if (getLineDirection(prevLine) === getLineDirection(nextLine)) {
         hypotenuse = Math.round(getRoofHypotenuse(Math.abs(currentLine.x1 - acrossLine.x1) / 2))
@@ -2300,8 +2278,7 @@ const drawHips = (polygon) => {
       polygon.hips.push(hip)
       polygon.innerLines.push(hip)
     }
-  })
-  console.log('polygon.hips : ', polygon.hips)
+  })*/
 }
 
 const getPointInPolygon = (polygon, point, isInclude = false) => {
@@ -2328,7 +2305,7 @@ const getPointInPolygon = (polygon, point, isInclude = false) => {
  */
 const getAcrossLine = (polygon, currentLine, dVector) => {
   let acrossLine
-
+  console.log('dVector : ', dVector)
   switch (dVector) {
     case 45:
       acrossLine = polygon.lines
@@ -2400,6 +2377,24 @@ const connectLinePoint = (polygon) => {
   let missedPoints = []
   //마루
   polygon.ridges.forEach((ridge) => {
+    if (ridge.x1 === ridge.x2) {
+      if (
+        polygon.lines
+          .filter((roof) => roof.y1 === roof.y2)
+          .filter((roof) => roof.y1 === ridge.y1 || roof.y1 === ridge.y2 || roof.y2 === ridge.y1 || roof.y2 === ridge.y2).length > 0
+      ) {
+        return
+      }
+    }
+    if (ridge.y1 === ridge.y2) {
+      if (
+        polygon.lines
+          .filter((roof) => roof.x1 === roof.x2)
+          .filter((roof) => roof.x1 === ridge.x1 || roof.x1 === ridge.x2 || roof.x2 === ridge.x1 || roof.x2 === ridge.x2).length > 0
+      ) {
+        return
+      }
+    }
     if (polygon.hips.filter((hip) => hip.x2 === ridge.x1 && hip.y2 === ridge.y1).length < 2) {
       missedPoints.push({ x: ridge.x1, y: ridge.y1 })
     }
@@ -2408,10 +2403,6 @@ const connectLinePoint = (polygon) => {
     }
   })
 
-  console.log('polygon.ridges : ', polygon.ridges)
-
-  console.log('missedPoints : ', missedPoints)
-
   //추녀마루
   polygon.hips.forEach((hip) => {
     let count = 0
@@ -2424,7 +2415,6 @@ const connectLinePoint = (polygon) => {
   })
 
   let missedLine = []
-  console.log('missedPoints : ', missedPoints)
 
   //중복포인트제거
   missedPoints = [...new Set(missedPoints.map((line) => JSON.stringify(line)))].map((line) => JSON.parse(line))
@@ -2486,14 +2476,10 @@ const connectLinePoint = (polygon) => {
 
   missedPoints = [...new Set(missedPoints.map((line) => JSON.stringify(line)))].map((line) => JSON.parse(line))
 
-  console.log(missedPoints)
-
   missedPoints.forEach((p1) => {
     let p2 = missedPoints
       .filter((p) => !(p.x === p1.x && p.y === p1.y))
       .reduce((prev, current) => {
-        console.log('current : ', current)
-        console.log('prev : ', prev)
         if (prev !== undefined) {
           return Math.abs(current.x - p1.x) + Math.abs(current.y - p1.y) < Math.abs(prev.x - p1.x) + Math.abs(prev.y - p1.y) ? current : prev
         } else {
@@ -2502,7 +2488,6 @@ const connectLinePoint = (polygon) => {
       }, undefined)
 
     if (p2 !== undefined) {
-      console.log(p1.x, p2.x, p1.y, p2.y)
       if (p1.x === p2.x && p1.y < p2.y) {
         missedLine.push({ x1: p1.x, y1: p1.y, x2: p2.x, y2: p2.y })
       }
@@ -2580,7 +2565,6 @@ const connectLinePoint = (polygon) => {
           strokeWidth: 1,
           name: 'ridgeLine',
         })
-        console.log('newRidge : ', newRidge)
         if (polygon.ridges.filter((r) => newRidge.x1 === r.x1 && newRidge.y1 === r.y1 && newRidge.x2 === r.x2 && newRidge.y2 === r.y2).length === 0) {
           polygon.canvas.remove(ridge)
           polygon.canvas.remove(ridge2)
@@ -2675,12 +2659,14 @@ const getLineDirection = (line) => {
   }
 }
 
-export const changeAllGableRoof = (polygon, offset, canvas) => {
+export const changeAllHipAndGableRoof = (polygon, offset, canvas) => {
   const roof = polygon.filter((p) => p.name === 'roofBase')[0] // 지붕
   const roofLines = roof.lines // 지붕의 라인
   const ridges = roof.ridges // 마루의 라인
   const hips = roof.hips // 추녀마루의 라인
 
+  console.log('roofLines : ', roofLines)
+
   ridges.forEach((ridge) => {
     let ridgeHip1 = hips.filter((hip) => hip.x2 === ridge.x1 && hip.y2 === ridge.y1)
     let ridgeHip2 = hips.filter((hip) => hip.x2 === ridge.x2 && hip.y2 === ridge.y2)
@@ -2695,7 +2681,7 @@ export const changeAllGableRoof = (polygon, offset, canvas) => {
           (roofLine.x1 === x1 && roofLine.y1 === y1 && roofLine.x2 === x2 && roofLine.y2 === y2) ||
           (roofLine.x1 === x2 && roofLine.y1 === y2 && roofLine.x2 === x1 && roofLine.y2 === y1)
         ) {
-          gableLines.push(setGableRoof(polygon, ridge, ridgeHip1[0], ridgeHip1[1], offset, canvas))
+          gableLines.push(setHipAndGableRoof(roof, ridge, ridgeHip1[0], ridgeHip1[1], offset, canvas))
         }
       })
     }
@@ -2709,7 +2695,7 @@ export const changeAllGableRoof = (polygon, offset, canvas) => {
           (roofLine.x1 === x1 && roofLine.y1 === y1 && roofLine.x2 === x2 && roofLine.y2 === y2) ||
           (roofLine.x1 === x2 && roofLine.y1 === y2 && roofLine.x2 === x1 && roofLine.y2 === y1)
         ) {
-          gableLines.push(setGableRoof(polygon, ridge, ridgeHip2[0], ridgeHip2[1], offset, canvas))
+          gableLines.push(setHipAndGableRoof(roof, ridge, ridgeHip2[0], ridgeHip2[1], offset, canvas))
         }
       })
     }
@@ -2721,7 +2707,17 @@ export const changeAllGableRoof = (polygon, offset, canvas) => {
   // splitPolygonWithLines(roof)
 }
 
-const setGableRoof = (polygon, ridge, hip1, hip2, offset, canvas) => {
+/**
+ * 모임지붕 -> 팔작지붕 변경
+ * @param roof
+ * @param ridge
+ * @param hip1
+ * @param hip2
+ * @param offset
+ * @param canvas
+ * @returns {*}
+ */
+const setHipAndGableRoof = (roof, ridge, hip1, hip2, offset, canvas) => {
   let x1 = hip1.x1,
     y1 = hip1.y1
   let gableLine, diffOffset
@@ -2737,7 +2733,7 @@ const setGableRoof = (polygon, ridge, hip1, hip2, offset, canvas) => {
       })
 
       gableLine = new QLine([ridge.x2 - offset, ridge.y2, ridge.x2 + offset, ridge.y2], {
-        fontSize: polygon.fontSize,
+        fontSize: roof.fontSize,
         stroke: 'blue',
         strokeWidth: 1,
         name: 'gableLine',
@@ -2768,7 +2764,7 @@ const setGableRoof = (polygon, ridge, hip1, hip2, offset, canvas) => {
         y2: ridge.y2,
       })
       gableLine = new QLine([ridge.x1 - offset, ridge.y1, ridge.x1 + offset, ridge.y1], {
-        fontSize: polygon.fontSize,
+        fontSize: roof.fontSize,
         stroke: 'blue',
         strokeWidth: 1,
         name: 'gableLine',
@@ -2801,7 +2797,7 @@ const setGableRoof = (polygon, ridge, hip1, hip2, offset, canvas) => {
         y2: ridge.y2,
       })
       gableLine = new QLine([ridge.x1 - offset, ridge.y1, ridge.x1 + offset, ridge.y1], {
-        fontSize: polygon.fontSize,
+        fontSize: roof.fontSize,
         stroke: 'blue',
         strokeWidth: 1,
         name: 'gableLine',
@@ -2833,7 +2829,7 @@ const setGableRoof = (polygon, ridge, hip1, hip2, offset, canvas) => {
       })
 
       gableLine = new QLine([ridge.x2 - offset, ridge.y2, ridge.x2 + offset, ridge.y2], {
-        fontSize: polygon.fontSize,
+        fontSize: roof.fontSize,
         stroke: 'blue',
         strokeWidth: 1,
         name: 'gableLine',
@@ -2866,7 +2862,7 @@ const setGableRoof = (polygon, ridge, hip1, hip2, offset, canvas) => {
         y2: ridge.y2,
       })
       gableLine = new QLine([ridge.x1, ridge.y1 - offset, ridge.x1, ridge.y1 + offset], {
-        fontSize: polygon.fontSize,
+        fontSize: roof.fontSize,
         stroke: 'blue',
         strokeWidth: 1,
         name: 'gableLine',
@@ -2897,7 +2893,7 @@ const setGableRoof = (polygon, ridge, hip1, hip2, offset, canvas) => {
         y2: ridge.y2,
       })
       gableLine = new QLine([ridge.x2, ridge.y2 - offset, ridge.x2, ridge.y2 + offset], {
-        fontSize: polygon.fontSize,
+        fontSize: roof.fontSize,
         stroke: 'blue',
         strokeWidth: 1,
         name: 'gableLine',
@@ -2930,7 +2926,7 @@ const setGableRoof = (polygon, ridge, hip1, hip2, offset, canvas) => {
         y2: ridge.y2,
       })
       gableLine = new QLine([ridge.x2, ridge.y2 - offset, ridge.x2, ridge.y2 + offset], {
-        fontSize: polygon.fontSize,
+        fontSize: roof.fontSize,
         stroke: 'blue',
         strokeWidth: 1,
         name: 'gableLine',
@@ -2961,7 +2957,7 @@ const setGableRoof = (polygon, ridge, hip1, hip2, offset, canvas) => {
         y2: ridge.y2,
       })
       gableLine = new QLine([ridge.x1, ridge.y1 - offset, ridge.x1, ridge.y1 + offset], {
-        fontSize: polygon.fontSize,
+        fontSize: roof.fontSize,
         stroke: 'blue',
         strokeWidth: 1,
         name: 'gableLine',