From 136df4a5e9ac432affec9f221d9111c50d113724 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:07:12 +0000
Subject: [PATCH] Visual edit in Lovable

Edited UI in Lovable
---
 src/components/BudgetTabContent.tsx | 34 +++++------------------------
 1 file changed, 6 insertions(+), 28 deletions(-)

diff --git a/src/components/BudgetTabContent.tsx b/src/components/BudgetTabContent.tsx
index 26aa28e..4c9f8a4 100644
--- a/src/components/BudgetTabContent.tsx
+++ b/src/components/BudgetTabContent.tsx
@@ -1,30 +1,25 @@
-
 import React, { useState } from 'react';
 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;
   spentAmount: number;
   remainingAmount: number;
 }
-
 interface CategoryBudget {
   식비: number;
   생활비: number;
   교통비: number;
 }
-
 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,
@@ -34,29 +29,24 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
   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);
@@ -68,15 +58,8 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
   const formatWithCommas = (amount: string) => {
     return amount.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
   };
-
-  return (
-    <div className="space-y-4">
-      <BudgetProgress 
-        spentAmount={data.spentAmount}
-        targetAmount={data.targetAmount}
-        percentage={percentage}
-        formatCurrency={formatCurrency}
-      />
+  return <div className="space-y-4">
+      <BudgetProgress spentAmount={data.spentAmount} targetAmount={data.targetAmount} percentage={percentage} formatCurrency={formatCurrency} />
       
       <div className="flex justify-between items-center pt-2 border-t border-gray-100">
         <span className="text-gray-500 text-sm">남은 예산</span>
@@ -91,10 +74,7 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
           </CollapsibleTrigger>
           
           <CollapsibleContent className="pt-2 space-y-3">
-            <CategoryBudgetInputs 
-              categoryBudgets={categoryBudgets}
-              handleCategoryInputChange={handleCategoryInputChange}
-            />
+            <CategoryBudgetInputs categoryBudgets={categoryBudgets} handleCategoryInputChange={handleCategoryInputChange} />
             
             <div className="flex items-center justify-between pt-2 border-t border-gray-100">
               <div className="flex items-center gap-1">
@@ -111,12 +91,10 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
               </Button>
             </div>
             
-            <p className="text-xs text-gray-500 text-center py-[6px]">총 예산을 설정하면 일일, 주간 예산이 자동으로 계산됩니다.</p>
+            <p className="text-xs text-gray-500 text-center py-[6px]">카테고리 예산을 설정하면 일일, 주간, 월간 예산이 자동으로 합산됩니다.</p>
           </CollapsibleContent>
         </Collapsible>
       </div>
-    </div>
-  );
+    </div>;
 };
-
-export default BudgetTabContent;
+export default BudgetTabContent;
\ No newline at end of file