Refactor TransactionEditDialog component

The TransactionEditDialog component was refactored into smaller, more manageable components to improve code organization and maintainability. The functionality remains the same.

src/components/transaction/useTransactionEdit.ts

@@ -0,0 +1,135 @@
+
+import { useState, useRef, useEffect } from 'react';
+import { UseFormReturn, useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Transaction } from '@/components/TransactionCard';
+import { useBudget } from '@/contexts/BudgetContext';
+import { toast } from '@/components/ui/use-toast';
+import { TransactionFormValues, transactionFormSchema, formatWithCommas } from './TransactionFormFields';
+import { mapCategoryToNew } from './categoryUtils';
+
+/**
+ * 트랜잭션 편집 커스텀 훅 - 상태 및 핸들러 로직 분리
+ */
+export const useTransactionEdit = (
+  transaction: Transaction,
+  open: boolean,
+  onOpenChange: (open: boolean) => void,
+  onSave?: (updatedTransaction: Transaction) => void,
+  onDelete?: (id: string) => Promise<boolean> | boolean,
+) => {
+  const { updateTransaction, deleteTransaction } = useBudget();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  
+  // 작업 중첩 방지를 위한 참조
+  const isProcessingRef = useRef(false);
+  
+  // 폼 설정
+  const form = useForm<TransactionFormValues>({
+    resolver: zodResolver(transactionFormSchema),
+    defaultValues: {
+      title: transaction.title,
+      amount: formatWithCommas(transaction.amount.toString()),
+      category: mapCategoryToNew(transaction.category),
+    },
+  });
+  
+  // 다이얼로그가 열릴 때 폼 값 초기화
+  useEffect(() => {
+    if (open) {
+      form.reset({
+        title: transaction.title,
+        amount: formatWithCommas(transaction.amount.toString()),
+        category: mapCategoryToNew(transaction.category),
+      });
+    }
+  }, [open, transaction, form]);
+
+  // 저장 처리 함수
+  const handleSubmit = async (values: TransactionFormValues) => {
+    // 중복 제출 방지
+    if (isProcessingRef.current) return;
+    isProcessingRef.current = true;
+    setIsSubmitting(true);
+    
+    try {
+      // 쉼표 제거 및 숫자로 변환
+      const cleanAmount = values.amount.replace(/,/g, '');
+      
+      const updatedTransaction = {
+        ...transaction,
+        title: values.title,
+        amount: Number(cleanAmount),
+        category: values.category,
+      };
+      
+      // 컨텍스트를 통해 트랜잭션 업데이트
+      updateTransaction(updatedTransaction);
+      
+      // 부모 컴포넌트의 onSave 콜백이 있다면 호출
+      if (onSave) {
+        onSave(updatedTransaction);
+      }
+      
+      // 다이얼로그 닫기
+      onOpenChange(false);
+      
+      // 토스트 메시지
+      toast({
+        title: "지출이 수정되었습니다",
+        description: `${values.title} 항목이 ${formatWithCommas(cleanAmount)}원으로 수정되었습니다.`,
+      });
+    } catch (error) {
+      console.error('트랜잭션 업데이트 오류:', error);
+      toast({
+        title: "저장 실패",
+        description: "지출 항목을 저장하는데 문제가 발생했습니다.",
+        variant: "destructive"
+      });
+    } finally {
+      // 상태 초기화
+      setIsSubmitting(false);
+      isProcessingRef.current = false;
+    }
+  };
+
+  // 삭제 처리 함수
+  const handleDelete = async (): Promise<boolean> => {
+    // 중복 처리 방지
+    if (isProcessingRef.current) return false;
+    isProcessingRef.current = true;
+    
+    try {
+      // 다이얼로그 닫기를 먼저 수행 (UI 블로킹 방지)
+      onOpenChange(false);
+      
+      // 부모 컴포넌트의 onDelete 콜백이 있다면 호출
+      if (onDelete) {
+        const result = await onDelete(transaction.id);
+        isProcessingRef.current = false;
+        return result;
+      }
+      
+      // 부모 컴포넌트에서 처리하지 않은 경우 기본 처리
+      deleteTransaction(transaction.id);
+      isProcessingRef.current = false;
+      return true;
+    } catch (error) {
+      console.error('트랜잭션 삭제 중 오류:', error);
+      toast({
+        title: "삭제 실패",
+        description: "지출 항목을 삭제하는데 문제가 발생했습니다.",
+        variant: "destructive"
+      });
+      isProcessingRef.current = false;
+      return false;
+    }
+  };
+
+  return {
+    form,
+    isSubmitting,
+    handleSubmit,
+    handleDelete
+  };
+};