Fix data persistence issue

Addresses a problem where budget and expense data was not being saved correctly.

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<string | null>(null);
+  const { addTransaction } = useBudget();
-  
-  useEffect(() => {
-    // 현재 로그인한 사용자 가져오기
-    const getUser = async () => {
-      const { data: { user } } = await supabase.auth.getUser();
-      setUserId(user?.id || null);
-    };
-    
-    getUser();
-  }, []);
   
   // Format number with commas
   const formatWithCommas = (value: string): string => {
@@ -45,19 +36,16 @@ const AddTransactionButton = () => {
       type: 'expense'
     };
     
-    // 로컬 스토리지에서 기존 지출 내역을 가져옵니다
+    // BudgetContext를 통해 지출 추가
-    const existingTransactionsJSON = localStorage.getItem('transactions');
+    addTransaction(newExpense);
-    let existingTransactions = existingTransactionsJSON ? JSON.parse(existingTransactionsJSON) : [];
-    
-    // 새 지출을 추가하고 다시 저장합니다
-    existingTransactions = [newExpense, ...existingTransactions];
-    localStorage.setItem('transactions', JSON.stringify(existingTransactions));
     
     // 동기화가 활성화되어 있고 사용자가 로그인되어 있다면 Supabase에도 저장
-    if (isSyncEnabled() && userId) {
     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,11 +55,11 @@ const AddTransactionButton = () => {
         });
         
         if (error) throw error;
+      }
     } catch (error) {
       console.error('Supabase에 지출 추가 실패:', error);
       // 실패해도 로컬에는 저장되어 있으므로 사용자에게 알리지 않음
     }
-    }
     
     // 다이얼로그를 닫습니다
     setShowExpenseDialog(false);

src/components/RecentTransactionsSection.tsx

