ZELLYY/zellyy-finance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Display remaining budget in graph

Browse Source 
Display the remaining budget amount in the expense graph section.
This commit is contained in:
gpt-engineer-app[bot]
2025-03-17 11:53:43 +00:00
parent 64da436552
commit bbcea786be
1 changed files with 35 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/BudgetCategoriesSection.tsx
View File

@@ -17,34 +17,43 @@ const BudgetCategoriesSection: React.FC<BudgetCategoriesSectionProps> = ({
return <>
<h2 className="text-lg font-semibold mb-3 mt-8">지출 그래프</h2>
<div className="neuro-card mb-8">
{categories.map((category, index) => (
<div key={index} className={`${index !== 0 ? 'mt-4 pt-4 border-t border-gray-100' : ''}`}>
<div className="flex items-center gap-2 mb-1">
<div className="text-neuro-income">
{categoryIcons[category.title]}
{categories.map((category, index) => {
// 남은 예산 계산 (음수가 되지 않도록)
const remaining = Math.max(0, category.total - category.current);
const percentage = Math.min(Math.round((category.current / category.total) * 100), 100);
return (
<div key={index} className={`${index !== 0 ? 'mt-4 pt-4 border-t border-gray-100' : ''}`}>
<div className="flex items-center gap-2 mb-1">
<div className="text-neuro-income">
{categoryIcons[category.title]}
</div>
<h3 className="text-sm font-medium text-gray-600">{category.title}</h3>
</div>
<h3 className="text-sm font-medium text-gray-600">{category.title}</h3>
</div>
<div className="flex items-center justify-between mb-2">
<p className="text-lg font-semibold">{formatCurrency(category.current)}</p>
<p className="text-sm text-gray-500">/ {formatCurrency(category.total)}</p>
</div>
<div className="flex items-center justify-between mb-2">
<p className="text-lg font-semibold">{formatCurrency(category.current)}</p>
<p className="text-sm text-gray-500">/ {formatCurrency(category.total)}</p>
</div>
<div className="relative h-3 neuro-pressed overflow-hidden">
<div
className={`absolute top-0 left-0 h-full transition-all duration-700 ease-out bg-neuro-income`}
style={{ width: `${Math.min(Math.round((category.current / category.total) * 100), 100)}%` }}
/>
</div>
<div className="relative h-3 neuro-pressed overflow-hidden">
<div
className={`absolute top-0 left-0 h-full transition-all duration-700 ease-out bg-neuro-income`}
style={{ width: `${percentage}%` }}
/>
</div>
<div className="mt-2 flex justify-end">
<span className="text-xs font-medium text-gray-500">
{Math.min(Math.round((category.current / category.total) * 100), 100)}%
</span>
<div className="mt-2 flex justify-between items-center">
<span className="text-xs text-neuro-income font-medium">
남은 예산: {formatCurrency(remaining)}
</span>
<span className="text-xs font-medium text-gray-500">
{percentage}%
</span>
</div>
</div>
</div>
))}
);
})}
</div>
</>;
};