Show expense dialog directly

Modify the AddTransactionButton component to directly show the expense input dialog when the button is clicked, instead of showing the "지출" option first.
This commit is contained in:
gpt-engineer-app[bot]
2025-03-15 03:02:01 +00:00
parent 0630acc52c
commit 77a966c87c

View File

@@ -1,6 +1,6 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { PlusIcon, MinusIcon, X } from 'lucide-react'; import { PlusIcon, X } from 'lucide-react';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from './ui/dialog'; import { Dialog, DialogContent, DialogHeader, DialogTitle } from './ui/dialog';
@@ -16,7 +16,6 @@ interface ExpenseFormValues {
} }
const AddTransactionButton = () => { const AddTransactionButton = () => {
const [isOpen, setIsOpen] = useState(false);
const [showExpenseDialog, setShowExpenseDialog] = useState(false); const [showExpenseDialog, setShowExpenseDialog] = useState(false);
const navigate = useNavigate(); const navigate = useNavigate();
@@ -28,11 +27,6 @@ const AddTransactionButton = () => {
} }
}); });
const handleAddExpense = () => {
setIsOpen(false);
setShowExpenseDialog(true);
};
const onSubmit = (data: ExpenseFormValues) => { const onSubmit = (data: ExpenseFormValues) => {
console.log('Expense data:', data); console.log('Expense data:', data);
setShowExpenseDialog(false); setShowExpenseDialog(false);
@@ -42,29 +36,12 @@ const AddTransactionButton = () => {
return ( return (
<> <>
<div className="fixed bottom-24 right-6 z-20"> <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">
<button
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} />
</button>
</div>
)}
<button <button
className={cn( className="p-4 rounded-full transition-all duration-300 bg-neuro-income shadow-neuro-flat hover:shadow-neuro-convex text-white animate-pulse-subtle"
"p-4 rounded-full transition-all duration-300 text-white", onClick={() => setShowExpenseDialog(true)}
isOpen aria-label="지출 추가"
? "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} />} <PlusIcon size={24} />
</button> </button>
</div> </div>