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 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,35 +5,32 @@ 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, date: '오늘, 12:30 PM',
date: '오늘, 12:30 PM', category: 'shopping',
category: 'shopping', type: 'expense'
type: 'expense' }, {
}, { id: '2',
id: '2', title: '주유소',
title: '주유소', amount: 50000,
amount: 50000, date: '어제, 3:45 PM',
date: '어제, 3:45 PM', category: 'transportation',
category: 'transportation', type: 'expense'
type: 'expense' }, {
}, { id: '3',
id: '3', title: '월급',
title: '월급', amount: 2500000,
amount: 2500000, date: '2일전, 9:00 AM',
date: '2일전, 9:00 AM', category: 'income',
category: 'income', type: 'income'
type: 'income' }];
}
];
// 예산 데이터 - 실제 앱에서는 백엔드에서 가져와야 함 // 예산 데이터 - 실제 앱에서는 백엔드에서 가져와야 함
const budgetData = { const budgetData = {
@@ -54,7 +50,6 @@ 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',
@@ -62,12 +57,11 @@ const Index = () => {
maximumFractionDigits: 0 maximumFractionDigits: 0
}).format(amount); }).format(amount);
}; };
// 퍼센트 계산 함수 // 퍼센트 계산 함수
const calculatePercentage = (spent: number, target: number) => { 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"> 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 */}
@@ -111,18 +105,13 @@ const Index = () => {
</div> </div>
<div className="relative h-3 neuro-pressed overflow-hidden mt-2"> <div className="relative h-3 neuro-pressed overflow-hidden mt-2">
<div <div style={{
className="absolute top-0 left-0 h-full transition-all duration-700 ease-out bg-neuro-accent" width: `${calculatePercentage(budgetData.daily.spentAmount, budgetData.daily.targetAmount)}%`
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>
<div className="mt-2 flex justify-end"> <div className="mt-2 flex justify-end">
<span className={`text-xs font-medium ${ <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) >= 90
? "text-neuro-expense"
: "text-gray-500"
}`}>
{calculatePercentage(budgetData.daily.spentAmount, budgetData.daily.targetAmount)}% {calculatePercentage(budgetData.daily.spentAmount, budgetData.daily.targetAmount)}%
</span> </span>
</div> </div>
@@ -144,18 +133,13 @@ const Index = () => {
</div> </div>
<div className="relative h-3 neuro-pressed overflow-hidden mt-2"> <div className="relative h-3 neuro-pressed overflow-hidden mt-2">
<div <div className="absolute top-0 left-0 h-full transition-all duration-700 ease-out bg-neuro-accent" style={{
className="absolute top-0 left-0 h-full transition-all duration-700 ease-out bg-neuro-accent" width: `${calculatePercentage(budgetData.weekly.spentAmount, budgetData.weekly.targetAmount)}%`
style={{ width: `${calculatePercentage(budgetData.weekly.spentAmount, budgetData.weekly.targetAmount)}%` }} }} />
/>
</div> </div>
<div className="mt-2 flex justify-end"> <div className="mt-2 flex justify-end">
<span className={`text-xs font-medium ${ <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) >= 90
? "text-neuro-expense"
: "text-gray-500"
}`}>
{calculatePercentage(budgetData.weekly.spentAmount, budgetData.weekly.targetAmount)}% {calculatePercentage(budgetData.weekly.spentAmount, budgetData.weekly.targetAmount)}%
</span> </span>
</div> </div>
@@ -177,18 +161,13 @@ const Index = () => {
</div> </div>
<div className="relative h-3 neuro-pressed overflow-hidden mt-2"> <div className="relative h-3 neuro-pressed overflow-hidden mt-2">
<div <div className="absolute top-0 left-0 h-full transition-all duration-700 ease-out bg-neuro-accent" style={{
className="absolute top-0 left-0 h-full transition-all duration-700 ease-out bg-neuro-accent" width: `${calculatePercentage(budgetData.monthly.spentAmount, budgetData.monthly.targetAmount)}%`
style={{ width: `${calculatePercentage(budgetData.monthly.spentAmount, budgetData.monthly.targetAmount)}%` }} }} />
/>
</div> </div>
<div className="mt-2 flex justify-end"> <div className="mt-2 flex justify-end">
<span className={`text-xs font-medium ${ <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) >= 90
? "text-neuro-expense"
: "text-gray-500"
}`}>
{calculatePercentage(budgetData.monthly.spentAmount, budgetData.monthly.targetAmount)}% {calculatePercentage(budgetData.monthly.spentAmount, budgetData.monthly.targetAmount)}%
</span> </span>
</div> </div>
@@ -226,5 +205,4 @@ const Index = () => {
<NavBar /> <NavBar />
</div>; </div>;
}; };
export default Index;
export default Index;