diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx
index d7130911..ce843784 100644
--- a/src/components/Roof2.jsx
+++ b/src/components/Roof2.jsx
@@ -31,7 +31,7 @@ import { useAxios } from '@/hooks/useAxios'
 import QPolygonContextMenu from '@/components/common/context-menu/QPolygonContextMenu'
 import QLineContextMenu from '@/components/common/context-menu/QLineContextMenu'
 import QEmptyContextMenu from '@/components/common/context-menu/QEmptyContextMenu'
-import { radiansToDegrees } from '@turf/turf'
+import { degreesToRadians, radiansToDegrees } from '@turf/turf'
 
 export default function Roof2(props) {
   const { name, userId, email, isLoggedIn } = props
@@ -622,8 +622,6 @@ export default function Roof2(props) {
     const angle = Math.atan(t2 / t)
     const angle2 = Math.atan(t3 / (a - b - t))
 
-    console.log(angle, angle2)
-
     let isDrawing = true
     let pentagon
     canvas?.on('mouse:move', (e) => {
@@ -1466,12 +1464,15 @@ export default function Roof2(props) {
     })
   }
   const createTemplate26 = () => {
-    //todo
-    const length1 = 300 //Number(prompt('1번'))
+    const length1 = 500 //Number(prompt('1번'))
     const length2 = 200 //Number(prompt('2번'))
     const length3 = 300 //Number(prompt('3번'))
     const length4 = 400 //Number(prompt('3번'))
 
+    const angle = (Math.asin(length3 / length4) * 180) / Math.PI // 높이와 빗변으로 먼저 각도구하기
+
+    const topL = (length1 - length2) / 2 / Math.cos((angle * Math.PI) / 180) // 꺽이는부분 윗쪽 길이
+
     let isDrawing = true
     canvas?.on('mouse:move', (e) => {
       if (!isDrawing) {
@@ -1479,14 +1480,95 @@ export default function Roof2(props) {
       }
       canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'guideTriangle'))
       const pointer = canvas?.getPointer(e.e)
-      const triangle = new QPolygon([], {
-        fill: 'transparent',
-        stroke: 'black',
-        strokeWidth: 2,
-        selectable: true,
-        fontSize: fontSize,
-        name: 'guideTriangle',
-      })
+      const triangle = new QPolygon(
+        [
+          {
+            x: pointer.x - length1 / 2 + length1,
+            y: pointer.y + length3 / 2,
+          },
+          {
+            x: pointer.x - length1 / 2,
+            y: pointer.y + length3 / 2,
+          },
+          {
+            x: pointer.x - length1 / 2 + length4 * Math.cos(degreesToRadians(angle)),
+            y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)),
+          },
+          {
+            x: pointer.x - length1 / 2 + length4 * Math.cos(degreesToRadians(angle)) + length2,
+            y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)),
+          },
+          {
+            x: pointer.x - length1 / 2 + length4 * Math.cos(degreesToRadians(angle)) + length2 + topL * Math.cos(degreesToRadians(angle)),
+            y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)) + topL * Math.sin(degreesToRadians(angle)),
+          },
+        ],
+        {
+          fill: 'transparent',
+          stroke: 'black',
+          strokeWidth: 2,
+          selectable: true,
+          fontSize: fontSize,
+          name: 'guideTriangle',
+        },
+      )
+
+      canvas?.add(triangle)
+    })
+
+    canvas?.on('mouse:down', (e) => {
+      isDrawing = false
+    })
+  }
+  const createTemplate27 = () => {
+    const length1 = 500 //Number(prompt('1번'))
+    const length2 = 200 //Number(prompt('2번'))
+    const length3 = 300 //Number(prompt('3번'))
+    const length4 = 400 //Number(prompt('3번'))
+
+    const angle = (Math.asin(length3 / length4) * 180) / Math.PI // 높이와 빗변으로 먼저 각도구하기
+
+    const topL = (length1 - length2) / 2 / Math.cos((angle * Math.PI) / 180) // 꺽이는부분 윗쪽 길이
+
+    let isDrawing = true
+    canvas?.on('mouse:move', (e) => {
+      if (!isDrawing) {
+        return
+      }
+      canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'guideTriangle'))
+      const pointer = canvas?.getPointer(e.e)
+      const triangle = new QPolygon(
+        [
+          {
+            x: pointer.x - length1 / 2,
+            y: pointer.y + length3 / 2,
+          },
+          {
+            x: pointer.x - length1 / 2 + length1,
+            y: pointer.y + length3 / 2,
+          },
+          {
+            x: pointer.x - length1 / 2 + length1 - length4 * Math.cos(degreesToRadians(angle)),
+            y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)),
+          },
+          {
+            x: pointer.x - length1 / 2 + length1 - length4 * Math.cos(degreesToRadians(angle)) - length2,
+            y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)),
+          },
+          {
+            x: pointer.x - length1 / 2 + length1 - length4 * Math.cos(degreesToRadians(angle)) - length2 - topL * Math.cos(degreesToRadians(angle)),
+            y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)) + topL * Math.sin(degreesToRadians(angle)),
+          },
+        ],
+        {
+          fill: 'transparent',
+          stroke: 'black',
+          strokeWidth: 2,
+          selectable: true,
+          fontSize: fontSize,
+          name: 'guideTriangle',
+        },
+      )
 
       canvas?.add(triangle)
     })
