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>