Refactor TransactionCard component

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

src/components/transaction/TransactionAmount.tsx

@@ -0,0 +1,26 @@
+
+import React from 'react';
+import { ArrowDownIcon } from 'lucide-react';
+
+interface TransactionAmountProps {
+  amount: number;
+}
+
+const TransactionAmount: React.FC<TransactionAmountProps> = ({ amount }) => {
+  const formattedAmount = new Intl.NumberFormat('ko-KR', {
+    style: 'currency',
+    currency: 'KRW',
+    maximumFractionDigits: 0
+  }).format(amount);
+
+  return (
+    <div className="flex items-center gap-1">
+      <ArrowDownIcon size={12} className="text-neuro-income" />
+      <span className="font-medium text-neuro-income">
+        {formattedAmount}
+      </span>
+    </div>
+  );
+};
+
+export default TransactionAmount;

src/components/transaction/TransactionDetails.tsx

@@ -0,0 +1,18 @@
+
+import React from 'react';
+
+interface TransactionDetailsProps {
+  title: string;
+  date: string;
+}
+
+const TransactionDetails: React.FC<TransactionDetailsProps> = ({ title, date }) => {
+  return (
+    <div>
+      <h3 className="text-sm font-medium">{title}</h3>
+      <p className="text-xs text-gray-500">{date}</p>
+    </div>
+  );
+};
+
+export default TransactionDetails;

src/components/transaction/TransactionIcon.tsx

@@ -0,0 +1,23 @@
+
+import React from 'react';
+import { Coffee, Home, Car } from 'lucide-react';
+
+export const categoryIcons: Record<string, React.ReactNode> = {
+  식비: <Coffee size={18} />,
+  생활비: <Home size={18} />,
+  교통비: <Car size={18} />,
+};
+
+interface TransactionIconProps {
+  category: string;
+}
+
+const TransactionIcon: React.FC<TransactionIconProps> = ({ category }) => {
+  return (
+    <div className="p-2 rounded-full bg-neuro-income/10 text-neuro-income">
+      {categoryIcons[category] || <Coffee size={18} />}
+    </div>
+  );
+};
+
+export default TransactionIcon;