Enable transaction editing

Make each transaction item in the transaction history clickable for modification and editing.
2025-03-15 04:12:14 +00:00
parent 5cb9151ceb
commit a0b6ef9667
5 changed files with 267 additions and 28 deletions
--- a/src/components/RecentTransactionsSection.tsx
+++ b/src/components/RecentTransactionsSection.tsx
@@ -1,25 +1,45 @@

-import React from 'react';
+import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import TransactionCard, { Transaction } from '@/components/TransactionCard';
+import { toast } from '@/components/ui/use-toast';

 interface RecentTransactionsSectionProps {
  transactions: Transaction[];
+  onUpdateTransaction?: (updatedTransaction: Transaction) => void;
 }

 const RecentTransactionsSection: React.FC<RecentTransactionsSectionProps> = ({
-  transactions
+  transactions,
+  onUpdateTransaction
 }) => {
  const navigate = useNavigate();
  
  const handleViewAllTransactions = () => {
    navigate('/transactions');
  };
+
+  const handleUpdateTransaction = (updatedTransaction: Transaction) => {
+    if (onUpdateTransaction) {
+      onUpdateTransaction(updatedTransaction);
+      
+      toast({
+        title: "지출이 수정되었습니다",
+        description: `${updatedTransaction.title} 항목이 업데이트되었습니다.`,
+      });
+    }
+  };
  
  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} />)}
+        {transactions.map(transaction => (
+          <TransactionCard 
+            key={transaction.id} 
+            transaction={transaction} 
+            onUpdate={handleUpdateTransaction}
+          />
+        ))}
      </div>
      
      <div className="flex justify-center mb-6">
--- a/src/components/TransactionCard.tsx
+++ b/src/components/TransactionCard.tsx
@@ -1,7 +1,8 @@

-import React from 'react';
-import { ArrowDownIcon, ArrowUpIcon, Coffee, Home, Car } from 'lucide-react';
+import React, { useState } from 'react';
+import { ArrowDownIcon, Coffee, Home, Car } from 'lucide-react';
 import { cn } from '@/lib/utils';
