Reorder expense form fields

Reordered the fields in the expense form to display category, title, and amount, respectively.
This commit is contained in:
gpt-engineer-app[bot]
2025-03-22 06:03:55 +00:00
parent 9561fb269a
commit 292eddc6e0
2 changed files with 52 additions and 46 deletions

View File

@@ -43,6 +43,22 @@ const ExpenseForm: React.FC<ExpenseFormProps> = ({ onSubmit, onCancel, isSubmitt
return (
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
{/* 카테고리 필드를 가장 먼저 배치 */}
<FormField
control={form.control}
name="category"
render={({ field }) => (
<FormItem>
<FormLabel></FormLabel>
<ExpenseCategorySelector
value={field.value}
onValueChange={(value) => field.onChange(value)}
/>
</FormItem>
)}
/>
{/* 제목 필드를 두 번째로 배치 */}
<FormField
control={form.control}
name="title"
@@ -58,6 +74,7 @@ const ExpenseForm: React.FC<ExpenseFormProps> = ({ onSubmit, onCancel, isSubmitt
)}
/>
{/* 금액 필드를 마지막으로 배치 */}
<FormField
control={form.control}
name="amount"
@@ -74,20 +91,6 @@ const ExpenseForm: React.FC<ExpenseFormProps> = ({ onSubmit, onCancel, isSubmitt
)}
/>
<FormField
control={form.control}
name="category"
render={({ field }) => (
<FormItem>
<FormLabel></FormLabel>
<ExpenseCategorySelector
value={field.value}
onValueChange={(value) => field.onChange(value)}
/>
</FormItem>
)}
/>
<div className="flex justify-end gap-2 pt-2">
<Button
type="button"

View File

@@ -33,38 +33,7 @@ const TransactionFormFields: React.FC<TransactionFormFieldsProps> = ({ form }) =
return (
<>
<FormField
control={form.control}
name="title"
render={({ field }) => (
<FormItem>
<FormLabel></FormLabel>
<FormControl>
<Input placeholder="제목을 입력하세요" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="amount"
render={({ field }) => (
<FormItem>
<FormLabel></FormLabel>
<FormControl>
<Input
placeholder="금액을 입력하세요"
{...field}
onChange={handleAmountChange}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
{/* 카테고리 필드를 첫 번째로 배치 */}
<FormField
control={form.control}
name="category"
@@ -93,6 +62,40 @@ const TransactionFormFields: React.FC<TransactionFormFieldsProps> = ({ form }) =
</FormItem>
)}
/>
{/* 제목 필드를 두 번째로 배치 */}
<FormField
control={form.control}
name="title"
render={({ field }) => (
<FormItem>
<FormLabel></FormLabel>
<FormControl>
<Input placeholder="제목을 입력하세요" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
{/* 금액 필드를 마지막으로 배치 */}
<FormField
control={form.control}
name="amount"
render={({ field }) => (
<FormItem>
<FormLabel></FormLabel>
<FormControl>
<Input
placeholder="금액을 입력하세요"
{...field}
onChange={handleAmountChange}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</>
);
};