Fix: Handle undefined budget data

The `useBudgetTabContent` hook was throwing an error when `data` prop was undefined. This commit adds a check to ensure that `data` is defined before accessing its properties.

src/pages/Index.tsx

@@ -7,17 +7,24 @@ import RecentTransactionsSection from '@/components/RecentTransactionsSection';
 import Header from '@/components/Header';
 import { useBudget } from '@/contexts/budget';
 import SafeAreaContainer from '@/components/SafeAreaContainer';
+import { formatCurrency } from '@/utils/formatters';
 
 const Index = () => {
-  const { transactions, budgetData } = useBudget();
+  const { transactions, budgetData, handleBudgetGoalUpdate } = useBudget();
   
-  // 페이지 마운트 시 데이터 로깅 (디버깅 용도)
+  // 데이터 구조 확인용 로깅
   useEffect(() => {
     console.info('Index 페이지 마운트, 현재 데이터 상태:');
-    console.info('트랜잭션:', transactions.length);
+    console.info('트랜잭션 수:', transactions?.length);
     console.info('예산 데이터:', budgetData);
   }, [transactions, budgetData]);
   
+  // 예산 퍼센트 계산 함수
+  const calculatePercentage = (spent: number, target: number) => {
+    if (target <= 0) return 0;
+    return Math.min(100, Math.round((spent / target) * 100));
+  };
+  
   return (
     <SafeAreaContainer className="min-h-screen bg-neuro-background">
       <div className="max-w-md mx-auto px-6">
@@ -30,11 +37,23 @@ const Index = () => {
           </TabsList>
           
           <TabsContent value="budget" className="focus-visible:outline-none">
-            <BudgetTabContent budgetData={budgetData.monthly} />
+            {budgetData && budgetData.monthly && (
+              <BudgetTabContent 
+                data={budgetData.monthly} 
+                formatCurrency={formatCurrency}
+                calculatePercentage={calculatePercentage}
+                onSaveBudget={(amount, categoryBudgets) => 
+                  handleBudgetGoalUpdate('monthly', amount, categoryBudgets)
+                }
+              />
+            )}
           </TabsContent>
           
           <TabsContent value="recent" className="focus-visible:outline-none">
-            <RecentTransactionsSection />
+            <RecentTransactionsSection 
+              transactions={transactions || []} 
+              onUpdateTransaction={transaction => console.log('트랜잭션 업데이트', transaction)}
+            />
           </TabsContent>
         </Tabs>
       </div>