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

Visual edit in Lovable

Browse Source 
Edited UI in Lovable
This commit is contained in:
gpt-engineer-app[bot]
2025-03-08 08:19:28 +00:00
parent 5477a22583
commit c48118c437
1 changed files with 37 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/pages/Index.tsx
View File

@@ -1,4 +1,3 @@
import React, { useState } from 'react';
import NavBar from '@/components/NavBar';
import BudgetCard from '@/components/BudgetCard';
@@ -6,35 +5,32 @@ import TransactionCard, { Transaction } from '@/components/TransactionCard';
import AddTransactionButton from '@/components/AddTransactionButton';
import { Wallet, TrendingUp, Bell } from 'lucide-react';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
const Index = () => {
const [selectedTab, setSelectedTab] = useState("daily");
// Sample data - in a real app, this would come from a data source
const transactions: Transaction[] = [
{
id: '1',
title: '식료품 구매',
amount: 25000,
date: '오늘, 12:30 PM',
category: 'shopping',
type: 'expense'
}, {
id: '2',
title: '주유소',
amount: 50000,
date: '어제, 3:45 PM',
category: 'transportation',
type: 'expense'
}, {
id: '3',
title: '월급',
amount: 2500000,
date: '2일전, 9:00 AM',
category: 'income',
type: 'income'
}
];
const transactions: Transaction[] = [{
id: '1',
title: '식료품 구매',
amount: 25000,
date: '오늘, 12:30 PM',
category: 'shopping',
type: 'expense'
}, {
id: '2',
title: '주유소',
amount: 50000,
date: '어제, 3:45 PM',
category: 'transportation',
type: 'expense'
}, {
id: '3',
title: '월급',
amount: 2500000,
date: '2일전, 9:00 AM',
category: 'income',
type: 'income'
}];
// 예산 데이터 - 실제 앱에서는 백엔드에서 가져와야 함
const budgetData = {
@@ -54,7 +50,6 @@ const Index = () => {
remainingAmount: 450000
}
};
const formatCurrency = (amount: number) => {
return new Intl.NumberFormat('ko-KR', {
style: 'currency',
@@ -62,12 +57,11 @@ const Index = () => {
maximumFractionDigits: 0
}).format(amount);
};
// 퍼센트 계산 함수
const calculatePercentage = (spent: number, target: number) => {
return Math.min(Math.round((spent / target) * 100), 100);
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 */}
@@ -111,18 +105,13 @@ const Index = () => {
</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 style={{
width: `${calculatePercentage(budgetData.daily.spentAmount, budgetData.daily.targetAmount)}%`
}} className="absolute top-0 left-0 h-full transition-all duration-700 ease-out bg-emerald-400" />
</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"
}`}>
<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>
@@ -144,18 +133,13 @@ const Index = () => {
</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 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"
}`}>
<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>
@@ -177,18 +161,13 @@ const Index = () => {
</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 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"
}`}>
<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>
@@ -226,5 +205,4 @@ const Index = () => {
<NavBar />
</div>;
};
export default Index;
export default Index;