@@ -1566,6 +1648,74 @@ export default function Roof2(props) {
       canvas?.renderAll()
     })
   }
+  const createTemplate29 = () => {
+    const length1 = Number(prompt('밑변'))
+    const length2 = Number(prompt('높이'))
+    const length3 = Number(prompt('빗변'))
+
+    const a = Math.sqrt(length3 * length3 - length2 * length2) // 입력된 밑변과 높이
+
+    const sinA = a / length3
+    const angleInRadians = Math.asin(sinA)
+    const angleInDegrees = angleInRadians * (180 / Math.PI)
+    const b = a - length1 / 2
+
+    const c = b / Math.tan(angleInRadians)
+    const d = Math.sqrt(b * b + c * c)
+
+    if (isNaN(a)) {
+      alert('값이 잘못되었습니다.')
+      return
+    }
+    if (b < 0) {
+      alert('값이 잘못되었습니다.')
+      return
+    }
+    if (angleInDegrees === 0 || angleInRadians === 0) {
+      alert('값이 잘못되었습니다.')
+      return
+    }
+
+    let isDrawing = true
+    let pentagon
+    canvas?.on('mouse:move', (e) => {
+      if (!isDrawing) {
+        return
+      }
+      canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'guideTriangle'))
+      const pointer = canvas?.getPointer(e.e)
+      const newAngleInRadians = (90 - angleInDegrees) * (Math.PI / 180)
+
+      pentagon = new QPolygon(
+        [
+          {
+            x: pointer.x + length1 / 2 - b / 2 - length3 * Math.cos(newAngleInRadians),
+            y: pointer.y + length2 / 2 - length3 * Math.sin(newAngleInRadians),
+          },
+          { x: pointer.x + length1 / 2 - b / 2, y: pointer.y + length2 / 2 },
+          { x: pointer.x - (length1 + b) / 2, y: pointer.y + length2 / 2 },
+          { x: pointer.x - (length1 + b) / 2 - d * Math.cos(newAngleInRadians), y: pointer.y + length2 / 2 - d * Math.sin(newAngleInRadians) },
+        ],
+        {
+          fill: 'transparent',
+          stroke: 'gray',
+          strokeWidth: 1,
+          selectable: true,
+          fontSize: fontSize,
+          name: 'guideTriangle',
+        },
+      )
+
+      canvas?.add(pentagon)
+    })
+
+    canvas?.on('mouse:down', (e) => {
+      isDrawing = false
+      pentagon.set('name', 'roof')
+      pentagon.set('stroke', 2)
+      canvas?.renderAll()
+    })
+  }
 
   return (
     <>
@@ -1779,9 +1929,15 @@ export default function Roof2(props) {
             <Button className="m-1 p-2" onClick={createTemplate26}>
               26번 추가
             </Button>
+            <Button className="m-1 p-2" onClick={createTemplate27}>
+              27번 추가
+            </Button>
             <Button className="m-1 p-2" onClick={createTemplate28}>
               28번 추가
             </Button>
+            <Button className="m-1 p-2" onClick={createTemplate29}>
+              29번 추가
+            </Button>
             <Button className="m-1 p-2" onClick={createPentagon2}>
               오각형 추가2
             </Button>