Refactor TransactionEditDialog component

Refactor TransactionEditDialog.tsx into smaller, more manageable components for improved code organization and maintainability. No functional changes were made.

src/components/TransactionEditDialog.tsx

@@ -2,7 +2,6 @@
 import React from 'react';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
-import { z } from 'zod';
 import { Transaction } from '@/components/TransactionCard';
 import { 
   Dialog, 
@@ -13,24 +12,13 @@ import {
   DialogClose
 } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
+import { Form } from '@/components/ui/form';
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
-import { Coffee, Home, Car, Trash2 } from 'lucide-react';
 import { toast } from '@/components/ui/use-toast';
-import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog';
+import TransactionFormFields, { 
-
+  transactionFormSchema, 
-// Form schema for validation
+  formatWithCommas 
-const formSchema = z.object({
+} from './transaction/TransactionFormFields';
-  title: z.string().min(1, '제목을 입력해주세요'),
+import TransactionDeleteAlert from './transaction/TransactionDeleteAlert';
-  amount: z.string().min(1, '금액을 입력해주세요'),
-  category: z.enum(['식비', '생활비', '교통비']),
-});
-
-// Function to format number with commas
-const formatWithCommas = (value: string) => {
-  const numericValue = value.replace(/[^0-9]/g, '');
-  return numericValue.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-};
 
 interface TransactionEditDialogProps {
   transaction: Transaction;
@@ -47,8 +35,8 @@ const TransactionEditDialog: React.FC<TransactionEditDialogProps> = ({
   onSave,
   onDelete
 }) => {
-  const form = useForm<z.infer<typeof formSchema>>({
+  const form = useForm({
-    resolver: zodResolver(formSchema),
+    resolver: zodResolver(transactionFormSchema),
     defaultValues: {
       title: transaction.title,
       amount: formatWithCommas(transaction.amount.toString()),
@@ -56,7 +44,7 @@ const TransactionEditDialog: React.FC<TransactionEditDialogProps> = ({
     },
   });
 
-  const handleSubmit = (values: z.infer<typeof formSchema>) => {
+  const handleSubmit = (values: any) => {
     // Remove commas from amount string and convert to number
     const cleanAmount = values.amount.replace(/,/g, '');
     
@@ -82,17 +70,6 @@ const TransactionEditDialog: React.FC<TransactionEditDialogProps> = ({
     }
   };
   
-  const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const formattedValue = formatWithCommas(e.target.value);
-    form.setValue('amount', formattedValue);
-  };
-
-  const categoryIcons: Record<string, React.ReactNode> = {
-    식비: <Coffee size={18} />,
-    생활비: <Home size={18} />,
-    교통비: <Car size={18} />,
-  };
-
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-md">
@@ -102,99 +79,10 @@ const TransactionEditDialog: React.FC<TransactionEditDialogProps> = ({
         
         <Form {...form}>
           <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4">
-            <FormField
+            <TransactionFormFields form={form} />
-              control={form.control}
-              name="title"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>제목</FormLabel>
-                  <FormControl>
-                    <Input placeholder="제목을 입력하세요" {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            
-            <FormField
-              control={form.control}
-              name="amount"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>금액</FormLabel>
-                  <FormControl>
-                    <Input 
-                      placeholder="금액을 입력하세요" 
-                      {...field} 
-                      onChange={handleAmountChange}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            
-            <FormField
-              control={form.control}
-              name="category"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>카테고리</FormLabel>
-                  <div className="grid grid-cols-3 gap-2">
-                    {['식비', '생활비', '교통비'].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>
-              )}
-            />
             
             <DialogFooter className="flex justify-between gap-2 mt-6">
-              {onDelete && (
+              {onDelete && <TransactionDeleteAlert onDelete={handleDelete} />}
-                <AlertDialog>
-                  <AlertDialogTrigger asChild>
-                    <Button 
-                      type="button" 
-                      variant="outline"
-                      className="border-red-200 text-red-500 hover:bg-red-50"
-                    >
-                      <Trash2 size={16} />
-                      삭제
-                    </Button>
-                  </AlertDialogTrigger>
-                  <AlertDialogContent>
-                    <AlertDialogHeader>
-                      <AlertDialogTitle>지출 삭제</AlertDialogTitle>
-                      <AlertDialogDescription>
-                        정말로 이 지출 항목을 삭제하시겠습니까? 이 작업은 취소할 수 없습니다.
-                      </AlertDialogDescription>
-                    </AlertDialogHeader>
-                    <AlertDialogFooter>
-                      <AlertDialogCancel>취소</AlertDialogCancel>
-                      <AlertDialogAction 
-                        className="bg-red-500 hover:bg-red-600"
-                        onClick={handleDelete}
-                      >
-                        삭제
-                      </AlertDialogAction>
-                    </AlertDialogFooter>
-                  </AlertDialogContent>
-                </AlertDialog>
-              )}
               <div className="flex gap-2">
                 <DialogClose asChild>
                   <Button type="button" variant="outline">취소</Button>

src/components/transaction/TransactionDeleteAlert.tsx

@@ -0,0 +1,55 @@
+
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import { Trash2 } from 'lucide-react';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger
+} from '@/components/ui/alert-dialog';
+
+interface TransactionDeleteAlertProps {
+  onDelete: () => void;
+}
+
+const TransactionDeleteAlert: React.FC<TransactionDeleteAlertProps> = ({ onDelete }) => {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button 
+          type="button" 
+          variant="outline"
+          className="border-red-200 text-red-500 hover:bg-red-50"
+        >
+          <Trash2 size={16} />
+          삭제
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>지출 삭제</AlertDialogTitle>
+          <AlertDialogDescription>
+            정말로 이 지출 항목을 삭제하시겠습니까? 이 작업은 취소할 수 없습니다.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>취소</AlertDialogCancel>
+          <AlertDialogAction 
+            className="bg-red-500 hover:bg-red-600"
+            onClick={onDelete}
+          >
+            삭제
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};
+
+export default TransactionDeleteAlert;

src/components/transaction/TransactionFormFields.tsx

@@ -0,0 +1,106 @@
+
+import React from 'react';
+import { FormField, FormItem, FormLabel, FormControl, FormMessage } from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Coffee, Home, Car } from 'lucide-react';
+import { UseFormReturn } from 'react-hook-form';
+import { z } from 'zod';
+
+// Form schema for validation
+export const transactionFormSchema = z.object({
+  title: z.string().min(1, '제목을 입력해주세요'),
+  amount: z.string().min(1, '금액을 입력해주세요'),
+  category: z.enum(['식비', '생활비', '교통비']),
+});
+
+export type TransactionFormValues = z.infer<typeof transactionFormSchema>;
+
+// Function to format number with commas
+export const formatWithCommas = (value: string) => {
+  const numericValue = value.replace(/[^0-9]/g, '');
+  return numericValue.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+};
+
+export const categoryIcons: Record<string, React.ReactNode> = {
+  식비: <Coffee size={18} />,
+  생활비: <Home size={18} />,
+  교통비: <Car size={18} />,
+};
+
+interface TransactionFormFieldsProps {
+  form: UseFormReturn<TransactionFormValues>;
+}
+
+const TransactionFormFields: React.FC<TransactionFormFieldsProps> = ({ form }) => {
+  const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const formattedValue = formatWithCommas(e.target.value);
+    form.setValue('amount', formattedValue);
+  };
+
+  return (
+    <>
+      <FormField
+        control={form.control}
+        name="title"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>제목</FormLabel>
+            <FormControl>
+              <Input placeholder="제목을 입력하세요" {...field} />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+      
+      <FormField
+        control={form.control}
+        name="amount"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>금액</FormLabel>
+            <FormControl>
+              <Input 
+                placeholder="금액을 입력하세요" 
+                {...field} 
+                onChange={handleAmountChange}
+              />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+      
+      <FormField
+        control={form.control}
+        name="category"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>카테고리</FormLabel>
+            <div className="grid grid-cols-3 gap-2">
+              {['식비', '생활비', '교통비'].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 TransactionFormFields;