Refactor AddTransactionButton component

Refactor the AddTransactionButton component into smaller, more manageable components to improve code readability and maintainability.
2025-03-15 05:11:41 +00:00
parent 7eae68150b
commit 8783a607fa
3 changed files with 165 additions and 123 deletions
--- a/src/components/expenses/ExpenseForm.tsx
+++ b/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;