Refactor TransactionCard component

Refactor TransactionCard component into smaller, more manageable components without changing functionality.

src/components/TransactionCard.tsx

@@ -1,8 +1,10 @@
 
 import React, { useState } from 'react';
-import { ArrowDownIcon, Coffee, Home, Car } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import TransactionEditDialog from './TransactionEditDialog';
+import TransactionIcon from './transaction/TransactionIcon';
+import TransactionDetails from './transaction/TransactionDetails';
+import TransactionAmount from './transaction/TransactionAmount';
 
 export type Transaction = {
   id: string;
@@ -13,12 +15,6 @@ export type Transaction = {
   type: 'expense' | 'income';
 };
 
-const categoryIcons: Record<string, React.ReactNode> = {
-  식비: <Coffee size={18} />,
-  생활비: <Home size={18} />,
-  교통비: <Car size={18} />,
-};
-
 interface TransactionCardProps {
   transaction: Transaction;
   onUpdate?: (updatedTransaction: Transaction) => void;
@@ -31,12 +27,6 @@ const TransactionCard: React.FC<TransactionCardProps> = ({
   const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
   const { title, amount, date, category, type } = transaction;
   
-  const formattedAmount = new Intl.NumberFormat('ko-KR', {
-    style: 'currency',
-    currency: 'KRW',
-    maximumFractionDigits: 0
-  }).format(amount);
-
   const handleSaveTransaction = (updatedTransaction: Transaction) => {
     if (onUpdate) {
       onUpdate(updatedTransaction);
@@ -51,22 +41,11 @@ const TransactionCard: React.FC<TransactionCardProps> = ({
       >
         <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>
+            <TransactionIcon category={category} />
+            <TransactionDetails title={title} date={date} />
           </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>
+          <TransactionAmount amount={amount} />
         </div>
       </div>