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

Refactor: Split Index page

Browse Source 
Refactor Index.tsx into smaller, more manageable components.
This commit is contained in:
gpt-engineer-app[bot]
2025-03-15 02:23:57 +00:00
parent 19ecbd2728
commit ae391e606b
6 changed files with 241 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/BudgetCategoriesSection.tsx Normal file
View File

@@ -0,0 +1,32 @@
import React from 'react';
import BudgetCard from '@/components/BudgetCard';
interface BudgetCategoriesSectionProps {
categories: {
title: string;
current: number;
total: number;
}[];
}
const BudgetCategoriesSection: React.FC<BudgetCategoriesSectionProps> = ({ categories }) => {
return (
<>
<h2 className="text-lg font-semibold mb-3 mt-8">지출 카테고리</h2>
<div className="grid gap-4 mb-8">
{categories.map((category, index) => (
<BudgetCard
key={index}
title={category.title}
current={category.current}
total={category.total}
color="neuro-income"
/>
))}
</div>
</>
);
};
export default BudgetCategoriesSection;

114
src/components/BudgetProgressCard.tsx Normal file
View File

@@ -0,0 +1,114 @@
import React from 'react';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
interface BudgetData {
targetAmount: number;
spentAmount: number;
remainingAmount: number;
}
interface BudgetProgressCardProps {
budgetData: {
daily: BudgetData;
weekly: BudgetData;
monthly: BudgetData;
};
selectedTab: string;
setSelectedTab: (value: string) => void;
formatCurrency: (amount: number) => string;
calculatePercentage: (spent: number, target: number) => number;
}
const BudgetProgressCard: React.FC<BudgetProgressCardProps> = ({
budgetData,
selectedTab,
setSelectedTab,
formatCurrency,
calculatePercentage
}) => {
return (
<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">
<BudgetTabContent
data={budgetData.daily}
formatCurrency={formatCurrency}
calculatePercentage={calculatePercentage}
/>
</TabsContent>
<TabsContent value="weekly" className="space-y-4 mt-0">
<BudgetTabContent
data={budgetData.weekly}
formatCurrency={formatCurrency}
calculatePercentage={calculatePercentage}
/>
</TabsContent>
<TabsContent value="monthly" className="space-y-4 mt-0">
<BudgetTabContent
data={budgetData.monthly}
formatCurrency={formatCurrency}
calculatePercentage={calculatePercentage}
/>
</TabsContent>
</Tabs>
</div>
);
};
interface BudgetTabContentProps {
data: BudgetData;
formatCurrency: (amount: number) => string;
calculatePercentage: (spent: number, target: number) => number;
}
const BudgetTabContent: React.FC<BudgetTabContentProps> = ({ data, formatCurrency, calculatePercentage }) => {
const percentage = calculatePercentage(data.spentAmount, data.targetAmount);
return (
<div className="space-y-4">
<div>
<div className="flex items-center justify-between mb-2">
<p className="text-lg font-semibold">{formatCurrency(data.spentAmount)}</p>
<p className="text-sm text-gray-500">/ {formatCurrency(data.targetAmount)}</p>
</div>
<div className="relative h-3 neuro-pressed overflow-hidden mt-2">
<div
style={{ width: `${percentage}%` }}
className="absolute top-0 left-0 h-full transition-all duration-700 ease-out bg-neuro-income"
/>
</div>
<div className="mt-2 flex justify-end">
<span className={`text-xs font-medium ${percentage >= 90 ? "text-neuro-expense" : "text-gray-500"}`}>
{percentage}%
</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(data.remainingAmount)}</span>
</div>
</div>
);
};
export default BudgetProgressCard;

21
src/components/Header.tsx Normal file
View File

@@ -0,0 +1,21 @@
import React from 'react';
import { Bell } from 'lucide-react';
const Header: React.FC = () => {
return (
<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>
);
};
export default Header;

26
src/components/RecentTransactionsSection.tsx Normal file
View File

@@ -0,0 +1,26 @@
import React from 'react';
import TransactionCard, { Transaction } from '@/components/TransactionCard';
interface RecentTransactionsSectionProps {
transactions: Transaction[];
}
const RecentTransactionsSection: React.FC<RecentTransactionsSectionProps> = ({ transactions }) => {
return (
<>
<h2 className="text-lg font-semibold mb-3 mt-8">최근 지출</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-income font-medium">모든 거래 보기</button>
</div>
</>
);
};
export default RecentTransactionsSection;

187
src/pages/Index.tsx
View File

