Visual edit in Lovable

Edited UI in Lovable

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">
-  return (
+      <BudgetProgress spentAmount={data.spentAmount} targetAmount={data.targetAmount} percentage={percentage} formatCurrency={formatCurrency} />
-    <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 
+            <CategoryBudgetInputs categoryBudgets={categoryBudgets} handleCategoryInputChange={handleCategoryInputChange} />
-              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;