From 089aa4cb5af396df5b1f4456b6556098b513b384 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Mon, 17 Mar 2025 12:33:37 +0000
Subject: [PATCH] Toggle budget input on click

Modify the budget input to toggle open/close on button click.
---
 src/components/BudgetTabContent.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/BudgetTabContent.tsx b/src/components/BudgetTabContent.tsx
index d517456..7bbf2c1 100644
--- a/src/components/BudgetTabContent.tsx
+++ b/src/components/BudgetTabContent.tsx
@@ -1,3 +1,4 @@
+
 import React, { useState, useEffect } from 'react';
 import { CirclePlus, Save, Check } from 'lucide-react';
 import BudgetInputCard from './BudgetInputCard';
@@ -76,6 +77,11 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
     }
   }, [showBudgetInput]);
 
+  // 예산 버튼 클릭 핸들러 - 토글 기능 추가
+  const toggleBudgetInput = () => {
+    setShowBudgetInput(prev => !prev);
+  };
+
   // 예산 여부에 따른 텍스트 결정
   const budgetButtonText = targetAmount > 0 ? "예산 수정하기" : "예산 입력하기";
   return <div>
@@ -101,14 +107,17 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
           </div>
           
           <div className="mt-6">
-            <button onClick={() => setShowBudgetInput(true)} className="text-neuro-income hover:underline flex items-center text-lg font-bold group">
+            <button 
+              onClick={toggleBudgetInput} 
+              className="text-neuro-income hover:underline flex items-center text-lg font-bold group"
+            >
               <CirclePlus size={26} className="mr-2 text-neuro-income animate-pulse transition-transform group-hover:scale-110" />
               <span className="text-base font-semibold animate-pulse">{budgetButtonText}</span>
             </button>
           </div>
         </> : <div className="py-4 text-center">
           <div className="text-gray-400 mb-4">아직 예산이 설정되지 않았습니다</div>
-          <Button onClick={() => setShowBudgetInput(true)} variant="default" className="bg-neuro-income hover:bg-neuro-income/90 animate-pulse shadow-lg">
+          <Button onClick={toggleBudgetInput} variant="default" className="bg-neuro-income hover:bg-neuro-income/90 animate-pulse shadow-lg">
             <CirclePlus className="mr-2" size={24} />
             <span className="animate-pulse">{budgetButtonText}</span>
           </Button>