diff --git a/src/components/BudgetCategoriesSection.tsx b/src/components/BudgetCategoriesSection.tsx new file mode 100644 index 0000000..e1d6623 --- /dev/null +++ b/src/components/BudgetCategoriesSection.tsx @@ -0,0 +1,32 @@ + +import React from 'react'; +import BudgetCard from '@/components/BudgetCard'; + +interface BudgetCategoriesSectionProps { + categories: { + title: string; + current: number; + total: number; + }[]; +} + +const BudgetCategoriesSection: React.FC = ({ categories }) => { + return ( + <> +

지출 카테고리

+
+ {categories.map((category, index) => ( + + ))} +
+ + ); +}; + +export default BudgetCategoriesSection; diff --git a/src/components/BudgetProgressCard.tsx b/src/components/BudgetProgressCard.tsx new file mode 100644 index 0000000..3c7246c --- /dev/null +++ b/src/components/BudgetProgressCard.tsx @@ -0,0 +1,114 @@ + +import React from 'react'; +import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; + +interface BudgetData { + targetAmount: number; + spentAmount: number; + remainingAmount: number; +} + +interface BudgetProgressCardProps { + budgetData: { + daily: BudgetData; + weekly: BudgetData; + monthly: BudgetData; + }; + selectedTab: string; + setSelectedTab: (value: string) => void; + formatCurrency: (amount: number) => string; + calculatePercentage: (spent: number, target: number) => number; +} + +const BudgetProgressCard: React.FC = ({ + budgetData, + selectedTab, + setSelectedTab, + formatCurrency, + calculatePercentage +}) => { + return ( +
+ + + + 오늘 + + + 주간 + + + 월간 + + + +
지출 / 예산
+ + + + + + + + + + + + + +
+ ); +}; + +interface BudgetTabContentProps { + data: BudgetData; + formatCurrency: (amount: number) => string; + calculatePercentage: (spent: number, target: number) => number; +} + +const BudgetTabContent: React.FC = ({ data, formatCurrency, calculatePercentage }) => { + const percentage = calculatePercentage(data.spentAmount, data.targetAmount); + + return ( +
+
+
+

{formatCurrency(data.spentAmount)}

+

/ {formatCurrency(data.targetAmount)}

+
+ +
+
+
+ +
+ = 90 ? "text-neuro-expense" : "text-gray-500"}`}> + {percentage}% + +
+
+ +
+ 남은 예산 + {formatCurrency(data.remainingAmount)} +
+
+ ); +}; + +export default BudgetProgressCard; diff --git a/src/components/Header.tsx b/src/components/Header.tsx new file mode 100644 index 0000000..8d51191 --- /dev/null +++ b/src/components/Header.tsx @@ -0,0 +1,21 @@ + +import React from 'react'; +import { Bell } from 'lucide-react'; + +const Header: React.FC = () => { + return ( +
+
+
+

반갑습니다

+

젤리의 적자탈출

+
+ +
+
+ ); +}; + +export default Header; diff --git a/src/components/RecentTransactionsSection.tsx b/src/components/RecentTransactionsSection.tsx new file mode 100644 index 0000000..cd68722 --- /dev/null +++ b/src/components/RecentTransactionsSection.tsx @@ -0,0 +1,26 @@ + +import React from 'react'; +import TransactionCard, { Transaction } from '@/components/TransactionCard'; + +interface RecentTransactionsSectionProps { + transactions: Transaction[]; +} + +const RecentTransactionsSection: React.FC = ({ transactions }) => { + return ( + <> +

최근 지출

+
+ {transactions.map(transaction => ( + + ))} +
+ +
+ +
+ + ); +}; + +export default RecentTransactionsSection; diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx index d059a61..4c70422 100644 --- a/src/pages/Index.tsx +++ b/src/pages/Index.tsx @@ -1,12 +1,15 @@ + import React, { useState } from 'react'; import NavBar from '@/components/NavBar'; -import BudgetCard from '@/components/BudgetCard'; import BudgetInputCard from '@/components/BudgetInputCard'; -import TransactionCard, { Transaction } from '@/components/TransactionCard'; import AddTransactionButton from '@/components/AddTransactionButton'; -import { Bell } from 'lucide-react'; -import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; +import Header from '@/components/Header'; +import BudgetProgressCard from '@/components/BudgetProgressCard'; +import BudgetCategoriesSection from '@/components/BudgetCategoriesSection'; +import RecentTransactionsSection from '@/components/RecentTransactionsSection'; +import { formatCurrency, calculatePercentage } from '@/utils/formatters'; import { toast } from '@/components/ui/use-toast'; +import { Transaction } from '@/components/TransactionCard'; const Index = () => { const [selectedTab, setSelectedTab] = useState("daily"); @@ -53,18 +56,12 @@ const Index = () => { remainingAmount: 450000 } }); - const formatCurrency = (amount: number) => { - return new Intl.NumberFormat('ko-KR', { - style: 'currency', - currency: 'KRW', - maximumFractionDigits: 0 - }).format(amount); - }; - // 퍼센트 계산 함수 - const calculatePercentage = (spent: number, target: number) => { - return Math.min(Math.round(spent / target * 100), 100); - }; + const categories = [ + { title: '식비', current: 240000, total: 400000 }, + { title: '생활비', current: 350000, total: 600000 }, + { title: '교통비', current: 190000, total: 200000 }, + ]; // 예산 목표 업데이트 함수 const handleBudgetGoalUpdate = (type: 'daily' | 'weekly' | 'monthly', amount: number) => { @@ -79,161 +76,49 @@ const Index = () => { } }; }); + toast({ title: "목표 업데이트 완료", description: `${type === 'daily' ? '일일' : type === 'weekly' ? '주간' : '월간'} 목표가 ${amount.toLocaleString()}원으로 설정되었습니다.` }); }; - return
+ return ( +
- {/* Header */} -
-
-
-

반갑습니다

-

젤리의 적자탈출

-
- -
-
+
{/* 목표 진행 상황 */}

예산과 지출

-
- - - - 오늘 - - - 주간 - - - 월간 - - - - {/* 지출액 / 목표액 라벨 추가 */} -
지출 / 예산
- - -
-
-
-

{formatCurrency(budgetData.daily.spentAmount)}

-

/ {formatCurrency(budgetData.daily.targetAmount)}

-
- -
-
-
- -
- = 90 ? "text-neuro-expense" : "text-gray-500"}`}> - {calculatePercentage(budgetData.daily.spentAmount, budgetData.daily.targetAmount)}% - -
-
- -
- 남은 예산 - {formatCurrency(budgetData.daily.remainingAmount)} -
-
- - - -
-
-
-

