From 292eddc6e059f8ce749731c70ea6081debf6d0b8 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 06:03:55 +0000
Subject: [PATCH] Reorder expense form fields

Reordered the fields in the expense form to display category, title, and amount, respectively.
---
 src/components/expenses/ExpenseForm.tsx       | 31 +++++----
 .../transaction/TransactionFormFields.tsx     | 67 ++++++++++---------
 2 files changed, 52 insertions(+), 46 deletions(-)

diff --git a/src/components/expenses/ExpenseForm.tsx b/src/components/expenses/ExpenseForm.tsx
index b61c114..ffc3fbc 100644
--- a/src/components/expenses/ExpenseForm.tsx
+++ b/src/components/expenses/ExpenseForm.tsx
@@ -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" 
diff --git a/src/components/transaction/TransactionFormFields.tsx b/src/components/transaction/TransactionFormFields.tsx
index a12d939..957171d 100644
--- a/src/components/transaction/TransactionFormFields.tsx
+++ b/src/components/transaction/TransactionFormFields.tsx
@@ -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>
+        )}
+      />
     </>
   );
 };