Use consistent category icons

Use the same icons in the recent transactions card as in the expense chart.

src/components/RecentTransactionsSection.tsx

@@ -4,10 +4,14 @@ import TransactionEditDialog from './TransactionEditDialog';
 import { ChevronRight } from 'lucide-react';
 import { useBudget } from '@/contexts/BudgetContext';
 import { Link } from 'react-router-dom';
+import { categoryIcons } from '@/constants/categoryIcons';
+import TransactionIcon from './transaction/TransactionIcon';
+
 interface RecentTransactionsSectionProps {
   transactions: Transaction[];
   onUpdateTransaction?: (transaction: Transaction) => void;
 }
+
 const RecentTransactionsSection: React.FC<RecentTransactionsSectionProps> = ({
   transactions,
   onUpdateTransaction
@@ -18,10 +22,12 @@ const RecentTransactionsSection: React.FC<RecentTransactionsSectionProps> = ({
     updateTransaction,
     deleteTransaction
   } = useBudget();
+  
   const handleTransactionClick = (transaction: Transaction) => {
     setSelectedTransaction(transaction);
     setIsDialogOpen(true);
   };
+
   const handleUpdateTransaction = (updatedTransaction: Transaction) => {
     if (onUpdateTransaction) {
       onUpdateTransaction(updatedTransaction);
@@ -29,33 +35,16 @@ const RecentTransactionsSection: React.FC<RecentTransactionsSectionProps> = ({
     // 직접 컨텍스트를 통해 업데이트
     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 <div className="mt-6 mb-[50px]">
       <div className="flex justify-between items-center mb-3">
         <h2 className="text-lg font-semibold">최근 지출</h2>
@@ -66,8 +55,8 @@ const RecentTransactionsSection: React.FC<RecentTransactionsSectionProps> = ({
       <div className="neuro-card divide-y divide-gray-100 w-full">
         {transactions.length > 0 ? transactions.map(transaction => <div key={transaction.id} onClick={() => handleTransactionClick(transaction)} className="flex justify-between py-3 px-4 cursor-pointer hover:bg-gray-50">
               <div className="flex items-center">
-                <span className="text-xl mr-3">{getCategoryIcon(transaction.category)}</span>
-                <div>
+                <TransactionIcon category={transaction.category} />
+                <div className="ml-3">
                   <h3 className="font-medium text-black">{transaction.title}</h3>
                   <p className="text-xs text-gray-500">{transaction.date}</p>
                 </div>
@@ -84,4 +73,5 @@ const RecentTransactionsSection: React.FC<RecentTransactionsSectionProps> = ({
       {selectedTransaction && <TransactionEditDialog transaction={selectedTransaction} open={isDialogOpen} onOpenChange={setIsDialogOpen} onSave={handleUpdateTransaction} onDelete={handleDeleteTransaction} />}
     </div>;
 };
+
 export default RecentTransactionsSection;