From 443d8a25010a5cb1c3381399196e4cf2c3bc1724 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sat, 8 Mar 2025 08:09:40 +0000
Subject: [PATCH] Implement budget progress visualization

Implement budget progress visualization in the first card, similar to the budget status graph.
---
 src/pages/Index.tsx | 117 ++++++++++++++++++++++++++++++++++----------
 1 file changed, 92 insertions(+), 25 deletions(-)

diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index 538cb59..fd3b9ee 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -1,3 +1,4 @@
+
 import React, { useState } from 'react';
 import NavBar from '@/components/NavBar';
 import BudgetCard from '@/components/BudgetCard';
@@ -57,6 +58,12 @@ const Index = () => {
       maximumFractionDigits: 0
     }).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">
       <div className="max-w-md mx-auto px-6">
         {/* Header */}
@@ -88,15 +95,35 @@ const Index = () => {
             </TabsList>
 
             <TabsContent value="daily" className="space-y-4 mt-0">
-              <div className="space-y-3">
-                <div className="flex justify-between items-center">
-                  <span className="text-gray-500 text-sm">목표 지출 금액</span>
-                  <span className="font-medium">{formatCurrency(budgetData.daily.targetAmount)}</span>
-                </div>
-                <div className="flex justify-between items-center">
-                  <span className="text-gray-500 text-sm">지출 금액</span>
-                  <span className="font-medium text-neuro-expense">{formatCurrency(budgetData.daily.spentAmount)}</span>
+              <div className="space-y-4">
+                <div>
+                  <div className="flex justify-between items-center mb-1">
+                    <span className="text-sm font-medium text-gray-600">목표 지출 금액</span>
+                    <span className="text-sm">{formatCurrency(budgetData.daily.targetAmount)}</span>
+                  </div>
+                  <div className="flex justify-between items-center mb-1">
+                    <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 className="flex justify-between items-center pt-2 border-t border-gray-100">
                   <span className="text-gray-500 text-sm">지출 가능 금액</span>
                   <span className="font-semibold text-neuro-income">{formatCurrency(budgetData.daily.remainingAmount)}</span>
@@ -105,15 +132,35 @@ const Index = () => {
             </TabsContent>
 
             <TabsContent value="weekly" className="space-y-4 mt-0">
-              <div className="space-y-3">
-                <div className="flex justify-between items-center">
-                  <span className="text-gray-500 text-sm">목표 지출 금액</span>
-                  <span className="font-medium">{formatCurrency(budgetData.weekly.targetAmount)}</span>
-                </div>
-                <div className="flex justify-between items-center">
-                  <span className="text-gray-500 text-sm">지출 금액</span>
-                  <span className="font-medium text-neuro-expense">{formatCurrency(budgetData.weekly.spentAmount)}</span>
+              <div className="space-y-4">
+                <div>
+                  <div className="flex justify-between items-center mb-1">
+                    <span className="text-sm font-medium text-gray-600">목표 지출 금액</span>
+                    <span className="text-sm">{formatCurrency(budgetData.weekly.targetAmount)}</span>
+                  </div>
+                  <div className="flex justify-between items-center mb-1">
+                    <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 className="flex justify-between items-center pt-2 border-t border-gray-100">
                   <span className="text-gray-500 text-sm">지출 가능 금액</span>
                   <span className="font-semibold text-neuro-income">{formatCurrency(budgetData.weekly.remainingAmount)}</span>
@@ -122,15 +169,35 @@ const Index = () => {
             </TabsContent>
 
             <TabsContent value="monthly" className="space-y-4 mt-0">
-              <div className="space-y-3">
-                <div className="flex justify-between items-center">
-                  <span className="text-gray-500 text-sm">목표 지출 금액</span>
-                  <span className="font-medium">{formatCurrency(budgetData.monthly.targetAmount)}</span>
-                </div>
-                <div className="flex justify-between items-center">
-                  <span className="text-gray-500 text-sm">지출 금액</span>
-                  <span className="font-medium text-neuro-expense">{formatCurrency(budgetData.monthly.spentAmount)}</span>
+              <div className="space-y-4">
+                <div>
+                  <div className="flex justify-between items-center mb-1">
+                    <span className="text-sm font-medium text-gray-600">목표 지출 금액</span>
+                    <span className="text-sm">{formatCurrency(budgetData.monthly.targetAmount)}</span>
+                  </div>
+                  <div className="flex justify-between items-center mb-1">
+                    <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 className="flex justify-between items-center pt-2 border-t border-gray-100">
                   <span className="text-gray-500 text-sm">지출 가능 금액</span>
                   <span className="font-semibold text-neuro-income">{formatCurrency(budgetData.monthly.remainingAmount)}</span>
@@ -163,4 +230,4 @@ const Index = () => {
       <NavBar />
     </div>;
 };
-export default Index;
\ No newline at end of file
+export default Index;