0d716d79d2
Correct budget calculation and storage issues for 교통 and 기타 categories, and ensure daily/weekly budgets are displayed correctly.
68 lines
2.5 KiB
TypeScript
68 lines
2.5 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';
|
|
import { markSingleCategoryBudgetAsModified } from '@/utils/sync/budget/modifiedBudgetsTracker';
|
|
|
|
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);
|
|
|
|
// 수정된 카테고리 예산 추적 시스템에 기록
|
|
try {
|
|
const amount = parseInt(numericValue, 10) || 0;
|
|
markSingleCategoryBudgetAsModified(category, amount);
|
|
console.log(`카테고리 '${category}' 예산을 ${amount}원으로 수정 완료, 타임스탬프: ${new Date().toISOString()}`);
|
|
} catch (error) {
|
|
console.error(`카테고리 '${category}' 예산 변경 추적 실패:`, error);
|
|
}
|
|
|
|
// 사용자에게 시각적 피드백 제공
|
|
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;
|