From 0824b812cb7be4014f64a54fcd488aa85d29ea17 Mon Sep 17 00:00:00 2001 From: "gpt-engineer-app[bot]" <159125892+gpt-engineer-app[bot]@users.noreply.github.com> Date: Sun, 16 Mar 2025 05:34:18 +0000 Subject: [PATCH] Fix data persistence issue Addresses a problem where budget and expense data was not being saved correctly. --- src/components/AddTransactionButton.tsx | 38 ++---- src/components/RecentTransactionsSection.tsx | 128 ++++++++++++++----- src/components/TransactionEditDialog.tsx | 41 ++++-- src/contexts/budget/BudgetContext.tsx | 2 + src/contexts/budget/storageUtils.ts | 101 ++++++++++----- src/contexts/budget/useBudgetState.ts | 66 +++++++++- 6 files changed, 267 insertions(+), 109 deletions(-) diff --git a/src/components/AddTransactionButton.tsx b/src/components/AddTransactionButton.tsx index 7cae1f3..dc1ab8e 100644 --- a/src/components/AddTransactionButton.tsx +++ b/src/components/AddTransactionButton.tsx @@ -1,25 +1,16 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState } from 'react'; import { PlusIcon } from 'lucide-react'; import { Dialog, DialogContent, DialogHeader, DialogTitle } from './ui/dialog'; import { toast } from '@/components/ui/use-toast'; +import { useBudget } from '@/contexts/BudgetContext'; import { supabase } from '@/lib/supabase'; import { isSyncEnabled } from '@/utils/syncUtils'; import ExpenseForm, { ExpenseFormValues } from './expenses/ExpenseForm'; const AddTransactionButton = () => { const [showExpenseDialog, setShowExpenseDialog] = useState(false); - const [userId, setUserId] = useState(null); - - useEffect(() => { - // 현재 로그인한 사용자 가져오기 - const getUser = async () => { - const { data: { user } } = await supabase.auth.getUser(); - setUserId(user?.id || null); - }; - - getUser(); - }, []); + const { addTransaction } = useBudget(); // Format number with commas const formatWithCommas = (value: string): string => { @@ -45,19 +36,16 @@ const AddTransactionButton = () => { type: 'expense' }; - // 로컬 스토리지에서 기존 지출 내역을 가져옵니다 - const existingTransactionsJSON = localStorage.getItem('transactions'); - let existingTransactions = existingTransactionsJSON ? JSON.parse(existingTransactionsJSON) : []; - - // 새 지출을 추가하고 다시 저장합니다 - existingTransactions = [newExpense, ...existingTransactions]; - localStorage.setItem('transactions', JSON.stringify(existingTransactions)); + // BudgetContext를 통해 지출 추가 + addTransaction(newExpense); // 동기화가 활성화되어 있고 사용자가 로그인되어 있다면 Supabase에도 저장 - if (isSyncEnabled() && userId) { - try { + try { + const { data: { user } } = await supabase.auth.getUser(); + + if (isSyncEnabled() && user) { const { error } = await supabase.from('transactions').insert({ - user_id: userId, + user_id: user.id, title: data.title, amount: parseInt(numericAmount), date: formattedDate, @@ -67,10 +55,10 @@ const AddTransactionButton = () => { }); if (error) throw error; - } catch (error) { - console.error('Supabase에 지출 추가 실패:', error); - // 실패해도 로컬에는 저장되어 있으므로 사용자에게 알리지 않음 } + } catch (error) { + console.error('Supabase에 지출 추가 실패:', error); + // 실패해도 로컬에는 저장되어 있으므로 사용자에게 알리지 않음 } // 다이얼로그를 닫습니다 diff --git a/src/components/RecentTransactionsSection.tsx b/src/components/RecentTransactionsSection.tsx index a821253..689a9a3 100644 --- a/src/components/RecentTransactionsSection.tsx +++ b/src/components/RecentTransactionsSection.tsx @@ -1,56 +1,114 @@ import React, { useState } from 'react'; -import { useNavigate } from 'react-router-dom'; -import TransactionCard, { Transaction } from '@/components/TransactionCard'; -import { toast } from '@/components/ui/use-toast'; +import { Transaction } from './TransactionCard'; +import TransactionEditDialog from './TransactionEditDialog'; +import { ChevronRight } from 'lucide-react'; +import { useBudget } from '@/contexts/BudgetContext'; +import { Link } from 'react-router-dom'; interface RecentTransactionsSectionProps { transactions: Transaction[]; - onUpdateTransaction?: (updatedTransaction: Transaction) => void; + onUpdateTransaction?: (transaction: Transaction) => void; } -const RecentTransactionsSection: React.FC = ({ +const RecentTransactionsSection: React.FC = ({ transactions, - onUpdateTransaction + onUpdateTransaction }) => { - const navigate = useNavigate(); - - const handleViewAllTransactions = () => { - navigate('/transactions'); + const [selectedTransaction, setSelectedTransaction] = useState(null); + const [isDialogOpen, setIsDialogOpen] = useState(false); + const { updateTransaction, deleteTransaction } = useBudget(); + + const handleTransactionClick = (transaction: Transaction) => { + setSelectedTransaction(transaction); + setIsDialogOpen(true); }; const handleUpdateTransaction = (updatedTransaction: Transaction) => { if (onUpdateTransaction) { onUpdateTransaction(updatedTransaction); - - toast({ - title: "지출이 수정되었습니다", - description: `${updatedTransaction.title} 항목이 업데이트되었습니다.`, - }); + } + // 직접 컨텍스트를 통해 업데이트 + updateTransaction(updatedTransaction); + }; + + const handleDeleteTransaction = (id: string) => { + // 직접 컨텍스트를 통해 삭제 + deleteTransaction(id); + }; + + const formatCurrency = (amount: number) => { + return amount.toLocaleString('ko-KR') + '원'; + }; + + const getCategoryIcon = (category: string) => { + switch (category) { + case '식비': + return '🍽️'; + case '교통비': + return '🚗'; + case '생활비': + return '🏠'; + case '쇼핑': + return '🛍️'; + case '의료': + return '💊'; + case '여가': + return '🎮'; + case '교육': + return '📚'; + default: + return '💰'; } }; - - return <> -

최근 지출

-
- {transactions.map(transaction => ( - - ))} + + return ( +
+
+

최근 지출

+ + 더보기 +
- -
- +
+ {transactions.length > 0 ? ( + transactions.map((transaction) => ( +
handleTransactionClick(transaction)} + > +
+ {getCategoryIcon(transaction.category)} +
+

{transaction.title}

+

{transaction.date}

+
+
+
+

-{formatCurrency(transaction.amount)}

+

{transaction.category}

+
+
+ )) + ) : ( +
+ 지출 내역이 없습니다 +
+ )}
- ; + + {selectedTransaction && ( + + )} +
+ ); }; export default RecentTransactionsSection; diff --git a/src/components/TransactionEditDialog.tsx b/src/components/TransactionEditDialog.tsx index 966a89b..f8eec35 100644 --- a/src/components/TransactionEditDialog.tsx +++ b/src/components/TransactionEditDialog.tsx @@ -3,6 +3,7 @@ import React from 'react'; import { zodResolver } from '@hookform/resolvers/zod'; import { useForm } from 'react-hook-form'; import { Transaction } from '@/components/TransactionCard'; +import { useBudget } from '@/contexts/BudgetContext'; import { Dialog, DialogContent, @@ -25,7 +26,7 @@ interface TransactionEditDialogProps { transaction: Transaction; open: boolean; onOpenChange: (open: boolean) => void; - onSave: (updatedTransaction: Transaction) => void; + onSave?: (updatedTransaction: Transaction) => void; onDelete?: (id: string) => void; } @@ -36,6 +37,8 @@ const TransactionEditDialog: React.FC = ({ onSave, onDelete }) => { + const { updateTransaction, deleteTransaction } = useBudget(); + const form = useForm({ resolver: zodResolver(transactionFormSchema), defaultValues: { @@ -49,26 +52,44 @@ const TransactionEditDialog: React.FC = ({ // Remove commas from amount string and convert to number const cleanAmount = values.amount.replace(/,/g, ''); - onSave({ + const updatedTransaction = { ...transaction, title: values.title, amount: Number(cleanAmount), category: values.category, - }); + }; + + // 컨텍스트를 통해 트랜잭션 업데이트 + updateTransaction(updatedTransaction); + + // 부모 컴포넌트의 onSave 콜백이 있다면 호출 + if (onSave) { + onSave(updatedTransaction); + } onOpenChange(false); + + toast({ + title: "지출이 수정되었습니다", + description: `${values.title} 항목이 ${formatWithCommas(cleanAmount)}원으로 수정되었습니다.`, + }); }; const handleDelete = () => { + // 컨텍스트를 통해 트랜잭션 삭제 + deleteTransaction(transaction.id); + + // 부모 컴포넌트의 onDelete 콜백이 있다면 호출 if (onDelete) { onDelete(transaction.id); - onOpenChange(false); - - toast({ - title: "지출이 삭제되었습니다", - description: `${transaction.title} 항목이 삭제되었습니다.`, - }); } + + onOpenChange(false); + + toast({ + title: "지출이 삭제되었습니다", + description: `${transaction.title} 항목이 삭제되었습니다.`, + }); }; return ( @@ -83,7 +104,7 @@ const TransactionEditDialog: React.FC = ({ - {onDelete && } +
diff --git a/src/contexts/budget/BudgetContext.tsx b/src/contexts/budget/BudgetContext.tsx index 87ed144..724fecb 100644 --- a/src/contexts/budget/BudgetContext.tsx +++ b/src/contexts/budget/BudgetContext.tsx @@ -15,7 +15,9 @@ interface BudgetContextType { current: number; total: number; }>; + addTransaction: (transaction: Transaction) => void; updateTransaction: (transaction: Transaction) => void; + deleteTransaction: (id: string) => void; handleBudgetGoalUpdate: (type: BudgetPeriod, amount: number, newCategoryBudgets?: Record) => void; resetBudgetData?: () => void; // 선택적 필드로 추가 } diff --git a/src/contexts/budget/storageUtils.ts b/src/contexts/budget/storageUtils.ts index db83180..bf068b6 100644 --- a/src/contexts/budget/storageUtils.ts +++ b/src/contexts/budget/storageUtils.ts @@ -4,74 +4,95 @@ import { DEFAULT_CATEGORY_BUDGETS, getInitialBudgetData } from './budgetUtils'; // 로컬 스토리지에서 트랜잭션 불러오기 export const loadTransactionsFromStorage = (): Transaction[] => { - const storedTransactions = localStorage.getItem('transactions'); - if (storedTransactions) { - try { + try { + const storedTransactions = localStorage.getItem('transactions'); + if (storedTransactions) { return JSON.parse(storedTransactions); - } catch (error) { - console.error('트랜잭션 데이터 파싱 오류:', error); - return []; } + } catch (error) { + console.error('트랜잭션 데이터 파싱 오류:', error); } return []; }; // 트랜잭션 저장 export const saveTransactionsToStorage = (transactions: Transaction[]): void => { - localStorage.setItem('transactions', JSON.stringify(transactions)); + try { + localStorage.setItem('transactions', JSON.stringify(transactions)); + console.log('트랜잭션 저장 완료, 항목 수:', transactions.length); + } catch (error) { + console.error('트랜잭션 저장 오류:', error); + } }; // 모든 트랜잭션 삭제 export const clearAllTransactions = (): void => { - localStorage.removeItem('transactions'); - // 빈 배열을 저장하여 확실히 초기화 - localStorage.setItem('transactions', JSON.stringify([])); + try { + localStorage.removeItem('transactions'); + // 빈 배열을 저장하여 확실히 초기화 + localStorage.setItem('transactions', JSON.stringify([])); + console.log('모든 트랜잭션이 삭제되었습니다.'); + } catch (error) { + console.error('트랜잭션 삭제 오류:', error); + } }; // 카테고리 예산 불러오기 export const loadCategoryBudgetsFromStorage = (): Record => { - const storedCategoryBudgets = localStorage.getItem('categoryBudgets'); - if (storedCategoryBudgets) { - try { - return JSON.parse(storedCategoryBudgets); - } catch (error) { - console.error('카테고리 예산 데이터 파싱 오류:', error); - return DEFAULT_CATEGORY_BUDGETS; + try { + const storedCategoryBudgets = localStorage.getItem('categoryBudgets'); + if (storedCategoryBudgets) { + const parsed = JSON.parse(storedCategoryBudgets); + console.log('카테고리 예산 로드 완료:', parsed); + return parsed; } + } catch (error) { + console.error('카테고리 예산 데이터 파싱 오류:', error); } // 새 사용자를 위한 기본 카테고리 예산 저장 + console.log('기본 카테고리 예산 설정'); saveCategoryBudgetsToStorage(DEFAULT_CATEGORY_BUDGETS); return DEFAULT_CATEGORY_BUDGETS; }; // 카테고리 예산 저장 export const saveCategoryBudgetsToStorage = (categoryBudgets: Record): void => { - localStorage.setItem('categoryBudgets', JSON.stringify(categoryBudgets)); + try { + localStorage.setItem('categoryBudgets', JSON.stringify(categoryBudgets)); + console.log('카테고리 예산 저장 완료:', categoryBudgets); + } catch (error) { + console.error('카테고리 예산 저장 오류:', error); + } }; // 모든 카테고리 예산 삭제 export const clearAllCategoryBudgets = (): void => { - localStorage.removeItem('categoryBudgets'); - // 기본값으로 재설정 - saveCategoryBudgetsToStorage(DEFAULT_CATEGORY_BUDGETS); + try { + localStorage.removeItem('categoryBudgets'); + // 기본값으로 재설정 + saveCategoryBudgetsToStorage(DEFAULT_CATEGORY_BUDGETS); + console.log('카테고리 예산이 초기화되었습니다.'); + } catch (error) { + console.error('카테고리 예산 삭제 오류:', error); + } }; // 예산 데이터 불러오기 export const loadBudgetDataFromStorage = (): BudgetData => { - const storedBudgetData = localStorage.getItem('budgetData'); - if (storedBudgetData) { - try { - return JSON.parse(storedBudgetData); - } catch (error) { - console.error('예산 데이터 파싱 오류:', error); - const initialData = getInitialBudgetData(); - saveBudgetDataToStorage(initialData); - return initialData; + try { + const storedBudgetData = localStorage.getItem('budgetData'); + if (storedBudgetData) { + const parsed = JSON.parse(storedBudgetData); + console.log('예산 데이터 로드 완료'); + return parsed; } + } catch (error) { + console.error('예산 데이터 파싱 오류:', error); } // 새 사용자를 위한 기본 예산 데이터 저장 + console.log('기본 예산 데이터 설정'); const initialData = getInitialBudgetData(); saveBudgetDataToStorage(initialData); return initialData; @@ -79,15 +100,25 @@ export const loadBudgetDataFromStorage = (): BudgetData => { // 예산 데이터 저장 export const saveBudgetDataToStorage = (budgetData: BudgetData): void => { - localStorage.setItem('budgetData', JSON.stringify(budgetData)); + try { + localStorage.setItem('budgetData', JSON.stringify(budgetData)); + console.log('예산 데이터 저장 완료'); + } catch (error) { + console.error('예산 데이터 저장 오류:', error); + } }; // 모든 예산 데이터 삭제 export const clearAllBudgetData = (): void => { - localStorage.removeItem('budgetData'); - // 기본값으로 재설정 - const initialData = getInitialBudgetData(); - saveBudgetDataToStorage(initialData); + try { + localStorage.removeItem('budgetData'); + // 기본값으로 재설정 + const initialData = getInitialBudgetData(); + saveBudgetDataToStorage(initialData); + console.log('예산 데이터가 초기화되었습니다.'); + } catch (error) { + console.error('예산 데이터 삭제 오류:', error); + } }; // 모든 데이터 초기화 (첫 로그인 상태) diff --git a/src/contexts/budget/useBudgetState.ts b/src/contexts/budget/useBudgetState.ts index 1de4454..c0c9ba1 100644 --- a/src/contexts/budget/useBudgetState.ts +++ b/src/contexts/budget/useBudgetState.ts @@ -61,9 +61,21 @@ export const useBudgetState = () => { // 지출 계산 및 업데이트 useEffect(() => { - const updatedBudgetData = calculateSpentAmounts(transactions, budgetData); + // 스토리지에서 데이터 로드 + const loadedBudgetData = loadBudgetDataFromStorage(); + + // 지출 금액 업데이트 + const updatedBudgetData = calculateSpentAmounts(transactions, loadedBudgetData); + + // 상태 및 스토리지 모두 업데이트 setBudgetData(updatedBudgetData); saveBudgetDataToStorage(updatedBudgetData); + + // 트랜잭션 변경 내용도 저장 + saveTransactionsToStorage(transactions); + + // 로컬 이벤트 발생 (다른 컴포넌트에서 변경 감지하도록) + window.dispatchEvent(new Event('budgetDataUpdated')); }, [transactions]); // 카테고리별 예산 및 지출 계산 @@ -91,11 +103,27 @@ export const useBudgetState = () => { } }; - saveBudgetDataToStorage(updatedBudgetData); + // 저장 과정 강화 - 예산 데이터 저장 + try { + saveBudgetDataToStorage(updatedBudgetData); + console.log('예산 데이터가 저장되었습니다:', updatedBudgetData); + } catch (error) { + console.error('예산 데이터 저장 중 오류:', error); + } + return updatedBudgetData; }); - saveCategoryBudgetsToStorage(categoryBudgets); + // 저장 과정 강화 - 카테고리 예산 저장 + try { + saveCategoryBudgetsToStorage(categoryBudgets); + console.log('카테고리 예산이 저장되었습니다:', categoryBudgets); + } catch (error) { + console.error('카테고리 예산 저장 중 오류:', error); + } + + // 로컬 이벤트 발생 (다른 컴포넌트에서 변경 감지하도록) + window.dispatchEvent(new Event('categoryBudgetsUpdated')); }, [categoryBudgets]); // 카테고리별 지출 계산 @@ -108,6 +136,15 @@ export const useBudgetState = () => { // 카테고리 예산이 직접 업데이트된 경우 if (newCategoryBudgets) { setCategoryBudgets(newCategoryBudgets); + + // 저장 과정 추가 + saveCategoryBudgetsToStorage(newCategoryBudgets); + + toast({ + title: "카테고리 예산 업데이트 완료", + description: "카테고리별 예산이 저장되었습니다." + }); + return; // 카테고리 예산이 변경되면 useEffect에서 자동으로 budgetData가 업데이트됩니다 } @@ -121,6 +158,7 @@ export const useBudgetState = () => { }); setCategoryBudgets(updatedCategoryBudgets); + saveCategoryBudgetsToStorage(updatedCategoryBudgets); } else { // 일일이나 주간 예산이 직접 업데이트되는 경우 const updatedBudgetData = calculateUpdatedBudgetData(budgetData, type, amount); @@ -134,6 +172,15 @@ export const useBudgetState = () => { }); }; + // 트랜잭션 추가 함수 추가 + const addTransaction = (newTransaction: Transaction) => { + setTransactions(prev => { + const updated = [newTransaction, ...prev]; + saveTransactionsToStorage(updated); + return updated; + }); + }; + // 트랜잭션 업데이트 처리 const updateTransaction = (updatedTransaction: Transaction) => { setTransactions(prev => { @@ -145,15 +192,26 @@ export const useBudgetState = () => { }); }; + // 트랜잭션 삭제 함수 추가 + const deleteTransaction = (transactionId: string) => { + setTransactions(prev => { + const updated = prev.filter(transaction => transaction.id !== transactionId); + saveTransactionsToStorage(updated); + return updated; + }); + }; + return { transactions, categoryBudgets, budgetData, selectedTab, setSelectedTab, + addTransaction, updateTransaction, + deleteTransaction, handleBudgetGoalUpdate, getCategorySpending, - resetBudgetData // 새로 추가된 리셋 함수 + resetBudgetData }; };