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

Refactor budget card component

Browse Source 
Moves the title above the card and updates the progress display.
This commit is contained in:
gpt-engineer-app[bot]
2025-03-08 08:16:15 +00:00
parent 753865b875
commit f3edb2d0a3
1 changed files with 3 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
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';
@@ -82,7 +83,8 @@ const Index = () => {
</div> </div>
</header> </header>
{/* 예산 카드 - 탭 추가 */} {/* 목표 진행 상황 - 제목을 카드 위로 이동 */}
<h2 className="text-lg font-semibold mb-3">목표 진행 상황</h2>
<div className="neuro-card mb-6 overflow-hidden"> <div className="neuro-card mb-6 overflow-hidden">
<Tabs defaultValue="daily" value={selectedTab} onValueChange={setSelectedTab} className="w-full"> <Tabs defaultValue="daily" value={selectedTab} onValueChange={setSelectedTab} className="w-full">
<TabsList className="grid grid-cols-3 mb-4 bg-transparent"> <TabsList className="grid grid-cols-3 mb-4 bg-transparent">
@@ -100,8 +102,6 @@ const Index = () => {
<TabsContent value="daily" className="space-y-4 mt-0"> <TabsContent value="daily" className="space-y-4 mt-0">
<div className="space-y-4"> <div className="space-y-4">
<div> <div>
<h3 className="text-sm font-medium text-gray-600 mb-1">목표 진행 상황</h3>
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
<p className="text-lg font-semibold">{formatCurrency(budgetData.daily.spentAmount)}</p> <p className="text-lg font-semibold">{formatCurrency(budgetData.daily.spentAmount)}</p>
<p className="text-sm text-gray-500">/ {formatCurrency(budgetData.daily.targetAmount)}</p> <p className="text-sm text-gray-500">/ {formatCurrency(budgetData.daily.targetAmount)}</p>
@@ -135,8 +135,6 @@ const Index = () => {
<TabsContent value="weekly" className="space-y-4 mt-0"> <TabsContent value="weekly" className="space-y-4 mt-0">
<div className="space-y-4"> <div className="space-y-4">
<div> <div>
<h3 className="text-sm font-medium text-gray-600 mb-1">목표 진행 상황</h3>
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
<p className="text-lg font-semibold">{formatCurrency(budgetData.weekly.spentAmount)}</p> <p className="text-lg font-semibold">{formatCurrency(budgetData.weekly.spentAmount)}</p>
<p className="text-sm text-gray-500">/ {formatCurrency(budgetData.weekly.targetAmount)}</p> <p className="text-sm text-gray-500">/ {formatCurrency(budgetData.weekly.targetAmount)}</p>
@@ -170,8 +168,6 @@ const Index = () => {
<TabsContent value="monthly" className="space-y-4 mt-0"> <TabsContent value="monthly" className="space-y-4 mt-0">
<div className="space-y-4"> <div className="space-y-4">
<div> <div>
<h3 className="text-sm font-medium text-gray-600 mb-1">목표 진행 상황</h3>
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
<p className="text-lg font-semibold">{formatCurrency(budgetData.monthly.spentAmount)}</p> <p className="text-lg font-semibold">{formatCurrency(budgetData.monthly.spentAmount)}</p>
<p className="text-sm text-gray-500">/ {formatCurrency(budgetData.monthly.targetAmount)}</p> <p className="text-sm text-gray-500">/ {formatCurrency(budgetData.monthly.targetAmount)}</p>