diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx
index ff0d330f..03749bd2 100644
--- a/src/components/Roof2.jsx
+++ b/src/components/Roof2.jsx
@@ -577,1150 +577,6 @@ export default function Roof2(props) {
     canvas?.renderAll()
   }
 
-  const createPentagon2 = () => {
-    const a = 400 //Number(prompt('a'))
-    const b = 200 //Number(prompt('b'))
-    const c = 250 //Number(prompt('c'))
-    const d = 150 //Number(prompt('d'))
-
-    const t = (c * (a - b)) / (200 + c)
-
-    const t2 = Math.sqrt(c * c + t * t)
-
-    const t3 = Math.sqrt((c - d) * (c - d) + (a - b - t) * (a - b - t))
-
-    const angle = Math.atan(t2 / t)
-    const angle2 = Math.atan(t3 / (a - b - t))
-
-    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)
-
-      pentagon = new QPolygon(
-        [
-          { x: pointer.x - a / 2, y: pointer.y + a / 2 - d },
-          { x: pointer.x + a / 2, y: pointer.y + a / 2 - d },
-          { x: pointer.x + a / 2, y: pointer.y + a / 2 - d - d },
-          { x: pointer.x + a / 2 - b, y: pointer.y + a / 2 - d - d },
-          {
-            x: pointer.x + a / 2 - b - t3 * Math.cos(angle),
-            y: pointer.y + a / 2 - d - d - t3 * Math.sin(angle),
-          },
-          /*{
-            x: pointer.x - a / 2 + t2 * Math.cos(angle),
-            y: pointer.y + a / 2 - d - t2 * Math.sin(angle),
-          },*/
-        ],
-        {
-          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()
-    })
-  }
-
-  const createTemplate10 = () => {
-    const length1 = Number(prompt('1번'))
-    const length2 = Number(prompt('2번'))
-    const length3 = Number(prompt('3번'))
-    const length4 = Number(prompt('4번'))
-    const length5 = Number(prompt('5번'))
-
-    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 + length2 + length3) / 2, y: pointer.y - (length4 + length5) / 2 },
-          { x: pointer.x - (length1 + length2 + length3) / 2, y: pointer.y + (length4 + length5) / 2 },
-          { x: pointer.x - (length1 + length2 + length3) / 2 + length1, y: pointer.y + (length4 + length5) / 2 },
-          { x: pointer.x - (length1 + length2 + length3) / 2 + length1, y: pointer.y + (length4 + length5) / 2 - length5 },
-          { x: pointer.x - (length1 + length2 + length3) / 2 + length1 + length2, y: pointer.y + (length4 + length5) / 2 - length5 },
-          { x: pointer.x - (length1 + length2 + length3) / 2 + length1 + length2, y: pointer.y + (length4 + length5) / 2 - length5 + length5 },
-          {
-            x: pointer.x - (length1 + length2 + length3) / 2 + length1 + length2 + length3,
-            y: pointer.y + (length4 + length5) / 2 - length5 + length5,
-          },
-          {
-            x: pointer.x - (length1 + length2 + length3) / 2 + length1 + length2 + length3,
-            y: pointer.y + (length4 + length5) / 2 - length5 + length5 - (length4 + length5),
-          },
-        ],
-        {
-          fill: 'transparent',
-          stroke: 'black',
-          strokeWidth: 2,
-          selectable: true,
-          fontSize: fontSize,
-          name: 'guideTriangle',
-        },
-      )
-
-      canvas?.add(triangle)
-    })
-
-    canvas?.on('mouse:down', (e) => {
-      isDrawing = false
-    })
-  }
-  const createTemplate11 = () => {
-    const length1 = 200 //Number(prompt('1번'))
-    const length2 = 100 //Number(prompt('2번'))
-    const length3 = 400 //Number(prompt('3번'))
-    const length4 = 300 //Number(prompt('4번'))
-
-    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 + length4 / 2 },
-          { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 },
-          { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length3 },
-          { x: pointer.x - length1 / 2 + length1 - (length1 - length2), y: pointer.y + length4 / 2 - length3 },
-          { x: pointer.x - length1 / 2 + length1 - (length1 - length2), y: pointer.y + length4 / 2 - length3 + (length3 - length4) },
-          { x: pointer.x - length1 / 2 + length1 - (length1 - length2) - length2, y: pointer.y + length4 / 2 - length3 + (length3 - length4) },
-        ],
-        {
-          fill: 'transparent',
-          stroke: 'black',
-          strokeWidth: 2,
-          selectable: true,
-          fontSize: fontSize,
-          name: 'guideTriangle',
-        },
-      )
-
-      canvas?.add(triangle)
-    })
-
-    canvas?.on('mouse:down', (e) => {
-      isDrawing = false
-    })
-  }
-  const createTemplate12 = () => {
-    const length1 = 200 //Number(prompt('1번'))
-    const length2 = 100 //Number(prompt('2번'))
-    const length3 = 400 //Number(prompt('3번'))
-    const length4 = 300 //Number(prompt('4번'))
-
-    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 + length4 / 2 },
-          { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 },
-          { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length4 },
-          { x: pointer.x - length1 / 2 + length1 - length2, y: pointer.y + length4 / 2 - length4 },
-          { x: pointer.x - length1 / 2 + length1 - length2, y: pointer.y + length4 / 2 - length4 - (length3 - length4) },
-          { x: pointer.x - length1 / 2 + length1 - length2 - (length1 - length2), y: pointer.y + length4 / 2 - length4 - (length3 - length4) },
-        ],
-        {
-          fill: 'transparent',
-          stroke: 'black',
-          strokeWidth: 2,
-          selectable: true,
-          fontSize: fontSize,
-          name: 'guideTriangle',
-        },
-      )
-
-      canvas?.add(triangle)
-    })
-
-    canvas?.on('mouse:down', (e) => {
-      isDrawing = false
-    })
-  }
-  const createTemplate13 = () => {
-    const length1 = 300 //Number(prompt('1번'))
-    const length2 = 150 //Number(prompt('2번'))
-    const length3 = 100 //Number(prompt('3번'))
-    const length4 = 400 //Number(prompt('4번'))
-    const length5 = 200 //Number(prompt('5번'))
-
-    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 + length4 / 2 },
-          { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 },
-          { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length4 },
-          { x: pointer.x - length1 / 2 + length1 - length3, y: pointer.y + length4 / 2 - length4 },
-          { x: pointer.x - length1 / 2 + length1 - length3, y: pointer.y + length4 / 2 - length4 + (length4 - length5) },
-          { x: pointer.x - length1 / 2 + length1 - length3 - length2, y: pointer.y + length4 / 2 - length4 + (length4 - length5) },
-        ],
-        {
-          fill: 'transparent',
-          stroke: 'black',
-          strokeWidth: 2,
-          selectable: true,
-          fontSize: fontSize,
-          name: 'guideTriangle',
-        },
-      )
-
-      canvas?.add(triangle)
-    })
-
-    canvas?.on('mouse:down', (e) => {
-      isDrawing = false
-    })
-  }
-  const createTemplate14 = () => {
-    const length1 = 300 //Number(prompt('1번'))
-    const length2 = 150 //Number(prompt('2번'))
-    const length3 = 100 //Number(prompt('3번'))
-    const length4 = 400 //Number(prompt('4번'))
-    const length5 = 200 //Number(prompt('5번'))
-
-    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 + length4 / 2 },
-          { x: pointer.x + length1 / 2 - length1, y: pointer.y + length4 / 2 },
-          { x: pointer.x + length1 / 2 - length1, y: pointer.y + length4 / 2 - length4 },
-          { x: pointer.x + length1 / 2 - length1 + length3, y: pointer.y + length4 / 2 - length4 },
-          { x: pointer.x + length1 / 2 - length1 + length3, y: pointer.y + length4 / 2 - length4 + (length4 - length5) },
-          { x: pointer.x + length1 / 2 - length1 + length3 + length2, y: pointer.y + length4 / 2 - length4 + (length4 - length5) },
-        ],
-        {
-          fill: 'transparent',
-          stroke: 'black',
-          strokeWidth: 2,
-          selectable: true,
-          fontSize: fontSize,
-          name: 'guideTriangle',
-        },
-      )
-
-      canvas?.add(triangle)
-    })
-
-    canvas?.on('mouse:down', (e) => {
-      isDrawing = false
-    })
-  }
-  const createTemplate15 = () => {
-    const length1 = 300 //Number(prompt('1번'))
-    const length2 = 150 //Number(prompt('2번'))
-    const length3 = 100 //Number(prompt('3번'))
-    const length4 = 400 //Number(prompt('4번'))
-    const length5 = 200 //Number(prompt('5번'))
-
-    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 + length4 / 2 },
-          { x: pointer.x + length1 / 2 - length1, y: pointer.y + length4 / 2 },
-          { x: pointer.x + length1 / 2 - length1, y: pointer.y + length4 / 2 - length5 },
-          { x: pointer.x + length1 / 2 - length1 + length2, y: pointer.y + length4 / 2 - length5 },
-          { x: pointer.x + length1 / 2 - length1 + length2, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
-          { x: pointer.x + length1 / 2 - length1 + length2 + length3, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
-        ],
-        {
-          fill: 'transparent',
-          stroke: 'black',
-          strokeWidth: 2,
-          selectable: true,
-          fontSize: fontSize,
-          name: 'guideTriangle',
-        },
-      )
-
-      canvas?.add(triangle)
-    })
-
-    canvas?.on('mouse:down', (e) => {
-      isDrawing = false
-    })
-  }
-  const createTemplate16 = () => {
-    const length1 = 300 //Number(prompt('1번'))
-    const length2 = 150 //Number(prompt('2번'))
-    const length3 = 100 //Number(prompt('3번'))
-    const length4 = 400 //Number(prompt('4번'))
-    const length5 = 200 //Number(prompt('5번'))
-
-    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 + length4 / 2 },
-          { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 },
-          { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length5 },
-          { x: pointer.x - length1 / 2 + length1 - length2, y: pointer.y + length4 / 2 - length5 },
-          { x: pointer.x - length1 / 2 + length1 - length2, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
-          { x: pointer.x - length1 / 2 + length1 - length2 - length3, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
-        ],
-        {
-          fill: 'transparent',
-          stroke: 'black',
-          strokeWidth: 2,
-          selectable: true,
-          fontSize: fontSize,
-          name: 'guideTriangle',
-        },
-      )
-
-      canvas?.add(triangle)
-    })
-
-    canvas?.on('mouse:down', (e) => {
-      isDrawing = false
-    })
-  }
-  const createTemplate17 = () => {
-    const length1 = 300 //Number(prompt('1번'))
-    const length2 = 150 //Number(prompt('2번'))
-    const length3 = 250 //Number(prompt('3번'))
-    const length4 = 400 //Number(prompt('4번'))
-    const length5 = 200 //Number(prompt('5번'))
-
-    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 + length4 / 2 },
-          { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 },
-          { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length5 },
-          { x: pointer.x - length1 / 2 + length1 - length2, y: pointer.y + length4 / 2 - length5 },
-          { x: pointer.x - length1 / 2 + length1 - length2, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
-          { x: pointer.x - length1 / 2 + length1 - length2 - length3, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
-        ],
-        {
-          fill: 'transparent',
-          stroke: 'black',
-          strokeWidth: 2,
-          selectable: true,
-          fontSize: fontSize,
-          name: 'guideTriangle',
-        },
-      )
-
-      canvas?.add(triangle)
-    })
-
-    canvas?.on('mouse:down', (e) => {
-      isDrawing = false
-    })
-  }
-  const createTemplate18 = () => {
-    const length1 = 300 //Number(prompt('1번'))
-    const length2 = 150 //Number(prompt('2번'))
-    const length3 = 250 //Number(prompt('3번'))
-    const length4 = 400 //Number(prompt('4번'))
-    const length5 = 200 //Number(prompt('5번'))
-
-    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 + length4 / 2 },
-          { x: pointer.x + length1 / 2 - length1, y: pointer.y + length4 / 2 },
-          { x: pointer.x + length1 / 2 - length1, y: pointer.y + length4 / 2 - length5 },
-          { x: pointer.x + length1 / 2 - length1 + length2, y: pointer.y + length4 / 2 - length5 },
-          { x: pointer.x + length1 / 2 - length1 + length2, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
-          { x: pointer.x + length1 / 2 - length1 + length2 + length3, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
-        ],
-        {
-          fill: 'transparent',
-          stroke: 'black',
-          strokeWidth: 2,
-          selectable: true,
-          fontSize: fontSize,
-          name: 'guideTriangle',
-        },
-      )
-
-      canvas?.add(triangle)
-    })
-
-    canvas?.on('mouse:down', (e) => {
-      isDrawing = false
-    })
-  }
-  const createTemplate19 = () => {
-    const length1 = 500 //Number(prompt('1번'))
-    const length2 = 300 //Number(prompt('2번'))
-    const length3 = 400 //Number(prompt('3번'))
-    const length4 = 300 //Number(prompt('4번'))
-
-    // 좌측 빗변
-    const leftHypotenuse = Math.sqrt(((length1 - length2) / 2) ** 2 + length3 ** 2)
-    const rightHypotenuse = (length4 / length3) * leftHypotenuse
-
-    const leftAngle = Math.acos((length1 - length2) / 2 / leftHypotenuse)
-
-    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 + leftHypotenuse * Math.cos(leftAngle), y: pointer.y + length3 / 2 - leftHypotenuse * Math.sin(leftAngle) },
-          { x: pointer.x - length1 / 2, y: pointer.y + length3 / 2 },
-          { x: pointer.x + length1 / 2, y: pointer.y + length3 / 2 },
-          { x: pointer.x + length1 / 2 - rightHypotenuse * Math.cos(leftAngle), y: pointer.y + length3 / 2 - rightHypotenuse * Math.sin(leftAngle) },
-          {
-            x: pointer.x + length1 / 2 - rightHypotenuse * Math.cos(leftAngle) - length2,
-            y: pointer.y + length3 / 2 - rightHypotenuse * Math.sin(leftAngle),
-          },
-        ],
-        {
-          fill: 'transparent',
-          stroke: 'black',
-          strokeWidth: 2,
-          selectable: true,
-          fontSize: fontSize,
-          name: 'guideTriangle',
-        },
-      )
-
-      canvas?.add(triangle)
-    })
-
-    canvas?.on('mouse:down', (e) => {
-      isDrawing = false
-    })
-  }
-  const createTemplate20 = () => {
-    const length1 = 500 //Number(prompt('1번'))
-    const length2 = 300 //Number(prompt('2번'))
-    const length3 = 400 //Number(prompt('3번'))
-    const length4 = 300 //Number(prompt('4번'))
-
-    // 좌측 빗변
-    const rightHypotenuse = Math.sqrt(((length1 - length2) / 2) ** 2 + length3 ** 2)
-    const leftHypotenuse = (length4 / length3) * rightHypotenuse
-
-    const rightAngle = Math.acos((length1 - length2) / 2 / rightHypotenuse)
-
-    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 - rightHypotenuse * Math.cos(rightAngle),
-            y: pointer.y + length3 / 2 - rightHypotenuse * Math.sin(rightAngle),
-          },
-          { x: pointer.x + length1 / 2, y: pointer.y + length3 / 2 },
-          { x: pointer.x - length1 / 2, y: pointer.y + length3 / 2 },
-          { x: pointer.x - length1 / 2 + leftHypotenuse * Math.cos(rightAngle), y: pointer.y + length3 / 2 - leftHypotenuse * Math.sin(rightAngle) },
-          {
-            x: pointer.x - length1 / 2 + leftHypotenuse * Math.cos(rightAngle) + length2,
-            y: pointer.y + length3 / 2 - leftHypotenuse * Math.sin(rightAngle),
-          },
-        ],
-        {
-          fill: 'transparent',
-          stroke: 'black',
-          strokeWidth: 2,
-          selectable: true,
-          fontSize: fontSize,
-          name: 'guideTriangle',
-        },
-      )
-
-      canvas?.add(triangle)
-    })
-
-    canvas?.on('mouse:down', (e) => {
-      isDrawing = false
-    })
-  }
-
-  const createTemplate21 = () => {
-    const length1 = 500 //Number(prompt('1번'))
-    const length2 = 240 //Number(prompt('2번'))
-    const length3 = 300 //Number(prompt('3번'))
-    const length4 = 200 //Number(prompt('4번'))
-
-    if (length1 < length2) {
-      alert('1번보다 작게 입력해주세요.')
-      return
-    }
-
-    if (length3 < length4) {
-      alert('3번보다 작게 입력해주세요.')
-      return
-    }
-
-    const pointsArray = [
-      { x: 0, y: 0 },
-      { x: 0, y: 0 },
-      { x: 0, y: 0 },
-      { x: 0, y: 0 },
-      { x: 0, y: 0 },
-    ]
-
-    const tmpPolygon = new QPolygon(
-      [
-        { x: 0, y: length3 },
-        { x: length1 - length2, y: length3 },
-        { x: (length1 - length2) / 2, y: length3 - length3 },
-      ],
-      {
-        fill: 'transparent',
-        stroke: 'black', //black
-        strokeWidth: 2,
-        selectable: true,
-        fontSize: 0,
-      },
-    )
-
-    const coord = getIntersectionPoint(tmpPolygon.lines[1].startPoint, tmpPolygon.lines[2].startPoint, length3 - length4)
-    const scale = (length1 - length2) / coord.x
-
-    tmpPolygon.set({ scaleX: scale })
-
-    pointsArray[0].x = 0
-    pointsArray[0].y = length3 //바닥면부터 시작하게
-    pointsArray[1].x = pointsArray[0].x + length1
-    pointsArray[1].y = pointsArray[0].y
-    pointsArray[2].x = pointsArray[1].x
-    pointsArray[2].y = pointsArray[1].y - length4
-    pointsArray[3].x = pointsArray[2].x - length2
-    pointsArray[3].y = pointsArray[2].y
-    pointsArray[4].x = tmpPolygon.getCurrentPoints()[2].x
-    pointsArray[4].y = tmpPolygon.getCurrentPoints()[2].y
-
-    const tmp1Polygon = new QPolygon(pointsArray, {
-      fill: 'transparent',
-      stroke: 'black', //black
-      strokeWidth: 2,
-      selectable: true,
-      fontSize: 0,
-    })
-
-    // canvas?.add(tmp1Polygon)
-
-    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 + length4 / 2,
-          },
-          {
-            x: pointer.x + length1 / 2,
-            y: pointer.y + length4 / 2,
-          },
-          {
-            x: pointer.x + length1 / 2,
-            y: pointer.y - length4 / 2,
-          },
-          {
-            x: pointer.x - (length2 - length1 / 2),
-            y: pointer.y - length4 / 2,
-          },
-          {
-            x: pointer.x - length1 / 2 + pointsArray[4].x,
-            y: pointer.y - length3 + length4 / 2,
-          },
-        ],
-        {
-          fill: 'transparent',
-          stroke: 'black',
-          strokeWidth: 2,
-          selectable: true,
-          fontSize: fontSize,
-          name: 'guideTriangle',
-        },
-      )
-      canvas?.add(triangle)
-    })
-
-    canvas?.on('mouse:down', (e) => {
-      isDrawing = false
-    })
-  }
-
-  const createTemplate22 = () => {
-    const length1 = 500 //Number(prompt('1번'))
-    const length2 = 240 //Number(prompt('2번'))
-    const length3 = 300 //Number(prompt('3번'))
-    const length4 = 200 //Number(prompt('4번'))
-
-    if (length1 < length2) {
-      alert('1번보다 작게 입력해주세요.')
-      return
-    }
-
-    if (length3 < length4) {
-      alert('3번보다 작게 입력해주세요.')
-      return
-    }
-
-    const pointsArray = [
-      { x: 0, y: 0 },
-      { x: 0, y: 0 },
-      { x: 0, y: 0 },
-      { x: 0, y: 0 },
-      { x: 0, y: 0 },
-    ]
-
-    const tmpPolygon = new QPolygon(
-      [
-        { x: 0, y: length3 },
-        { x: length1 - length2, y: length3 },
-        { x: (length1 - length2) / 2, y: length3 - length3 },
-      ],
-      {
-        fill: 'transparent',
-        stroke: 'black', //black
-        strokeWidth: 2,
-        selectable: true,
-        fontSize: 0,
-      },
-    )
-
-    const coord = getIntersectionPoint(tmpPolygon.lines[1].startPoint, tmpPolygon.lines[2].startPoint, length3 - length4)
-    const scale = (length1 - length2) / coord.x
-
-    tmpPolygon.set({ scaleX: scale })
-
-    pointsArray[0].x = 0
-    pointsArray[0].y = length3 //바닥면부터 시작하게
-    pointsArray[1].x = pointsArray[0].x + length1
-    pointsArray[1].y = pointsArray[0].y
-    pointsArray[2].x = pointsArray[1].x
-    pointsArray[2].y = pointsArray[1].y - length4
-    pointsArray[3].x = pointsArray[2].x - length2
-    pointsArray[3].y = pointsArray[2].y
-    pointsArray[4].x = tmpPolygon.getCurrentPoints()[2].x
-    pointsArray[4].y = tmpPolygon.getCurrentPoints()[2].y
-
-    const tmp1Polygon = new QPolygon(pointsArray, {
-      fill: 'transparent',
-      stroke: 'black', //black
-      strokeWidth: 2,
-      selectable: true,
-      fontSize: 0,
-    })
-
-    tmp1Polygon.set('flipX', true) //반전시킴
-    tmp1Polygon.setCoords()
-
-    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 + length4 / 2,
-          },
-          {
-            x: pointer.x + length1 / 2,
-            y: pointer.y + length4 / 2,
-          },
-          {
-            x: pointer.x + length1 / 2,
-            y: pointer.y - length4 / 2,
-          },
-          {
-            x: pointer.x - (length2 - length1 / 2),
-            y: pointer.y - length4 / 2,
-          },
-          {
-            x: pointer.x - length1 / 2 + pointsArray[4].x,
-            y: pointer.y - length3 + length4 / 2,
-          },
-        ],
-        {
-          fill: 'transparent',
-          stroke: 'black',
-          strokeWidth: 2,
-          selectable: true,
-          fontSize: fontSize,
-          name: 'guideTriangle',
-          flipX: true,
-        },
-      )
-      triangle.setCoords()
-      canvas?.add(triangle)
-    })
-
-    canvas?.on('mouse:down', (e) => {
-      isDrawing = false
-    })
-  }
-
-  /**
-   * 19~22번은 못함
-   */
-  const createTemplate23 = () => {
-    const length1 = 300 //Number(prompt('1번'))
-    const length2 = 100 //Number(prompt('2번'))
-    const length3 = 150 //Number(prompt('3번'))
-    const length4 = 400 //Number(prompt('4번'))
-    const length5 = 300 //Number(prompt('5번'))
-
-    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 + length2, y: pointer.y + length4 / 2 },
-          { x: pointer.x - length1 / 2, y: pointer.y + length4 / 2 },
-          { x: pointer.x - length1 / 2, y: pointer.y + length4 / 2 - length4 },
-          { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length4 },
-          { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length4 + length4 },
-          { x: pointer.x - length1 / 2 + length1 - length3, y: pointer.y + length4 / 2 - length4 + length4 },
-          { x: pointer.x - length1 / 2 + length2 + (length1 - length2 - length3) / 2, y: pointer.y + length4 / 2 - length4 + length5 },
-        ],
-        {
-          fill: 'transparent',
-          stroke: 'black',
-          strokeWidth: 2,
-          selectable: true,
-          fontSize: fontSize,
-          name: 'guideTriangle',
-        },
-      )
-
-      canvas?.add(triangle)
-    })
-
-    canvas?.on('mouse:down', (e) => {
-      isDrawing = false
-    })
-  }
-
-  const createTemplate24 = () => {
-    const length1 = 300 //Number(prompt('1번'))
-    const length2 = 400 //Number(prompt('2번'))
-    const length3 = 300 //Number(prompt('3번'))
-
-    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 + length2 - length2 / 2 },
-          { x: pointer.x - length1 / 2, y: pointer.y + length2 - length2 / 2 - length3 },
-          { x: pointer.x, y: pointer.y + length2 - length2 / 2 - length3 - (length2 - length3) },
-          { x: pointer.x + length1 / 2, y: pointer.y + length2 - length2 / 2 - length3 },
-          { x: pointer.x + length1 / 2, y: pointer.y + length2 - length2 / 2 - length3 + length3 },
-        ],
-        {
-          fill: 'transparent',
-          stroke: 'black',
-          strokeWidth: 2,
-          selectable: true,
-          fontSize: fontSize,
-          name: 'guideTriangle',
-        },
-      )
-
-      canvas?.add(triangle)
-    })
-
-    canvas?.on('mouse:down', (e) => {
-      isDrawing = false
-    })
-  }
-  const createTemplate25 = () => {
-    const length1 = 300 //Number(prompt('1번'))
-    const length2 = 200 //Number(prompt('2번'))
-    const length3 = 300 //Number(prompt('3번'))
-    const length4 = 200 //Number(prompt('3번'))
-
-    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 - length2) / 2,
-            y: pointer.y + length3 / 2 - (length3 - length4),
-          },
-          {
-            x: pointer.x - length1 / 2 + (length1 - length2) / 2,
-            y: pointer.y + length3 / 2 - (length3 - length4) - length4,
-          },
-          {
-            x: pointer.x - length1 / 2 + (length1 - length2) / 2 + length2,
-            y: pointer.y + length3 / 2 - (length3 - length4) - length4,
-          },
-          {
-            x: pointer.x - length1 / 2 + (length1 - length2) / 2 + length2,
-            y: pointer.y + length3 / 2 - (length3 - length4) - length4 + length4,
-          },
-          {
-            x: pointer.x - length1 / 2 + length1,
-            y: pointer.y + length3 / 2,
-          },
-        ],
-        {
-          fill: 'transparent',
-          stroke: 'black',
-          strokeWidth: 2,
-          selectable: true,
-          fontSize: fontSize,
-          name: 'guideTriangle',
-        },
-      )
-
-      canvas?.add(triangle)
-    })
-
-    canvas?.on('mouse:down', (e) => {
-      isDrawing = false
-    })
-  }
-  const createTemplate26 = () => {
-    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 + 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)
-    })
-
-    canvas?.on('mouse:down', (e) => {
-      isDrawing = false
-    })
-  }
-  const createTemplate28 = () => {
-    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 + b) / 2, y: pointer.y + length2 / 2 },
-          { x: pointer.x + length1 / 2 - b / 2, y: pointer.y + length2 / 2 },
-          {
-            x: pointer.x + length1 / 2 - b / 2 + d * Math.cos(newAngleInRadians),
-            y: pointer.y + length2 / 2 - d * Math.sin(newAngleInRadians),
-          },
-          {
-            x: pointer.x - (length1 + b) / 2 + length3 * Math.cos(newAngleInRadians),
-            y: pointer.y + length2 / 2 - length3 * 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()
-    })
-  }
-  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()
-    })
-  }
-
   const moduleConfiguration = () => {
     createRoofRack()
   }
