Enhance budget input UI

- Improve the '+' icon for budget modification.
- Display the sum of category budgets instead of an input field for the total budget.
- Change the wallet icon in budget input.
This commit is contained in:
gpt-engineer-app[bot]
2025-03-17 12:17:32 +00:00
parent c7300bebb7
commit 236925f787
3 changed files with 54 additions and 24 deletions

View File

@@ -35,15 +35,15 @@ const CategoryBudgetInputs: React.FC<CategoryBudgetInputsProps> = ({
};
return (
<div className="space-y-2 w-full">
<div className="space-y-3 w-full">
{EXPENSE_CATEGORIES.map(category => (
<div key={category} className="flex items-center justify-between w-full">
<label className="text-sm text-gray-600">{category}</label>
<div key={category} className="flex items-center justify-between w-full p-2 neuro-pressed rounded-lg">
<label className="text-sm font-medium text-gray-700">{category}</label>
<Input
value={formatWithCommas(categoryBudgets[category] || 0)}
onChange={(e) => handleInput(e, category)}
placeholder="예산 입력"
className={`neuro-pressed transition-colors duration-300 ${isMobile ? 'w-[150px]' : 'max-w-[150px]'} text-xs`}
className={`neuro-pressed transition-colors duration-300 ${isMobile ? 'w-[150px]' : 'max-w-[150px]'}`}
/>
</div>
))}