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,47 +1,142 @@
 
 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);
-    // 향후 트랜잭션 추가 페이지로 이동할 수 있습니다
+    setShowExpenseDialog(true);
-    // navigate('/add-transaction', { state: { type: 'expense' } });
+  };
+  
+  const onSubmit = (data: ExpenseFormValues) => {
+    console.log('Expense data:', data);
+    setShowExpenseDialog(false);
+    // 여기에서 실제 데이터 처리 로직을 구현할 수 있습니다
   };
   
   return (
-    <div className="fixed bottom-24 right-6 z-20">
+    <>
-      {isOpen && (
+      <div className="fixed bottom-24 right-6 z-20">
-        <div className="absolute bottom-16 right-0 flex flex-col gap-3 items-end animate-slide-up">
+        {isOpen && (
-          <button 
+          <div className="absolute bottom-16 right-0 flex flex-col gap-3 items-end animate-slide-up">
-            className="neuro-flat p-4 text-neuro-income flex items-center gap-2"
+            <button 
-            onClick={handleAddExpense}
+              className="neuro-flat p-4 text-neuro-income flex items-center gap-2"
-          >
+              onClick={handleAddExpense}
-            <span className="text-sm font-medium">지출</span>
+            >
-            <MinusIcon size={18} />
+              <span className="text-sm font-medium">지출</span>
-          </button>
+              <MinusIcon size={18} />
-        </div>
+            </button>
-      )}
+          </div>
-      
-      <button 
-        className={cn(
-          "p-4 rounded-full transition-all duration-300 text-white",
-          isOpen 
-            ? "bg-red-500 rotate-45 shadow-lg" 
-            : "bg-neuro-income shadow-neuro-flat hover:shadow-neuro-convex animate-pulse-subtle"
         )}
-        onClick={() => setIsOpen(!isOpen)}
+        
-        aria-label={isOpen ? "닫기" : "거래 추가"}
+        <button 
-      >
+          className={cn(
-        {isOpen ? <X size={24} /> : <MinusIcon size={24} />}
+            "p-4 rounded-full transition-all duration-300 text-white",
-      </button>
+            isOpen 
-    </div>
+              ? "bg-red-500 rotate-45 shadow-lg" 
+              : "bg-neuro-income shadow-neuro-flat hover:shadow-neuro-convex animate-pulse-subtle"
+          )}
+          onClick={() => setIsOpen(!isOpen)}
+          aria-label={isOpen ? "닫기" : "거래 추가"}
+        >
+          {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>
+    </>
   );
 };