From 4cad5cfd50de0eb995d1c2cf639f19c3033a0567 Mon Sep 17 00:00:00 2001
From: Daseul Kim <amekimm@gmail.com>
Date: Wed, 6 Nov 2024 15:19:44 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20QInput=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20type=20text=EB=A1=9C=20=ED=86=B5=EC=9D=BC,?=
 =?UTF-8?q?=20=EC=88=AB=EC=9E=90=20=EC=9C=A0=ED=9A=A8=EC=84=B1=20=EA=B2=80?=
 =?UTF-8?q?=EC=82=AC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Playground.jsx          |  4 +-
 src/components/common/input/QInput.jsx | 65 +++++++++++++++-----------
 2 files changed, 39 insertions(+), 30 deletions(-)

diff --git a/src/components/Playground.jsx b/src/components/Playground.jsx
index 5cd4588c..a908ba0f 100644
--- a/src/components/Playground.jsx
+++ b/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
diff --git a/src/components/common/input/QInput.jsx b/src/components/common/input/QInput.jsx
index 3c1046af..83e16657 100644
--- a/src/components/common/input/QInput.jsx
+++ b/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)
-      } else if (type === 'number') {
-        onChange(Number(e.target.value))
-      }
+      onChange(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 key = e.key
-    const allowKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'Tab', 'Enter', 'Control'] // 'ArrowUp', 'ArrowDown',
-    if (key >= '0' && key <= '9') {
-      return
+    const value = e.target.defaultValue
+    if (value === '') return
+
+    const regex = /^-?([1-9]\d*|\d)(\.\d*)?$/
+    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}
       />
     )
   }