feat: Add canvas zoom clear and onlyNumberInput Func

src/components/floor-plan/CanvasMenu.jsx

@@ -19,7 +19,7 @@ export default function CanvasMenu(props) {
   const [verticalHorizontalMode, setVerticalHorizontalMode] = useRecoilState(verticalHorizontalModeState)
   const [type, setType] = useState('')
   const { getMessage } = useMessage()
-  const canvasZoom = useRecoilValue(canvasZoomState)
+  const [canvasZoom, setCanvasZoom] = useRecoilState(canvasZoomState)
   const canvas = useRecoilValue(canvasState)
   const setCurrentMenu = useSetRecoilState(currentMenuState)
   const setPoints = useSetRecoilState(outerLinePointsState)
@@ -54,6 +54,13 @@ export default function CanvasMenu(props) {
     canvas?.clear()
   }
 
+  const handleZoomClear = () => {
+    setCanvasZoom(100)
+    canvas.set({ zoom: 1 })
+    canvas.viewportTransform = [1, 0, 0, 1, 0, 0]
+    canvas.renderAll()
+  }
+
   return (
     <div className={`canvas-menu-wrap ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
       <div className="canvas-menu-inner">
@@ -156,7 +163,7 @@ export default function CanvasMenu(props) {
               <div className="size-control">
                 <button className="control-btn minus"></button>
                 <span>{canvasZoom}%</span>
-                <button className="control-btn plus"></button>
+                <button className="control-btn plus" onClick={handleZoomClear}></button>
               </div>
               <div className="btn-from">
                 <button className="btn07" onClick={handleClear}></button>

src/components/floor-plan/modal/outerlinesetting/OuterLineWall.jsx

@@ -16,11 +16,11 @@ import {
   outerLinePointsState,
   outerLineTypeState,
 } from '@/store/outerLineAtom'
-import { QLine } from '@/components/fabric/QLine'
 import { useLine } from '@/hooks/useLine'
 import { distanceBetweenPoints } from '@/util/canvas-util'
 import { calculateAngle } from '@/util/qpolygon-utils'
 import { usePolygon } from '@/hooks/usePolygon'
+import { onlyNumberInputChange, onlyNumberWithDotInputChange } from '@/util/input-utils'
 
 export default function OuterLineWall(props) {
   const { setShowOutlineModal } = props
@@ -578,10 +578,7 @@ export default function OuterLineWall(props) {
                     className="input-origin block"
                     value={length1}
                     ref={length1Ref}
-                    onChange={(e) => {
+                    onChange={(e) => onlyNumberInputChange(e, setLength1)}
-                      const value = e.target.value.replace(/^0+/, '')
-                      setLength1(value.replace(/[^-0-9]/g, ''))
-                    }}
                     placeholder="3000"
                   />
                 </div>
@@ -599,10 +596,7 @@ export default function OuterLineWall(props) {
                     className="input-origin block"
                     value={length1}
                     ref={length1Ref}
-                    onChange={(e) => {
+                    onChange={(e) => onlyNumberInputChange(e, setLength1)}
-                      const value = e.target.value.replace(/^0+/, '')
-                      setLength1(value.replace(/[^-0-9]/g, ''))
-                    }}
                     placeholder="3000"
                   />
                 </div>
@@ -617,10 +611,7 @@ export default function OuterLineWall(props) {
                     className="input-origin block"
                     value={length2}
                     ref={length2Ref}
-                    onChange={(e) => {
+                    onChange={(e) => onlyNumberInputChange(e, setLength2)}
-                      const value = e.target.value.replace(/^0+/, '')
-                      setLength2(value.replace(/[^-0-9]/g, ''))
-                    }}
                     placeholder="3000"
                   />
                 </div>
@@ -638,10 +629,7 @@ export default function OuterLineWall(props) {
                     className="input-origin block"
                     value={length1}
                     ref={length1Ref}
-                    onChange={(e) => {
+                    onChange={(e) => onlyNumberInputChange(e, setLength1)}
-                      const value = e.target.value.replace(/^0+/, '')
-                      setLength1(value.replace(/[^-0-9]/g, ''))
-                    }}
                     placeholder="3000"
                   />
                 </div>
@@ -651,18 +639,7 @@ export default function OuterLineWall(props) {
                     type="text"
                     value={angle1}
                     ref={angle1Ref}
-                    onChange={(e) => {
+                    onChange={(e) => onlyNumberWithDotInputChange(e, setAngle1)}
-                      const val = e.target.value
-                      // const pattern = /(^\d+$)|(^\d{1,}.\d{0,2}$)/
-                      const pattern = /^-?(\d{1,3}([.]\d{0,2})?)?$/
-                      if (!pattern.test(val)) {
-                        // prev에서 마지막 자리 제거
-                        setAngle1(val.slice(0, val.length - 1))
-                        return
-                      }
-
-                      setAngle1(val)
-                    }}
                     className="input-origin block"
                   />
                 </div>

src/util/input-utils.js

@@ -0,0 +1,20 @@
+// 숫자만 입력 가능한 input onChange 함수
+export const onlyNumberInputChange = (e, callback) => {
+  let value = e.target.value.replace(/^0+/, '')
+  value = value.replace(/[^-0-9]/g, '')
+  callback(value)
+}
+
+//소수점 둘째자리 숫자만 입력가능
+export const onlyNumberWithDotInputChange = (e, callback) => {
+  const val = e.target.value
+
+  const pattern = /^-?(\d{1,4}([.]\d{0,2})?)?$/
+  if (!pattern.test(val)) {
+    // prev에서 마지막 자리 제거
+    callback(val.slice(0, val.length - 1))
+    return
+  }
+
+  callback(val)
+}