Improve title suggestion display

- Fix issue where title suggestions were not hidden correctly.
- Add animation to collapsible content for a smoother user experience.

src/components/expenses/ExpenseForm.tsx

@@ -49,7 +49,12 @@ const ExpenseForm: React.FC<ExpenseFormProps> = ({ onSubmit, onCancel, isSubmitt
     if (selectedCategory) {
       const suggestions = getPersonalizedTitleSuggestions(selectedCategory);
       setTitleSuggestions(suggestions);
+      // 약간의 지연 후 제목 추천 표시 (애니메이션을 위해)
+      setTimeout(() => {
         setShowTitleSuggestions(true);
+      }, 100);
+    } else {
+      setShowTitleSuggestions(false);
     }
   }, [selectedCategory]);
   
@@ -88,10 +93,17 @@ const ExpenseForm: React.FC<ExpenseFormProps> = ({ onSubmit, onCancel, isSubmitt
           )}
         />
         
-        {/* 카테고리별 제목 제안 - 카테고리 선택 후에만 표시 */}
-        {showTitleSuggestions && titleSuggestions.length > 0 && (
-          <div className="mt-1 mb-2 animate-fade-in">
-            <div className="flex flex-wrap gap-2">
+        {/* 카테고리별 제목 제안 - 카테고리 선택 후에만 표시, 서랍처럼 열리는 애니메이션 적용 */}
+        {selectedCategory && (
+          <div 
+            className={`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 mt-1 mb-2">
                 {titleSuggestions.map((suggestion) => (
                   <Badge 
                     key={suggestion}
@@ -103,6 +115,7 @@ const ExpenseForm: React.FC<ExpenseFormProps> = ({ onSubmit, onCancel, isSubmitt
                   </Badge>
                 ))}
               </div>
+            )}
           </div>
         )}
         
@@ -140,16 +153,21 @@ const ExpenseForm: React.FC<ExpenseFormProps> = ({ onSubmit, onCancel, isSubmitt
           )}
         />
         
-        {/* 지출 방법 필드는 금액 입력 시에만 표시 */}
-        {showPaymentMethod && (
-          <>
-            <Separator className="my-2 animate-fade-in" />
+        {/* 지출 방법 필드는 금액 입력 시에만 표시 - 서랍처럼 열리는 애니메이션 적용 */}
+        <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 className="animate-fade-in">
+              <FormItem>
                 <FormLabel>지출 방법</FormLabel>
                 <div className="grid grid-cols-2 gap-3">
                   <div
@@ -178,8 +196,7 @@ const ExpenseForm: React.FC<ExpenseFormProps> = ({ onSubmit, onCancel, isSubmitt
               </FormItem>
             )}
           />
-          </>
-        )}
+        </div>
         
         <div className="flex justify-end gap-2 pt-2">
           <Button 

src/components/transaction/TransactionFormFields.tsx

@@ -54,7 +54,12 @@ const TransactionFormFields: React.FC<TransactionFormFieldsProps> = ({ form }) =
     if (selectedCategory) {
       const suggestions = getPersonalizedTitleSuggestions(selectedCategory);
       setTitleSuggestions(suggestions);
+      // 약간의 지연 후 제목 추천 표시 (애니메이션을 위해)
+      setTimeout(() => {
         setShowTitleSuggestions(true);
+      }, 100);
+    } else {
+      setShowTitleSuggestions(false);
     }
   }, [selectedCategory]);
 
@@ -96,8 +101,15 @@ const TransactionFormFields: React.FC<TransactionFormFieldsProps> = ({ form }) =
       />
       
       {/* 카테고리별 제목 제안 - 카테고리 선택 후에만 표시 */}
-      {showTitleSuggestions && titleSuggestions.length > 0 && (
-        <div className="mt-1 mb-3 animate-fade-in">
+      {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 
@@ -110,6 +122,7 @@ const TransactionFormFields: React.FC<TransactionFormFieldsProps> = ({ form }) =
                 </Badge>
               ))}
             </div>
+          )}
         </div>
       )}
       
@@ -149,16 +162,21 @@ const TransactionFormFields: React.FC<TransactionFormFieldsProps> = ({ form }) =
       />
 
       {/* 구분선과 지출 방법 필드는 금액 입력 시에만 표시 */}
-      {showPaymentMethod && (
-        <>
-          <Separator className="my-4 animate-fade-in" />
+      <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 className="animate-fade-in">
+            <FormItem>
               <FormLabel>지출 방법</FormLabel>
               <FormControl>
                 <div className="grid grid-cols-2 gap-3">
@@ -190,8 +208,7 @@ const TransactionFormFields: React.FC<TransactionFormFieldsProps> = ({ form }) =
             </FormItem>
           )}
         />
-        </>
-      )}
+      </div>
     </>
   );
 };