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) {
-      // 약간의 지연 후 제목 추천 표시 (애니메이션을 위해)
-      setTimeout(() => {
       setShowTitleSuggestions(true);
-      }, 100);
     } else {
       setShowTitleSuggestions(false);
     }
@@ -51,11 +48,13 @@ const ExpenseFormFields: React.FC<ExpenseFormFieldsProps> = ({
       />
       
       {/* 카테고리별 제목 제안 - 카테고리 선택 후에만 표시 */}
+      {selectedCategory && (
         <ExpenseTitleSuggestions 
           category={selectedCategory}
           showSuggestions={showTitleSuggestions}
           onSuggestionClick={handleTitleSuggestionClick}
         />
+      )}
       
       {/* 제목 필드를 두 번째로 배치 */}
       <ExpenseTitleInput 

src/components/expenses/ExpenseTitleSuggestions.tsx

@@ -21,13 +21,6 @@ const ExpenseTitleSuggestions: React.FC<ExpenseTitleSuggestionsProps> = ({
   }
   
   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 
@@ -40,7 +33,6 @@ const ExpenseTitleSuggestions: React.FC<ExpenseTitleSuggestionsProps> = ({
         </Badge>
       ))}
     </div>
-    </div>
   );
 };