diff --git a/src/components/BudgetProgressCard.tsx b/src/components/BudgetProgressCard.tsx index 3c7246c..b683855 100644 --- a/src/components/BudgetProgressCard.tsx +++ b/src/components/BudgetProgressCard.tsx @@ -1,6 +1,10 @@ -import React from 'react'; +import React, { useState } from 'react'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; +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; @@ -18,6 +22,7 @@ interface BudgetProgressCardProps { setSelectedTab: (value: string) => void; formatCurrency: (amount: number) => string; calculatePercentage: (spent: number, target: number) => number; + onSaveBudget: (type: 'daily' | 'weekly' | 'monthly', amount: number) => void; } const BudgetProgressCard: React.FC = ({ @@ -25,7 +30,8 @@ const BudgetProgressCard: React.FC = ({ selectedTab, setSelectedTab, formatCurrency, - calculatePercentage + calculatePercentage, + onSaveBudget }) => { return (
@@ -48,7 +54,8 @@ const BudgetProgressCard: React.FC = ({ onSaveBudget('daily', amount)} /> @@ -56,7 +63,8 @@ const BudgetProgressCard: React.FC = ({ onSaveBudget('weekly', amount)} /> @@ -64,7 +72,8 @@ const BudgetProgressCard: React.FC = ({ onSaveBudget('monthly', amount)} /> @@ -76,10 +85,35 @@ interface BudgetTabContentProps { data: BudgetData; formatCurrency: (amount: number) => string; calculatePercentage: (spent: number, target: number) => number; + onSaveBudget: (amount: number) => void; } -const BudgetTabContent: React.FC = ({ data, formatCurrency, calculatePercentage }) => { +const BudgetTabContent: React.FC = ({ + data, + formatCurrency, + calculatePercentage, + onSaveBudget +}) => { 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); + setIsOpen(false); + }; + + // Format with commas for display + const formatWithCommas = (amount: string) => { + return amount.replace(/\B(?=(\d{3})+(?!\d))/g, ','); + }; return (
@@ -92,7 +126,9 @@ const BudgetTabContent: React.FC = ({ data, formatCurrenc
= 90 ? "bg-yellow-400" : "bg-neuro-income" + }`} />
@@ -107,6 +143,38 @@ const BudgetTabContent: React.FC = ({ data, formatCurrenc 남은 예산 {formatCurrency(data.remainingAmount)}
+ +
+ + + 예산 목표 설정하기 + {isOpen ? ( + + ) : ( + + )} + + + +
+ handleInputChange(e.target.value)} + placeholder="목표 금액 입력" + className="neuro-pressed" + /> + +
+

현재 목표: {formatWithCommas(budgetInput)}원

+
+
+
); }; diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx index 4c70422..130bfeb 100644 --- a/src/pages/Index.tsx +++ b/src/pages/Index.tsx @@ -1,7 +1,6 @@ import React, { useState } from 'react'; import NavBar from '@/components/NavBar'; -import BudgetInputCard from '@/components/BudgetInputCard'; import AddTransactionButton from '@/components/AddTransactionButton'; import Header from '@/components/Header'; import BudgetProgressCard from '@/components/BudgetProgressCard'; @@ -96,21 +95,12 @@ const Index = () => { setSelectedTab={setSelectedTab} formatCurrency={formatCurrency} calculatePercentage={calculatePercentage} + onSaveBudget={handleBudgetGoalUpdate} /> {/* 지출 카테고리 */} - {/* 예산 입력 카드 */} - - {/* 최근 지출 */}