@@ -1,12 +1,15 @@
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 BudgetInputCard from '@/components/BudgetInputCard'; import BudgetInputCard from '@/components/BudgetInputCard';
import TransactionCard, { Transaction } from '@/components/TransactionCard';
import AddTransactionButton from '@/components/AddTransactionButton'; import AddTransactionButton from '@/components/AddTransactionButton';
import { Bell } from 'lucide-react'; import Header from '@/components/Header';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import BudgetProgressCard from '@/components/BudgetProgressCard';
import BudgetCategoriesSection from '@/components/BudgetCategoriesSection';
import RecentTransactionsSection from '@/components/RecentTransactionsSection';
import { formatCurrency, calculatePercentage } from '@/utils/formatters';
import { toast } from '@/components/ui/use-toast'; import { toast } from '@/components/ui/use-toast';
import { Transaction } from '@/components/TransactionCard';
const Index = () => { const Index = () => {
const [selectedTab, setSelectedTab] = useState("daily"); const [selectedTab, setSelectedTab] = useState("daily");
@@ -53,18 +56,12 @@ const Index = () => {
remainingAmount: 450000 remainingAmount: 450000
} }
}); });
const formatCurrency = (amount: number) => {
return new Intl.NumberFormat('ko-KR', {
style: 'currency',
currency: 'KRW',
maximumFractionDigits: 0
}).format(amount);
};
// 퍼센트 계산 함수 const categories = [
const calculatePercentage = (spent: number, target: number) => { { title: '식비', current: 240000, total: 400000 },
return Math.min(Math.round(spent / target * 100), 100); { title: '생활비', current: 350000, total: 600000 },
}; { title: '교통비', current: 190000, total: 200000 },
];
// 예산 목표 업데이트 함수 // 예산 목표 업데이트 함수
const handleBudgetGoalUpdate = (type: 'daily' | 'weekly' | 'monthly', amount: number) => { const handleBudgetGoalUpdate = (type: 'daily' | 'weekly' | 'monthly', amount: number) => {
@@ -79,161 +76,49 @@ const Index = () => {
} }
}; };
}); });
toast({ toast({
title: "목표 업데이트 완료", title: "목표 업데이트 완료",
description: `${type === 'daily' ? '일일' : type === 'weekly' ? '주간' : '월간'} 목표가 ${amount.toLocaleString()}원으로 설정되었습니다.` description: `${type === 'daily' ? '일일' : type === 'weekly' ? '주간' : '월간'} 목표가 ${amount.toLocaleString()}원으로 설정되었습니다.`
}); });
}; };
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 />
<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> <h2 className="text-lg font-semibold mb-3">예산과 지출</h2>
<div className="neuro-card mb-6 overflow-hidden"> <BudgetProgressCard
<Tabs defaultValue="daily" value={selectedTab} onValueChange={setSelectedTab} className="w-full"> budgetData={budgetData}
<TabsList className="grid grid-cols-3 mb-4 bg-transparent"> selectedTab={selectedTab}
<TabsTrigger value="daily" className="data-[state=active]:shadow-neuro-pressed data-[state=active]:bg-transparent"> setSelectedTab={setSelectedTab}
오늘 formatCurrency={formatCurrency}
</TabsTrigger> calculatePercentage={calculatePercentage}
<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-neuro-income" />
</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 style={{
width: `${calculatePercentage(budgetData.weekly.spentAmount, budgetData.weekly.targetAmount)}%`
}} className="absolute top-0 left-0 h-full transition-all duration-700 ease-out bg-neuro-income" />
</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 style={{
width: `${calculatePercentage(budgetData.monthly.spentAmount, budgetData.monthly.targetAmount)}%`
}} className="absolute top-0 left-0 h-full transition-all duration-700 ease-out bg-neuro-income" />
</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>
{/* 지출 카테고리 */} {/* 지출 카테고리 */}
<h2 className="text-lg font-semibold mb-3 mt-8">지출 카테고리</h2> <BudgetCategoriesSection categories={categories} />
<div className="grid gap-4 mb-8">
<BudgetCard title="식비" current={240000} total={400000} color="neuro-income" />
<BudgetCard title="생활비" current={350000} total={600000} color="neuro-income" />
<BudgetCard title="교통비" current={190000} total={200000} color="neuro-income" />
</div>
{/* 예산 입력 카드 - 이제는 접힌 상태로 표시됩니다 */} {/* 예산 입력 카드 */}
<BudgetInputCard initialBudgets={{ <BudgetInputCard
daily: budgetData.daily.targetAmount, initialBudgets={{
weekly: budgetData.weekly.targetAmount, daily: budgetData.daily.targetAmount,
monthly: budgetData.monthly.targetAmount weekly: budgetData.weekly.targetAmount,
}} onSave={handleBudgetGoalUpdate} /> monthly: budgetData.monthly.targetAmount
}}
onSave={handleBudgetGoalUpdate}
/>
{/* 최근 지출 */} {/* 최근 지출 */}
<h2 className="text-lg font-semibold mb-3 mt-8">최근 지출</h2> <RecentTransactionsSection transactions={transactions} />
<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-income font-medium">모든 거래 보기</button>
</div>
</div> </div>
<AddTransactionButton /> <AddTransactionButton />
<NavBar /> <NavBar />
</div>; </div>
);
}; };
export default Index; export default Index;

12
src/utils/formatters.ts Normal file
View File

@@ -0,0 +1,12 @@
export const formatCurrency = (amount: number): string => {
return new Intl.NumberFormat('ko-KR', {
style: 'currency',
currency: 'KRW',
maximumFractionDigits: 0
}).format(amount);
};
export const calculatePercentage = (spent: number, target: number): number => {
return Math.min(Math.round(spent / target * 100), 100);
};