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;

src/pages/Index.tsx

@@ -1,12 +1,15 @@
+
 import React, { useState } from 'react';
 import NavBar from '@/components/NavBar';
-import BudgetCard from '@/components/BudgetCard';
 import BudgetInputCard from '@/components/BudgetInputCard';
-import TransactionCard, { Transaction } from '@/components/TransactionCard';
 import AddTransactionButton from '@/components/AddTransactionButton';
-import { Bell } from 'lucide-react';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import Header from '@/components/Header';
+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 { Transaction } from '@/components/TransactionCard';
 
 const Index = () => {
   const [selectedTab, setSelectedTab] = useState("daily");
@@ -53,18 +56,12 @@ const Index = () => {
       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);
-  };
+  const categories = [
+    { title: '식비', current: 240000, total: 400000 },
+    { title: '생활비', current: 350000, total: 600000 },
+    { title: '교통비', current: 190000, total: 200000 },
+  ];
 
   // 예산 목표 업데이트 함수
   const handleBudgetGoalUpdate = (type: 'daily' | 'weekly' | 'monthly', amount: number) => {
@@ -79,161 +76,49 @@ const Index = () => {
         }
       };
     });
+    
     toast({
       title: "목표 업데이트 완료",
       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">
-        {/* 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>
+        <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-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>
+        <BudgetProgressCard 
+          budgetData={budgetData}
+          selectedTab={selectedTab}
+          setSelectedTab={setSelectedTab}
+          formatCurrency={formatCurrency}
+          calculatePercentage={calculatePercentage}
+        />
 
         {/* 지출 카테고리 */}
-        <h2 className="text-lg font-semibold mb-3 mt-8">지출 카테고리</h2>
-        <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>
+        <BudgetCategoriesSection categories={categories} />
 
-        {/* 예산 입력 카드 - 이제는 접힌 상태로 표시됩니다 */}
-        <BudgetInputCard initialBudgets={{
-          daily: budgetData.daily.targetAmount,
-          weekly: budgetData.weekly.targetAmount,
-          monthly: budgetData.monthly.targetAmount
-        }} onSave={handleBudgetGoalUpdate} />
+        {/* 예산 입력 카드 */}
+        <BudgetInputCard 
+          initialBudgets={{
+            daily: budgetData.daily.targetAmount,
+            weekly: budgetData.weekly.targetAmount,
+            monthly: budgetData.monthly.targetAmount
+          }} 
+          onSave={handleBudgetGoalUpdate} 
+        />
 
         {/* 최근 지출 */}
-        <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>
+        <RecentTransactionsSection transactions={transactions} />
       </div>
 
       <AddTransactionButton />
       <NavBar />
-    </div>;
+    </div>
+  );
 };
 
 export default Index;

src/utils/formatters.ts

@@ -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);
+};