Fix data persistence issue

Addresses a problem where budget and expense data was not being saved correctly.
2025-03-16 05:34:18 +00:00
parent a1518db6c0
commit 0824b812cb
6 changed files with 267 additions and 109 deletions
--- 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<string | null>(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);
+      // 실패해도 로컬에는 저장되어 있으므로 사용자에게 알리지 않음
    }
    
    // 다이얼로그를 닫습니다
--- 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<RecentTransactionsSectionProps> = ({
+const RecentTransactionsSection: React.FC<RecentTransactionsSectionProps> = ({ 
  transactions,
-  onUpdateTransaction
+  onUpdateTransaction 
 }) => {
-  const navigate = useNavigate();
-  
-  const handleViewAllTransactions = () => {
-    navigate('/transactions');
+  const [selectedTransaction, setSelectedTransaction] = useState<Transaction | null>(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 <>
-      <h2 className="text-lg font-semibold mb-3 mt-8">최근 지출</h2>
-      <div className="grid gap-3 mb-6">
-        {transactions.map(transaction => (
-          <TransactionCard 
-            key={transaction.id} 
-            transaction={transaction} 
-            onUpdate={handleUpdateTransaction}
-          />
-        ))}
+
+  return (
+    <div className="mt-6">
+      <div className="flex justify-between items-center mb-3">
+        <h2 className="text-lg font-semibold">최근 지출</h2>
+        <Link to="/transactions" className="text-sm text-neuro-income flex items-center">
+          더보기 <ChevronRight size={16} />
+        </Link>
      </div>
-      
-      <div className="flex justify-center mb-6">
-        <button 
-          className="text-neuro-income font-medium hover:underline"
-          onClick={handleViewAllTransactions}
-        >
-          모든 지출 보기
-        </button>
+      <div className="neuro-card divide-y divide-gray-100">
+        {transactions.length > 0 ? (
+          transactions.map((transaction) => (
+            <div 
+              key={transaction.id} 
+              className="flex justify-between py-3 px-4 cursor-pointer hover:bg-gray-50" 
+              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>
-    </>;
+
+      {selectedTransaction && (
+        <TransactionEditDialog
+          transaction={selectedTransaction}
+          open={isDialogOpen}
+          onOpenChange={setIsDialogOpen}
+          onSave={handleUpdateTransaction}
+          onDelete={handleDeleteTransaction}
+        />
+      )}
+    </div>
+  );
 };

 export default RecentTransactionsSection;
--- 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<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} 항목이 삭제되었습니다.`,
-      });
    }
+    
+    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>
--- 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<string, number>) => void;
  resetBudgetData?: () => void; // 선택적 필드로 추가
 }
--- 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<string, number> => {
-  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<string, number>): 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);
+  }
 };

 // 모든 데이터 초기화 (첫 로그인 상태)
--- 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
  };
 };