Refactor AddTransactionButton component

Refactor the AddTransactionButton component into smaller, more manageable components to improve code readability and maintainability.

src/components/expenses/ExpenseCategorySelector.tsx

@@ -0,0 +1,53 @@
+
+import React from 'react';
+import { Coffee, Home, Car } from 'lucide-react';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import { FormControl } from '@/components/ui/form';
+
+// Define expense categories
+export const EXPENSE_CATEGORIES = ['식비', '생활비', '교통비'];
+
+// Define category icons mapping
+export const categoryIcons: Record<string, React.ReactNode> = {
+  식비: <Coffee size={18} />,
+  생활비: <Home size={18} />,
+  교통비: <Car size={18} />,
+};
+
+interface ExpenseCategorySelectorProps {
+  value: string;
+  onValueChange: (value: string) => void;
+}
+
+const ExpenseCategorySelector: React.FC<ExpenseCategorySelectorProps> = ({
+  value,
+  onValueChange
+}) => {
+  return (
+    <FormControl>
+      <ToggleGroup 
+        type="single" 
+        className="justify-start flex-wrap gap-2"
+        value={value}
+        onValueChange={(value) => {
+          if (value) onValueChange(value);
+        }}
+      >
+        {EXPENSE_CATEGORIES.map((category) => (
+          <ToggleGroupItem 
+            key={category} 
+            value={category}
+            className="px-4 py-2 rounded-md border flex items-center gap-2"
+          >
+            <div className="text-neuro-income">
+              {categoryIcons[category]}
+            </div>
+            <span>{category}</span>
+          </ToggleGroupItem>
+        ))}
+      </ToggleGroup>
+    </FormControl>
+  );
+};
+
+export default ExpenseCategorySelector;

src/components/expenses/ExpenseForm.tsx

@@ -0,0 +1,104 @@
+
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import { Form, FormField, FormItem, FormLabel } from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import ExpenseCategorySelector from './ExpenseCategorySelector';
+
+export interface ExpenseFormValues {
+  title: string;
+  amount: string;
+  category: string;
+}
+
+interface ExpenseFormProps {
+  onSubmit: (data: ExpenseFormValues) => void;
+  onCancel: () => void;
+}
+
+const ExpenseForm: React.FC<ExpenseFormProps> = ({ onSubmit, onCancel }) => {
+  const form = useForm<ExpenseFormValues>({
+    defaultValues: {
+      title: '',
+      amount: '',
+      category: '식비',
+    }
+  });
+  
+  // Format number with commas
+  const formatWithCommas = (value: string): string => {
+    // Remove commas first to avoid duplicates when typing
+    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);
+  };
+  
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+        <FormField
+          control={form.control}
+          name="title"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>제목</FormLabel>
+              <Input placeholder="지출 내역을 입력하세요" {...field} />
+            </FormItem>
+          )}
+        />
+        
+        <FormField
+          control={form.control}
+          name="amount"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>금액</FormLabel>
+              <Input 
+                placeholder="0" 
+                value={field.value}
+                onChange={handleAmountChange}
+              />
+            </FormItem>
+          )}
+        />
+        
+        <FormField
+          control={form.control}
+          name="category"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>카테고리</FormLabel>
+              <ExpenseCategorySelector 
+                value={field.value} 
+                onValueChange={(value) => field.onChange(value)} 
+              />
+            </FormItem>
+          )}
+        />
+        
+        <div className="flex justify-end gap-2 pt-2">
+          <Button 
+            type="button" 
+            variant="outline" 
+            onClick={onCancel}
+          >
+            취소
+          </Button>
+          <Button 
+            type="submit"
+            className="bg-neuro-income text-white hover:bg-neuro-income/90"
+          >
+            저장
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+};
+
+export default ExpenseForm;