Add summary card with tabs

Adds a summary card to the app with tabs for daily, weekly, and monthly views, displaying target spending, actual spending, and remaining spendable amount.

src/pages/Index.tsx

@@ -1,12 +1,15 @@
 
-import React from 'react';
+import React, { useState } from 'react';
 import NavBar from '@/components/NavBar';
 import BudgetCard from '@/components/BudgetCard';
 import TransactionCard, { Transaction } from '@/components/TransactionCard';
 import AddTransactionButton from '@/components/AddTransactionButton';
 import { Wallet, TrendingUp, Bell } from 'lucide-react';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 
 const Index = () => {
+  const [selectedTab, setSelectedTab] = useState("daily");
+  
   // Sample data - in a real app, this would come from a data source
   const transactions: Transaction[] = [
     { 
@@ -35,6 +38,33 @@ const Index = () => {
     },
   ];
 
+  // 예산 데이터 - 실제 앱에서는 백엔드에서 가져와야 함
+  const budgetData = {
+    daily: {
+      targetAmount: 30000,
+      spentAmount: 15000,
+      remainingAmount: 15000,
+    },
+    weekly: {
+      targetAmount: 200000,
+      spentAmount: 120000,
+      remainingAmount: 80000,
+    },
+    monthly: {
+      targetAmount: 1200000,
+      spentAmount: 750000,
+      remainingAmount: 450000,
+    }
+  };
+
+  const formatCurrency = (amount: number) => {
+    return new Intl.NumberFormat('ko-KR', {
+      style: 'currency',
+      currency: 'KRW',
+      maximumFractionDigits: 0
+    }).format(amount);
+  };
+
   return (
     <div className="min-h-screen bg-neuro-background pb-24">
       <div className="max-w-md mx-auto px-6">
@@ -51,22 +81,78 @@ const Index = () => {
           </div>
         </header>
 
-        {/* Balance Card */}
+        {/* 예산 카드 - 탭 추가 */}
         <div className="neuro-card mb-6 overflow-hidden">
-          <div className="flex items-center justify-between mb-3">
+          <Tabs defaultValue="daily" value={selectedTab} onValueChange={setSelectedTab} className="w-full">
-            <div className="flex items-center gap-2">
+            <TabsList className="grid grid-cols-3 mb-4 bg-transparent">
-              <Wallet className="text-neuro-accent" size={20} />
+              <TabsTrigger 
-              <h2 className="font-semibold">총 잔액</h2>
+                value="daily" 
-            </div>
+                className="data-[state=active]:shadow-neuro-pressed data-[state=active]:bg-transparent">
-            <TrendingUp className="text-neuro-income" size={20} />
+                오늘
-          </div>
+              </TabsTrigger>
+              <TabsTrigger 
+                value="weekly" 
+                className="data-[state=active]:shadow-neuro-pressed data-[state=active]:bg-transparent">
+                주간
+              </TabsTrigger>
+              <TabsTrigger 
+                value="monthly"
+                className="data-[state=active]:shadow-neuro-pressed data-[state=active]:bg-transparent">
+                월간
+              </TabsTrigger>
+            </TabsList>
 
-          <p className="text-3xl font-bold tracking-tight mb-1">
+            <TabsContent value="daily" className="space-y-4 mt-0">
-            ₩2,580,000
+              <div className="space-y-3">
-          </p>
+                <div className="flex justify-between items-center">
-          <p className="text-neuro-income text-sm font-medium">
+                  <span className="text-gray-500 text-sm">목표 지출 금액</span>
-            지난 달보다 12% 증가
+                  <span className="font-medium">{formatCurrency(budgetData.daily.targetAmount)}</span>
-          </p>
+                </div>
+                <div className="flex justify-between items-center">
+                  <span className="text-gray-500 text-sm">지출 금액</span>
+                  <span className="font-medium text-neuro-expense">{formatCurrency(budgetData.daily.spentAmount)}</span>
+                </div>
+                <div className="flex justify-between items-center pt-2 border-t border-gray-100">
+                  <span className="text-gray-500 text-sm">지출 가능 금액</span>
+                  <span className="font-semibold text-neuro-income">{formatCurrency(budgetData.daily.remainingAmount)}</span>
+                </div>
+              </div>
+            </TabsContent>
+
+            <TabsContent value="weekly" className="space-y-4 mt-0">
+              <div className="space-y-3">
+                <div className="flex justify-between items-center">
+                  <span className="text-gray-500 text-sm">목표 지출 금액</span>
+                  <span className="font-medium">{formatCurrency(budgetData.weekly.targetAmount)}</span>
+                </div>
+                <div className="flex justify-between items-center">
+                  <span className="text-gray-500 text-sm">지출 금액</span>
+                  <span className="font-medium text-neuro-expense">{formatCurrency(budgetData.weekly.spentAmount)}</span>
+                </div>
+                <div className="flex justify-between items-center pt-2 border-t border-gray-100">
+                  <span className="text-gray-500 text-sm">지출 가능 금액</span>
+                  <span className="font-semibold text-neuro-income">{formatCurrency(budgetData.weekly.remainingAmount)}</span>
+                </div>
+              </div>
+            </TabsContent>
+
+            <TabsContent value="monthly" className="space-y-4 mt-0">
+              <div className="space-y-3">
+                <div className="flex justify-between items-center">
+                  <span className="text-gray-500 text-sm">목표 지출 금액</span>
+                  <span className="font-medium">{formatCurrency(budgetData.monthly.targetAmount)}</span>
+                </div>
+                <div className="flex justify-between items-center">
+                  <span className="text-gray-500 text-sm">지출 금액</span>
+                  <span className="font-medium text-neuro-expense">{formatCurrency(budgetData.monthly.spentAmount)}</span>
+                </div>
+                <div className="flex justify-between items-center pt-2 border-t border-gray-100">
+                  <span className="text-gray-500 text-sm">지출 가능 금액</span>
+                  <span className="font-semibold text-neuro-income">{formatCurrency(budgetData.monthly.remainingAmount)}</span>
+                </div>
+              </div>
+            </TabsContent>
+          </Tabs>
         </div>
 
         {/* Budget Progress */}