Visual edit in Lovable

Edited UI in Lovable

src/components/BudgetProgressCard.tsx

@@ -1,17 +1,14 @@
-
 import React, { useState } from 'react';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { Check, ChevronDown, ChevronUp } from 'lucide-react';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
-
 interface BudgetData {
   targetAmount: number;
   spentAmount: number;
   remainingAmount: number;
 }
-
 interface BudgetProgressCardProps {
   budgetData: {
     daily: BudgetData;
@@ -24,7 +21,6 @@ interface BudgetProgressCardProps {
   calculatePercentage: (spent: number, target: number) => number;
   onSaveBudget: (type: 'daily' | 'weekly' | 'monthly', amount: number) => void;
 }
-
 const BudgetProgressCard: React.FC<BudgetProgressCardProps> = ({
   budgetData,
   selectedTab,
@@ -63,14 +59,12 @@ const BudgetProgressCard: React.FC<BudgetProgressCardProps> = ({
       </Tabs>
     </div>;
 };
-
 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,
@@ -80,13 +74,11 @@ 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 handleInputChange = (value: string) => {
     // Remove all non-numeric characters
     const numericValue = value.replace(/[^0-9]/g, '');
     setBudgetInput(numericValue);
   };
-  
   const handleSave = () => {
     const amount = parseInt(budgetInput, 10) || 0;
     onSaveBudget(amount);
@@ -97,7 +89,6 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
   const formatWithCommas = (amount: string) => {
     return amount.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
   };
-  
   return <div className="space-y-4">
       <div>
         <div className="flex items-center justify-between mb-2">
@@ -125,8 +116,8 @@ 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 py-2 text-left">
+          <CollapsibleTrigger className="flex items-center justify-between w-full px-1 text-left py-[12px]">
-            <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>
           
@@ -137,11 +128,10 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
                 <Check size={18} />
               </Button>
             </div>
-            <p className="text-xs text-gray-500 mt-1 text-center">월간 예산을 입력하면 일일, 주간 예산이 자동으로 입력됩니다.</p>
+            <p className="text-xs text-gray-500 mt-1 text-center py-[6px]">월간 예산을 입력하면 일일, 주간 예산이 자동으로 입력됩니다.</p>
           </CollapsibleContent>
         </Collapsible>
       </div>
     </div>;
 };
-
+export default BudgetProgressCard;
-export default BudgetProgressCard;