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

@@ -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>
+                    <Select
-                      <Input 
+                      onValueChange={field.onChange}
-                        placeholder="카테고리" 
+                      defaultValue={field.value}
-                        {...field} 
+                    >
-                      />
+                      <FormControl>
-                    </FormControl>
+                        <SelectTrigger>
+                          <SelectValue placeholder="카테고리 선택" />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {EXPENSE_CATEGORIES.map((category) => (
+                          <SelectItem key={category} value={category}>
+                            {category}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
                   </FormItem>
                 )}
               />