From c80ad15d798ae9f3763ef45ed0ca57d7177a5da2 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sat, 22 Mar 2025 12:14:13 +0000
Subject: [PATCH] Fix add transaction button animation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

-  Modify the add transaction button to prevent the plus icon from rotating.
-  Implement a hover effect that expands the button and displays "지출 입력" (Add Expense).
---
 src/components/AddTransactionButton.tsx | 21 ++++++++-------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/src/components/AddTransactionButton.tsx b/src/components/AddTransactionButton.tsx
index 095e800..cb27665 100644
--- a/src/components/AddTransactionButton.tsx
+++ b/src/components/AddTransactionButton.tsx
@@ -14,19 +14,10 @@ import useNotifications from '@/hooks/useNotifications';
 const AddTransactionButton = () => {
   const [showExpenseDialog, setShowExpenseDialog] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const [showText, setShowText] = useState(true);
+  const [isHovered, setIsHovered] = useState(false);
   const { addTransaction } = useBudget();
   const { addNotification } = useNotifications();
   
-  // 3초 후에 텍스트 숨기기
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setShowText(false);
-    }, 3000);
-    
-    return () => clearTimeout(timer);
-  }, []);
-  
   // Format number with commas
   const formatWithCommas = (value: string): string => {
     // Remove commas first to avoid duplicates when typing
@@ -141,14 +132,18 @@ const AddTransactionButton = () => {
       <div className="fixed bottom-24 right-6 z-20">
         <button 
           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)}
+          onMouseEnter={() => setIsHovered(true)}
+          onMouseLeave={() => setIsHovered(false)}
           aria-label="지출 추가"
           disabled={isSubmitting}
         >
-          <PlusIcon size={showText ? 20 : 24} className={showText ? "" : "animate-spin-slow"} />
-          {showText && <span className="mr-1 animate-fade-in">지출 입력</span>}
+          <div className="flex items-center gap-2">
+            <PlusIcon size={isHovered ? 20 : 24} />
+            {isHovered && <span className="animate-fade-in">지출 입력</span>}
+          </div>
         </button>
       </div>