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

Implement budget progress visualization

Browse Source 
Implement budget progress visualization in the first card, similar to the budget status graph.
This commit is contained in:
gpt-engineer-app[bot]
2025-03-08 08:09:40 +00:00
parent 0eee3fe905
commit 443d8a2501
1 changed files with 92 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
src/pages/Index.tsx
View File

@@ -1,3 +1,4 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import NavBar from '@/components/NavBar'; import NavBar from '@/components/NavBar';
import BudgetCard from '@/components/BudgetCard'; import BudgetCard from '@/components/BudgetCard';
@@ -57,6 +58,12 @@ const Index = () => {
maximumFractionDigits: 0 maximumFractionDigits: 0
}).format(amount); }).format(amount);
}; };
// 퍼센트 계산 함수
const calculatePercentage = (spent: number, target: number) => {
return Math.min(Math.round((spent / target) * 100), 100);
};
return <div className="min-h-screen bg-neuro-background pb-24"> return <div className="min-h-screen bg-neuro-background pb-24">
<div className="max-w-md mx-auto px-6"> <div className="max-w-md mx-auto px-6">
{/* Header */} {/* Header */}
@@ -88,15 +95,35 @@ const Index = () => {
</TabsList> </TabsList>
<TabsContent value="daily" className="space-y-4 mt-0"> <TabsContent value="daily" className="space-y-4 mt-0">
<div className="space-y-3"> <div className="space-y-4">
<div className="flex justify-between items-center"> <div>
<span className="text-gray-500 text-sm">목표 지출 금액</span> <div className="flex justify-between items-center mb-1">
<span className="font-medium">{formatCurrency(budgetData.daily.targetAmount)}</span> <span className="text-sm font-medium text-gray-600">목표 지출 금액</span>
</div> <span className="text-sm">{formatCurrency(budgetData.daily.targetAmount)}</span>
<div className="flex justify-between items-center"> </div>
<span className="text-gray-500 text-sm">지출 금액</span> <div className="flex justify-between items-center mb-1">
<span className="font-medium text-neuro-expense">{formatCurrency(budgetData.daily.spentAmount)}</span> <span className="text-sm font-medium text-gray-600">지출 금액</span>
<span className="text-sm text-neuro-expense">{formatCurrency(budgetData.daily.spentAmount)}</span>
</div>
<div className="relative h-3 neuro-pressed overflow-hidden mt-2">
<div
className="absolute top-0 left-0 h-full transition-all duration-700 ease-out bg-neuro-accent"
style={{ width: `${calculatePercentage(budgetData.daily.spentAmount, budgetData.daily.targetAmount)}%` }}
/>
</div>
<div className="mt-2 flex justify-end">
<span className={`text-xs font-medium ${
calculatePercentage(budgetData.daily.spentAmount, budgetData.daily.targetAmount) >= 90
? "text-neuro-expense"
: "text-gray-500"
}`}>
{calculatePercentage(budgetData.daily.spentAmount, budgetData.daily.targetAmount)}%
</span>
</div>
</div> </div>
<div className="flex justify-between items-center pt-2 border-t border-gray-100"> <div className="flex justify-between items-center pt-2 border-t border-gray-100">
<span className="text-gray-500 text-sm">지출 가능 금액</span> <span className="text-gray-500 text-sm">지출 가능 금액</span>
<span className="font-semibold text-neuro-income">{formatCurrency(budgetData.daily.remainingAmount)}</span> <span className="font-semibold text-neuro-income">{formatCurrency(budgetData.daily.remainingAmount)}</span>
@@ -105,15 +132,35 @@ const Index = () => {
</TabsContent> </TabsContent>
<TabsContent value="weekly" className="space-y-4 mt-0"> <TabsContent value="weekly" className="space-y-4 mt-0">
<div className="space-y-3"> <div className="space-y-4">
<div className="flex justify-between items-center"> <div>
<span className="text-gray-500 text-sm">목표 지출 금액</span> <div className="flex justify-between items-center mb-1">
<span className="font-medium">{formatCurrency(budgetData.weekly.targetAmount)}</span> <span className="text-sm font-medium text-gray-600">목표 지출 금액</span>
</div> <span className="text-sm">{formatCurrency(budgetData.weekly.targetAmount)}</span>
<div className="flex justify-between items-center"> </div>
<span className="text-gray-500 text-sm">지출 금액</span> <div className="flex justify-between items-center mb-1">
<span className="font-medium text-neuro-expense">{formatCurrency(budgetData.weekly.spentAmount)}</span> <span className="text-sm font-medium text-gray-600">지출 금액</span>
<span className="text-sm text-neuro-expense">{formatCurrency(budgetData.weekly.spentAmount)}</span>
</div>
<div className="relative h-3 neuro-pressed overflow-hidden mt-2">
<div
className="absolute top-0 left-0 h-full transition-all duration-700 ease-out bg-neuro-accent"
style={{ width: `${calculatePercentage(budgetData.weekly.spentAmount, budgetData.weekly.targetAmount)}%` }}
/>
</div>
<div className="mt-2 flex justify-end">
<span className={`text-xs font-medium ${
calculatePercentage(budgetData.weekly.spentAmount, budgetData.weekly.targetAmount) >= 90
? "text-neuro-expense"
: "text-gray-500"
}`}>
{calculatePercentage(budgetData.weekly.spentAmount, budgetData.weekly.targetAmount)}%
</span>
</div>
</div> </div>
<div className="flex justify-between items-center pt-2 border-t border-gray-100"> <div className="flex justify-between items-center pt-2 border-t border-gray-100">
<span className="text-gray-500 text-sm">지출 가능 금액</span> <span className="text-gray-500 text-sm">지출 가능 금액</span>
<span className="font-semibold text-neuro-income">{formatCurrency(budgetData.weekly.remainingAmount)}</span> <span className="font-semibold text-neuro-income">{formatCurrency(budgetData.weekly.remainingAmount)}</span>
@@ -122,15 +169,35 @@ const Index = () => {
</TabsContent> </TabsContent>
<TabsContent value="monthly" className="space-y-4 mt-0"> <TabsContent value="monthly" className="space-y-4 mt-0">
<div className="space-y-3"> <div className="space-y-4">
<div className="flex justify-between items-center"> <div>
<span className="text-gray-500 text-sm">목표 지출 금액</span> <div className="flex justify-between items-center mb-1">
<span className="font-medium">{formatCurrency(budgetData.monthly.targetAmount)}</span> <span className="text-sm font-medium text-gray-600">목표 지출 금액</span>
</div> <span className="text-sm">{formatCurrency(budgetData.monthly.targetAmount)}</span>
<div className="flex justify-between items-center"> </div>
<span className="text-gray-500 text-sm">지출 금액</span> <div className="flex justify-between items-center mb-1">
<span className="font-medium text-neuro-expense">{formatCurrency(budgetData.monthly.spentAmount)}</span> <span className="text-sm font-medium text-gray-600">지출 금액</span>
<span className="text-sm text-neuro-expense">{formatCurrency(budgetData.monthly.spentAmount)}</span>
</div>
<div className="relative h-3 neuro-pressed overflow-hidden mt-2">
<div
className="absolute top-0 left-0 h-full transition-all duration-700 ease-out bg-neuro-accent"
style={{ width: `${calculatePercentage(budgetData.monthly.spentAmount, budgetData.monthly.targetAmount)}%` }}
/>
</div>
<div className="mt-2 flex justify-end">
<span className={`text-xs font-medium ${
calculatePercentage(budgetData.monthly.spentAmount, budgetData.monthly.targetAmount) >= 90
? "text-neuro-expense"
: "text-gray-500"
}`}>
{calculatePercentage(budgetData.monthly.spentAmount, budgetData.monthly.targetAmount)}%
</span>
</div>
</div> </div>
<div className="flex justify-between items-center pt-2 border-t border-gray-100"> <div className="flex justify-between items-center pt-2 border-t border-gray-100">
<span className="text-gray-500 text-sm">지출 가능 금액</span> <span className="text-gray-500 text-sm">지출 가능 금액</span>
<span className="font-semibold text-neuro-income">{formatCurrency(budgetData.monthly.remainingAmount)}</span> <span className="font-semibold text-neuro-income">{formatCurrency(budgetData.monthly.remainingAmount)}</span>