Improve transaction form UI

Add category buttons for quicker selection.
Change save button color to neuro-income.

src/components/AddTransactionButton.tsx

@@ -8,7 +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';
+import { ToggleGroup, ToggleGroupItem } from './ui/toggle-group';
 
 interface ExpenseFormValues {
   title: string;
@@ -92,23 +92,26 @@ const AddTransactionButton = () => {
                 render={({ field }) => (
                   <FormItem>
                     <FormLabel>카테고리</FormLabel>
-                    <Select
+                    <FormControl>
-                      onValueChange={field.onChange}
+                      <ToggleGroup 
-                      defaultValue={field.value}
+                        type="single" 
-                    >
+                        className="justify-start flex-wrap gap-2"
-                      <FormControl>
+                        value={field.value}
-                        <SelectTrigger>
+                        onValueChange={(value) => {
-                          <SelectValue placeholder="카테고리 선택" />
+                          if (value) field.onChange(value);
-                        </SelectTrigger>
+                        }}
-                      </FormControl>
+                      >
-                      <SelectContent>
                         {EXPENSE_CATEGORIES.map((category) => (
-                          <SelectItem key={category} value={category}>
+                          <ToggleGroupItem 
+                            key={category} 
+                            value={category}
+                            className="px-4 py-2 rounded-md border"
+                          >
                             {category}
-                          </SelectItem>
+                          </ToggleGroupItem>
                         ))}
-                      </SelectContent>
+                      </ToggleGroup>
-                    </Select>
+                    </FormControl>
                   </FormItem>
                 )}
               />
@@ -121,7 +124,12 @@ const AddTransactionButton = () => {
                 >
                   취소
                 </Button>
-                <Button type="submit">저장</Button>
+                <Button 
+                  type="submit"
+                  className="bg-neuro-income text-white hover:bg-neuro-income/90"
+                >
+                  저장
+                </Button>
               </div>
             </form>
           </Form>