Refactor AddTransactionButton component

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

src/components/AddTransactionButton.tsx

@@ -1,45 +1,15 @@
+
 import React, { useState, useEffect } from 'react';
-import { PlusIcon, X, Coffee, Home, Car } from 'lucide-react';
+import { PlusIcon } from 'lucide-react';
-import { cn } from '@/lib/utils';
-import { useNavigate } from 'react-router-dom';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from './ui/dialog';
-import { Form, FormField, FormItem, FormLabel, FormControl } from './ui/form';
-import { Input } from './ui/input';
-import { Button } from './ui/button';
-import { useForm } from 'react-hook-form';
-import { ToggleGroup, ToggleGroupItem } from './ui/toggle-group';
 import { toast } from '@/components/ui/use-toast';
 import { supabase } from '@/lib/supabase';
 import { isSyncEnabled } from '@/utils/syncUtils';
-
+import ExpenseForm, { ExpenseFormValues } from './expenses/ExpenseForm';
-interface ExpenseFormValues {
-  title: string;
-  amount: string;
-  category: string;
-}
-
-// Define expense categories
-const EXPENSE_CATEGORIES = ['식비', '생활비', '교통비'];
-
-// Define category icons mapping
-const categoryIcons: Record<string, React.ReactNode> = {
-  식비: <Coffee size={18} />,
-  생활비: <Home size={18} />,
-  교통비: <Car size={18} />,
-};
 
 const AddTransactionButton = () => {
   const [showExpenseDialog, setShowExpenseDialog] = useState(false);
   const [userId, setUserId] = useState<string | null>(null);
-  const navigate = useNavigate();
-  
-  const form = useForm<ExpenseFormValues>({
-    defaultValues: {
-      title: '',
-      amount: '',
-      category: '식비',
-    }
-  });
   
   useEffect(() => {
     // 현재 로그인한 사용자 가져오기
@@ -57,11 +27,6 @@ const AddTransactionButton = () => {
     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);
-  };
   
   const onSubmit = async (data: ExpenseFormValues) => {
     // Remove commas before processing the amount
@@ -108,8 +73,7 @@ const AddTransactionButton = () => {
       }
     }
     
-    // 폼을 초기화하고 다이얼로그를 닫습니다
+    // 다이얼로그를 닫습니다
-    form.reset();
     setShowExpenseDialog(false);
     
     // 사용자에게 알림을 표시합니다
@@ -136,89 +100,10 @@ const AddTransactionButton = () => {
           <DialogHeader>
             <DialogTitle>지출 추가</DialogTitle>
           </DialogHeader>
-          
+          <ExpenseForm 
-          <Form {...form}>
+            onSubmit={onSubmit} 
-            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            onCancel={() => setShowExpenseDialog(false)} 
-              <FormField
+          />
-                control={form.control}
-                name="title"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>제목</FormLabel>
-                    <FormControl>
-                      <Input placeholder="지출 내역을 입력하세요" {...field} />
-                    </FormControl>
-                  </FormItem>
-                )}
-              />
-              
-              <FormField
-                control={form.control}
-                name="amount"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>금액</FormLabel>
-                    <FormControl>
-                      <Input 
-                        placeholder="0" 
-                        value={field.value}
-                        onChange={handleAmountChange}
-                      />
-                    </FormControl>
-                  </FormItem>
-                )}
-              />
-              
-              <FormField
-                control={form.control}
-                name="category"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>카테고리</FormLabel>
-                    <FormControl>
-                      <ToggleGroup 
-                        type="single" 
-                        className="justify-start flex-wrap gap-2"
-                        value={field.value}
-                        onValueChange={(value) => {
-                          if (value) field.onChange(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>
-                  </FormItem>
-                )}
-              />
-              
-              <div className="flex justify-end gap-2 pt-2">
-                <Button 
-                  type="button" 
-                  variant="outline" 
-                  onClick={() => setShowExpenseDialog(false)}
-                >
-                  취소
-                </Button>
-                <Button 
-                  type="submit"
-                  className="bg-neuro-income text-white hover:bg-neuro-income/90"
-                >
-                  저장
-                </Button>
-              </div>
-            </form>
-          </Form>
         </DialogContent>
       </Dialog>
     </>

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;