Change add transaction button

- Modify the add transaction button to display a "+" icon.
- Implement functionality to open an expense input form when the button is pressed.

src/components/AddTransactionButton.tsx

@@ -1,21 +1,46 @@
 
 import React, { useState } from 'react';
-import { MinusIcon, X } from 'lucide-react';
+import { PlusIcon, MinusIcon, X } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { useNavigate } from 'react-router-dom';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from './ui/dialog';
+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';
+
+interface ExpenseFormValues {
+  title: string;
+  amount: string;
+  category: string;
+}
 
 const AddTransactionButton = () => {
   const [isOpen, setIsOpen] = useState(false);
+  const [showExpenseDialog, setShowExpenseDialog] = useState(false);
   const navigate = useNavigate();
   
+  const form = useForm<ExpenseFormValues>({
+    defaultValues: {
+      title: '',
+      amount: '',
+      category: '식비',
+    }
+  });
+  
   const handleAddExpense = () => {
-    // 여기에 지출 추가 로직을 구현할 수 있습니다
     setIsOpen(false);
-    // 향후 트랜잭션 추가 페이지로 이동할 수 있습니다
-    // navigate('/add-transaction', { state: { type: 'expense' } });
+    setShowExpenseDialog(true);
+  };
+  
+  const onSubmit = (data: ExpenseFormValues) => {
+    console.log('Expense data:', data);
+    setShowExpenseDialog(false);
+    // 여기에서 실제 데이터 처리 로직을 구현할 수 있습니다
   };
   
   return (
+    <>
       <div className="fixed bottom-24 right-6 z-20">
         {isOpen && (
           <div className="absolute bottom-16 right-0 flex flex-col gap-3 items-end animate-slide-up">
@@ -39,9 +64,79 @@ const AddTransactionButton = () => {
           onClick={() => setIsOpen(!isOpen)}
           aria-label={isOpen ? "닫기" : "거래 추가"}
         >
-        {isOpen ? <X size={24} /> : <MinusIcon size={24} />}
+          {isOpen ? <X size={24} /> : <PlusIcon size={24} />}
         </button>
       </div>
+      
+      <Dialog open={showExpenseDialog} onOpenChange={setShowExpenseDialog}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>지출 추가</DialogTitle>
+          </DialogHeader>
+          
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+              <FormField
+                control={form.control}
+                name="title"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>제목</FormLabel>
+                    <FormControl>
+                      <Input placeholder="지출 내역을 입력하세요" {...field} />
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+              
+              <FormField
+                control={form.control}
+                name="amount"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>금액</FormLabel>
+                    <FormControl>
+                      <Input 
+                        type="number" 
+                        placeholder="0" 
+                        {...field} 
+                      />
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+              
+              <FormField
+                control={form.control}
+                name="category"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>카테고리</FormLabel>
+                    <FormControl>
+                      <Input 
+                        placeholder="카테고리" 
+                        {...field} 
+                      />
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+              
+              <div className="flex justify-end gap-2 pt-2">
+                <Button 
+                  type="button" 
+                  variant="outline" 
+                  onClick={() => setShowExpenseDialog(false)}
+                >
+                  취소
+                </Button>
+                <Button type="submit">저장</Button>
+              </div>
+            </form>
+          </Form>
+        </DialogContent>
+      </Dialog>
+    </>
   );
 };