625a1f605c
- Display existing values in budget input fields. - Remove recessed boxes from category inputs. - Add icons to 식비, 생활비, and 교통비 categories.
58 lines
2.0 KiB
TypeScript
58 lines
2.0 KiB
TypeScript
|
|
import React from 'react';
|
|
import { Input } from '@/components/ui/input';
|
|
import { EXPENSE_CATEGORIES, categoryIcons } from '@/constants/categoryIcons';
|
|
import { useIsMobile } from '@/hooks/use-mobile';
|
|
|
|
interface CategoryBudgetInputsProps {
|
|
categoryBudgets: Record<string, number>;
|
|
handleCategoryInputChange: (value: string, category: string) => void;
|
|
}
|
|
|
|
const CategoryBudgetInputs: React.FC<CategoryBudgetInputsProps> = ({
|
|
categoryBudgets,
|
|
handleCategoryInputChange
|
|
}) => {
|
|
const isMobile = useIsMobile();
|
|
|
|
// Format number with commas for display
|
|
const formatWithCommas = (value: number): string => {
|
|
if (value === 0) return '';
|
|
return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
|
};
|
|
|
|
// Handle input with comma formatting
|
|
const handleInput = (e: React.ChangeEvent<HTMLInputElement>, category: string) => {
|
|
// Remove all non-numeric characters before passing to parent handler
|
|
const numericValue = e.target.value.replace(/[^0-9]/g, '');
|
|
handleCategoryInputChange(numericValue, category);
|
|
|
|
// 사용자에게 시각적 피드백 제공
|
|
e.target.classList.add('border-green-500');
|
|
setTimeout(() => {
|
|
e.target.classList.remove('border-green-500');
|
|
}, 300);
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-3 w-full">
|
|
{EXPENSE_CATEGORIES.map(category => (
|
|
<div key={category} className="flex items-center justify-between w-full p-2 rounded-lg">
|
|
<div className="flex items-center space-x-2">
|
|
<span className="text-neuro-income">{categoryIcons[category]}</span>
|
|
<label className="text-sm font-medium text-gray-700">{category}</label>
|
|
</div>
|
|
<Input
|
|
value={formatWithCommas(categoryBudgets[category] || 0)}
|
|
onChange={(e) => handleInput(e, category)}
|
|
placeholder="예산 입력"
|
|
className={`transition-colors duration-300 ${isMobile ? 'w-[150px]' : 'max-w-[150px]'}`}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CategoryBudgetInputs;
|