diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx
index 648c8bf3..731fe8c6 100644
--- a/src/components/Roof2.jsx
+++ b/src/components/Roof2.jsx
@@ -469,7 +469,7 @@ export default function Roof2(props) {
       { x: 500, y: 100 },
     ]
 
-    const polygon = new QPolygon(eightPoint4, {
+    const polygon = new QPolygon(test4, {
       fill: 'transparent',
       stroke: 'green',
       strokeWidth: 1,
diff --git a/src/components/fabric/QPolygon.js b/src/components/fabric/QPolygon.js
index 808f6765..2202bac0 100644
--- a/src/components/fabric/QPolygon.js
+++ b/src/components/fabric/QPolygon.js
@@ -31,6 +31,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
     this.cells = []
     this.innerLines = []
     this.children = []
+    this.separatePolygon = []
 
     // 소수점 전부 제거
     points.forEach((point) => {
diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js
index e97621f1..5af1b0f8 100644
--- a/src/hooks/useMode.js
+++ b/src/hooks/useMode.js
@@ -1515,7 +1515,7 @@ export function useMode() {
         pitch: 4,
         sleeve: true,
       }*/
-      if (index % 2 !== 0) {
+      if (index % 2 === 0) {
         line.attributes = {
           type: LINE_TYPE.WALLLINE.GABLE,
           offset: 30,
diff --git a/src/util/qpolygon-utils.js b/src/util/qpolygon-utils.js
index d7385305..7fd9009f 100644
--- a/src/util/qpolygon-utils.js
+++ b/src/util/qpolygon-utils.js
@@ -1253,20 +1253,10 @@ export const drawGabledRoof = (roofId, canvas) => {
   const minY = Math.min(...roofPoints.map((point) => point.y))
   const maxY = Math.max(...roofPoints.map((point) => point.y))
 
+  // 맞은편 라인을 찾기 위해 현재 polygon으로 만들수 있는 최대한의 길이를 구한다.
   const checkLength = Math.abs(Math.sqrt(Math.pow(maxX - minX, 2) + Math.pow(maxY - minY, 2)))
 
-  wallLines
-    .filter((line) => line.attributes !== undefined && line.attributes.type === LINE_TYPE.WALLLINE.GABLE)
-    .forEach((gable) => {
-      const gableLine = new QLine([gable.x1, gable.y1, gable.x2, gable.y2], {
-        fontSize: roof.fontSize,
-        stroke: 'cyan',
-        strokeWidth: 2,
-      })
-      canvas.add(gableLine)
-      canvas.renderAll()
-    })
-
+  // 처마라인의 기본속성 입력
   const eaves = []
   roofLines.forEach((currentRoof, index) => {
     if (currentRoof.attributes !== undefined && currentRoof.attributes.type === LINE_TYPE.WALLLINE.EAVES) {
@@ -1282,9 +1272,10 @@ export const drawGabledRoof = (roofId, canvas) => {
       const index = eave.index,
         currentRoof = eave.roof
       const currentWall = wallLines[index]
-      const prevRoof = index === 0 ? roofLines[wallLines.length - 1] : roofLines[index - 1]
-      const nextRoof = index === roofLines.length - 1 ? roofLines[0] : index === roofLines.length ? roofLines[1] : roofLines[index + 1]
+      // const prevRoof = index === 0 ? roofLines[wallLines.length - 1] : roofLines[index - 1]
+      // const nextRoof = index === roofLines.length - 1 ? roofLines[0] : index === roofLines.length ? roofLines[1] : roofLines[index + 1]
 
+      //현재 지붕의 중심 좌표
       const midX = Math.round(((currentRoof.x1 + currentRoof.x2) / 2) * 10) / 10
       const midY = Math.round(((currentRoof.y1 + currentRoof.y2) / 2) * 10) / 10
       const deltaX = currentWall.x2 - currentWall.x1
@@ -1303,6 +1294,7 @@ export const drawGabledRoof = (roofId, canvas) => {
       const checkY = Math.round((midY - signY * checkLength) * 10) / 10
 
       const intersectLines = []
+      // 현재 지붕의 맞은편 지붕을 찾는다.
       roofLines
         .filter((line) => line !== currentRoof)
         .forEach((line) => {
@@ -1315,6 +1307,7 @@ export const drawGabledRoof = (roofId, canvas) => {
           }
         })
 
+      // 가장 가까운 지붕을 찾는다.
       const intersect = intersectLines.reduce((prev, current) => {
         if (prev !== undefined) {
           const prevDistance = Math.sqrt(Math.pow(prev.x - midX, 2) + Math.pow(prev.y - midY, 2))
@@ -1400,13 +1393,6 @@ export const drawGabledRoof = (roofId, canvas) => {
     const prevRoof = index === 0 ? roofLines[wallLines.length - 1] : roofLines[index - 1]
     const nextRoof = index === roofLines.length - 1 ? roofLines[0] : index === roofLines.length ? roofLines[1] : roofLines[index + 1]
 
-    /*const midX = Math.round(((currentRoof.x1 + currentRoof.x2) / 2) * 10) / 10
-    const midY = Math.round(((currentRoof.y1 + currentRoof.y2) / 2) * 10) / 10
-    const midWallX = Math.round(((currentWall.x1 + currentWall.x2) / 2) * 10) / 10
-    const midWallY = Math.round(((currentWall.y1 + currentWall.y2) / 2) * 10) / 10
-    const signX = Math.sign(midX - midWallX)
-    const signY = Math.sign(midY - midWallY)
-*/
     const midX = Math.round(((currentRoof.x1 + currentRoof.x2) / 2) * 10) / 10
     const midY = Math.round(((currentRoof.y1 + currentRoof.y2) / 2) * 10) / 10
     const deltaX = currentWall.x2 - currentWall.x1
@@ -1446,7 +1432,6 @@ export const drawGabledRoof = (roofId, canvas) => {
           intersectRidge.push({ line: ridge, name: 'mid' })
         }
       }
-      console.log('signX : ', signX, 'signY : ', signY)
       if (Math.sign(midX - ridgeMidX) === signX || Math.sign(midY - ridgeMidY) === signY) {
         const prevIntersect = edgesIntersection(
           { vertex1: { x: prevRoof.x1, y: prevRoof.y1 }, vertex2: { x: prevRoof.x2, y: prevRoof.y2 } },
@@ -1576,7 +1561,6 @@ export const drawGabledRoof = (roofId, canvas) => {
         }
       }
     })
-    console.log('sortedPoints : ', sortedPoints)
     if (sortedPoints.length > 0) {
       const roofPolygon = new QPolygon(sortedPoints, {
         fill: 'transparent',
@@ -1587,10 +1571,26 @@ export const drawGabledRoof = (roofId, canvas) => {
         name: 'roofPolygon',
         attributes: { roofId: roof.id, currentRoof: currentRoof.id },
       })
+      const currentDegree = currentRoof.attributes.pitch > 0 ? getDegreeByChon(currentRoof.attributes.pitch) : currentRoof.attributes.degree
+      //지붕 각도에 따른 실측치 조정
+      roofPolygon.lines.forEach((line) => {
+        line.attributes.planeSize = Math.round(Math.sqrt(Math.pow(line.x2 - line.x1, 2) + Math.pow(line.y2 - line.y1, 2)) * 10)
+        const slope = (line) => (line.x2 - line.x1 === 0 ? Infinity : (line.y2 - line.y1) / (line.x2 - line.x1))
+
+        if (currentDegree > 0 && slope(line) !== slope(currentRoof)) {
+          const height = Math.tan(currentDegree * (Math.PI / 180)) * line.attributes.planeSize
+          line.attributes.actualSize = Math.round(Math.sqrt(Math.pow(line.attributes.planeSize, 2) + Math.pow(height, 2)))
+        } else {
+          line.attributes.actualSize = line.attributes.planeSize
+        }
+      })
+      roof.separatePolygon.push(roofPolygon)
       canvas.add(roofPolygon)
       canvas.renderAll()
     }
   })
+  //기준선 제거
+  ridges.forEach((ridge) => canvas.remove(ridge))
 }
 
 /**
@@ -1607,7 +1607,7 @@ export const drawShedRoof = (roofId, canvas) => {
   }
 
   const sheds = roof.lines.filter((line) => line.attributes !== undefined && line.attributes.type === LINE_TYPE.WALLLINE.SHED)
-  const eaves = roof.lines.filter((line) => line.attributes !== undefined && line.attributes.type === LINE_TYPE.WALLLINE.EAVES)
+  // const eaves = roof.lines.filter((line) => line.attributes !== undefined && line.attributes.type === LINE_TYPE.WALLLINE.EAVES)
   const gables = roof.lines.filter((line) => line.attributes !== undefined && line.attributes.type === LINE_TYPE.WALLLINE.GABLE)
 
   let shedDegree = sheds[0].attributes.degree || 0
@@ -1708,16 +1708,11 @@ const drawRidge = (roof, canvas) => {
           const magnitude2 = Math.sqrt(vector2.x * vector2.x + vector2.y * vector2.y)
           const angle = (Math.acos(dotProduct / (magnitude1 * magnitude2)) * 180) / Math.PI
 
-          // console.log('innerRoof', innerRoof)
-          // console.log('현재라인', currentRoof, '현재라인의 각도 : ', currentAngle, 'inner 라인과의 각도:', angle)
-
           //현재 지붕선과 직각인 선
           if (Math.abs(angle) === 90) {
             const innerBefore = roofLines.find((line) => innerRoof.x1 === line.x2 && innerRoof.y1 === line.y2)
             const ibAngle = Math.atan2(innerBefore.y2 - innerBefore.y1, innerBefore.x2 - innerBefore.x1) * (180 / Math.PI)
-            // console.log('현재라인과 직각인 선의 이전라인', innerBefore, '각도', ibAngle)
             if (Math.abs(currentAngle - ibAngle) === 180) {
-              // console.log('currentRoof 의 x2,y2 좌표에서 연결된 라인')
               if (currentAngle === 0 || currentAngle === 180) {
                 currentX2 = innerRoof.x1
                 ridgeMinLength =
@@ -1740,7 +1735,6 @@ const drawRidge = (roof, canvas) => {
               }
             }
             if (Math.abs(currentAngle - ibAngle) === 0) {
-              // console.log('currentRoof 의 x1,y1 좌표에서 연결된 라인', currentAngle)
               if (currentAngle === 0 || currentAngle === 180) {
                 currentX1 = innerRoof.x2
                 ridgeMinLength =
@@ -1765,7 +1759,6 @@ const drawRidge = (roof, canvas) => {
           }
           //현재 지붕선과 반대인 선
           if (Math.abs(angle) === 180) {
-            // console.log('현재라인과 반대인 선')
             if (currentAngle === 0 || currentAngle === 180) {
             }
             if (currentAngle === 90 || currentAngle === 270) {
@@ -1829,8 +1822,6 @@ const drawRidge = (roof, canvas) => {
         const hypo = Math.sqrt(Math.pow(Math.abs(startXPoint - endXPoint), 2) + Math.pow(Math.abs(startYPoint - endYPoint), 2))
 
         const intersectLength = Math.sqrt(Math.pow(Math.abs(midX - intersectLine.x), 2) + Math.pow(Math.abs(midY - intersectLine.y), 2))
-        console.log('intersect 좌표까지의 거리 : ', intersectLength)
-        console.log('hypotenuse', hypo, 'ridgeMinLength', ridgeMinLength)
         if (intersectLength < prevRoof.attributes.planeSize / 10 && intersectLength < nextRoof.attributes.planeSize / 10) {
           endXPoint = startXPoint
           endYPoint = startYPoint
@@ -1844,7 +1835,6 @@ const drawRidge = (roof, canvas) => {
         endXPoint = Math.round(startXPoint + Math.sign(alpha) * -1 * ridgeMinLength)
         endYPoint = Math.round(startYPoint + Math.sign(beta) * -1 * ridgeMinLength)
       }
-      console.log('startXPoint', startXPoint, 'startYPoint', startYPoint, 'endXPoint', endXPoint, 'endYPoint', endYPoint)
 
       const ridge = new QLine([startXPoint, startYPoint, endXPoint, endYPoint], {
         fontSize: roof.fontSize,