Refactor: Split Index page

Refactor Index.tsx into smaller, more manageable components.

src/components/BudgetCategoriesSection.tsx

@@ -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;

src/components/BudgetProgressCard.tsx

@@ -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;

src/components/Header.tsx

@@ -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;

src/components/RecentTransactionsSection.tsx

@@ -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;