+import TransactionEditDialog from './TransactionEditDialog';

 export type Transaction = {
  id: string;
@@ -20,9 +21,14 @@ const categoryIcons: Record<string, React.ReactNode> = {

 interface TransactionCardProps {
  transaction: Transaction;
+  onUpdate?: (updatedTransaction: Transaction) => void;
 }

-const TransactionCard: React.FC<TransactionCardProps> = ({ transaction }) => {
+const TransactionCard: React.FC<TransactionCardProps> = ({ 
+  transaction,
+  onUpdate
+}) => {
+  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
  const { title, amount, date, category, type } = transaction;
  
  const formattedAmount = new Intl.NumberFormat('ko-KR', {
@@ -30,29 +36,47 @@ const TransactionCard: React.FC<TransactionCardProps> = ({ transaction }) => {
    currency: 'KRW',
    maximumFractionDigits: 0
  }).format(amount);
+
+  const handleSaveTransaction = (updatedTransaction: Transaction) => {
+    if (onUpdate) {
+      onUpdate(updatedTransaction);
+    }
+  };
  
  return (
-    <div className="neuro-flat p-4 transition-all duration-300 hover:shadow-neuro-convex animate-scale-in">
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-3">
-          <div className="p-2 rounded-full bg-neuro-income/10 text-neuro-income">
-            {categoryIcons[category] || <Coffee size={18} />}
+    <>
+      <div 
+        className="neuro-flat p-4 transition-all duration-300 hover:shadow-neuro-convex animate-scale-in cursor-pointer"
+        onClick={() => setIsEditDialogOpen(true)}
+      >
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="p-2 rounded-full bg-neuro-income/10 text-neuro-income">
+              {categoryIcons[category] || <Coffee size={18} />}
+            </div>
+            
+            <div>
+              <h3 className="text-sm font-medium">{title}</h3>
+              <p className="text-xs text-gray-500">{date}</p>
+            </div>
          </div>
          
-          <div>
-            <h3 className="text-sm font-medium">{title}</h3>
-            <p className="text-xs text-gray-500">{date}</p>
+          <div className="flex items-center gap-1">
+            <ArrowDownIcon size={12} className="text-neuro-income" />
+            <span className="font-medium text-neuro-income">
+              {formattedAmount}
+            </span>
          </div>
        </div>
-        
-        <div className="flex items-center gap-1">
-          <ArrowDownIcon size={12} className="text-neuro-income" />
-          <span className="font-medium text-neuro-income">
-            {formattedAmount}
-          </span>
-        </div>
      </div>
-    </div>
+
+      <TransactionEditDialog 
+        transaction={transaction}
+        open={isEditDialogOpen}
+        onOpenChange={setIsEditDialogOpen}
+        onSave={handleSaveTransaction}
+      />
+    </>
  );
 };

--- a/src/components/TransactionEditDialog.tsx
+++ b/src/components/TransactionEditDialog.tsx
@@ -0,0 +1,163 @@
+
+import React from 'react';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { Transaction } from '@/components/TransactionCard';
+import { 
+  Dialog, 
+  DialogContent, 
+  DialogHeader, 
+  DialogTitle, 
+  DialogFooter,
+  DialogClose
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
+import { Coffee, Home, Car } from 'lucide-react';
+
+// Form schema for validation
+const formSchema = z.object({
+  title: z.string().min(1, '제목을 입력해주세요'),
+  amount: z.string().min(1, '금액을 입력해주세요'),
+  category: z.enum(['식비', '생활비', '교통비']),
+});
+
+interface TransactionEditDialogProps {
+  transaction: Transaction;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSave: (updatedTransaction: Transaction) => void;
+}
+
+const TransactionEditDialog: React.FC<TransactionEditDialogProps> = ({
+  transaction,
+  open,
+  onOpenChange,
+  onSave
+}) => {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      title: transaction.title,
+      amount: transaction.amount.toString(),
+      category: transaction.category as any,
+    },
+  });
+
+  const handleSubmit = (values: z.infer<typeof formSchema>) => {
+    // Remove commas from amount string and convert to number
+    const cleanAmount = values.amount.replace(/,/g, '');
+    
+    onSave({
+      ...transaction,
+      title: values.title,
+      amount: Number(cleanAmount),
+      category: values.category,
+    });
+    
+    onOpenChange(false);
+  };
+
+  // Function to format number with commas
+  const formatWithCommas = (value: string) => {
+    const numericValue = value.replace(/[^0-9]/g, '');
+    return numericValue.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+  };
+
+  const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const formattedValue = formatWithCommas(e.target.value);
+    form.setValue('amount', formattedValue);
+  };
+
+  const categoryIcons: Record<string, React.ReactNode> = {
+    식비: <Coffee size={18} />,
+    생활비: <Home size={18} />,
+    교통비: <Car size={18} />,
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>지출 수정</DialogTitle>
+        </DialogHeader>
+        
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4">
+            <FormField
+              control={form.control}
+              name="title"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>제목</FormLabel>
+                  <FormControl>
+                    <Input placeholder="제목을 입력하세요" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            
+            <FormField
+              control={form.control}
+              name="amount"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>금액</FormLabel>
+                  <FormControl>
+                    <Input 
+                      placeholder="금액을 입력하세요" 
+                      {...field} 
+                      onChange={handleAmountChange}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            
+            <FormField
+              control={form.control}
+              name="category"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>카테고리</FormLabel>
+                  <div className="grid grid-cols-3 gap-2">
+                    {['식비', '생활비', '교통비'].map((category) => (
+                      <div
+                        key={category}
+                        className={`flex items-center gap-2 p-2 rounded-md cursor-pointer border ${
+                          field.value === category 
+                            ? 'border-neuro-income bg-neuro-income/10' 
+                            : 'border-gray-200'
+                        }`}
+                        onClick={() => form.setValue('category', category as any)}
+                      >
+                        <div className="p-1 rounded-full">
+                          {categoryIcons[category]}
+                        </div>
+                        <span>{category}</span>
+                      </div>
+                    ))}
+                  </div>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            
+            <DialogFooter className="sm:justify-between">
+              <DialogClose asChild>
+                <Button type="button" variant="outline">취소</Button>
+              </DialogClose>
+              <Button type="submit">저장</Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default TransactionEditDialog;
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -14,7 +14,7 @@ const Index = () => {
  const [selectedTab, setSelectedTab] = useState("daily");

  // Sample data - in a real app, this would come from a data source
-  const transactions: Transaction[] = [{
+  const [transactions, setTransactions] = useState<Transaction[]>([{
    id: '1',
    title: '식료품 구매',
    amount: 25000,
@@ -35,7 +35,7 @@ const Index = () => {
    date: '2일전, 9:00 AM',
    category: 'income',
    type: 'income'
-  }];
+  }]);

  // 카테고리별 예산
  const [categoryBudgets, setCategoryBudgets] = useState({
@@ -139,6 +139,15 @@ const Index = () => {
      description: `${type === 'daily' ? '일일' : type === 'weekly' ? '주간' : '월간'} 목표가 ${amount.toLocaleString()}원으로 설정되었습니다.`
    });
  };
+
+  // Handle transaction updates
+  const handleUpdateTransaction = (updatedTransaction: Transaction) => {
+    setTransactions(prev => 
+      prev.map(transaction => 
+        transaction.id === updatedTransaction.id ? updatedTransaction : transaction
+      )
+    );
+  };
  
  return (
    <div className="min-h-screen bg-neuro-background pb-24">
@@ -160,7 +169,10 @@ const Index = () => {
        <BudgetCategoriesSection categories={categories} />

        {/* 최근 지출 */}
-        <RecentTransactionsSection transactions={transactions} />
+        <RecentTransactionsSection 
+          transactions={transactions} 
+          onUpdateTransaction={handleUpdateTransaction}
+        />
      </div>

      <AddTransactionButton />
--- a/src/pages/Transactions.tsx
+++ b/src/pages/Transactions.tsx
@@ -4,12 +4,13 @@ import NavBar from '@/components/NavBar';
 import TransactionCard, { Transaction } from '@/components/TransactionCard';
 import AddTransactionButton from '@/components/AddTransactionButton';
 import { Calendar, Search, ChevronLeft, ChevronRight } from 'lucide-react';
+import { toast } from '@/components/ui/use-toast';

 const Transactions = () => {
  const [selectedMonth, setSelectedMonth] = useState('8월');

  // Sample data - updated to use only the three specified categories
-  const transactions: Transaction[] = [{
+  const [transactions, setTransactions] = useState<Transaction[]>([{
    id: '1',
    title: '식료품 구매',
    amount: 25000,
@@ -44,7 +45,7 @@ const Transactions = () => {
    date: '8월 12일, 2:15 PM',
    category: '식비',
    type: 'expense'
-  }];
+  }]);
  
  // Filter only expense transactions
  const expenseTransactions = transactions.filter(t => t.type === 'expense');
@@ -65,6 +66,19 @@ const Transactions = () => {
    groupedTransactions[datePart].push(transaction);
  });

+  const handleUpdateTransaction = (updatedTransaction: Transaction) => {
+    setTransactions(prev => 
+      prev.map(transaction => 
+        transaction.id === updatedTransaction.id ? updatedTransaction : transaction
+      )
+    );
+    
+    toast({
+      title: "지출이 수정되었습니다",
+      description: `${updatedTransaction.title} 항목이 업데이트되었습니다.`,
+    });
+  };
+
  return <div className="min-h-screen bg-neuro-background pb-24">
      <div className="max-w-md mx-auto px-6">
        {/* Header */}
@@ -128,7 +142,13 @@ const Transactions = () => {
              </div>
              
              <div className="grid gap-3">
-                {transactions.map(transaction => <TransactionCard key={transaction.id} transaction={transaction} />)}
+                {transactions.map(transaction => (
+                  <TransactionCard 
+                    key={transaction.id} 
+                    transaction={transaction} 
+                    onUpdate={handleUpdateTransaction}
+                  />
+                ))}
              </div>
            </div>)}
        </div>