Update budget setting text
Replaced the budget setting text with a message indicating that entering the monthly budget will automatically set the daily and weekly budgets.
This commit is contained in:
@@ -4,11 +4,13 @@ import { Input } from '@/components/ui/input';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Check, ChevronDown, ChevronUp } from 'lucide-react';
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
|
||||
|
||||
interface BudgetData {
|
||||
targetAmount: number;
|
||||
spentAmount: number;
|
||||
remainingAmount: number;
|
||||
}
|
||||
|
||||
interface BudgetProgressCardProps {
|
||||
budgetData: {
|
||||
daily: BudgetData;
|
||||
@@ -21,6 +23,7 @@ interface BudgetProgressCardProps {
|
||||
calculatePercentage: (spent: number, target: number) => number;
|
||||
onSaveBudget: (type: 'daily' | 'weekly' | 'monthly', amount: number) => void;
|
||||
}
|
||||
|
||||
const BudgetProgressCard: React.FC<BudgetProgressCardProps> = ({
|
||||
budgetData,
|
||||
selectedTab,
|
||||
@@ -59,12 +62,14 @@ const BudgetProgressCard: React.FC<BudgetProgressCardProps> = ({
|
||||
</Tabs>
|
||||
</div>;
|
||||
};
|
||||
|
||||
interface BudgetTabContentProps {
|
||||
data: BudgetData;
|
||||
formatCurrency: (amount: number) => string;
|
||||
calculatePercentage: (spent: number, target: number) => number;
|
||||
onSaveBudget: (amount: number) => void;
|
||||
}
|
||||
|
||||
const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
|
||||
data,
|
||||
formatCurrency,
|
||||
@@ -74,11 +79,13 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
|
||||
const percentage = calculatePercentage(data.spentAmount, data.targetAmount);
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [budgetInput, setBudgetInput] = useState(data.targetAmount.toString());
|
||||
|
||||
const handleInputChange = (value: string) => {
|
||||
// Remove all non-numeric characters
|
||||
const numericValue = value.replace(/[^0-9]/g, '');
|
||||
setBudgetInput(numericValue);
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
const amount = parseInt(budgetInput, 10) || 0;
|
||||
onSaveBudget(amount);
|
||||
@@ -89,6 +96,7 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
|
||||
const formatWithCommas = (amount: string) => {
|
||||
return amount.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||||
};
|
||||
|
||||
return <div className="space-y-4">
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
@@ -128,10 +136,11 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
|
||||
<Check size={18} />
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 mt-1">현재 목표: {formatWithCommas(budgetInput)}원</p>
|
||||
<p className="text-xs text-gray-500 mt-1">월간 예산을 입력하면 일일, 주간 예산이 자동으로 입력됩니다.</p>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
</div>
|
||||
</div>;
|
||||
};
|
||||
export default BudgetProgressCard;
|
||||
|
||||
export default BudgetProgressCard;
|
||||
|
||||
Reference in New Issue
Block a user