Ensure useBudget is within BudgetProvider

The useBudget hook was throwing an error when used outside of a BudgetProvider. This commit ensures that the useBudget hook is always used within a BudgetProvider to prevent this error.

src/App.tsx

@@ -19,6 +19,7 @@ import ForgotPassword from './pages/ForgotPassword';
 import Analytics from './pages/Analytics';
 import PaymentMethods from './pages/PaymentMethods';
 import Settings from './pages/Settings';
+import { BudgetProvider } from './contexts/BudgetContext';
 
 // 전역 오류 핸들러
 const handleError = (error: any) => {
@@ -74,30 +75,32 @@ function App() {
   return (
     <ErrorBoundary>
       <AuthContextWrapper>
-        <Router>
-          <div className="flex flex-col min-h-screen">
-            <NavBar />
-            <div className="flex-grow">
-              <Routes>
-                <Route path="/" element={<Index />} />
-                <Route path="/login" element={<Login />} />
-                <Route path="/register" element={<Register />} />
-                <Route path="/profile" element={<ProfileManagement />} />
-                <Route path="/settings" element={<Settings />} />
-                <Route path="/supabase-settings" element={<SupabaseSettings />} />
-                <Route path="/transactions" element={<Transactions />} />
-                <Route path="/security-privacy" element={<SecurityPrivacySettings />} />
-                <Route path="/notifications" element={<NotificationSettings />} />
-                <Route path="/help-support" element={<HelpSupport />} />
-                <Route path="/forgot-password" element={<ForgotPassword />} />
-                <Route path="/analytics" element={<Analytics />} />
-                <Route path="/payment-methods" element={<PaymentMethods />} />
-                <Route path="*" element={<NotFound />} />
-              </Routes>
+        <BudgetProvider>
+          <Router>
+            <div className="flex flex-col min-h-screen">
+              <NavBar />
+              <div className="flex-grow">
+                <Routes>
+                  <Route path="/" element={<Index />} />
+                  <Route path="/login" element={<Login />} />
+                  <Route path="/register" element={<Register />} />
+                  <Route path="/profile" element={<ProfileManagement />} />
+                  <Route path="/settings" element={<Settings />} />
+                  <Route path="/supabase-settings" element={<SupabaseSettings />} />
+                  <Route path="/transactions" element={<Transactions />} />
+                  <Route path="/security-privacy" element={<SecurityPrivacySettings />} />
+                  <Route path="/notifications" element={<NotificationSettings />} />
+                  <Route path="/help-support" element={<HelpSupport />} />
+                  <Route path="/forgot-password" element={<ForgotPassword />} />
+                  <Route path="/analytics" element={<Analytics />} />
+                  <Route path="/payment-methods" element={<PaymentMethods />} />
+                  <Route path="*" element={<NotFound />} />
+                </Routes>
+              </div>
+              <Toaster />
             </div>
-            <Toaster />
-          </div>
-        </Router>
+          </Router>
+        </BudgetProvider>
       </AuthContextWrapper>
     </ErrorBoundary>
   );

src/pages/Index.tsx

@@ -7,10 +7,10 @@ import BudgetProgressCard from '@/components/BudgetProgressCard';
 import BudgetCategoriesSection from '@/components/BudgetCategoriesSection';
 import RecentTransactionsSection from '@/components/RecentTransactionsSection';
 import { formatCurrency, calculatePercentage } from '@/utils/formatters';
-import { BudgetProvider, useBudget } from '@/contexts/BudgetContext';
+import { useBudget } from '@/contexts/BudgetContext';
 
 // 메인 컴포넌트
-const IndexContent = () => {
+const Index = () => {
   const {
     transactions,
     budgetData,
@@ -22,43 +22,34 @@ const IndexContent = () => {
   } = useBudget();
 
   return (
-    <div className="max-w-md mx-auto px-6">
-      <Header />
+    <div className="min-h-screen bg-neuro-background pb-24">
+      <div className="max-w-md mx-auto px-6">
+        <Header />
 
-      {/* 목표 진행 상황 */}
-      <h2 className="text-lg font-semibold mb-3">예산과 지출</h2>
-      <BudgetProgressCard 
-        budgetData={budgetData}
-        selectedTab={selectedTab}
-        setSelectedTab={setSelectedTab}
-        formatCurrency={formatCurrency}
-        calculatePercentage={calculatePercentage}
-        onSaveBudget={handleBudgetGoalUpdate}
-      />
+        {/* 목표 진행 상황 */}
+        <h2 className="text-lg font-semibold mb-3">예산과 지출</h2>
+        <BudgetProgressCard 
+          budgetData={budgetData}
+          selectedTab={selectedTab}
+          setSelectedTab={setSelectedTab}
+          formatCurrency={formatCurrency}
+          calculatePercentage={calculatePercentage}
+          onSaveBudget={handleBudgetGoalUpdate}
+        />
 
-      {/* 지출 카테고리 */}
-      <BudgetCategoriesSection categories={getCategorySpending()} />
+        {/* 지출 카테고리 */}
+        <BudgetCategoriesSection categories={getCategorySpending()} />
 
-      {/* 최근 지출 */}
-      <RecentTransactionsSection 
-        transactions={transactions.slice(0, 5)} 
-        onUpdateTransaction={updateTransaction}
-      />
+        {/* 최근 지출 */}
+        <RecentTransactionsSection 
+          transactions={transactions.slice(0, 5)} 
+          onUpdateTransaction={updateTransaction}
+        />
+      </div>
+      <AddTransactionButton />
+      <NavBar />
     </div>
   );
 };
 
-// Provider를 감싼 컨테이너 컴포넌트
-const Index = () => {
-  return (
-    <BudgetProvider>
-      <div className="min-h-screen bg-neuro-background pb-24">
-        <IndexContent />
-        <AddTransactionButton />
-        <NavBar />
-      </div>
-    </BudgetProvider>
-  );
-};
-
 export default Index;