diff --git a/src/components/expenses/ExpenseForm.tsx b/src/components/expenses/ExpenseForm.tsx index a26a256..e20029e 100644 --- a/src/components/expenses/ExpenseForm.tsx +++ b/src/components/expenses/ExpenseForm.tsx @@ -6,6 +6,8 @@ import { Input } from '@/components/ui/input'; import { Button } from '@/components/ui/button'; import { Loader2 } from 'lucide-react'; import ExpenseCategorySelector from './ExpenseCategorySelector'; +import { CATEGORY_TITLE_SUGGESTIONS } from '@/constants/categoryIcons'; +import { Badge } from '@/components/ui/badge'; export interface ExpenseFormValues { title: string; @@ -28,6 +30,17 @@ const ExpenseForm: React.FC = ({ onSubmit, onCancel, isSubmitt } }); + // 현재 선택된 카테고리 가져오기 + const selectedCategory = form.watch('category'); + + // 선택된 카테고리에 대한 제목 제안 목록 가져오기 + const titleSuggestions = selectedCategory ? CATEGORY_TITLE_SUGGESTIONS[selectedCategory] : []; + + // 제안된 제목 클릭 시 제목 필드에 설정 + const handleTitleSuggestionClick = (suggestion: string) => { + form.setValue('title', suggestion); + }; + // Format number with commas const formatWithCommas = (value: string): string => { // Remove commas first to avoid duplicates when typing @@ -58,6 +71,24 @@ const ExpenseForm: React.FC = ({ onSubmit, onCancel, isSubmitt )} /> + {/* 카테고리별 제목 제안 */} + {titleSuggestions.length > 0 && ( +
+
+ {titleSuggestions.map((suggestion) => ( + handleTitleSuggestionClick(suggestion)} + > + {suggestion} + + ))} +
+
+ )} + {/* 제목 필드를 두 번째로 배치 */} = ({ form }) = form.setValue('amount', formattedValue); }; + // 현재 선택된 카테고리 가져오기 + const selectedCategory = form.watch('category'); + + // 선택된 카테고리에 대한 제목 제안 목록 가져오기 + const titleSuggestions = selectedCategory ? CATEGORY_TITLE_SUGGESTIONS[selectedCategory] : []; + + // 제안된 제목 클릭 시 제목 필드에 설정 + const handleTitleSuggestionClick = (suggestion: string) => { + form.setValue('title', suggestion); + }; + return ( <> {/* 카테고리 필드를 첫 번째로 배치 */} @@ -63,6 +75,24 @@ const TransactionFormFields: React.FC = ({ form }) = )} /> + {/* 카테고리별 제목 제안 */} + {titleSuggestions.length > 0 && ( +
+
+ {titleSuggestions.map((suggestion) => ( + handleTitleSuggestionClick(suggestion)} + > + {suggestion} + + ))} +
+
+ )} + {/* 제목 필드를 두 번째로 배치 */} = { + 음식: ['점심', '저녁', '음료', '간식', '아침', '외식'], + 쇼핑: ['의류', '생활용품', '운동용품', '가전제품', '화장품'], + 교통: ['택시', '주유', '버스', '지하철', '교통카드', '주차'], + 기타: ['구독', '관리비', '전기요금', '통신비', '의료비', '취미'] +};