Update budget button text
Change "예산 수정하기" to "예산 입력하기" when budget is empty and add animation.
This commit is contained in:
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user