Refactor: Split Index page

Refactor Index.tsx into smaller, more manageable components.
2025-03-15 02:23:57 +00:00
parent 19ecbd2728
commit ae391e606b
6 changed files with 241 additions and 151 deletions
--- a/src/components/BudgetProgressCard.tsx
+++ b/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;