Hide elements initially

Hides title suggestions and payment method fields initially, showing them based on category selection and amount input focus.

src/components/expenses/ExpenseForm.tsx

@@ -33,6 +33,10 @@ const ExpenseForm: React.FC<ExpenseFormProps> = ({ onSubmit, onCancel, isSubmitt
     }
   });
   
+  // 상태 관리 추가
+  const [showTitleSuggestions, setShowTitleSuggestions] = useState(false);
+  const [showPaymentMethod, setShowPaymentMethod] = useState(false);
+  
   // 현재 선택된 카테고리 가져오기
   const selectedCategory = form.watch('category');
   const selectedPaymentMethod = form.watch('paymentMethod');
@@ -40,11 +44,12 @@ const ExpenseForm: React.FC<ExpenseFormProps> = ({ onSubmit, onCancel, isSubmitt
   // 선택된 카테고리에 대한 개인화된 제목 제안 목록 상태
   const [titleSuggestions, setTitleSuggestions] = useState<string[]>([]);
   
-  // 카테고리가 변경될 때마다 개인화된 제목 목록 업데이트
+  // 카테고리가 변경될 때마다 개인화된 제목 목록 업데이트 및 제목 추천 표시
   useEffect(() => {
     if (selectedCategory) {
       const suggestions = getPersonalizedTitleSuggestions(selectedCategory);
       setTitleSuggestions(suggestions);
+      setShowTitleSuggestions(true);
     }
   }, [selectedCategory]);
   
@@ -83,9 +88,9 @@ const ExpenseForm: React.FC<ExpenseFormProps> = ({ onSubmit, onCancel, isSubmitt
           )}
         />
         
-        {/* 카테고리별 제목 제안 */}
-        {titleSuggestions.length > 0 && (
-          <div className="mt-1 mb-2">
+        {/* 카테고리별 제목 제안 - 카테고리 선택 후에만 표시 */}
+        {showTitleSuggestions && titleSuggestions.length > 0 && (
+          <div className="mt-1 mb-2 animate-fade-in">
             <div className="flex flex-wrap gap-2">
               {titleSuggestions.map((suggestion) => (
                 <Badge 
@@ -128,49 +133,53 @@ const ExpenseForm: React.FC<ExpenseFormProps> = ({ onSubmit, onCancel, isSubmitt
                 placeholder="금액을 입력하세요" 
                 value={field.value}
                 onChange={handleAmountChange}
+                onFocus={() => setShowPaymentMethod(true)}
                 disabled={isSubmitting}
               />
             </FormItem>
           )}
         />
         
-        {/* 구분선 추가 */}
-        <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-sm">신용카드</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-sm">현금</span>
-                </div>
-              </div>
-            </FormItem>
-          )}
-        />
+        {/* 지출 방법 필드는 금액 입력 시에만 표시 */}
+        {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>
+                </FormItem>
+              )}
+            />
+          </>
+        )}
         
         <div className="flex justify-end gap-2 pt-2">
           <Button 

src/components/transaction/TransactionFormFields.tsx

@@ -31,6 +31,10 @@ interface TransactionFormFieldsProps {
 }
 
 const TransactionFormFields: React.FC<TransactionFormFieldsProps> = ({ form }) => {
+  // 상태 관리를 추가합니다
+  const [showTitleSuggestions, setShowTitleSuggestions] = useState(false);
+  const [showPaymentMethod, setShowPaymentMethod] = useState(false);
+  
   const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const formattedValue = formatWithCommas(e.target.value);
     form.setValue('amount', formattedValue);
@@ -45,11 +49,12 @@ const TransactionFormFields: React.FC<TransactionFormFieldsProps> = ({ form }) =
   // 선택된 카테고리에 대한 개인화된 제목 제안 목록 상태
   const [titleSuggestions, setTitleSuggestions] = useState<string[]>([]);
   
-  // 카테고리가 변경될 때마다 개인화된 제목 목록 업데이트
+  // 카테고리가 변경될 때마다 개인화된 제목 목록 업데이트 및 제목 추천 표시
   useEffect(() => {
     if (selectedCategory) {
       const suggestions = getPersonalizedTitleSuggestions(selectedCategory);
       setTitleSuggestions(suggestions);
+      setShowTitleSuggestions(true);
     }
   }, [selectedCategory]);
 
@@ -90,9 +95,9 @@ const TransactionFormFields: React.FC<TransactionFormFieldsProps> = ({ form }) =
         )}
       />
       
-      {/* 카테고리별 제목 제안 */}
-      {titleSuggestions.length > 0 && (
-        <div className="mt-1 mb-3">
+      {/* 카테고리별 제목 제안 - 카테고리 선택 후에만 표시 */}
+      {showTitleSuggestions && titleSuggestions.length > 0 && (
+        <div className="mt-1 mb-3 animate-fade-in">
           <div className="flex flex-wrap gap-2">
             {titleSuggestions.map((suggestion) => (
               <Badge 
@@ -135,6 +140,7 @@ const TransactionFormFields: React.FC<TransactionFormFieldsProps> = ({ form }) =
                 placeholder="금액을 입력하세요" 
                 {...field} 
                 onChange={handleAmountChange}
+                onFocus={() => setShowPaymentMethod(true)}
               />
             </FormControl>
             <FormMessage />
@@ -142,46 +148,50 @@ const TransactionFormFields: React.FC<TransactionFormFieldsProps> = ({ form }) =
         )}
       />
 
-      {/* 구분선 추가 */}
-      <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-sm">신용카드</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-sm">현금</span>
-                </div>
-              </div>
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )}
-      />
+      {/* 구분선과 지출 방법 필드는 금액 입력 시에만 표시 */}
+      {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>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </>
+      )}
     </>
   );
 };