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