Update budget button text

Change "예산 수정하기" to "예산 입력하기" when budget is empty and add animation.
This commit is contained in:
gpt-engineer-app[bot]
2025-03-17 12:27:48 +00:00
parent 37937b38b3
commit a1e9c6dda5

View File

@@ -75,6 +75,11 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
} }
} }
}, [showBudgetInput]); }, [showBudgetInput]);
// 예산 여부에 따른 텍스트 결정
const budgetButtonText = targetAmount > 0 ? "예산 수정하기" : "예산 입력하기";
return <div> return <div>
{targetAmount > 0 ? <> {targetAmount > 0 ? <>
<div className="flex justify-between items-center mb-3"> <div className="flex justify-between items-center mb-3">
@@ -100,14 +105,14 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
<div className="mt-6"> <div className="mt-6">
<button onClick={() => setShowBudgetInput(true)} className="text-neuro-income hover:underline flex items-center text-lg font-bold group"> <button onClick={() => setShowBudgetInput(true)} 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" /> <CirclePlus size={26} className="mr-2 text-neuro-income animate-pulse transition-transform group-hover:scale-110" />
<span className="text-base font-semibold"> </span> <span className="text-base font-semibold animate-pulse">{budgetButtonText}</span>
</button> </button>
</div> </div>
</> : <div className="py-4 text-center"> </> : <div className="py-4 text-center">
<div className="text-gray-400 mb-4"> </div> <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={() => setShowBudgetInput(true)} variant="default" className="bg-neuro-income hover:bg-neuro-income/90 animate-pulse shadow-lg">
<CirclePlus className="mr-2" size={24} /> <CirclePlus className="mr-2" size={24} />
<span className="animate-pulse">{budgetButtonText}</span>
</Button> </Button>
</div>} </div>}
@@ -135,4 +140,4 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
</div>} </div>}
</div>; </div>;
}; };
export default BudgetTabContent; export default BudgetTabContent;