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.
This commit is contained in:
gpt-engineer-app[bot]
2025-03-15 16:32:07 +00:00
parent 2fa7423071
commit 1136683b57
2 changed files with 51 additions and 57 deletions

View File

@@ -19,6 +19,7 @@ import ForgotPassword from './pages/ForgotPassword';
import Analytics from './pages/Analytics'; import Analytics from './pages/Analytics';
import PaymentMethods from './pages/PaymentMethods'; import PaymentMethods from './pages/PaymentMethods';
import Settings from './pages/Settings'; import Settings from './pages/Settings';
import { BudgetProvider } from './contexts/BudgetContext';
// 전역 오류 핸들러 // 전역 오류 핸들러
const handleError = (error: any) => { const handleError = (error: any) => {
@@ -74,6 +75,7 @@ function App() {
return ( return (
<ErrorBoundary> <ErrorBoundary>
<AuthContextWrapper> <AuthContextWrapper>
<BudgetProvider>
<Router> <Router>
<div className="flex flex-col min-h-screen"> <div className="flex flex-col min-h-screen">
<NavBar /> <NavBar />
@@ -98,6 +100,7 @@ function App() {
<Toaster /> <Toaster />
</div> </div>
</Router> </Router>
</BudgetProvider>
</AuthContextWrapper> </AuthContextWrapper>
</ErrorBoundary> </ErrorBoundary>
); );

View File

@@ -7,10 +7,10 @@ import BudgetProgressCard from '@/components/BudgetProgressCard';
import BudgetCategoriesSection from '@/components/BudgetCategoriesSection'; import BudgetCategoriesSection from '@/components/BudgetCategoriesSection';
import RecentTransactionsSection from '@/components/RecentTransactionsSection'; import RecentTransactionsSection from '@/components/RecentTransactionsSection';
import { formatCurrency, calculatePercentage } from '@/utils/formatters'; import { formatCurrency, calculatePercentage } from '@/utils/formatters';
import { BudgetProvider, useBudget } from '@/contexts/BudgetContext'; import { useBudget } from '@/contexts/BudgetContext';
// 메인 컴포넌트 // 메인 컴포넌트
const IndexContent = () => { const Index = () => {
const { const {
transactions, transactions,
budgetData, budgetData,
@@ -22,6 +22,7 @@ const IndexContent = () => {
} = useBudget(); } = useBudget();
return ( return (
<div className="min-h-screen bg-neuro-background pb-24">
<div className="max-w-md mx-auto px-6"> <div className="max-w-md mx-auto px-6">
<Header /> <Header />
@@ -45,19 +46,9 @@ const IndexContent = () => {
onUpdateTransaction={updateTransaction} onUpdateTransaction={updateTransaction}
/> />
</div> </div>
);
};
// Provider를 감싼 컨테이너 컴포넌트
const Index = () => {
return (
<BudgetProvider>
<div className="min-h-screen bg-neuro-background pb-24">
<IndexContent />
<AddTransactionButton /> <AddTransactionButton />
<NavBar /> <NavBar />
</div> </div>
</BudgetProvider>
); );
}; };