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