diff --git a/src/components/expenses/ExpenseForm.tsx b/src/components/expenses/ExpenseForm.tsx index f5aa618..8d92ee3 100644 --- a/src/components/expenses/ExpenseForm.tsx +++ b/src/components/expenses/ExpenseForm.tsx @@ -33,6 +33,10 @@ const ExpenseForm: React.FC = ({ 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 = ({ onSubmit, onCancel, isSubmitt // 선택된 카테고리에 대한 개인화된 제목 제안 목록 상태 const [titleSuggestions, setTitleSuggestions] = useState([]); - // 카테고리가 변경될 때마다 개인화된 제목 목록 업데이트 + // 카테고리가 변경될 때마다 개인화된 제목 목록 업데이트 및 제목 추천 표시 useEffect(() => { if (selectedCategory) { const suggestions = getPersonalizedTitleSuggestions(selectedCategory); setTitleSuggestions(suggestions); + setShowTitleSuggestions(true); } }, [selectedCategory]); @@ -83,9 +88,9 @@ const ExpenseForm: React.FC = ({ onSubmit, onCancel, isSubmitt )} /> - {/* 카테고리별 제목 제안 */} - {titleSuggestions.length > 0 && ( -
+ {/* 카테고리별 제목 제안 - 카테고리 선택 후에만 표시 */} + {showTitleSuggestions && titleSuggestions.length > 0 && ( +
{titleSuggestions.map((suggestion) => ( = ({ onSubmit, onCancel, isSubmitt placeholder="금액을 입력하세요" value={field.value} onChange={handleAmountChange} + onFocus={() => setShowPaymentMethod(true)} disabled={isSubmitting} /> )} /> - {/* 구분선 추가 */} - - - {/* 지출 방법 필드 수정 - 버튼 형식으로 변경 */} - ( - - 지출 방법 -
-
!isSubmitting && form.setValue('paymentMethod', '신용카드')} - > - - 신용카드 -
-
!isSubmitting && form.setValue('paymentMethod', '현금')} - > - - 현금 -
-
-
- )} - /> + {/* 지출 방법 필드는 금액 입력 시에만 표시 */} + {showPaymentMethod && ( + <> + + + ( + + 지출 방법 +
+
!isSubmitting && form.setValue('paymentMethod', '신용카드')} + > + + 신용카드 +
+
!isSubmitting && form.setValue('paymentMethod', '현금')} + > + + 현금 +
+
+
+ )} + /> + + )}