diff --git a/resources/views/finance/journal-entries.blade.php b/resources/views/finance/journal-entries.blade.php index 9c4b2a1b..128cd544 100644 --- a/resources/views/finance/journal-entries.blade.php +++ b/resources/views/finance/journal-entries.blade.php @@ -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); }, });