diff --git a/src/components/ui/SurfaceShape.jsx b/src/components/ui/SurfaceShape.jsx
index 6a5147c8..774f8e28 100644
--- a/src/components/ui/SurfaceShape.jsx
+++ b/src/components/ui/SurfaceShape.jsx
@@ -4,6 +4,7 @@ import { useRecoilValue, useSetRecoilState } from 'recoil'
 import { modalState } from '@/store/modalAtom'
 import { QPolygon } from '@/components/fabric/QPolygon'
 import { fontSizeState, roofMaterialState } from '@/store/canvasAtom'
+import { degreesToRadians } from '@turf/turf'
 
 /**
  * 면형상 배치 모달
@@ -40,6 +41,7 @@ export const SurfaceShapeModal = ({ canvas }) => {
   const onSave = () => {
     let isDrawing = true
     let obj = null
+    let points = []
     canvas?.on('mouse:move', (e) => {
       if (!isDrawing) {
         return
@@ -54,210 +56,420 @@ export const SurfaceShapeModal = ({ canvas }) => {
             newLength2 = Math.sqrt(length3 ** 2 - (length1 / 2) ** 2)
           }
 
-          obj = new QPolygon(
-            [
-              { x: pointer.x, y: pointer.y - parseInt(newLength2) / 2 },
-              { x: pointer.x - parseInt(length1) / 2, y: pointer.y + parseInt(newLength2) / 2 },
-              { x: pointer.x + parseInt(length1) / 2, y: pointer.y + parseInt(newLength2) / 2 },
-            ],
-            {
-              fill: 'transparent',
-              stroke: 'black',
-              strokeWidth: 2,
-              selectable: false,
-              fontSize: fontSize,
-              name: 'guideTriangle',
-            },
-          )
+          points = [
+            { x: pointer.x, y: pointer.y - parseInt(newLength2) / 2 },
+            { x: pointer.x - parseInt(length1) / 2, y: pointer.y + parseInt(newLength2) / 2 },
+            { x: pointer.x + parseInt(length1) / 2, y: pointer.y + parseInt(newLength2) / 2 },
+          ]
 
           break
         }
         case 2: {
-          obj = new QPolygon(
-            [
-              { x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
-              { x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
-              { x: pointer.x + length1 / 2, y: pointer.y - length2 / 2 },
-              { x: pointer.x - length1 / 2, y: pointer.y - length2 / 2 },
-            ],
-            {
-              fill: 'transparent',
-              stroke: 'black',
-              strokeWidth: 2,
-              selectable: false,
-              fontSize: fontSize,
-              name: 'guideTriangle',
-            },
-          )
+          points = [
+            { x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
+            { x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
+            { x: pointer.x + length1 / 2, y: pointer.y - length2 / 2 },
+            { x: pointer.x - length1 / 2, y: pointer.y - length2 / 2 },
+          ]
+
           break
         }
         case 3: {
-          obj = new QPolygon(
-            [
-              { x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
-              { x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
-              { x: pointer.x + length3 / 2, y: pointer.y - length2 / 2 },
-              { x: pointer.x - length3 / 2, y: pointer.y - length2 / 2 },
-            ],
-            {
-              fill: 'transparent',
-              stroke: 'black',
-              strokeWidth: 2,
-              selectable: false,
-              fontSize: fontSize,
-              name: 'guideTriangle',
-            },
-          )
+          points = [
+            { x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
+            { x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
+            { x: pointer.x + length3 / 2, y: pointer.y - length2 / 2 },
+            { x: pointer.x - length3 / 2, y: pointer.y - length2 / 2 },
+          ]
+
           break
         }
         case 4: {
-          obj = new QPolygon(
-            [
-              { x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
-              { x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
-              { x: pointer.x + length1 / 2, y: pointer.y - length2 / 2 },
-            ],
-            {
-              fill: 'transparent',
-              stroke: 'black',
-              strokeWidth: 2,
-              selectable: false,
-              fontSize: fontSize,
-              name: 'guideTriangle',
-            },
-          )
+          points = [
+            { x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
+            { x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
+            { x: pointer.x + length1 / 2, y: pointer.y - length2 / 2 },
+          ]
 
           break
         }
         case 5: {
-          obj = new QPolygon(
-            [
-              { x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
-              { x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
-              { x: pointer.x - length1 / 2, y: pointer.y - length2 / 2 },
-            ],
-            {
-              fill: 'transparent',
-              stroke: 'black',
-              strokeWidth: 2,
-              selectable: false,
-              fontSize: fontSize,
-              name: 'guideTriangle',
-            },
-          )
+          points = [
+            { x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
+            { x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
+            { x: pointer.x - length1 / 2, y: pointer.y - length2 / 2 },
+          ]
+
           break
         }
 
         case 6: {
-          obj = new QPolygon(
-            [
-              { 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, y: pointer.y + length3 / 2 },
-              { x: pointer.x + length1 / 2, y: pointer.y + length3 / 2 - length2 },
-            ],
-            {
-              fill: 'transparent',
-              stroke: 'black',
-              strokeWidth: 2,
-              selectable: false,
-              fontSize: fontSize,
-              name: 'guideTriangle',
-            },
-          )
+          points = [
+            { 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, y: pointer.y + length3 / 2 },
+            { x: pointer.x + length1 / 2, y: pointer.y + length3 / 2 - length2 },
+          ]
+
           break
         }
 
         case 7: {
-          obj = new QPolygon(
-            [
-              { x: pointer.x - length1 / 2, y: pointer.y - length2 / 2 },
-              { x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
-              { x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
-              { x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 - length3 },
-            ],
-            {
-              fill: 'transparent',
-              stroke: 'black',
-              strokeWidth: 2,
-              selectable: false,
-              fontSize: fontSize,
-              name: 'guideTriangle',
-            },
-          )
+          points = [
+            { x: pointer.x - length1 / 2, y: pointer.y - length2 / 2 },
+            { x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
+            { x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
+            { x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 - length3 },
+          ]
+
           break
         }
         case 8: {
           const angleInRadians = Math.asin(length2 / length3)
-          obj = new QPolygon(
-            [
-              { x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
-              { x: pointer.x - length1 / 2 + length3 * Math.cos(angleInRadians), y: pointer.y + length2 / 2 - length3 * Math.sin(angleInRadians) },
-              { x: pointer.x + length1 / 2 + length3 * Math.cos(angleInRadians), y: pointer.y + length2 / 2 - length3 * Math.sin(angleInRadians) },
-              { x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
-            ],
-            {
-              fill: 'transparent',
-              stroke: 'black',
-              strokeWidth: 2,
-              selectable: false,
-              fontSize: fontSize,
-              name: 'guideTriangle',
-            },
-          )
+          points = [
+            { x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
+            { x: pointer.x - length1 / 2 + length3 * Math.cos(angleInRadians), y: pointer.y + length2 / 2 - length3 * Math.sin(angleInRadians) },
+            { x: pointer.x + length1 / 2 + length3 * Math.cos(angleInRadians), y: pointer.y + length2 / 2 - length3 * Math.sin(angleInRadians) },
+            { x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
+          ]
+
           break
         }
         case 9: {
           const angleInRadians = Math.asin(length2 / length3)
-          obj = new QPolygon(
-            [
-              { x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
-              { x: pointer.x + length1 / 2 - length3 * Math.cos(angleInRadians), y: pointer.y + length2 / 2 - length3 * Math.sin(angleInRadians) },
-              { x: pointer.x - length1 / 2 - length3 * Math.cos(angleInRadians), y: pointer.y + length2 / 2 - length3 * Math.sin(angleInRadians) },
-              { x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
-            ],
-            {
-              fill: 'transparent',
-              stroke: 'black',
-              strokeWidth: 2,
-              selectable: false,
-              fontSize: fontSize,
-              name: 'guideTriangle',
-            },
-          )
+          points = [
+            { x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
+            { x: pointer.x + length1 / 2 - length3 * Math.cos(angleInRadians), y: pointer.y + length2 / 2 - length3 * Math.sin(angleInRadians) },
+            { x: pointer.x - length1 / 2 - length3 * Math.cos(angleInRadians), y: pointer.y + length2 / 2 - length3 * Math.sin(angleInRadians) },
+            { x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
+          ]
+
           break
         }
         case 10: {
-          console.log(length1, length2, length3, length4, length5)
-          obj = 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),
-              },
-            ],
+          points = [
+            { 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 },
             {
-              fill: 'transparent',
-              stroke: 'black',
-              strokeWidth: 2,
-              selectable: true,
-              fontSize: fontSize,
-              name: 'guideTriangle',
+              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),
+            },
+          ]
+
+          break
+        }
+        case 11: {
+          points = [
+            { 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) },
+          ]
+
+          break
+        }
+        case 12: {
+          points = [
+            { 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) },
+          ]
+
+          break
+        }
+        case 13: {
+          points = [
+            { 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) },
+          ]
+          break
+        }
+        case 14: {
+          points = [
+            { 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) },
+          ]
+          break
+        }
+        case 15: {
+          points = [
+            { 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) },
+          ]
+          break
+        }
+        case 16: {
+          points = [
+            { 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) },
+          ]
+          break
+        }
+        case 17: {
+          points = [
+            { 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) },
+          ]
+          break
+        }
+        case 18: {
+          points = [
+            { 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) },
+          ]
+          break
+        }
+
+        case 19: {
+          const leftHypotenuse = Math.sqrt(((length1 - length2) / 2) ** 2 + length3 ** 2)
+          const rightHypotenuse = (length4 / length3) * leftHypotenuse
+
+          const leftAngle = Math.acos((length1 - length2) / 2 / leftHypotenuse)
+
+          points = [
+            { 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),
+            },
+          ]
+
+          break
+        }
+        case 20: {
+          // 좌측 빗변
+          const rightHypotenuse = Math.sqrt(((length1 - length2) / 2) ** 2 + length3 ** 2)
+          const leftHypotenuse = (length4 / length3) * rightHypotenuse
+
+          const rightAngle = Math.acos((length1 - length2) / 2 / rightHypotenuse)
+          points = [
+            {
+              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),
+            },
+          ]
+          break
+        }
+
+        case 23: {
+          points = [
+            { 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 },
+          ]
+          break
+        }
+
+        case 24: {
+          points = [
+            { 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 },
+          ]
+          break
+        }
+
+        case 25: {
+          points = [
+            {
+              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,
+            },
+          ]
+          break
+        }
+        case 26: {
+          const angle = (Math.asin(length3 / length4) * 180) / Math.PI // 높이와 빗변으로 먼저 각도구하기
+
+          const topL = (length1 - length2) / 2 / Math.cos((angle * Math.PI) / 180) // 꺽이는부분 윗쪽 길이
+
+          points = [
+            {
+              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)),
+            },
+          ]
+          break
+        }
+        case 27: {
+          const angle = (Math.asin(length3 / length4) * 180) / Math.PI // 높이와 빗변으로 먼저 각도구하기
+
+          const topL = (length1 - length2) / 2 / Math.cos((angle * Math.PI) / 180) // 꺽이는부분 윗쪽 길이
+          points = [
+            {
+              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)),
+            },
+          ]
+          break
+        }
+        case 28: {
+          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)
+          const newAngleInRadians = (90 - angleInDegrees) * (Math.PI / 180)
+          points = [
+            { 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),
+            },
+          ]
+          break
+        }
+        case 29: {
+          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)
+          const newAngleInRadians = (90 - angleInDegrees) * (Math.PI / 180)
+          points = [
+            {
+              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) },
+          ]
           break
         }
       }
+      obj = new QPolygon(points, {
+        fill: 'transparent',
+        stroke: 'black',
+        strokeWidth: 2,
+        selectable: false,
+        fontSize: fontSize,
+        name: 'guideTriangle',
+      })
       canvas?.add(obj)
       setCurrentPattern(obj)
       canvas?.renderAll()
@@ -332,40 +544,25 @@ export const SurfaceShapeModal = ({ canvas }) => {
     canvas?.renderAll()
   }
 
+  const ButtonComp = () => {
+    // Generate 29 buttons
+    const buttons = []
+    for (let i = 1; i <= 29; i++) {
+      buttons.push(
+        <Button key={i} className="m-1 p-2" value={i} onClick={onChangeType}>
+          {i}번 추가
+        </Button>,
+      )
+    }
+
+    return <div>{buttons}</div>
+  }
+
   return (
     <>
       <div>
         <div>면형상배치{type}</div>
-        <Button className="m-1 p-2" value="1" onClick={onChangeType}>
-          1번
-        </Button>
-        <Button className="m-1 p-2" value="2" onClick={onChangeType}>
-          2번
-        </Button>
-        <Button className="m-1 p-2" value="3" onClick={onChangeType}>
-          3번
-        </Button>
-        <Button className="m-1 p-2" value="4" onClick={onChangeType}>
-          4번
-        </Button>
-        <Button className="m-1 p-2" value="5" onClick={onChangeType}>
-          5번
-        </Button>
-        <Button className="m-1 p-2" value="6" onClick={onChangeType}>
-          6번
-        </Button>
-        <Button className="m-1 p-2" value="7" onClick={onChangeType}>
-          7번
-        </Button>
-        <Button className="m-1 p-2" value="8" onClick={onChangeType}>
-          8번
-        </Button>
-        <Button className="m-1 p-2" value="9" onClick={onChangeType}>
-          9번
-        </Button>
-        <Button className="m-1 p-2" value="10" onClick={onChangeType}>
-          10번
-        </Button>
+        <ButtonComp></ButtonComp>
       </div>
       {type === 1 ? (
         <div>
@@ -377,16 +574,16 @@ export const SurfaceShapeModal = ({ canvas }) => {
               <Input type="text" name={'length2'} value={length2} onChange={setLength} />
             </>
           )}
-          길이3 <Input type="text" name={'length3'} value={length3} onChange={setLength} />
+          대각선 <Input type="text" name={'length3'} value={length3} onChange={setLength} />
         </div>
-      ) : type === 2 ? (
+      ) : [2, 4, 5].includes(type) ? (
         <div>
           길이1
           <Input type="text" name={'length1'} value={length1} onChange={setLength} />
           길이2
           <Input type="text" name={'length2'} value={length2} onChange={setLength} />
         </div>
-      ) : type === 3 ? (
+      ) : [3, 6, 7, 8, 9, 24, 28, 29].includes(type) ? (
         <>
           길이1
           <Input type="text" name={'length1'} value={length1} onChange={setLength} />
@@ -395,21 +592,7 @@ export const SurfaceShapeModal = ({ canvas }) => {
           길이3
           <Input type="text" name={'length3'} value={length3} onChange={setLength} />
         </>
-      ) : type === 4 ? (
-        <>
-          길이1
-          <Input type="text" name={'length1'} value={length1} onChange={setLength} />
-          길이2
-          <Input type="text" name={'length2'} value={length2} onChange={setLength} />
-        </>
-      ) : type === 5 ? (
-        <>
-          길이1
-          <Input type="text" name={'length1'} value={length1} onChange={setLength} />
-          길이2
-          <Input type="text" name={'length2'} value={length2} onChange={setLength} />
-        </>
-      ) : type === 6 ? (
+      ) : [11, 12, 19, 20, 21, 22, 25, 26, 27].includes(type) ? (
         <>
           길이1
           <Input type="text" name={'length1'} value={length1} onChange={setLength} />
@@ -417,35 +600,10 @@ export const SurfaceShapeModal = ({ canvas }) => {
           <Input type="text" name={'length2'} value={length2} onChange={setLength} />
           길이3
           <Input type="text" name={'length3'} value={length3} onChange={setLength} />
+          길이4
+          <Input type="text" name={'length4'} value={length4} onChange={setLength} />
         </>
-      ) : type === 7 ? (
-        <>
-          길이1
-          <Input type="text" name={'length1'} value={length1} onChange={setLength} />
-          길이2
-          <Input type="text" name={'length2'} value={length2} onChange={setLength} />
-          길이3
-          <Input type="text" name={'length3'} value={length3} onChange={setLength} />
-        </>
-      ) : type === 8 ? (
-        <>
-          길이1
-          <Input type="text" name={'length1'} value={length1} onChange={setLength} />
-          길이2
-          <Input type="text" name={'length2'} value={length2} onChange={setLength} />
-          길이3
-          <Input type="text" name={'length3'} value={length3} onChange={setLength} />
-        </>
-      ) : type === 9 ? (
-        <>
-          길이1
-          <Input type="text" name={'length1'} value={length1} onChange={setLength} />
-          길이2
-          <Input type="text" name={'length2'} value={length2} onChange={setLength} />
-          길이3
-          <Input type="text" name={'length3'} value={length3} onChange={setLength} />
-        </>
-      ) : type === 10 ? (
+      ) : [10, 13, 14, 15, 16, 17, 18, 23].includes(type) ? (
         <>
           길이1
           <Input type="text" name={'length1'} value={length1} onChange={setLength} />