From de128ac57a354063b5e3d0d3c09cdf34be1a4d9d Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sat, 22 Mar 2025 12:26:02 +0000
Subject: [PATCH] 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       | 127 +++++++++--------
 .../transaction/TransactionFormFields.tsx     | 131 ++++++++++--------
 2 files changed, 146 insertions(+), 112 deletions(-)

diff --git a/src/components/expenses/ExpenseForm.tsx b/src/components/expenses/ExpenseForm.tsx
index 8d92ee3..87f5955 100644
--- a/src/components/expenses/ExpenseForm.tsx
+++ b/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);
-      setShowTitleSuggestions(true);
+      // 약간의 지연 후 제목 추천 표시 (애니메이션을 위해)
+      setTimeout(() => {
+        setShowTitleSuggestions(true);
+      }, 100);
+    } else {
+      setShowTitleSuggestions(false);
     }
   }, [selectedCategory]);
   
@@ -88,21 +93,29 @@ 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">
-              {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>
+        {/* 카테고리별 제목 제안 - 카테고리 선택 후에만 표시, 서랍처럼 열리는 애니메이션 적용 */}
+        {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}
+                    variant="outline"
+                    className="cursor-pointer hover:bg-neuro-income/10 transition-colors px-3 py-1"
+                    onClick={() => handleTitleSuggestionClick(suggestion)}
+                  >
+                    {suggestion}
+                  </Badge>
+                ))}
+              </div>
+            )}
           </div>
         )}
         
@@ -140,46 +153,50 @@ const ExpenseForm: React.FC<ExpenseFormProps> = ({ onSubmit, onCancel, isSubmitt
           )}
         />
         
-        {/* 지출 방법 필드는 금액 입력 시에만 표시 */}
-        {showPaymentMethod && (
-          <>
-            <Separator className="my-2 animate-fade-in" />
-            
-            <FormField
-              control={form.control}
-              name="paymentMethod"
-              render={({ field }) => (
-                <FormItem className="animate-fade-in">
-                  <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 
+          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>
-                </FormItem>
-              )}
-            />
-          </>
-        )}
+                  <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>
         
         <div className="flex justify-end gap-2 pt-2">
           <Button 
diff --git a/src/components/transaction/TransactionFormFields.tsx b/src/components/transaction/TransactionFormFields.tsx
index 478e7a0..93e60c3 100644
--- a/src/components/transaction/TransactionFormFields.tsx
+++ b/src/components/transaction/TransactionFormFields.tsx
@@ -54,7 +54,12 @@ const TransactionFormFields: React.FC<TransactionFormFieldsProps> = ({ form }) =
     if (selectedCategory) {
       const suggestions = getPersonalizedTitleSuggestions(selectedCategory);
       setTitleSuggestions(suggestions);
-      setShowTitleSuggestions(true);
+      // 약간의 지연 후 제목 추천 표시 (애니메이션을 위해)
+      setTimeout(() => {
+        setShowTitleSuggestions(true);
+      }, 100);
+    } else {
+      setShowTitleSuggestions(false);
     }
   }, [selectedCategory]);
 
@@ -96,20 +101,28 @@ const TransactionFormFields: React.FC<TransactionFormFieldsProps> = ({ form }) =
       />
       
       {/* 카테고리별 제목 제안 - 카테고리 선택 후에만 표시 */}
-      {showTitleSuggestions && titleSuggestions.length > 0 && (
-        <div className="mt-1 mb-3 animate-fade-in">
-          <div className="flex flex-wrap gap-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>
+      {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 
+                  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>
       )}
       
@@ -149,49 +162,53 @@ const TransactionFormFields: React.FC<TransactionFormFieldsProps> = ({ form }) =
       />
 
       {/* 구분선과 지출 방법 필드는 금액 입력 시에만 표시 */}
-      {showPaymentMethod && (
-        <>
-          <Separator className="my-4 animate-fade-in" />
-          
-          {/* 지출 방법 필드 - 버튼 형식으로 변경 및 텍스트 크기 축소 */}
-          <FormField
-            control={form.control}
-            name="paymentMethod"
-            render={({ field }) => (
-              <FormItem className="animate-fade-in">
-                <FormLabel>지출 방법</FormLabel>
-                <FormControl>
-                  <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'
-                      }`}
-                      onClick={() => 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'
-                      }`}
-                      onClick={() => form.setValue('paymentMethod', '현금')}
-                    >
-                      <Banknote size={16} className="text-neuro-income" />
-                      <span className="text-xs">현금</span>
-                    </div>
+      <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>
+              <FormLabel>지출 방법</FormLabel>
+              <FormControl>
+                <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'
+                    }`}
+                    onClick={() => form.setValue('paymentMethod', '신용카드')}
+                  >
+                    <CreditCard size={16} className="text-neuro-income" />
+                    <span className="text-xs">신용카드</span>
                   </div>
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-        </>
-      )}
+                  <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'
+                    }`}
+                    onClick={() => form.setValue('paymentMethod', '현금')}
+                  >
+                    <Banknote size={16} className="text-neuro-income" />
+                    <span className="text-xs">현금</span>
+                  </div>
+                </div>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </div>
     </>
   );
 };