@@ -1,56 +1,114 @@
 
 import React, { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { Transaction } from './TransactionCard';
-import TransactionCard, { Transaction } from '@/components/TransactionCard';
+import TransactionEditDialog from './TransactionEditDialog';
-import { toast } from '@/components/ui/use-toast';
+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<RecentTransactionsSectionProps> = ({ 
   transactions,
   onUpdateTransaction 
 }) => {
-  const navigate = useNavigate();
+  const [selectedTransaction, setSelectedTransaction] = useState<Transaction | null>(null);
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const { updateTransaction, deleteTransaction } = useBudget();
 
-  const handleViewAllTransactions = () => {
+  const handleTransactionClick = (transaction: Transaction) => {
-    navigate('/transactions');
+    setSelectedTransaction(transaction);
+    setIsDialogOpen(true);
   };
 
   const handleUpdateTransaction = (updatedTransaction: Transaction) => {
     if (onUpdateTransaction) {
       onUpdateTransaction(updatedTransaction);
+    }
+    // 직접 컨텍스트를 통해 업데이트
+    updateTransaction(updatedTransaction);
+  };
 
-      toast({
+  const handleDeleteTransaction = (id: string) => {
-        title: "지출이 수정되었습니다",
+    // 직접 컨텍스트를 통해 삭제
-        description: `${updatedTransaction.title} 항목이 업데이트되었습니다.`,
+    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 <>
+  return (
-      <h2 className="text-lg font-semibold mb-3 mt-8">최근 지출</h2>
+    <div className="mt-6">
-      <div className="grid gap-3 mb-6">
+      <div className="flex justify-between items-center mb-3">
-        {transactions.map(transaction => (
+        <h2 className="text-lg font-semibold">최근 지출</h2>
-          <TransactionCard 
+        <Link to="/transactions" className="text-sm text-neuro-income flex items-center">
+          더보기 <ChevronRight size={16} />
+        </Link>
+      </div>
+      <div className="neuro-card divide-y divide-gray-100">
+        {transactions.length > 0 ? (
+          transactions.map((transaction) => (
+            <div 
               key={transaction.id} 
-            transaction={transaction} 
+              className="flex justify-between py-3 px-4 cursor-pointer hover:bg-gray-50" 
-            onUpdate={handleUpdateTransaction}
+              onClick={() => handleTransactionClick(transaction)}
-          />
+            >
-        ))}
+              <div className="flex items-center">
+                <span className="text-xl mr-3">{getCategoryIcon(transaction.category)}</span>
+                <div>
+                  <h3 className="font-medium">{transaction.title}</h3>
+                  <p className="text-xs text-gray-500">{transaction.date}</p>
+                </div>
+              </div>
+              <div className="text-right">
+                <p className="font-semibold text-red-500">-{formatCurrency(transaction.amount)}</p>
+                <p className="text-xs text-gray-500">{transaction.category}</p>
+              </div>
+            </div>
+          ))
+        ) : (
+          <div className="py-4 text-center text-gray-500">
+            지출 내역이 없습니다
+          </div>
+        )}
       </div>
 
-      <div className="flex justify-center mb-6">
+      {selectedTransaction && (
-        <button 
+        <TransactionEditDialog
-          className="text-neuro-income font-medium hover:underline"
+          transaction={selectedTransaction}
-          onClick={handleViewAllTransactions}
+          open={isDialogOpen}
-        >
+          onOpenChange={setIsDialogOpen}
-          모든 지출 보기
+          onSave={handleUpdateTransaction}
-        </button>
+          onDelete={handleDeleteTransaction}
+        />
+      )}
     </div>
-    </>;
+  );
 };
 
 export default RecentTransactionsSection;

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<TransactionEditDialogProps> = ({
   onSave,
   onDelete
 }) => {
+  const { updateTransaction, deleteTransaction } = useBudget();
+
   const form = useForm<TransactionFormValues>({
     resolver: zodResolver(transactionFormSchema),
     defaultValues: {
@@ -49,26 +52,44 @@ const TransactionEditDialog: React.FC<TransactionEditDialogProps> = ({
     // 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} 항목이 삭제되었습니다.`,
     });
-    }
   };
   
   return (
@@ -83,7 +104,7 @@ const TransactionEditDialog: React.FC<TransactionEditDialogProps> = ({
             <TransactionFormFields form={form} />
             
             <DialogFooter className="flex justify-between gap-2 mt-6">
-              {onDelete && <TransactionDeleteAlert onDelete={handleDelete} />}
+              <TransactionDeleteAlert onDelete={handleDelete} />
               <div className="flex gap-2">
                 <DialogClose asChild>
                   <Button type="button" variant="outline">취소</Button>

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<string, number>) => void;
   resetBudgetData?: () => void; // 선택적 필드로 추가
 }

src/contexts/budget/storageUtils.ts

@@ -4,74 +4,95 @@ import { DEFAULT_CATEGORY_BUDGETS, getInitialBudgetData } from './budgetUtils';
 
 // 로컬 스토리지에서 트랜잭션 불러오기
 export const loadTransactionsFromStorage = (): Transaction[] => {
+  try {
     const storedTransactions = localStorage.getItem('transactions');
     if (storedTransactions) {
-    try {
       return JSON.parse(storedTransactions);
+    }
   } catch (error) {
     console.error('트랜잭션 데이터 파싱 오류:', error);
-      return [];
-    }
   }
   return [];
 };
 
 // 트랜잭션 저장
 export const saveTransactionsToStorage = (transactions: Transaction[]): void => {
+  try {
     localStorage.setItem('transactions', JSON.stringify(transactions));
+    console.log('트랜잭션 저장 완료, 항목 수:', transactions.length);
+  } catch (error) {
+    console.error('트랜잭션 저장 오류:', error);
+  }
 };
 
 // 모든 트랜잭션 삭제
 export const clearAllTransactions = (): void => {
+  try {
     localStorage.removeItem('transactions');
     // 빈 배열을 저장하여 확실히 초기화
     localStorage.setItem('transactions', JSON.stringify([]));
+    console.log('모든 트랜잭션이 삭제되었습니다.');
+  } catch (error) {
+    console.error('트랜잭션 삭제 오류:', error);
+  }
 };
 
 // 카테고리 예산 불러오기
 export const loadCategoryBudgetsFromStorage = (): Record<string, number> => {
+  try {
     const storedCategoryBudgets = localStorage.getItem('categoryBudgets');
     if (storedCategoryBudgets) {
-    try {
+      const parsed = JSON.parse(storedCategoryBudgets);
-      return JSON.parse(storedCategoryBudgets);
+      console.log('카테고리 예산 로드 완료:', parsed);
+      return parsed;
+    }
   } catch (error) {
     console.error('카테고리 예산 데이터 파싱 오류:', error);
-      return DEFAULT_CATEGORY_BUDGETS;
-    }
   }
   
   // 새 사용자를 위한 기본 카테고리 예산 저장
+  console.log('기본 카테고리 예산 설정');
   saveCategoryBudgetsToStorage(DEFAULT_CATEGORY_BUDGETS);
   return DEFAULT_CATEGORY_BUDGETS;
 };
 
 // 카테고리 예산 저장
 export const saveCategoryBudgetsToStorage = (categoryBudgets: Record<string, number>): void => {
+  try {
     localStorage.setItem('categoryBudgets', JSON.stringify(categoryBudgets));
+    console.log('카테고리 예산 저장 완료:', categoryBudgets);
+  } catch (error) {
+    console.error('카테고리 예산 저장 오류:', error);
+  }
 };
 
 // 모든 카테고리 예산 삭제
 export const clearAllCategoryBudgets = (): void => {
+  try {
     localStorage.removeItem('categoryBudgets');
     // 기본값으로 재설정
     saveCategoryBudgetsToStorage(DEFAULT_CATEGORY_BUDGETS);
+    console.log('카테고리 예산이 초기화되었습니다.');
+  } catch (error) {
+    console.error('카테고리 예산 삭제 오류:', error);
+  }
 };
 
 // 예산 데이터 불러오기
 export const loadBudgetDataFromStorage = (): BudgetData => {
+  try {
     const storedBudgetData = localStorage.getItem('budgetData');
     if (storedBudgetData) {
-    try {
+      const parsed = JSON.parse(storedBudgetData);
-      return JSON.parse(storedBudgetData);
+      console.log('예산 데이터 로드 완료');
+      return parsed;
+    }
   } catch (error) {
     console.error('예산 데이터 파싱 오류:', error);
-      const initialData = getInitialBudgetData();
-      saveBudgetDataToStorage(initialData);
-      return initialData;
-    }
   }
   
   // 새 사용자를 위한 기본 예산 데이터 저장
+  console.log('기본 예산 데이터 설정');
   const initialData = getInitialBudgetData();
   saveBudgetDataToStorage(initialData);
   return initialData;
@@ -79,15 +100,25 @@ export const loadBudgetDataFromStorage = (): BudgetData => {
 
 // 예산 데이터 저장
 export const saveBudgetDataToStorage = (budgetData: BudgetData): void => {
+  try {
     localStorage.setItem('budgetData', JSON.stringify(budgetData));
+    console.log('예산 데이터 저장 완료');
+  } catch (error) {
+    console.error('예산 데이터 저장 오류:', error);
+  }
 };
 
 // 모든 예산 데이터 삭제
 export const clearAllBudgetData = (): void => {
+  try {
     localStorage.removeItem('budgetData');
     // 기본값으로 재설정
     const initialData = getInitialBudgetData();
     saveBudgetDataToStorage(initialData);
+    console.log('예산 데이터가 초기화되었습니다.');
+  } catch (error) {
+    console.error('예산 데이터 삭제 오류:', error);
+  }
 };
 
 // 모든 데이터 초기화 (첫 로그인 상태)

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 = () => {
         }
       };
       
+      // 저장 과정 강화 - 예산 데이터 저장
+      try {
         saveBudgetDataToStorage(updatedBudgetData);
+        console.log('예산 데이터가 저장되었습니다:', updatedBudgetData);
+      } catch (error) {
+        console.error('예산 데이터 저장 중 오류:', error);
+      }
+      
       return updatedBudgetData;
     });
     
+    // 저장 과정 강화 - 카테고리 예산 저장
+    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
   };
 };