From 315f2e39175f5ac92b61e343430940baedbb82fd Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sat, 15 Mar 2025 04:06:28 +0000
Subject: [PATCH] Refactor: Extract CategoryBudgetInputs

Refactors BudgetTabContent.tsx by extracting the category budget functionality into a separate component. This improves code modularity and maintainability.
---
 src/components/BudgetProgress.tsx       | 40 +++++++++++++
 src/components/BudgetTabContent.tsx     | 80 +------------------------
 src/components/CategoryBudgetInputs.tsx | 52 ++++++++++++++++
 3 files changed, 94 insertions(+), 78 deletions(-)
 create mode 100644 src/components/BudgetProgress.tsx
 create mode 100644 src/components/CategoryBudgetInputs.tsx

diff --git a/src/components/BudgetProgress.tsx b/src/components/BudgetProgress.tsx
new file mode 100644
index 0000000..43ab720
--- /dev/null
+++ b/src/components/BudgetProgress.tsx
@@ -0,0 +1,40 @@
+
+import React from 'react';
+
+interface BudgetProgressProps {
+  spentAmount: number;
+  targetAmount: number;
+  percentage: number;
+  formatCurrency: (amount: number) => string;
+}
+
+const BudgetProgress: React.FC<BudgetProgressProps> = ({
+  spentAmount,
+  targetAmount,
+  percentage,
+  formatCurrency
+}) => {
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-2">
+        <p className="text-lg font-semibold">{formatCurrency(spentAmount)}</p>
+        <p className="text-sm text-gray-500">/ {formatCurrency(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>
+  );
+};
+
+export default BudgetProgress;
diff --git a/src/components/BudgetTabContent.tsx b/src/components/BudgetTabContent.tsx
index 0626251..26aa28e 100644
--- a/src/components/BudgetTabContent.tsx
+++ b/src/components/BudgetTabContent.tsx
@@ -1,9 +1,10 @@
 
 import React, { useState } from 'react';
-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 BudgetProgress from './BudgetProgress';
+import CategoryBudgetInputs from './CategoryBudgetInputs';
 
 interface BudgetData {
   targetAmount: number;
@@ -118,81 +119,4 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
   );
 };
 
-interface BudgetProgressProps {
-  spentAmount: number;
-  targetAmount: number;
-  percentage: number;
-  formatCurrency: (amount: number) => string;
-}
-
-const BudgetProgress: React.FC<BudgetProgressProps> = ({
-  spentAmount,
-  targetAmount,
-  percentage,
-  formatCurrency
-}) => {
-  return (
-    <div>
-      <div className="flex items-center justify-between mb-2">
-        <p className="text-lg font-semibold">{formatCurrency(spentAmount)}</p>
-        <p className="text-sm text-gray-500">/ {formatCurrency(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>
-  );
-};
-
-interface CategoryBudgetInputsProps {
-  categoryBudgets: CategoryBudget;
-  handleCategoryInputChange: (value: string, category: keyof CategoryBudget) => void;
-}
-
-const CategoryBudgetInputs: React.FC<CategoryBudgetInputsProps> = ({
-  categoryBudgets,
-  handleCategoryInputChange
-}) => {
-  return (
-    <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>
-  );
-};
-
 export default BudgetTabContent;
diff --git a/src/components/CategoryBudgetInputs.tsx b/src/components/CategoryBudgetInputs.tsx
new file mode 100644
index 0000000..7d0ccd4
--- /dev/null
+++ b/src/components/CategoryBudgetInputs.tsx
@@ -0,0 +1,52 @@
+
+import React from 'react';
+import { Input } from '@/components/ui/input';
+
+interface CategoryBudget {
+  식비: number;
+  생활비: number;
+  교통비: number;
+}
+
+interface CategoryBudgetInputsProps {
+  categoryBudgets: CategoryBudget;
+  handleCategoryInputChange: (value: string, category: keyof CategoryBudget) => void;
+}
+
+const CategoryBudgetInputs: React.FC<CategoryBudgetInputsProps> = ({
+  categoryBudgets,
+  handleCategoryInputChange
+}) => {
+  return (
+    <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>
+  );
+};
+
+export default CategoryBudgetInputs;