버튼 제거 및 21,22번 추가

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, {
+      if (type !== 22) {
-        fill: 'transparent',
+        obj = new QPolygon(points, {
-        stroke: 'black',
+          fill: 'transparent',
-        strokeWidth: 2,
+          stroke: 'black',
-        selectable: false,
+          strokeWidth: 2,
-        fontSize: fontSize,
+          selectable: false,
-        name: 'guideTriangle',
+          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, '')