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

Refactor budget display

Browse Source 
Refactor the budget display to show "목표 진행 상황" in a single line, with the spent amount on the left and the target amount on the right.
This commit is contained in:
gpt-engineer-app[bot]
2025-03-08 08:13:54 +00:00
parent 443d8a2501
commit 753865b875
1 changed files with 42 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/pages/Index.tsx
View File

@@ -1,4 +1,3 @@
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';
@@ -6,11 +5,13 @@ import TransactionCard, { Transaction } from '@/components/TransactionCard';
import AddTransactionButton from '@/components/AddTransactionButton'; import AddTransactionButton from '@/components/AddTransactionButton';
import { Wallet, TrendingUp, Bell } from 'lucide-react'; import { Wallet, TrendingUp, Bell } from 'lucide-react';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
const Index = () => { const Index = () => {
const [selectedTab, setSelectedTab] = useState("daily"); const [selectedTab, setSelectedTab] = useState("daily");
// Sample data - in a real app, this would come from a data source // Sample data - in a real app, this would come from a data source
const transactions: Transaction[] = [{ const transactions: Transaction[] = [
{
id: '1', id: '1',
title: '식료품 구매', title: '식료품 구매',
amount: 25000, amount: 25000,
@@ -31,7 +32,8 @@ const Index = () => {
date: '2일전, 9:00 AM', date: '2일전, 9:00 AM',
category: 'income', category: 'income',
type: 'income' type: 'income'
}]; }
];
// 예산 데이터 - 실제 앱에서는 백엔드에서 가져와야 함 // 예산 데이터 - 실제 앱에서는 백엔드에서 가져와야 함
const budgetData = { const budgetData = {
@@ -51,6 +53,7 @@ const Index = () => {
remainingAmount: 450000 remainingAmount: 450000
} }
}; };
const formatCurrency = (amount: number) => { const formatCurrency = (amount: number) => {
return new Intl.NumberFormat('ko-KR', { return new Intl.NumberFormat('ko-KR', {
style: 'currency', style: 'currency',
@@ -97,13 +100,11 @@ 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>
<div className="flex justify-between items-center mb-1"> <h3 className="text-sm font-medium text-gray-600 mb-1">목표 진행 상황</h3>
<span className="text-sm font-medium text-gray-600">목표 지출 금액</span>
<span className="text-sm">{formatCurrency(budgetData.daily.targetAmount)}</span> <div className="flex items-center justify-between mb-2">
</div> <p className="text-lg font-semibold">{formatCurrency(budgetData.daily.spentAmount)}</p>
<div className="flex justify-between items-center mb-1"> <p className="text-sm text-gray-500">/ {formatCurrency(budgetData.daily.targetAmount)}</p>
<span className="text-sm font-medium text-gray-600">지출 금액</span>
<span className="text-sm text-neuro-expense">{formatCurrency(budgetData.daily.spentAmount)}</span>
</div> </div>
<div className="relative h-3 neuro-pressed overflow-hidden mt-2"> <div className="relative h-3 neuro-pressed overflow-hidden mt-2">
@@ -134,13 +135,11 @@ 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>
<div className="flex justify-between items-center mb-1"> <h3 className="text-sm font-medium text-gray-600 mb-1">목표 진행 상황</h3>
<span className="text-sm font-medium text-gray-600">목표 지출 금액</span>
<span className="text-sm">{formatCurrency(budgetData.weekly.targetAmount)}</span> <div className="flex items-center justify-between mb-2">
</div> <p className="text-lg font-semibold">{formatCurrency(budgetData.weekly.spentAmount)}</p>
<div className="flex justify-between items-center mb-1"> <p className="text-sm text-gray-500">/ {formatCurrency(budgetData.weekly.targetAmount)}</p>
<span className="text-sm font-medium text-gray-600">지출 금액</span>
<span className="text-sm text-neuro-expense">{formatCurrency(budgetData.weekly.spentAmount)}</span>
</div> </div>
<div className="relative h-3 neuro-pressed overflow-hidden mt-2"> <div className="relative h-3 neuro-pressed overflow-hidden mt-2">
@@ -171,13 +170,11 @@ 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>
<div className="flex justify-between items-center mb-1"> <h3 className="text-sm font-medium text-gray-600 mb-1">목표 진행 상황</h3>
<span className="text-sm font-medium text-gray-600">목표 지출 금액</span>
<span className="text-sm">{formatCurrency(budgetData.monthly.targetAmount)}</span> <div className="flex items-center justify-between mb-2">
</div> <p className="text-lg font-semibold">{formatCurrency(budgetData.monthly.spentAmount)}</p>
<div className="flex justify-between items-center mb-1"> <p className="text-sm text-gray-500">/ {formatCurrency(budgetData.monthly.targetAmount)}</p>
<span className="text-sm font-medium text-gray-600">지출 금액</span>
<span className="text-sm text-neuro-expense">{formatCurrency(budgetData.monthly.spentAmount)}</span>
</div> </div>
<div className="relative h-3 neuro-pressed overflow-hidden mt-2"> <div className="relative h-3 neuro-pressed overflow-hidden mt-2">
@@ -230,4 +227,5 @@ const Index = () => {
<NavBar /> <NavBar />
</div>; </div>;
}; };
export default Index; export default Index;