qcast3/qcast-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Daseul Kim 2024-11-06 15:19:44 +09:00
parent c0bf5e8a2d
commit 4cad5cfd50
2 changed files with 39 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Playground.jsx
View File

@ -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

65
src/components/common/input/QInput.jsx
View File

@ -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}
/>
)
}