{formatCurrency(budgetData.weekly.spentAmount)}

-

/ {formatCurrency(budgetData.weekly.targetAmount)}

-
- -
-
-
- -
- = 90 ? "text-neuro-expense" : "text-gray-500"}`}> - {calculatePercentage(budgetData.weekly.spentAmount, budgetData.weekly.targetAmount)}% - -
-
- -
- 지출 가능 금액 - {formatCurrency(budgetData.weekly.remainingAmount)} -
-
- - - -
-
-
-

{formatCurrency(budgetData.monthly.spentAmount)}

-

/ {formatCurrency(budgetData.monthly.targetAmount)}

-
- -
-
-
- -
- = 90 ? "text-neuro-expense" : "text-gray-500"}`}> - {calculatePercentage(budgetData.monthly.spentAmount, budgetData.monthly.targetAmount)}% - -
-
- -
- 지출 가능 금액 - {formatCurrency(budgetData.monthly.remainingAmount)} -
-
- - -
+ {/* 지출 카테고리 */} -

지출 카테고리

-
- - - -
+ - {/* 예산 입력 카드 - 이제는 접힌 상태로 표시됩니다 */} - + {/* 예산 입력 카드 */} + {/* 최근 지출 */} -

최근 지출

-
- {transactions.map(transaction => )} -
- -
- -
+
-
; +
+ ); }; export default Index; diff --git a/src/utils/formatters.ts b/src/utils/formatters.ts new file mode 100644 index 0000000..0b23e28 --- /dev/null +++ b/src/utils/formatters.ts @@ -0,0 +1,12 @@ + +export const formatCurrency = (amount: number): string => { + return new Intl.NumberFormat('ko-KR', { + style: 'currency', + currency: 'KRW', + maximumFractionDigits: 0 + }).format(amount); +}; + +export const calculatePercentage = (spent: number, target: number): number => { + return Math.min(Math.round(spent / target * 100), 100); +};