From e0d4cf61c7ab577207f2e5042932d8e2f32944ba 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:41:04 +0000
Subject: [PATCH] Refine add transaction button

The add transaction button is too large initially. This commit changes the button to display fully for 3 seconds, then transition to a smaller "+" icon button.
---
 src/components/AddTransactionButton.tsx | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/components/AddTransactionButton.tsx b/src/components/AddTransactionButton.tsx
index e63e60b..ac266e2 100644
--- a/src/components/AddTransactionButton.tsx
+++ b/src/components/AddTransactionButton.tsx
@@ -1,5 +1,5 @@
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { PlusIcon } from 'lucide-react';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from './ui/dialog';
 import { toast } from '@/hooks/useToast.wrapper'; // 래퍼 사용
@@ -14,9 +14,19 @@ import useNotifications from '@/hooks/useNotifications';
 const AddTransactionButton = () => {
   const [showExpenseDialog, setShowExpenseDialog] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [showText, setShowText] = useState(true);
   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
@@ -128,13 +138,15 @@ const AddTransactionButton = () => {
     <>
       <div className="fixed bottom-24 right-6 z-20">
         <button 
-          className="flex items-center gap-2 px-4 py-3 rounded-full transition-all duration-300 bg-neuro-income shadow-neuro-flat hover:shadow-neuro-convex text-white animate-pulse-subtle"
+          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'
+          }`}
           onClick={() => setShowExpenseDialog(true)}
           aria-label="지출 추가"
           disabled={isSubmitting}
         >
-          <PlusIcon size={20} />
-          <span className="mr-1">지출 입력</span>
+          <PlusIcon size={showText ? 20 : 24} />
+          {showText && <span className="mr-1">지출 입력</span>}
         </button>
       </div>