Refactor TransactionFormFields component

Refactor TransactionFormFields component to improve maintainability.

src/components/transaction/TransactionAmountInput.tsx

@@ -0,0 +1,41 @@
+
+import React from 'react';
+import { FormField, FormItem, FormLabel, FormControl, FormMessage } from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { UseFormReturn } from 'react-hook-form';
+import { TransactionFormValues, formatWithCommas } from './TransactionFormFields';
+
+interface TransactionAmountInputProps {
+  form: UseFormReturn<TransactionFormValues>;
+  onFocus: () => void;
+}
+
+const TransactionAmountInput: React.FC<TransactionAmountInputProps> = ({ form, onFocus }) => {
+  const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const formattedValue = formatWithCommas(e.target.value);
+    form.setValue('amount', formattedValue);
+  };
+
+  return (
+    <FormField
+      control={form.control}
+      name="amount"
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>금액</FormLabel>
+          <FormControl>
+            <Input 
+              placeholder="금액을 입력하세요" 
+              {...field} 
+              onChange={handleAmountChange}
+              onFocus={onFocus}
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+};
+
+export default TransactionAmountInput;

src/components/transaction/TransactionCategorySelector.tsx

@@ -0,0 +1,46 @@
+
+import React from 'react';
+import { FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
+import { UseFormReturn } from 'react-hook-form';
+import { TransactionFormValues } from './TransactionFormFields';
+import { EXPENSE_CATEGORIES } from '@/constants/categoryIcons';
+import { categoryIcons } from '@/constants/categoryIcons';
+
+interface TransactionCategorySelectorProps {
+  form: UseFormReturn<TransactionFormValues>;
+}
+
+const TransactionCategorySelector: React.FC<TransactionCategorySelectorProps> = ({ form }) => {
+  return (
+    <FormField
+      control={form.control}
+      name="category"
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>카테고리</FormLabel>
+          <div className="grid grid-cols-4 gap-2">
+            {EXPENSE_CATEGORIES.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 TransactionCategorySelector;

src/components/transaction/TransactionFormFields.tsx

@@ -1,16 +1,14 @@
 
 import React, { useState, useEffect } from 'react';
-import { FormField, FormItem, FormLabel, FormControl, FormMessage } from '@/components/ui/form';
-import { Input } from '@/components/ui/input';
 import { UseFormReturn } from 'react-hook-form';
 import { z } from 'zod';
-import { categoryIcons, EXPENSE_CATEGORIES } from '@/constants/categoryIcons';
-import { Badge } from '@/components/ui/badge';
-import { getPersonalizedTitleSuggestions } from '@/utils/userTitlePreferences';
-import { Separator } from '@/components/ui/separator';
-import { CreditCard, Banknote } from 'lucide-react';
+import TransactionCategorySelector from './TransactionCategorySelector';
+import TransactionTitleSuggestions from './TransactionTitleSuggestions';
+import TransactionTitleInput from './TransactionTitleInput';
+import TransactionAmountInput from './TransactionAmountInput';
+import TransactionPaymentMethod from './TransactionPaymentMethod';
 
-// Form schema for validation - 카테고리를 4개로 확장 및 지출 방법 추가
+// Form schema for validation
 export const transactionFormSchema = z.object({
   title: z.string().min(1, '제목을 입력해주세요'),
   amount: z.string().min(1, '금액을 입력해주세요'),
@@ -35,25 +33,12 @@ const TransactionFormFields: React.FC<TransactionFormFieldsProps> = ({ form }) =
   const [showTitleSuggestions, setShowTitleSuggestions] = useState(false);
   const [showPaymentMethod, setShowPaymentMethod] = useState(false);
   
-  const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const formattedValue = formatWithCommas(e.target.value);
-    form.setValue('amount', formattedValue);
-  };
-
   // 현재 선택된 카테고리 가져오기
   const selectedCategory = form.watch('category');
   
-  // 현재 선택된 지불 방법 가져오기
-  const selectedPaymentMethod = form.watch('paymentMethod');
-  
-  // 선택된 카테고리에 대한 개인화된 제목 제안 목록 상태
-  const [titleSuggestions, setTitleSuggestions] = useState<string[]>([]);
-  
-  // 카테고리가 변경될 때마다 개인화된 제목 목록 업데이트 및 제목 추천 표시
+  // 카테고리가 변경될 때마다 제목 추천 표시
   useEffect(() => {
     if (selectedCategory) {
-      const suggestions = getPersonalizedTitleSuggestions(selectedCategory);
-      setTitleSuggestions(suggestions);
       // 약간의 지연 후 제목 추천 표시 (애니메이션을 위해)
       setTimeout(() => {
         setShowTitleSuggestions(true);
@@ -63,152 +48,31 @@ const TransactionFormFields: React.FC<TransactionFormFieldsProps> = ({ form }) =
     }
   }, [selectedCategory]);
 
-  // 제안된 제목 클릭 시 제목 필드에 설정
-  const handleTitleSuggestionClick = (suggestion: string) => {
-    form.setValue('title', suggestion);
-  };
-
   return (
     <>
       {/* 카테고리 필드를 첫 번째로 배치 */}
-      <FormField
-        control={form.control}
-        name="category"
-        render={({ field }) => (
-          <FormItem>
-            <FormLabel>카테고리</FormLabel>
-            <div className="grid grid-cols-4 gap-2">
-              {EXPENSE_CATEGORIES.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>
-        )}
-      />
+      <TransactionCategorySelector form={form} />
       
       {/* 카테고리별 제목 제안 - 카테고리 선택 후에만 표시 */}
-      {selectedCategory && (
-        <div 
-          className={`mt-1 mb-3 overflow-hidden transition-all duration-300 ease-out ${
-            showTitleSuggestions 
-              ? 'max-h-24 opacity-100 translate-y-0' 
-              : 'max-h-0 opacity-0 -translate-y-4'
-          }`}
-        >
-          {titleSuggestions.length > 0 && (
-            <div className="flex flex-wrap gap-2">
-              {titleSuggestions.map((suggestion) => (
-                <Badge 
-                  key={suggestion}
-                  variant="outline"
-                  className="cursor-pointer hover:bg-neuro-income/10 transition-colors px-3 py-1"
-                  onClick={() => handleTitleSuggestionClick(suggestion)}
-                >
-                  {suggestion}
-                </Badge>
-              ))}
-            </div>
-          )}
-        </div>
-      )}
+      <TransactionTitleSuggestions 
+        form={form} 
+        showTitleSuggestions={showTitleSuggestions} 
+      />
       
       {/* 제목 필드를 두 번째로 배치 */}
-      <FormField
-        control={form.control}
-        name="title"
-        render={({ field }) => (
-          <FormItem>
-            <FormLabel>제목</FormLabel>
-            <FormControl>
-              <Input placeholder="제목을 입력하세요" {...field} />
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )}
-      />
+      <TransactionTitleInput form={form} />
       
       {/* 금액 필드를 세 번째로 배치 */}
-      <FormField
-        control={form.control}
-        name="amount"
-        render={({ field }) => (
-          <FormItem>
-            <FormLabel>금액</FormLabel>
-            <FormControl>
-              <Input 
-                placeholder="금액을 입력하세요" 
-                {...field} 
-                onChange={handleAmountChange}
-                onFocus={() => setShowPaymentMethod(true)}
-              />
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )}
+      <TransactionAmountInput 
+        form={form} 
+        onFocus={() => setShowPaymentMethod(true)} 
       />
 
-      {/* 구분선과 지출 방법 필드는 금액 입력 시에만 표시 */}
-      <div 
-        className={`overflow-hidden transition-all duration-300 ease-out ${
-          showPaymentMethod 
-            ? 'max-h-36 opacity-100 translate-y-0' 
-            : 'max-h-0 opacity-0 -translate-y-4'
-        }`}
-      >
-        <Separator className="my-4" />
-        
-        {/* 지출 방법 필드 - 버튼 형식으로 변경 및 텍스트 크기 축소 */}
-        <FormField
-          control={form.control}
-          name="paymentMethod"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>지출 방법</FormLabel>
-              <FormControl>
-                <div className="grid grid-cols-2 gap-3">
-                  <div
-                    className={`flex items-center justify-center gap-2 p-2 rounded-md cursor-pointer border transition-colors ${
-                      field.value === '신용카드'
-                        ? 'border-neuro-income bg-neuro-income/10'
-                        : 'border-gray-200 hover:bg-gray-50'
-                    }`}
-                    onClick={() => form.setValue('paymentMethod', '신용카드')}
-                  >
-                    <CreditCard size={16} className="text-neuro-income" />
-                    <span className="text-xs">신용카드</span>
-                  </div>
-                  <div
-                    className={`flex items-center justify-center gap-2 p-2 rounded-md cursor-pointer border transition-colors ${
-                      field.value === '현금'
-                        ? 'border-neuro-income bg-neuro-income/10'
-                        : 'border-gray-200 hover:bg-gray-50'
-                    }`}
-                    onClick={() => form.setValue('paymentMethod', '현금')}
-                  >
-                    <Banknote size={16} className="text-neuro-income" />
-                    <span className="text-xs">현금</span>
-                  </div>
-                </div>
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-      </div>
+      {/* 지출 방법 필드는 금액 입력 시에만 표시 */}
+      <TransactionPaymentMethod 
+        form={form} 
+        showPaymentMethod={showPaymentMethod} 
+      />
     </>
   );
 };

src/components/transaction/TransactionPaymentMethod.tsx

@@ -0,0 +1,68 @@
+
+import React from 'react';
+import { FormField, FormItem, FormLabel, FormControl, FormMessage } from '@/components/ui/form';
+import { UseFormReturn } from 'react-hook-form';
+import { TransactionFormValues } from './TransactionFormFields';
+import { Separator } from '@/components/ui/separator';
+import { CreditCard, Banknote } from 'lucide-react';
+
+interface TransactionPaymentMethodProps {
+  form: UseFormReturn<TransactionFormValues>;
+  showPaymentMethod: boolean;
+}
+
+const TransactionPaymentMethod: React.FC<TransactionPaymentMethodProps> = ({ 
+  form, 
+  showPaymentMethod 
+}) => {
+  return (
+    <div 
+      className={`overflow-hidden transition-all duration-300 ease-out ${
+        showPaymentMethod 
+          ? 'max-h-36 opacity-100 translate-y-0' 
+          : 'max-h-0 opacity-0 -translate-y-4'
+      }`}
+    >
+      <Separator className="my-4" />
+      
+      <FormField
+        control={form.control}
+        name="paymentMethod"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>지출 방법</FormLabel>
+            <FormControl>
+              <div className="grid grid-cols-2 gap-3">
+                <div
+                  className={`flex items-center justify-center gap-2 p-2 rounded-md cursor-pointer border transition-colors ${
+                    field.value === '신용카드'
+                      ? 'border-neuro-income bg-neuro-income/10'
+                      : 'border-gray-200 hover:bg-gray-50'
+                  }`}
+                  onClick={() => form.setValue('paymentMethod', '신용카드')}
+                >
+                  <CreditCard size={16} className="text-neuro-income" />
+                  <span className="text-xs">신용카드</span>
+                </div>
+                <div
+                  className={`flex items-center justify-center gap-2 p-2 rounded-md cursor-pointer border transition-colors ${
+                    field.value === '현금'
+                      ? 'border-neuro-income bg-neuro-income/10'
+                      : 'border-gray-200 hover:bg-gray-50'
+                  }`}
+                  onClick={() => form.setValue('paymentMethod', '현금')}
+                >
+                  <Banknote size={16} className="text-neuro-income" />
+                  <span className="text-xs">현금</span>
+                </div>
+              </div>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </div>
+  );
+};
+
+export default TransactionPaymentMethod;

src/components/transaction/TransactionTitleInput.tsx

@@ -0,0 +1,30 @@
+
+import React from 'react';
+import { FormField, FormItem, FormLabel, FormControl, FormMessage } from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { UseFormReturn } from 'react-hook-form';
+import { TransactionFormValues } from './TransactionFormFields';
+
+interface TransactionTitleInputProps {
+  form: UseFormReturn<TransactionFormValues>;
+}
+
+const TransactionTitleInput: React.FC<TransactionTitleInputProps> = ({ form }) => {
+  return (
+    <FormField
+      control={form.control}
+      name="title"
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>제목</FormLabel>
+          <FormControl>
+            <Input placeholder="제목을 입력하세요" {...field} />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+};
+
+export default TransactionTitleInput;

src/components/transaction/TransactionTitleSuggestions.tsx

@@ -0,0 +1,64 @@
+
+import React, { useState, useEffect } from 'react';
+import { Badge } from '@/components/ui/badge';
+import { UseFormReturn } from 'react-hook-form';
+import { TransactionFormValues } from './TransactionFormFields';
+import { getPersonalizedTitleSuggestions } from '@/utils/userTitlePreferences';
+
+interface TransactionTitleSuggestionsProps {
+  form: UseFormReturn<TransactionFormValues>;
+  showTitleSuggestions: boolean;
+}
+
+const TransactionTitleSuggestions: React.FC<TransactionTitleSuggestionsProps> = ({ 
+  form, 
+  showTitleSuggestions 
+}) => {
+  // 현재 선택된 카테고리 가져오기
+  const selectedCategory = form.watch('category');
+  
+  // 선택된 카테고리에 대한 개인화된 제목 제안 목록 상태
+  const [titleSuggestions, setTitleSuggestions] = useState<string[]>([]);
+  
+  // 카테고리가 변경될 때마다 개인화된 제목 목록 업데이트
+  useEffect(() => {
+    if (selectedCategory) {
+      const suggestions = getPersonalizedTitleSuggestions(selectedCategory);
+      setTitleSuggestions(suggestions);
+    }
+  }, [selectedCategory]);
+
+  // 제안된 제목 클릭 시 제목 필드에 설정
+  const handleTitleSuggestionClick = (suggestion: string) => {
+    form.setValue('title', suggestion);
+  };
+  
+  if (!selectedCategory || titleSuggestions.length === 0) {
+    return null;
+  }
+  
+  return (
+    <div 
+      className={`mt-1 mb-3 overflow-hidden transition-all duration-300 ease-out ${
+        showTitleSuggestions 
+          ? 'max-h-24 opacity-100 translate-y-0' 
+          : 'max-h-0 opacity-0 -translate-y-4'
+      }`}
+    >
+      <div className="flex flex-wrap gap-2">
+        {titleSuggestions.map((suggestion) => (
+          <Badge 
+            key={suggestion}
+            variant="outline"
+            className="cursor-pointer hover:bg-neuro-income/10 transition-colors px-3 py-1"
+            onClick={() => handleTitleSuggestionClick(suggestion)}
+          >
+            {suggestion}
+          </Badge>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default TransactionTitleSuggestions;