숫자만 입력

src/components/ui/SurfaceShape.jsx

@@ -185,6 +185,7 @@ export const SurfaceShapeModal = ({ canvas }) => {
               name: 'guideTriangle',
             },
           )
+          break
         }
         case 8: {
           const angleInRadians = Math.asin(length2 / length3)
@@ -204,6 +205,7 @@ export const SurfaceShapeModal = ({ canvas }) => {
               name: 'guideTriangle',
             },
           )
+          break
         }
         case 9: {
           const angleInRadians = Math.asin(length2 / length3)
@@ -223,6 +225,37 @@ export const SurfaceShapeModal = ({ canvas }) => {
               name: 'guideTriangle',
             },
           )
+          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),
+              },
+            ],
+            {
+              fill: 'transparent',
+              stroke: 'black',
+              strokeWidth: 2,
+              selectable: true,
+              fontSize: fontSize,
+              name: 'guideTriangle',
+            },
+          )
+          break
         }
       }
       canvas?.add(obj)
@@ -238,22 +271,23 @@ export const SurfaceShapeModal = ({ canvas }) => {
   }
 
   const setLength = (e) => {
-    const { name, value } = e.target
+    let { name, value } = e.target
+    value = value.replace(/[^-0-9]/g, '')
     switch (name) {
       case 'length1':
-        setLength1(value)
+        setLength1(Number(value))
         break
       case 'length2':
-        setLength2(value)
+        setLength2(Number(value))
         break
       case 'length3':
-        setLength3(value)
+        setLength3(Number(value))
         break
       case 'length4':
-        setLength4(value)
+        setLength4(Number(value))
         break
       case 'length5':
-        setLength5(value)
+        setLength5(Number(value))
         break
       default:
         break
@@ -329,84 +363,100 @@ export const SurfaceShapeModal = ({ canvas }) => {
         <Button className="m-1 p-2" value="9" onClick={onChangeType}>
           9번
         </Button>
+        <Button className="m-1 p-2" value="10" onClick={onChangeType}>
+          10번
+        </Button>
       </div>
       {type === 1 ? (
         <div>
           길이1
-          <Input type="number" name={'length1'} value={length1} onChange={setLength} />
+          <Input type="text" name={'length1'} value={length1} onChange={setLength} />
           {length3 === 0 && (
             <>
               길이2
-              <Input type="number" name={'length2'} value={length2} onChange={setLength} />
+              <Input type="text" name={'length2'} value={length2} onChange={setLength} />
             </>
           )}
-          길이3 <Input type="number" name={'length3'} value={length3} onChange={setLength} />
+          길이3 <Input type="text" name={'length3'} value={length3} onChange={setLength} />
         </div>
       ) : type === 2 ? (
         <div>
           길이1
-          <Input type="number" name={'length1'} value={length1} onChange={setLength} />
+          <Input type="text" name={'length1'} value={length1} onChange={setLength} />
           길이2
-          <Input type="number" name={'length2'} value={length2} onChange={setLength} />
+          <Input type="text" name={'length2'} value={length2} onChange={setLength} />
         </div>
       ) : type === 3 ? (
         <>
           길이1
-          <Input type="number" name={'length1'} value={length1} onChange={setLength} />
+          <Input type="text" name={'length1'} value={length1} onChange={setLength} />
           길이2
-          <Input type="number" name={'length2'} value={length2} onChange={setLength} />
+          <Input type="text" name={'length2'} value={length2} onChange={setLength} />
           길이3
-          <Input type="number" name={'length3'} value={length3} onChange={setLength} />
+          <Input type="text" name={'length3'} value={length3} onChange={setLength} />
         </>
       ) : type === 4 ? (
         <>
           길이1
-          <Input type="number" name={'length1'} value={length1} onChange={setLength} />
+          <Input type="text" name={'length1'} value={length1} onChange={setLength} />
           길이2
-          <Input type="number" name={'length2'} value={length2} onChange={setLength} />
+          <Input type="text" name={'length2'} value={length2} onChange={setLength} />
         </>
       ) : type === 5 ? (
         <>
           길이1
-          <Input type="number" name={'length1'} value={length1} onChange={setLength} />
+          <Input type="text" name={'length1'} value={length1} onChange={setLength} />
           길이2
-          <Input type="number" name={'length2'} value={length2} onChange={setLength} />
+          <Input type="text" name={'length2'} value={length2} onChange={setLength} />
         </>
       ) : type === 6 ? (
         <>
           길이1
-          <Input type="number" name={'length1'} value={length1} onChange={setLength} />
+          <Input type="text" name={'length1'} value={length1} onChange={setLength} />
           길이2
-          <Input type="number" name={'length2'} value={length2} onChange={setLength} />
+          <Input type="text" name={'length2'} value={length2} onChange={setLength} />
           길이3
-          <Input type="number" name={'length3'} value={length3} onChange={setLength} />
+          <Input type="text" name={'length3'} value={length3} onChange={setLength} />
         </>
       ) : type === 7 ? (
         <>
           길이1
-          <Input type="number" name={'length1'} value={length1} onChange={setLength} />
+          <Input type="text" name={'length1'} value={length1} onChange={setLength} />
           길이2
-          <Input type="number" name={'length2'} value={length2} onChange={setLength} />
+          <Input type="text" name={'length2'} value={length2} onChange={setLength} />
           길이3
-          <Input type="number" name={'length3'} value={length3} onChange={setLength} />
+          <Input type="text" name={'length3'} value={length3} onChange={setLength} />
         </>
       ) : type === 8 ? (
         <>
           길이1
-          <Input type="number" name={'length1'} value={length1} onChange={setLength} />
+          <Input type="text" name={'length1'} value={length1} onChange={setLength} />
           길이2
-          <Input type="number" name={'length2'} value={length2} onChange={setLength} />
+          <Input type="text" name={'length2'} value={length2} onChange={setLength} />
           길이3
-          <Input type="number" name={'length3'} value={length3} onChange={setLength} />
+          <Input type="text" name={'length3'} value={length3} onChange={setLength} />
         </>
       ) : type === 9 ? (
         <>
           길이1
-          <Input type="number" name={'length1'} value={length1} onChange={setLength} />
+          <Input type="text" name={'length1'} value={length1} onChange={setLength} />
           길이2
-          <Input type="number" name={'length2'} value={length2} onChange={setLength} />
+          <Input type="text" name={'length2'} value={length2} onChange={setLength} />
           길이3
-          <Input type="number" name={'length3'} value={length3} onChange={setLength} />
+          <Input type="text" name={'length3'} value={length3} onChange={setLength} />
+        </>
+      ) : type === 10 ? (
+        <>
+          길이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} />
+          길이4
+          <Input type="text" name={'length4'} value={length4} onChange={setLength} />
+          길이5
+          <Input type="text" name={'length5'} value={length5} onChange={setLength} />
         </>
       ) : (
         <></>