fix:분개 모달 금액 입력에 자동 콤마 포맷팅 추가

- 금액 입력 시 3자리마다 콤마 자동 추가
- type="number" → type="text"로 변경
- 금액 우측 정렬 (text-right)
- formatAmountInput/parseAmountInput 헬퍼 함수 추가

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
pro
2026-01-23 16:09:31 +09:00
parent c8a8708131
commit 32a3987895

View File

@@ -366,6 +366,18 @@ className={`px-3 py-1.5 text-xs cursor-pointer hover:bg-purple-50 ${
const formatCurrency = (val) => new Intl.NumberFormat('ko-KR').format(val || 0);
// 금액 입력 포맷팅 (콤마 추가)
const formatAmountInput = (value) => {
if (!value && value !== 0) return '';
return new Intl.NumberFormat('ko-KR').format(value);
};
// 금액 입력값 파싱 (콤마 제거)
const parseAmountInput = (value) => {
const cleaned = String(value).replace(/[^0-9.-]/g, '');
return parseFloat(cleaned) || 0;
};
return (
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
<div className="bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-hidden">
@@ -402,10 +414,11 @@ className={`px-3 py-1.5 text-xs cursor-pointer hover:bg-purple-50 ${
<div>
<label className="block text-xs text-stone-500 mb-1">금액</label>
<input
type="number"
value={split.amount}
onChange={(e) => updateSplit(index, { amount: parseFloat(e.target.value) || 0 })}
className="w-full px-3 py-2 border border-stone-200 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 outline-none"
type="text"
value={formatAmountInput(split.amount)}
onChange={(e) => updateSplit(index, { amount: parseAmountInput(e.target.value) })}
className="w-full px-3 py-2 border border-stone-200 rounded-lg text-sm text-right focus:ring-2 focus:ring-purple-500 outline-none"
placeholder="0"
/>
</div>
<div>