208 lines
9.4 KiB
TypeScript
208 lines
9.4 KiB
TypeScript
import React, { useState } from 'react';
|
|
import NavBar from '@/components/NavBar';
|
|
import BudgetCard from '@/components/BudgetCard';
|
|
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 budgetData = {
|
|
daily: {
|
|
targetAmount: 30000,
|
|
spentAmount: 15000,
|
|
remainingAmount: 15000
|
|
},
|
|
weekly: {
|
|
targetAmount: 200000,
|
|
spentAmount: 120000,
|
|
remainingAmount: 80000
|
|
},
|
|
monthly: {
|
|
targetAmount: 1200000,
|
|
spentAmount: 750000,
|
|
remainingAmount: 450000
|
|
}
|
|
};
|
|
const formatCurrency = (amount: number) => {
|
|
return new Intl.NumberFormat('ko-KR', {
|
|
style: 'currency',
|
|
currency: 'KRW',
|
|
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 */}
|
|
<header className="py-8">
|
|
<div className="flex justify-between items-center">
|
|
<div>
|
|
<h1 className="text-2xl font-bold neuro-text">반갑습니다</h1>
|
|
<p className="text-gray-500">적자 탈출 계획</p>
|
|
</div>
|
|
<button className="neuro-flat p-2.5 rounded-full">
|
|
<Bell size={20} className="text-gray-600" />
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
{/* 목표 진행 상황 - 제목을 카드 위로 이동 */}
|
|
<h2 className="text-lg font-semibold mb-3">목표 진행 상황</h2>
|
|
<div className="neuro-card mb-6 overflow-hidden">
|
|
<Tabs defaultValue="daily" value={selectedTab} onValueChange={setSelectedTab} className="w-full">
|
|
<TabsList className="grid grid-cols-3 mb-4 bg-transparent">
|
|
<TabsTrigger value="daily" className="data-[state=active]:shadow-neuro-pressed data-[state=active]:bg-transparent">
|
|
오늘
|
|
</TabsTrigger>
|
|
<TabsTrigger value="weekly" className="data-[state=active]:shadow-neuro-pressed data-[state=active]:bg-transparent">
|
|
주간
|
|
</TabsTrigger>
|
|
<TabsTrigger value="monthly" className="data-[state=active]:shadow-neuro-pressed data-[state=active]:bg-transparent">
|
|
월간
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
{/* 지출액 / 목표액 라벨 추가 */}
|
|
<div className="text-sm text-gray-600 mb-2 px-1">지출액 / 목표액</div>
|
|
|
|
<TabsContent value="daily" className="space-y-4 mt-0">
|
|
<div className="space-y-4">
|
|
<div>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<p className="text-lg font-semibold">{formatCurrency(budgetData.daily.spentAmount)}</p>
|
|
<p className="text-sm text-gray-500">/ {formatCurrency(budgetData.daily.targetAmount)}</p>
|
|
</div>
|
|
|
|
<div className="relative h-3 neuro-pressed overflow-hidden mt-2">
|
|
<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-300" />
|
|
</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>
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="weekly" className="space-y-4 mt-0">
|
|
<div className="space-y-4">
|
|
<div>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<p className="text-lg font-semibold">{formatCurrency(budgetData.weekly.spentAmount)}</p>
|
|
<p className="text-sm text-gray-500">/ {formatCurrency(budgetData.weekly.targetAmount)}</p>
|
|
</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>
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="monthly" className="space-y-4 mt-0">
|
|
<div className="space-y-4">
|
|
<div>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<p className="text-lg font-semibold">{formatCurrency(budgetData.monthly.spentAmount)}</p>
|
|
<p className="text-sm text-gray-500">/ {formatCurrency(budgetData.monthly.targetAmount)}</p>
|
|
</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>
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
|
|
{/* Budget Progress */}
|
|
<h2 className="text-lg font-semibold mb-3 mt-8">예산 현황</h2>
|
|
<div className="grid gap-4 mb-8">
|
|
<BudgetCard title="이번 달 총 예산" current={850000} total={1500000} />
|
|
<BudgetCard title="식비" current={240000} total={400000} color="neuro-accent-light" />
|
|
<BudgetCard title="교통비" current={190000} total={200000} color="neuro-expense" />
|
|
</div>
|
|
|
|
{/* Recent Transactions */}
|
|
<h2 className="text-lg font-semibold mb-3">최근 거래</h2>
|
|
<div className="grid gap-3 mb-6">
|
|
{transactions.map(transaction => <TransactionCard key={transaction.id} transaction={transaction} />)}
|
|
</div>
|
|
|
|
<div className="flex justify-center mb-6">
|
|
<button className="text-neuro-accent font-medium">모든 거래 보기</button>
|
|
</div>
|
|
</div>
|
|
|
|
<AddTransactionButton />
|
|
<NavBar />
|
|
</div>;
|
|
};
|
|
export default Index; |