Visual edit in Lovable

Edited UI in Lovable

src/components/BudgetTabContent.tsx

@@ -1,4 +1,3 @@
-
 import React, { useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { Check, ChevronDown, ChevronUp, Calculator } from 'lucide-react';
@@ -7,20 +6,17 @@ import BudgetProgress from './BudgetProgress';
 import CategoryBudgetInputs from './CategoryBudgetInputs';
 import { toast } from '@/components/ui/use-toast';
 import { EXPENSE_CATEGORIES } from '@/constants/categoryIcons';
-
 interface BudgetData {
   targetAmount: number;
   spentAmount: number;
   remainingAmount: number;
 }
-
 interface BudgetTabContentProps {
   data: BudgetData;
   formatCurrency: (amount: number) => string;
   calculatePercentage: (spent: number, target: number) => number;
   onSaveBudget: (amount: number, categoryBudgets?: Record<string, number>) => void;
 }
-
 const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
   data,
   formatCurrency,
@@ -34,22 +30,16 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
   // 저장된 카테고리 예산을 불러옵니다
   const savedCategoryBudgets = localStorage.getItem('categoryBudgets');
   const defaultCategoryAmount = data.targetAmount > 0 ? Math.round(data.targetAmount / EXPENSE_CATEGORIES.length) : 0;
-  
+  const initialCategoryBudgets = savedCategoryBudgets ? JSON.parse(savedCategoryBudgets) : EXPENSE_CATEGORIES.reduce((acc, category) => {
-  const initialCategoryBudgets = savedCategoryBudgets 
+    acc[category] = defaultCategoryAmount;
-    ? JSON.parse(savedCategoryBudgets) 
+    return acc;
-    : EXPENSE_CATEGORIES.reduce((acc, category) => {
+  }, {} as Record<string, number>);
-        acc[category] = defaultCategoryAmount;
-        return acc;
-      }, {} as Record<string, number>);
-  
   const [categoryBudgets, setCategoryBudgets] = useState<Record<string, number>>(initialCategoryBudgets);
-
   const handleInputChange = (value: string) => {
     // Remove all non-numeric characters
     const numericValue = value.replace(/[^0-9]/g, '');
     setBudgetInput(numericValue);
   };
-
   const handleCategoryInputChange = (value: string, category: string) => {
     // Remove all non-numeric characters
     const numericValue = value.replace(/[^0-9]/g, '');
@@ -58,19 +48,16 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
       [category]: parseInt(numericValue) || 0
     }));
   };
-
   const handleSave = () => {
     // Calculate total from all categories
     const totalAmount = Object.values(categoryBudgets).reduce((sum, value) => sum + value, 0);
 
     // 카테고리 예산도 함께 전달합니다
     onSaveBudget(totalAmount, categoryBudgets);
-    
     toast({
       title: "예산 설정 완료",
-      description: "카테고리별 예산이 성공적으로 저장되었습니다.",
+      description: "카테고리별 예산이 성공적으로 저장되었습니다."
     });
-    
     setIsOpen(false);
   };
 
@@ -78,7 +65,6 @@ 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} />
       
@@ -90,7 +76,7 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
       <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>
+            <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>
           
@@ -118,5 +104,4 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
       </div>
     </div>;
 };
-
 export default BudgetTabContent;