Refactor expense form fields

Hide title suggestions initially and show them after category selection.

src/components/expenses/ExpenseFormFields.tsx

@@ -1,5 +1,5 @@
 
-import React, { useEffect, useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { UseFormReturn } from 'react-hook-form';
 import { ExpenseFormValues } from './ExpenseForm';
 import ExpenseCategorySelector from './ExpenseCategorySelector';
@@ -24,13 +24,10 @@ const ExpenseFormFields: React.FC<ExpenseFormFieldsProps> = ({
   // 현재 선택된 카테고리 가져오기
   const selectedCategory = form.watch('category');
   
-  // 카테고리가 변경될 때마다 제목 추천 표시
+  // 카테고리가 변경될 때마다 제목 추천 표시 여부 결정
   useEffect(() => {
     if (selectedCategory) {
-      // 약간의 지연 후 제목 추천 표시 (애니메이션을 위해)
+      setShowTitleSuggestions(true);
-      setTimeout(() => {
-        setShowTitleSuggestions(true);
-      }, 100);
     } else {
       setShowTitleSuggestions(false);
     }
@@ -51,11 +48,13 @@ const ExpenseFormFields: React.FC<ExpenseFormFieldsProps> = ({
       />
       
       {/* 카테고리별 제목 제안 - 카테고리 선택 후에만 표시 */}
-      <ExpenseTitleSuggestions 
+      {selectedCategory && (
-        category={selectedCategory}
+        <ExpenseTitleSuggestions 
-        showSuggestions={showTitleSuggestions}
+          category={selectedCategory}
-        onSuggestionClick={handleTitleSuggestionClick}
+          showSuggestions={showTitleSuggestions}
-      />
+          onSuggestionClick={handleTitleSuggestionClick}
+        />
+      )}
       
       {/* 제목 필드를 두 번째로 배치 */}
       <ExpenseTitleInput 

src/components/expenses/ExpenseTitleSuggestions.tsx

@@ -21,25 +21,17 @@ const ExpenseTitleSuggestions: React.FC<ExpenseTitleSuggestionsProps> = ({
   }
   
   return (
-    <div 
+    <div className="flex flex-wrap gap-2 mt-1 mb-2">
-      className={`overflow-hidden transition-all duration-300 ease-out ${
+      {titleSuggestions.map((suggestion) => (
-        showSuggestions 
+        <Badge 
-          ? 'max-h-24 opacity-100 translate-y-0' 
+          key={suggestion}
-          : 'max-h-0 opacity-0 -translate-y-4'
+          variant="outline"
-      }`}
+          className="cursor-pointer hover:bg-neuro-income/10 transition-colors px-3 py-1"
-    >
+          onClick={() => onSuggestionClick(suggestion)}
-      <div className="flex flex-wrap gap-2 mt-1 mb-2">
+        >
-        {titleSuggestions.map((suggestion) => (
+          {suggestion}
-          <Badge 
+        </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>
   );
 };