refactor: QInput 컴포넌트 type text로 통일, 숫자 유효성 검사 수정

src/components/Playground.jsx

@@ -39,7 +39,7 @@ export default function Playground() {
   const [color, setColor] = useState('#ff0000')
 
   const [textInput, setTextInput] = useState('')
-  const [numberInput, setNumberInput] = useState(null)
+  const [numberInput, setNumberInput] = useState('')
   const [radioInput, setRadioInput] = useState('')
   const [checkboxInput, setCheckboxInput] = useState([])
   const [selectedValue, setSelectedValue] = useState('')
@@ -171,7 +171,7 @@ export default function Playground() {
           <button
             className="btn-frame deepgray"
             onClick={() => {
-              setNumberInput(null)
+              setNumberInput('')
             }}
           >
             QInput NumberInput DATA RESET

src/components/common/input/QInput.jsx

@@ -1,8 +1,9 @@
 'use client'
 
-import { useCallback } from 'react'
+import { useCallback, useState } from 'react'
 
 export default function QInput({ type, className, ref, id, readOnly = false, options = [], placeholder, value, onChange }) {
+  const [prevNum, setPrevNum] = useState('')
   // options = options || [
   //   {
   //     id: 'one',
@@ -35,51 +36,59 @@ export default function QInput({ type, className, ref, id, readOnly = false, opt
 
   const handleTextNumberChange = useCallback(
     (e) => {
-      if (type === 'text') {
+      onChange(e.target.value)
-        onChange(e.target.value)
-      } else if (type === 'number') {
-        onChange(Number(e.target.value))
-      }
     },
-    [type, onChange],
+    [onChange],
   )
 
   // type=number 정수 부호, 소수점 검사, 일부 키 허용
+  // const checkInputNumber = (e) => {
+  //   const value = e.target.value
+  //   const key = e.key
+  //   const allowKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'Tab', 'Enter', 'Control'] // 'ArrowUp', 'ArrowDown',
+  //   if (key >= '0' && key <= '9') {
+  //     return
+  //   }
+  //   if (key === '.' && !value.includes('.') && value.length > 0 && !isNaN(Number(value))) {
+  //     return
+  //   }
+  //   if (key === '-' && !value.includes('-') && value.length > 0) {
+  //     return
+  //   }
+  //   if (allowKeys.includes(key)) {
+  //     return
+  //   }
+  //   if (key === 'a' || key === 'c' || key === 'v' || key === 'x' || key === 'z') {
+  //     return
+  //   }
+  //   e.preventDefault()
+  // }
+  // type=number 정수 부호, 소수점 검사
   const checkInputNumber = (e) => {
-    const value = e.target.value
+    const value = e.target.defaultValue
-    const key = e.key
+    if (value === '') return
-    const allowKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'Tab', 'Enter', 'Control'] // 'ArrowUp', 'ArrowDown',
+
-    if (key >= '0' && key <= '9') {
+    const regex = /^-?([1-9]\d*|\d)(\.\d*)?$/
-      return
+    if (regex.test(value)) {
+      setPrevNum(value)
+    } else {
+      onChange(prevNum)
     }
-    if (key === '.' && !value.includes('.') && value.length > 0 && !isNaN(Number(value))) {
-      return
-    }
-    if (key === '-' && !value.includes('-') && value.length > 0) {
-      return
-    }
-    if (allowKeys.includes(key)) {
-      return
-    }
-    if (key === 'a' || key === 'c' || key === 'v' || key === 'x' || key === 'z') {
-      return
-    }
-    e.preventDefault()
   }
 
   // input type : text, number
   const inputTextNumber = () => {
     return (
       <input
-        type={type}
+        type="text"
         className={`input-light ${className ? className : ''}`}
         ref={ref}
         id={id}
         readOnly={readOnly ? true : false}
         placeholder={placeholder}
-        value={value === 0 ? 0 : value || ''}
+        value={value}
         onChange={handleTextNumberChange}
-        onKeyDown={type === 'number' ? checkInputNumber : undefined}
+        onKeyUp={type === 'number' ? checkInputNumber : undefined}
       />
     )
   }