fix: [journal] CurrencyInput 컴포넌트 음수 입력 개선

- 포커스 시 쉼표 제거하여 순수 숫자 편집 모드
- 타이핑 중 포맷팅 제거하여 커서 점프 방지
- 블러 시에만 천단위 쉼표 포맷 적용
- minus + 숫자만 허용하는 단순 필터링
This commit is contained in:
김보곤
2026-03-10 16:28:01 +09:00
parent 44d6daf3cd
commit 020677c321

View File

@@ -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);
},
});