44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
|
|
import React from 'react';
|
|
|
|
interface BudgetProgressProps {
|
|
spentAmount: number;
|
|
targetAmount: number;
|
|
percentage: number;
|
|
formatCurrency: (amount: number) => string;
|
|
}
|
|
|
|
const BudgetProgress: React.FC<BudgetProgressProps> = ({
|
|
spentAmount,
|
|
targetAmount,
|
|
percentage,
|
|
formatCurrency
|
|
}) => {
|
|
// NaN 값을 방지하기 위해 percentage가 숫자가 아닌 경우 0으로 표시
|
|
const displayPercentage = isNaN(percentage) ? 0 : percentage;
|
|
|
|
return (
|
|
<div>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<p className="text-lg font-semibold">{formatCurrency(spentAmount)}</p>
|
|
<p className="text-sm text-gray-500">/ {formatCurrency(targetAmount)}</p>
|
|
</div>
|
|
|
|
<div className="relative h-3 neuro-pressed overflow-hidden mt-2">
|
|
<div
|
|
style={{ width: `${displayPercentage}%` }}
|
|
className={`absolute top-0 left-0 h-full transition-all duration-700 ease-out ${displayPercentage >= 90 ? "bg-yellow-400" : "bg-neuro-income"}`}
|
|
/>
|
|
</div>
|
|
|
|
<div className="mt-2 flex justify-end">
|
|
<span className="text-xs font-medium text-gray-500">
|
|
{displayPercentage}%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default BudgetProgress;
|