fix: [journal] CurrencyInput 컴포넌트 음수 입력 개선
- 포커스 시 쉼표 제거하여 순수 숫자 편집 모드 - 타이핑 중 포맷팅 제거하여 커서 점프 방지 - 블러 시에만 천단위 쉼표 포맷 적용 - minus + 숫자만 허용하는 단순 필터링
This commit is contained in:
@@ -78,33 +78,39 @@
|
||||
};
|
||||
|
||||
// 음수 입력을 지원하는 통화 입력 컴포넌트
|
||||
// - 포커스: 쉼표 제거하여 순수 숫자만 표시 (편집 용이)
|
||||
// - 타이핑: minus + 숫자만 허용, 포맷팅 없음 (커서 점프 방지)
|
||||
// - 블러: 천단위 쉼표 포맷 적용
|
||||
const CurrencyInput = ({ value, onChange, disabled, placeholder, id, onKeyDown, className }) => {
|
||||
const [displayVal, setDisplayVal] = React.useState(() => value ? formatInputCurrency(value) : '');
|
||||
const typing = React.useRef(false);
|
||||
const [raw, setRaw] = useState('');
|
||||
const focused = useRef(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!typing.current) {
|
||||
setDisplayVal(value ? formatInputCurrency(value) : '');
|
||||
useEffect(() => {
|
||||
if (!focused.current) {
|
||||
setRaw(value ? formatInputCurrency(value) : '');
|
||||
}
|
||||
}, [value]);
|
||||
|
||||
return React.createElement('input', {
|
||||
type: 'text', id, disabled, placeholder, className, onKeyDown,
|
||||
value: displayVal,
|
||||
onFocus: () => { typing.current = true; },
|
||||
value: raw,
|
||||
onFocus: () => {
|
||||
focused.current = true;
|
||||
setRaw(prev => prev.replace(/,/g, ''));
|
||||
},
|
||||
onChange: (e) => {
|
||||
const raw = e.target.value.replace(/[^\d\-,]/g, '');
|
||||
setDisplayVal(raw);
|
||||
if (raw !== '-' && raw !== '') {
|
||||
onChange(parseInputCurrency(raw));
|
||||
} else if (raw === '') {
|
||||
const input = e.target.value.replace(/[^\d-]/g, '');
|
||||
setRaw(input);
|
||||
if (input !== '-' && input !== '') {
|
||||
onChange(parseInputCurrency(input));
|
||||
} else if (input === '') {
|
||||
onChange(0);
|
||||
}
|
||||
},
|
||||
onBlur: () => {
|
||||
typing.current = false;
|
||||
const parsed = parseInputCurrency(displayVal);
|
||||
setDisplayVal(parsed ? formatInputCurrency(parsed) : '');
|
||||
focused.current = false;
|
||||
const parsed = parseInputCurrency(raw);
|
||||
setRaw(parsed ? formatInputCurrency(parsed) : '');
|
||||
onChange(parsed);
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user