Refactor BudgetProgressCard component

Refactor BudgetProgressCard into smaller, more manageable components. Move BudgetTabContent to its own file. This improves code readability and maintainability.

src/components/BudgetProgressCard.tsx

@@ -1,9 +1,7 @@
-import React, { useState } from 'react';
+
+import React from 'react';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { Input } from '@/components/ui/input';
-import { Button } from '@/components/ui/button';
-import { Check, ChevronDown, ChevronUp, Calculator } from 'lucide-react';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import BudgetTabContent from './BudgetTabContent';
 
 interface BudgetData {
   targetAmount: number;
@@ -11,12 +9,6 @@ interface BudgetData {
   remainingAmount: number;
 }
 
-interface CategoryBudget {
-  식비: number;
-  생활비: number;
-  교통비: number;
-}
-
 interface BudgetProgressCardProps {
   budgetData: {
     daily: BudgetData;
@@ -38,7 +30,8 @@ const BudgetProgressCard: React.FC<BudgetProgressCardProps> = ({
   calculatePercentage,
   onSaveBudget
 }) => {
-  return <div className="neuro-card mb-6 overflow-hidden">
+  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">
@@ -55,153 +48,34 @@ const BudgetProgressCard: React.FC<BudgetProgressCardProps> = ({
         <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} onSaveBudget={amount => onSaveBudget('daily', amount)} />
+          <BudgetTabContent 
+            data={budgetData.daily} 
+            formatCurrency={formatCurrency} 
+            calculatePercentage={calculatePercentage} 
+            onSaveBudget={amount => onSaveBudget('daily', amount)} 
+          />
         </TabsContent>
 
         <TabsContent value="weekly" className="space-y-4 mt-0">
-          <BudgetTabContent data={budgetData.weekly} formatCurrency={formatCurrency} calculatePercentage={calculatePercentage} onSaveBudget={amount => onSaveBudget('weekly', amount)} />
+          <BudgetTabContent 
+            data={budgetData.weekly} 
+            formatCurrency={formatCurrency} 
+            calculatePercentage={calculatePercentage} 
+            onSaveBudget={amount => onSaveBudget('weekly', amount)} 
+          />
         </TabsContent>
 
         <TabsContent value="monthly" className="space-y-4 mt-0">
-          <BudgetTabContent data={budgetData.monthly} formatCurrency={formatCurrency} calculatePercentage={calculatePercentage} onSaveBudget={amount => onSaveBudget('monthly', amount)} />
+          <BudgetTabContent 
+            data={budgetData.monthly} 
+            formatCurrency={formatCurrency} 
+            calculatePercentage={calculatePercentage} 
+            onSaveBudget={amount => onSaveBudget('monthly', amount)} 
+          />
         </TabsContent>
       </Tabs>
-    </div>;
-};
-
-interface BudgetTabContentProps {
-  data: BudgetData;
-  formatCurrency: (amount: number) => string;
-  calculatePercentage: (spent: number, target: number) => number;
-  onSaveBudget: (amount: number) => void;
-}
-
-const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
-  data,
-  formatCurrency,
-  calculatePercentage,
-  onSaveBudget
-}) => {
-  const percentage = calculatePercentage(data.spentAmount, data.targetAmount);
-  const [isOpen, setIsOpen] = useState(false);
-  const [budgetInput, setBudgetInput] = useState(data.targetAmount.toString());
-  
-  const [categoryBudgets, setCategoryBudgets] = useState<CategoryBudget>({
-    식비: Math.round(data.targetAmount * 0.4),
-    생활비: Math.round(data.targetAmount * 0.4),
-    교통비: Math.round(data.targetAmount * 0.2)
-  });
-
-  const handleInputChange = (value: string) => {
-    // Remove all non-numeric characters
-    const numericValue = value.replace(/[^0-9]/g, '');
-    setBudgetInput(numericValue);
-  };
-
-  const handleCategoryInputChange = (value: string, category: keyof CategoryBudget) => {
-    // Remove all non-numeric characters
-    const numericValue = value.replace(/[^0-9]/g, '');
-    
-    setCategoryBudgets(prev => ({
-      ...prev,
-      [category]: parseInt(numericValue) || 0
-    }));
-  };
-
-  const handleSave = () => {
-    // Calculate total from all categories
-    const totalAmount = Object.values(categoryBudgets).reduce((sum, value) => sum + value, 0);
-    onSaveBudget(totalAmount);
-    setIsOpen(false);
-  };
-
-  // Format with commas for display
-  const formatWithCommas = (amount: string) => {
-    return amount.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-  };
-
-  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 ${percentage >= 90 ? "bg-yellow-400" : "bg-neuro-income"}`} />
-        </div>
-        
-        <div className="mt-2 flex justify-end">
-          <span className="text-xs font-medium 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 className="pt-2 border-t border-gray-100">
-        <Collapsible open={isOpen} onOpenChange={setIsOpen}>
-          <CollapsibleTrigger className="flex items-center justify-between w-full px-1 text-left py-[10px]">
-            <span className="text-sm font-medium text-gray-600">카테고리별 예산 설정하기</span>
-            {isOpen ? <ChevronUp size={16} className="text-gray-500" /> : <ChevronDown size={16} className="text-gray-500" />}
-          </CollapsibleTrigger>
-          
-          <CollapsibleContent className="pt-2 space-y-3">
-            <div className="space-y-2">
-              <div className="flex items-center justify-between">
-                <label className="text-sm text-gray-600">식비</label>
-                <Input 
-                  value={categoryBudgets.식비.toString()} 
-                  onChange={e => handleCategoryInputChange(e.target.value, '식비')} 
-                  className="neuro-pressed max-w-[150px]" 
-                />
-              </div>
-              
-              <div className="flex items-center justify-between">
-                <label className="text-sm text-gray-600">생활비</label>
-                <Input 
-                  value={categoryBudgets.생활비.toString()} 
-                  onChange={e => handleCategoryInputChange(e.target.value, '생활비')} 
-                  className="neuro-pressed max-w-[150px]" 
-                />
-              </div>
-              
-              <div className="flex items-center justify-between">
-                <label className="text-sm text-gray-600">교통비</label>
-                <Input 
-                  value={categoryBudgets.교통비.toString()} 
-                  onChange={e => handleCategoryInputChange(e.target.value, '교통비')} 
-                  className="neuro-pressed max-w-[150px]" 
-                />
-              </div>
-            </div>
-            
-            <div className="flex items-center justify-between pt-2 border-t border-gray-100">
-              <div className="flex items-center gap-1">
-                <Calculator size={16} className="text-gray-500" />
-                <span className="text-sm font-medium">총 예산:</span>
-              </div>
-              <span className="font-semibold">{formatCurrency(Object.values(categoryBudgets).reduce((sum, value) => sum + value, 0))}</span>
-            </div>
-            
-            <div className="flex justify-end">
-              <Button onClick={handleSave} size="sm" className="neuro-flat text-slate-50 bg-neuro-income hover:bg-neuro-income/90">
-                <Check size={16} className="mr-1" />
-                저장하기
-              </Button>
-            </div>
-            
-            <p className="text-xs text-gray-500 text-center py-[6px]">총 예산을 설정하면 일일, 주간 예산이 자동으로 계산됩니다.</p>
-          </CollapsibleContent>
-        </Collapsible>
-      </div>
-    </div>;
+    </div>
+  );
 };
 
 export default BudgetProgressCard;