Refactor ExpenseFormFields component

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

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;