Refactor TransactionFormFields component

Refactor TransactionFormFields component to improve maintainability.

src/components/transaction/TransactionCategorySelector.tsx

@@ -0,0 +1,46 @@
+
+import React from 'react';
+import { FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
+import { UseFormReturn } from 'react-hook-form';
+import { TransactionFormValues } from './TransactionFormFields';
+import { EXPENSE_CATEGORIES } from '@/constants/categoryIcons';
+import { categoryIcons } from '@/constants/categoryIcons';
+
+interface TransactionCategorySelectorProps {
+  form: UseFormReturn<TransactionFormValues>;
+}
+
+const TransactionCategorySelector: React.FC<TransactionCategorySelectorProps> = ({ form }) => {
+  return (
+    <FormField
+      control={form.control}
+      name="category"
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>카테고리</FormLabel>
+          <div className="grid grid-cols-4 gap-2">
+            {EXPENSE_CATEGORIES.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>
+      )}
+    />
+  );
+};
+
+export default TransactionCategorySelector;