From 1ce5e3927c97a4ae8fc148bb019e5c23fc6aa0e7 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sat, 15 Mar 2025 03:02:56 +0000
Subject: [PATCH] Implement category selection in expense form

The category field in the expense input form is now implemented as a selection between three options.
---
 src/components/AddTransactionButton.tsx | 26 +++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/components/AddTransactionButton.tsx b/src/components/AddTransactionButton.tsx
index 1a0f477..fa08bdc 100644
--- a/src/components/AddTransactionButton.tsx
+++ b/src/components/AddTransactionButton.tsx
@@ -8,6 +8,7 @@ import { Form, FormField, FormItem, FormLabel, FormControl } from './ui/form';
 import { Input } from './ui/input';
 import { Button } from './ui/button';
 import { useForm } from 'react-hook-form';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
 
 interface ExpenseFormValues {
   title: string;
@@ -15,6 +16,8 @@ interface ExpenseFormValues {
   category: string;
 }
 
+const EXPENSE_CATEGORIES = ['식비', '교통비', '생활비'];
+
 const AddTransactionButton = () => {
   const [showExpenseDialog, setShowExpenseDialog] = useState(false);
   const navigate = useNavigate();
@@ -89,12 +92,23 @@ const AddTransactionButton = () => {
                 render={({ field }) => (
                   <FormItem>
                     <FormLabel>카테고리</FormLabel>
-                    <FormControl>
-                      <Input 
-                        placeholder="카테고리" 
-                        {...field} 
-                      />
-                    </FormControl>
+                    <Select
+                      onValueChange={field.onChange}
+                      defaultValue={field.value}
+                    >
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue placeholder="카테고리 선택" />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {EXPENSE_CATEGORIES.map((category) => (
+                          <SelectItem key={category} value={category}>
+                            {category}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
                   </FormItem>
                 )}
               />