@@ -1895,66 +751,6 @@ export default function Roof2(props) {
             <Button className="m-1 p-2" onClick={deleteCell}>
               선택 셀 지우기
             </Button>
-            <Button className="m-1 p-2" onClick={createTemplate10}>
-              10번 추가
-            </Button>
-            <Button className="m-1 p-2" onClick={createTemplate11}>
-              11번 추가
-            </Button>
-            <Button className="m-1 p-2" onClick={createTemplate12}>
-              12번 추가
-            </Button>
-            <Button className="m-1 p-2" onClick={createTemplate13}>
-              13번 추가
-            </Button>
-            <Button className="m-1 p-2" onClick={createTemplate14}>
-              14번 추가
-            </Button>
-            <Button className="m-1 p-2" onClick={createTemplate15}>
-              15번 추가
-            </Button>
-            <Button className="m-1 p-2" onClick={createTemplate16}>
-              16번 추가
-            </Button>
-            <Button className="m-1 p-2" onClick={createTemplate17}>
-              17번 추가
-            </Button>
-            <Button className="m-1 p-2" onClick={createTemplate18}>
-              18번 추가
-            </Button>
-            <Button className="m-1 p-2" onClick={createTemplate19}>
-              19번 추가
-            </Button>
-            <Button className="m-1 p-2" onClick={createTemplate20}>
-              20번 추가
-            </Button>
-            <Button className="m-1 p-2" onClick={createTemplate21}>
-              21번 추가
-            </Button>
-            <Button className="m-1 p-2" onClick={createTemplate22}>
-              22번 추가
-            </Button>
-            <Button className="m-1 p-2" onClick={createTemplate23}>
-              23번 추가
-            </Button>
-            <Button className="m-1 p-2" onClick={createTemplate24}>
-              24번 추가
-            </Button>
-            <Button className="m-1 p-2" onClick={createTemplate25}>
-              25번 추가
-            </Button>
-            <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={moduleConfiguration}>
               모듈,회로구성
             </Button>
diff --git a/src/components/ui/SurfaceShape.jsx b/src/components/ui/SurfaceShape.jsx
index 774f8e28..06e2e0e3 100644
--- a/src/components/ui/SurfaceShape.jsx
+++ b/src/components/ui/SurfaceShape.jsx
@@ -5,6 +5,7 @@ import { modalState } from '@/store/modalAtom'
 import { QPolygon } from '@/components/fabric/QPolygon'
 import { fontSizeState, roofMaterialState } from '@/store/canvasAtom'
 import { degreesToRadians } from '@turf/turf'
+import { getIntersectionPoint } from '@/util/canvas-util'
 
 /**
  * 면형상 배치 모달
@@ -39,6 +40,10 @@ export const SurfaceShapeModal = ({ canvas }) => {
   }
 
   const onSave = () => {
+    if (!checkValid()) {
+      alert('안됨')
+      return
+    }
     let isDrawing = true
     let obj = null
     let points = []
@@ -303,7 +308,136 @@ export const SurfaceShapeModal = ({ canvas }) => {
           ]
           break
         }
+        case 21: {
+          const pointsArray = [
+            { x: 0, y: 0 },
+            { x: 0, y: 0 },
+            { x: 0, y: 0 },
+            { x: 0, y: 0 },
+            { x: 0, y: 0 },
+          ]
 
+          const tmpPolygon = new QPolygon(
+            [
+              { x: 0, y: length3 },
+              { x: length1 - length2, y: length3 },
+              { x: (length1 - length2) / 2, y: length3 - length3 },
+            ],
+            {
+              fill: 'transparent',
+              stroke: 'black', //black
+              strokeWidth: 2,
+              selectable: true,
+              fontSize: 0,
+            },
+          )
+
+          const coord = getIntersectionPoint(tmpPolygon.lines[1].startPoint, tmpPolygon.lines[2].startPoint, length3 - length4)
+          const scale = (length1 - length2) / coord.x
+
+          tmpPolygon.set({ scaleX: scale })
+
+          pointsArray[0].x = 0
+          pointsArray[0].y = length3 //바닥면부터 시작하게
+          pointsArray[1].x = pointsArray[0].x + length1
+          pointsArray[1].y = pointsArray[0].y
+          pointsArray[2].x = pointsArray[1].x
+          pointsArray[2].y = pointsArray[1].y - length4
+          pointsArray[3].x = pointsArray[2].x - length2
+          pointsArray[3].y = pointsArray[2].y
+          pointsArray[4].x = tmpPolygon.getCurrentPoints()[2].x
+          pointsArray[4].y = tmpPolygon.getCurrentPoints()[2].y
+
+          points = [
+            {
+              x: pointer.x - length1 / 2,
+              y: pointer.y + length4 / 2,
+            },
+            {
+              x: pointer.x + length1 / 2,
+              y: pointer.y + length4 / 2,
+            },
+            {
+              x: pointer.x + length1 / 2,
+              y: pointer.y - length4 / 2,
+            },
+            {
+              x: pointer.x - (length2 - length1 / 2),
+              y: pointer.y - length4 / 2,
+            },
+            {
+              x: pointer.x - length1 / 2 + pointsArray[4].x,
+              y: pointer.y - length3 + length4 / 2,
+            },
+          ]
+
+          break
+        }
+        case 22: {
+          const pointsArray = [
+            { x: 0, y: 0 },
+            { x: 0, y: 0 },
+            { x: 0, y: 0 },
+            { x: 0, y: 0 },
+            { x: 0, y: 0 },
+          ]
+
+          const tmpPolygon = new QPolygon(
+            [
+              { x: 0, y: length3 },
+              { x: length1 - length2, y: length3 },
+              { x: (length1 - length2) / 2, y: length3 - length3 },
+            ],
+            {
+              fill: 'transparent',
+              stroke: 'black', //black
+              strokeWidth: 2,
+              selectable: true,
+              fontSize: 0,
+            },
+          )
+
+          const coord = getIntersectionPoint(tmpPolygon.lines[1].startPoint, tmpPolygon.lines[2].startPoint, length3 - length4)
+          const scale = (length1 - length2) / coord.x
+
+          tmpPolygon.set({ scaleX: scale })
+
+          pointsArray[0].x = 0
+          pointsArray[0].y = length3 //바닥면부터 시작하게
+          pointsArray[1].x = pointsArray[0].x + length1
+          pointsArray[1].y = pointsArray[0].y
+          pointsArray[2].x = pointsArray[1].x
+          pointsArray[2].y = pointsArray[1].y - length4
+          pointsArray[3].x = pointsArray[2].x - length2
+          pointsArray[3].y = pointsArray[2].y
+          pointsArray[4].x = tmpPolygon.getCurrentPoints()[2].x
+          pointsArray[4].y = tmpPolygon.getCurrentPoints()[2].y
+
+          points = [
+            {
+              x: pointer.x - length1 / 2,
+              y: pointer.y + length4 / 2,
+            },
+            {
+              x: pointer.x + length1 / 2,
+              y: pointer.y + length4 / 2,
+            },
+            {
+              x: pointer.x + length1 / 2,
+              y: pointer.y - length4 / 2,
+            },
+            {
+              x: pointer.x - (length2 - length1 / 2),
+              y: pointer.y - length4 / 2,
+            },
+            {
+              x: pointer.x - length1 / 2 + pointsArray[4].x,
+              y: pointer.y - length3 + length4 / 2,
+            },
+          ]
+
+          break
+        }
         case 23: {
           points = [
             { x: pointer.x - length1 / 2 + length2, y: pointer.y + length4 / 2 },
@@ -462,14 +596,27 @@ export const SurfaceShapeModal = ({ canvas }) => {
           break
         }
       }
-      obj = new QPolygon(points, {
-        fill: 'transparent',
-        stroke: 'black',
-        strokeWidth: 2,
-        selectable: false,
-        fontSize: fontSize,
-        name: 'guideTriangle',
-      })
+      if (type !== 22) {
+        obj = new QPolygon(points, {
+          fill: 'transparent',
+          stroke: 'black',
+          strokeWidth: 2,
+          selectable: false,
+          fontSize: fontSize,
+          name: 'guideTriangle',
+        })
+      } else {
+        obj = new QPolygon(points, {
+          fill: 'transparent',
+          stroke: 'black',
+          strokeWidth: 2,
+          selectable: false,
+          fontSize: fontSize,
+          name: 'guideTriangle',
+          flipX: true,
+        })
+      }
+
       canvas?.add(obj)
       setCurrentPattern(obj)
       canvas?.renderAll()
@@ -482,6 +629,42 @@ export const SurfaceShapeModal = ({ canvas }) => {
     setOpen(false)
   }
 
+  const checkValid = () => {
+    let result = true
+    switch (type) {
+      case 1: {
+        if (length3 !== 0 && length1 > length3) {
+          return false
+        }
+        break
+      }
+      case 21: {
+        if (length1 < length2) {
+          alert('1번보다 작게 입력해주세요.')
+          return false
+        }
+
+        if (length3 < length4) {
+          alert('3번보다 작게 입력해주세요.')
+          return false
+        }
+      }
+      case 22: {
+        if (length1 < length2) {
+          alert('1번보다 작게 입력해주세요.')
+          return false
+        }
+
+        if (length3 < length4) {
+          alert('3번보다 작게 입력해주세요.')
+          return false
+        }
+      }
+    }
+
+    return result
+  }
+
   const setLength = (e) => {
     let { name, value } = e.target
     value = value.replace(/[^-0-9]/g, '')