📌 정의
- 사용자의 숫자 입력을 위한 커스텀 Input 컴포넌트입니다.
⚙️ 주요 기능
- 정수/소수점 입력 지원 및 소수점 기호 (., ,, #, $, %) 커스터마이징
- 소수점 자릿수 설정 기능
- 빈 값에서 . 입력 시 자동으로 0. 으로 보정
- 숫자 입력 후 - 키 입력 시 음수 전환 (예: 123 → -123)
- 최대 입력 자릿수 제한 → 초과 시 경고(alert) 및 입력 차단
- 저장 시 특수문자를 제거한 Number 타입으로 서버에 전송
❗ 문제점
- 모든 입력 제어 로직이 useEffect 내에 혼재 → 컴포넌트가 방대하고 유지보수 어려움
- 소수점 기호로 인해 프론트: string / 서버: number 간 타입 불일치 →
빈 문자열('')이 서버에 0으로 저장되는 문제 발생
🛠 해결 방법
🔹 비즈니스 로직 분리 (Custom Hook)
- useValidator: 입력값의 정수/소수 여부, 자릿수 유효성 검증
- useDataFormatReverter: 입력값에서 소수점 기호를 제거해 순수 숫자값 반환
- onDataFormatter: 소수점 자릿수에 맞는 출력 포맷 생성
🤝 프론트·백엔드 협업
- 데이터 타입 불일치 해결을 위해 서버 측 저장 타입을 String에서 Number로 명확히 전환
- 입력값 가공 및 빈 값 처리 기준을 공유하여 데이터 무결성 확보
✅ 결과
- 입력 UX 개선 + 코드 구조 개선 + 데이터 무결성 보장
- 다양한 숫자 입력 요구사항에 유연하게 대응 가능한 컴포넌트 완성
Frontend Junior