Refactor ExpenseFormFields component

Refactor ExpenseFormFields.tsx into smaller, more manageable components for better organization and maintainability.

src/components/expenses/ExpenseAmountInput.tsx

@@ -0,0 +1,51 @@
+
+import React from 'react';
+import { FormField, FormItem, FormLabel } from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { UseFormReturn } from 'react-hook-form';
+import { ExpenseFormValues } from './ExpenseForm';
+
+interface ExpenseAmountInputProps {
+  form: UseFormReturn<ExpenseFormValues>;
+  onFocus?: () => void;
+  isDisabled?: boolean;
+}
+
+const ExpenseAmountInput: React.FC<ExpenseAmountInputProps> = ({ 
+  form, 
+  onFocus, 
+  isDisabled = false 
+}) => {
+  // 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 (
+    <FormField
+      control={form.control}
+      name="amount"
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>금액</FormLabel>
+          <Input 
+            placeholder="금액을 입력하세요" 
+            value={field.value}
+            onChange={handleAmountChange}
+            onFocus={onFocus}
+            disabled={isDisabled}
+          />
+        </FormItem>
+      )}
+    />
+  );
+};
+
+export default ExpenseAmountInput;

src/components/expenses/ExpenseCategorySelector.tsx

@@ -7,11 +7,13 @@ import { categoryIcons, EXPENSE_CATEGORIES } from '@/constants/categoryIcons';
 interface ExpenseCategorySelectorProps {
   value: string;
   onValueChange: (value: string) => void;
+  isDisabled?: boolean;
 }
 
 const ExpenseCategorySelector: React.FC<ExpenseCategorySelectorProps> = ({
   value,
-  onValueChange
+  onValueChange,
+  isDisabled = false
 }) => {
   return (
     <FormControl>
@@ -22,12 +24,14 @@ const ExpenseCategorySelector: React.FC<ExpenseCategorySelectorProps> = ({
         onValueChange={(value) => {
           if (value) onValueChange(value);
         }}
+        disabled={isDisabled}
       >
         {EXPENSE_CATEGORIES.map((category) => (
           <ToggleGroupItem 
             key={category} 
             value={category}
             className="px-3 py-2 rounded-md border flex items-center gap-1"
+            disabled={isDisabled}
           >
             <div className="text-neuro-income">
               {categoryIcons[category]}

src/components/expenses/ExpenseFormFields.tsx

@@ -1,21 +1,22 @@
 
 import React, { useEffect, useState } from 'react';
-import { useForm, UseFormReturn } from 'react-hook-form';
+import { UseFormReturn } from 'react-hook-form';
-import { FormField, FormItem, FormLabel } from '@/components/ui/form';
-import { Input } from '@/components/ui/input';
-import { CreditCard, Banknote } from 'lucide-react';
-import ExpenseCategorySelector from './ExpenseCategorySelector';
-import { Badge } from '@/components/ui/badge';
-import { getPersonalizedTitleSuggestions } from '@/utils/userTitlePreferences';
-import { Separator } from '@/components/ui/separator';
 import { ExpenseFormValues } from './ExpenseForm';
+import ExpenseCategorySelector from './ExpenseCategorySelector';
+import ExpenseTitleSuggestions from './ExpenseTitleSuggestions';
+import ExpenseTitleInput from './ExpenseTitleInput';
+import ExpenseAmountInput from './ExpenseAmountInput';
+import ExpensePaymentMethod from './ExpensePaymentMethod';
 
 interface ExpenseFormFieldsProps {
   form: UseFormReturn<ExpenseFormValues>;
   isSubmitting?: boolean;
 }
 
-const ExpenseFormFields: React.FC<ExpenseFormFieldsProps> = ({ form, isSubmitting = false }) => {
+const ExpenseFormFields: React.FC<ExpenseFormFieldsProps> = ({ 
+  form, 
+  isSubmitting = false 
+}) => {
   // 상태 관리 추가
   const [showTitleSuggestions, setShowTitleSuggestions] = useState(false);
   const [showPaymentMethod, setShowPaymentMethod] = useState(false);
@@ -23,14 +24,9 @@ const ExpenseFormFields: React.FC<ExpenseFormFieldsProps> = ({ form, isSubmittin
   // 현재 선택된 카테고리 가져오기
   const selectedCategory = form.watch('category');
   
-  // 선택된 카테고리에 대한 개인화된 제목 제안 목록 상태
+  // 카테고리가 변경될 때마다 제목 추천 표시
-  const [titleSuggestions, setTitleSuggestions] = useState<string[]>([]);
-  
-  // 카테고리가 변경될 때마다 개인화된 제목 목록 업데이트 및 제목 추천 표시
   useEffect(() => {
     if (selectedCategory) {
-      const suggestions = getPersonalizedTitleSuggestions(selectedCategory);
-      setTitleSuggestions(suggestions);
       // 약간의 지연 후 제목 추천 표시 (애니메이션을 위해)
       setTimeout(() => {
         setShowTitleSuggestions(true);
@@ -45,139 +41,41 @@ const ExpenseFormFields: React.FC<ExpenseFormFieldsProps> = ({ form, isSubmittin
     form.setValue('title', suggestion);
   };
   
-  // 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 (
     <>
       {/* 카테고리 필드를 가장 먼저 배치 */}
-      <FormField
+      <ExpenseCategorySelector 
-        control={form.control}
+        value={form.watch('category')} 
-        name="category"
+        onValueChange={(value) => form.setValue('category', value)} 
-        render={({ field }) => (
+        isDisabled={isSubmitting}
-          <FormItem>
-            <FormLabel>카테고리</FormLabel>
-            <ExpenseCategorySelector 
-              value={field.value} 
-              onValueChange={(value) => field.onChange(value)}
-            />
-          </FormItem>
-        )}
       />
       
-      {/* 카테고리별 제목 제안 - 카테고리 선택 후에만 표시, 서랍처럼 열리는 애니메이션 적용 */}
+      {/* 카테고리별 제목 제안 - 카테고리 선택 후에만 표시 */}
-      {selectedCategory && (
+      <ExpenseTitleSuggestions 
-        <div 
+        category={selectedCategory}
-          className={`overflow-hidden transition-all duration-300 ease-out ${
+        showSuggestions={showTitleSuggestions}
-            showTitleSuggestions 
+        onSuggestionClick={handleTitleSuggestionClick}
-              ? '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 mt-1 mb-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>
-      )}
       
       {/* 제목 필드를 두 번째로 배치 */}
-      <FormField
+      <ExpenseTitleInput 
-        control={form.control}
+        form={form} 
-        name="title"
+        isDisabled={isSubmitting} 
-        render={({ field }) => (
-          <FormItem>
-            <FormLabel>제목</FormLabel>
-            <Input 
-              placeholder="지출 내역을 입력하세요" 
-              {...field} 
-              disabled={isSubmitting}
-            />
-          </FormItem>
-        )}
       />
       
       {/* 금액 필드를 세 번째로 배치 */}
-      <FormField
+      <ExpenseAmountInput 
-        control={form.control}
+        form={form} 
-        name="amount"
+        onFocus={() => setShowPaymentMethod(true)} 
-        render={({ field }) => (
+        isDisabled={isSubmitting} 
-          <FormItem>
+      />
-            <FormLabel>금액</FormLabel>
+
-            <Input 
+      {/* 지출 방법 필드는 금액 입력 시에만 표시 */}
-              placeholder="금액을 입력하세요" 
+      <ExpensePaymentMethod 
-              value={field.value}
+        form={form} 
-              onChange={handleAmountChange}
+        showPaymentMethod={showPaymentMethod} 
-              onFocus={() => setShowPaymentMethod(true)}
+        isDisabled={isSubmitting}
-              disabled={isSubmitting}
-            />
-          </FormItem>
-        )}
       />
-      
-      {/* 지출 방법 필드는 금액 입력 시에만 표시 - 서랍처럼 열리는 애니메이션 적용 */}
-      <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-2" />
-        
-        <FormField
-          control={form.control}
-          name="paymentMethod"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>지출 방법</FormLabel>
-              <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'
-                  } ${isSubmitting ? 'opacity-50 cursor-not-allowed' : ''}`}
-                  onClick={() => !isSubmitting && 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'
-                  } ${isSubmitting ? 'opacity-50 cursor-not-allowed' : ''}`}
-                  onClick={() => !isSubmitting && form.setValue('paymentMethod', '현금')}
-                >
-                  <Banknote size={16} className="text-neuro-income" />
-                  <span className="text-xs">현금</span>
-                </div>
-              </div>
-            </FormItem>
-          )}
-        />
-      </div>
     </>
   );
 };

src/components/expenses/ExpensePaymentMethod.tsx

@@ -0,0 +1,67 @@
+
+import React from 'react';
+import { FormField, FormItem, FormLabel } from '@/components/ui/form';
+import { CreditCard, Banknote } from 'lucide-react';
+import { Separator } from '@/components/ui/separator';
+import { UseFormReturn } from 'react-hook-form';
+import { ExpenseFormValues } from './ExpenseForm';
+
+interface ExpensePaymentMethodProps {
+  form: UseFormReturn<ExpenseFormValues>;
+  showPaymentMethod: boolean;
+  isDisabled?: boolean;
+}
+
+const ExpensePaymentMethod: React.FC<ExpensePaymentMethodProps> = ({ 
+  form, 
+  showPaymentMethod,
+  isDisabled = false
+}) => {
+  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-2" />
+      
+      <FormField
+        control={form.control}
+        name="paymentMethod"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>지출 방법</FormLabel>
+            <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'
+                } ${isDisabled ? 'opacity-50 cursor-not-allowed' : ''}`}
+                onClick={() => !isDisabled && 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'
+                } ${isDisabled ? 'opacity-50 cursor-not-allowed' : ''}`}
+                onClick={() => !isDisabled && form.setValue('paymentMethod', '현금')}
+              >
+                <Banknote size={16} className="text-neuro-income" />
+                <span className="text-xs">현금</span>
+              </div>
+            </div>
+          </FormItem>
+        )}
+      />
+    </div>
+  );
+};
+
+export default ExpensePaymentMethod;

src/components/expenses/ExpenseTitleInput.tsx

@@ -0,0 +1,35 @@
+
+import React from 'react';
+import { FormField, FormItem, FormLabel } from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { UseFormReturn } from 'react-hook-form';
+import { ExpenseFormValues } from './ExpenseForm';
+
+interface ExpenseTitleInputProps {
+  form: UseFormReturn<ExpenseFormValues>;
+  isDisabled?: boolean;
+}
+
+const ExpenseTitleInput: React.FC<ExpenseTitleInputProps> = ({ 
+  form,
+  isDisabled = false
+}) => {
+  return (
+    <FormField
+      control={form.control}
+      name="title"
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>제목</FormLabel>
+          <Input 
+            placeholder="지출 내역을 입력하세요" 
+            {...field} 
+            disabled={isDisabled}
+          />
+        </FormItem>
+      )}
+    />
+  );
+};
+
+export default ExpenseTitleInput;

src/components/expenses/ExpenseTitleSuggestions.tsx

@@ -0,0 +1,55 @@
+
+import React, { useEffect, useState } from 'react';
+import { Badge } from '@/components/ui/badge';
+import { getPersonalizedTitleSuggestions } from '@/utils/userTitlePreferences';
+
+interface ExpenseTitleSuggestionsProps {
+  category: string;
+  showSuggestions: boolean;
+  onSuggestionClick: (suggestion: string) => void;
+}
+
+const ExpenseTitleSuggestions: React.FC<ExpenseTitleSuggestionsProps> = ({
+  category,
+  showSuggestions,
+  onSuggestionClick
+}) => {
+  const [titleSuggestions, setTitleSuggestions] = useState<string[]>([]);
+  
+  // 카테고리가 변경될 때마다 개인화된 제목 목록 업데이트
+  useEffect(() => {
+    if (category) {
+      const suggestions = getPersonalizedTitleSuggestions(category);
+      setTitleSuggestions(suggestions);
+    }
+  }, [category]);
+  
+  if (!category || titleSuggestions.length === 0) {
+    return null;
+  }
+  
+  return (
+    <div 
+      className={`overflow-hidden transition-all duration-300 ease-out ${
+        showSuggestions 
+          ? 'max-h-24 opacity-100 translate-y-0' 
+          : 'max-h-0 opacity-0 -translate-y-4'
+      }`}
+    >
+      <div className="flex flex-wrap gap-2 mt-1 mb-2">
+        {titleSuggestions.map((suggestion) => (
+          <Badge 
+            key={suggestion}
+            variant="outline"
+            className="cursor-pointer hover:bg-neuro-income/10 transition-colors px-3 py-1"
+            onClick={() => onSuggestionClick(suggestion)}
+          >
+            {suggestion}
+          </Badge>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ExpenseTitleSuggestions;