From c1a64ed711e1394851f5a4d4481f399c33b7a001 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 06:43:22 +0000
Subject: [PATCH] Add animation effects

Adds subtle animation effects to improve user experience.
---
 src/components/AddTransactionButton.tsx |  8 ++--
 src/index.css                           | 55 ++++++++++++++++++++++++-
 2 files changed, 57 insertions(+), 6 deletions(-)

diff --git a/src/components/AddTransactionButton.tsx b/src/components/AddTransactionButton.tsx
index ac266e2..aebb027 100644
--- a/src/components/AddTransactionButton.tsx
+++ b/src/components/AddTransactionButton.tsx
@@ -138,15 +138,15 @@ 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 animate-pulse-subtle ${
-            showText ? 'flex items-center gap-2 px-4 py-3 rounded-full' : 'p-4 rounded-full'
+          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'
           }`}
           onClick={() => setShowExpenseDialog(true)}
           aria-label="지출 추가"
           disabled={isSubmitting}
         >
-          <PlusIcon size={showText ? 20 : 24} />
-          {showText && <span className="mr-1">지출 입력</span>}
+          <PlusIcon size={showText ? 20 : 24} className={showText ? "" : "animate-spin-slow"} />
+          {showText && <span className="mr-1 animate-fade-in">지출 입력</span>}
         </button>
       </div>
       
diff --git a/src/index.css b/src/index.css
index b23fdf5..6b4e9a2 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,4 +1,3 @@
-
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 
 @tailwind base;
@@ -203,6 +202,59 @@
       @apply w-full mx-auto;
     }
   }
+  
+  /* 추가 애니메이션 정의 */
+  @keyframes pulse-subtle {
+    0%, 100% {
+      transform: scale(1);
+    }
+    50% {
+      transform: scale(1.05);
+    }
+  }
+  
+  @keyframes bounce-gentle {
+    0%, 100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-5px);
+    }
+  }
+  
+  @keyframes spin-slow {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  
+  .animate-pulse-subtle {
+    animation: pulse-subtle 2s infinite ease-in-out;
+  }
+  
+  .animate-bounce-gentle {
+    animation: bounce-gentle 1.5s infinite ease-in-out;
+  }
+  
+  .animate-spin-slow {
+    animation: spin-slow 6s linear infinite;
+  }
+  
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  .animate-fade-in {
+    animation: fade-in 0.5s ease-in-out;
+  }
 }
 
 /* iOS 전용 스타일 */
@@ -221,4 +273,3 @@
 .font-inter {
   font-family: 'Inter', sans-serif;
 }
-