Visual edit in Lovable

Edited UI in Lovable

src/components/BudgetTabContent.tsx

@@ -1,23 +1,19 @@
-
 import React, { useState, useEffect } from 'react';
 import { CirclePlus, Save, Check } from 'lucide-react';
 import BudgetInputCard from './BudgetInputCard';
 import { Button } from '@/components/ui/button';
 import CategoryBudgetInputs from './CategoryBudgetInputs';
-
 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,
@@ -26,10 +22,9 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
 }) => {
   const [categoryBudgets, setCategoryBudgets] = useState<Record<string, number>>({});
   const [showBudgetInput, setShowBudgetInput] = useState(false);
-  
   const spentAmount = data.spentAmount;
   const targetAmount = data.targetAmount;
-  
+
   // 실제 백분율 계산 (초과해도 실제 퍼센트로 표시)
   const actualPercentage = targetAmount > 0 ? Math.round(spentAmount / targetAmount * 100) : 0;
   const percentage = actualPercentage;
@@ -46,7 +41,6 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
   // 남은 예산 또는 초과 예산 텍스트 및 금액
   const budgetStatusText = isOverBudget ? '예산 초과: ' : '남은 예산: ';
   const budgetAmount = isOverBudget ? formatCurrency(Math.abs(targetAmount - spentAmount)) : formatCurrency(Math.max(0, targetAmount - spentAmount));
-  
   const handleCategoryInputChange = (value: string, category: string) => {
     const numValue = parseInt(value, 10) || 0;
     setCategoryBudgets(prev => ({
@@ -81,7 +75,6 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
       }
     }
   }, [showBudgetInput]);
-
   return <div>
       {targetAmount > 0 ? <>
           <div className="flex justify-between items-center mb-3">
@@ -105,10 +98,7 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
           </div>
           
           <div className="mt-6">
-            <button 
+            <button onClick={() => setShowBudgetInput(true)} className="text-neuro-income hover:underline flex items-center text-lg font-bold group">
-              onClick={() => setShowBudgetInput(true)} 
-              className="text-neuro-income hover:underline flex items-center text-lg font-bold group"
-            >
               <div className="mr-2 bg-neuro-income text-white rounded-full p-1 transition-transform group-hover:scale-110">
                 <CirclePlus size={20} className="animate-pulse" />
               </div> 
@@ -117,11 +107,7 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
           </div>
         </> : <div className="py-4 text-center">
           <div className="text-gray-400 mb-4">아직 예산이 설정되지 않았습니다</div>
-          <Button 
+          <Button onClick={() => setShowBudgetInput(true)} variant="default" className="bg-neuro-income hover:bg-neuro-income/90 animate-pulse shadow-lg">
-            onClick={() => setShowBudgetInput(true)} 
-            variant="default" 
-            className="bg-neuro-income hover:bg-neuro-income/90 animate-pulse shadow-lg"
-          >
             <CirclePlus className="mr-2" size={20} />
             지금 예산 설정하기
           </Button>
@@ -135,16 +121,12 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
               
               <div className="mt-4 border-t pt-3">
                 <div className="flex justify-between items-center mb-4">
-                  <h3 className="text-base font-medium">전체 예산:</h3>
+                  <h3 className="font-medium text-sm px-[34px]">전체 예산:</h3>
-                  <p className="text-lg font-bold text-neuro-income">{formatCurrency(calculateTotalBudget())}</p>
+                  <p className="font-bold text-neuro-income text-base">{formatCurrency(calculateTotalBudget())}</p>
                 </div>
                 
                 <div className="flex justify-end">
-                  <Button 
+                  <Button onClick={handleSaveCategoryBudgets} size="sm" className="bg-neuro-income hover:bg-neuro-income/90 text-white">
-                    onClick={handleSaveCategoryBudgets} 
-                    size="sm" 
-                    className="bg-neuro-income hover:bg-neuro-income/90 text-white"
-                  >
                     <Check size={18} className="mr-1" />
                     저장하기
                   </Button>
@@ -155,5 +137,4 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
         </div>}
     </div>;
 };
-
+export default BudgetTabContent;
-export default BudgetTabContent;