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 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>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user