Fix add transaction button animation
- Modify the add transaction button to prevent the plus icon from rotating. - Implement a hover effect that expands the button and displays "지출 입력" (Add Expense).
This commit is contained in:
@@ -14,19 +14,10 @@ import useNotifications from '@/hooks/useNotifications';
|
|||||||
const AddTransactionButton = () => {
|
const AddTransactionButton = () => {
|
||||||
const [showExpenseDialog, setShowExpenseDialog] = useState(false);
|
const [showExpenseDialog, setShowExpenseDialog] = useState(false);
|
||||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||||
const [showText, setShowText] = useState(true);
|
const [isHovered, setIsHovered] = useState(false);
|
||||||
const { addTransaction } = useBudget();
|
const { addTransaction } = useBudget();
|
||||||
const { addNotification } = useNotifications();
|
const { addNotification } = useNotifications();
|
||||||
|
|
||||||
// 3초 후에 텍스트 숨기기
|
|
||||||
useEffect(() => {
|
|
||||||
const timer = setTimeout(() => {
|
|
||||||
setShowText(false);
|
|
||||||
}, 3000);
|
|
||||||
|
|
||||||
return () => clearTimeout(timer);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// Format number with commas
|
// Format number with commas
|
||||||
const formatWithCommas = (value: string): string => {
|
const formatWithCommas = (value: string): string => {
|
||||||
// Remove commas first to avoid duplicates when typing
|
// Remove commas first to avoid duplicates when typing
|
||||||
@@ -141,14 +132,18 @@ const AddTransactionButton = () => {
|
|||||||
<div className="fixed bottom-24 right-6 z-20">
|
<div className="fixed bottom-24 right-6 z-20">
|
||||||
<button
|
<button
|
||||||
className={`transition-all duration-300 bg-neuro-income shadow-neuro-flat hover:shadow-neuro-convex text-white ${
|
className={`transition-all duration-300 bg-neuro-income shadow-neuro-flat hover:shadow-neuro-convex text-white ${
|
||||||
showText ? 'flex items-center gap-2 px-4 py-3 rounded-full animate-bounce-gentle' : 'p-4 rounded-full animate-pulse-subtle'
|
isHovered ? 'px-4 py-3 rounded-full' : 'p-4 rounded-full'
|
||||||
}`}
|
}`}
|
||||||
onClick={() => setShowExpenseDialog(true)}
|
onClick={() => setShowExpenseDialog(true)}
|
||||||
|
onMouseEnter={() => setIsHovered(true)}
|
||||||
|
onMouseLeave={() => setIsHovered(false)}
|
||||||
aria-label="지출 추가"
|
aria-label="지출 추가"
|
||||||
disabled={isSubmitting}
|
disabled={isSubmitting}
|
||||||
>
|
>
|
||||||
<PlusIcon size={showText ? 20 : 24} className={showText ? "" : "animate-spin-slow"} />
|
<div className="flex items-center gap-2">
|
||||||
{showText && <span className="mr-1 animate-fade-in">지출 입력</span>}
|
<PlusIcon size={isHovered ? 20 : 24} />
|
||||||
|
{isHovered && <span className="animate-fade-in">지출 입력</span>}
|
||||||
|
</div>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user