ZELLYY/zellyy-finance
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Format number inputs with commas

Browse Source 
Formats numeric input fields to display commas for every three digits.
This commit is contained in:
gpt-engineer-app[bot]
2025-03-15 04:08:55 +00:00
parent 136df4a5e9
commit 2071453b2b
3 changed files with 65 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/CategoryBudgetInputs.tsx
View File

@@ -17,13 +17,25 @@ const CategoryBudgetInputs: React.FC<CategoryBudgetInputsProps> = ({
categoryBudgets,
handleCategoryInputChange
}) => {
// Format number with commas for display
const formatWithCommas = (value: number): string => {
return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
};
// Handle input with comma formatting
const handleInput = (e: React.ChangeEvent<HTMLInputElement>, category: keyof CategoryBudget) => {
// Remove all non-numeric characters before passing to parent handler
const numericValue = e.target.value.replace(/[^0-9]/g, '');
handleCategoryInputChange(numericValue, category);
};
return (
<div className="space-y-2">
<div className="flex items-center justify-between">
<label className="text-sm text-gray-600">식비</label>
<Input
value={categoryBudgets.식비.toString()}
onChange={e => handleCategoryInputChange(e.target.value, '식비')}
value={formatWithCommas(categoryBudgets.식비)}
onChange={(e) => handleInput(e, '식비')}
className="neuro-pressed max-w-[150px]"
/>
</div>
@@ -31,8 +43,8 @@ const CategoryBudgetInputs: React.FC<CategoryBudgetInputsProps> = ({
<div className="flex items-center justify-between">
<label className="text-sm text-gray-600">생활비</label>
<Input
value={categoryBudgets.생활비.toString()}
onChange={e => handleCategoryInputChange(e.target.value, '생활비')}
value={formatWithCommas(categoryBudgets.생활비)}
onChange={(e) => handleInput(e, '생활비')}
className="neuro-pressed max-w-[150px]"
/>
</div>
@@ -40,8 +52,8 @@ const CategoryBudgetInputs: React.FC<CategoryBudgetInputsProps> = ({
<div className="flex items-center justify-between">
<label className="text-sm text-gray-600">교통비</label>
<Input
value={categoryBudgets.교통비.toString()}
onChange={e => handleCategoryInputChange(e.target.value, '교통비')}
value={formatWithCommas(categoryBudgets.교통비)}
onChange={(e) => handleInput(e, '교통비')}
className="neuro-pressed max-w-[150px]"
/>
</div>