Toggle budget input on click
Modify the budget input to toggle open/close on button click.
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user