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,
@@ -33,8 +29,7 @@ const BudgetProgressCard: React.FC<BudgetProgressCardProps> = ({
   calculatePercentage,
   onSaveBudget
 }) => {
-  return (
+  return <div className="neuro-card mb-6 overflow-hidden">
-    <div className="neuro-card mb-6 overflow-hidden">
       <Tabs defaultValue="daily" value={selectedTab} onValueChange={setSelectedTab} className="w-full">
         <TabsList className="grid grid-cols-3 mb-4 bg-transparent">
           <TabsTrigger value="daily" className="data-[state=active]:shadow-neuro-pressed data-[state=active]:bg-transparent">
@@ -51,59 +46,39 @@ const BudgetProgressCard: React.FC<BudgetProgressCardProps> = ({
         <div className="text-sm text-gray-600 mb-2 px-1">지출 / 예산</div>
 
         <TabsContent value="daily" className="space-y-4 mt-0">
-          <BudgetTabContent 
+          <BudgetTabContent data={budgetData.daily} formatCurrency={formatCurrency} calculatePercentage={calculatePercentage} onSaveBudget={amount => onSaveBudget('daily', amount)} />
-            data={budgetData.daily} 
-            formatCurrency={formatCurrency} 
-            calculatePercentage={calculatePercentage}
-            onSaveBudget={(amount) => onSaveBudget('daily', amount)} 
-          />
         </TabsContent>
 
         <TabsContent value="weekly" className="space-y-4 mt-0">
-          <BudgetTabContent 
+          <BudgetTabContent data={budgetData.weekly} formatCurrency={formatCurrency} calculatePercentage={calculatePercentage} onSaveBudget={amount => onSaveBudget('weekly', amount)} />
-            data={budgetData.weekly} 
-            formatCurrency={formatCurrency} 
-            calculatePercentage={calculatePercentage}
-            onSaveBudget={(amount) => onSaveBudget('weekly', amount)} 
-          />
         </TabsContent>
 
         <TabsContent value="monthly" className="space-y-4 mt-0">
-          <BudgetTabContent 
+          <BudgetTabContent data={budgetData.monthly} formatCurrency={formatCurrency} calculatePercentage={calculatePercentage} onSaveBudget={amount => onSaveBudget('monthly', amount)} />
-            data={budgetData.monthly} 
-            formatCurrency={formatCurrency} 
-            calculatePercentage={calculatePercentage}
-            onSaveBudget={(amount) => onSaveBudget('monthly', amount)} 
-          />
         </TabsContent>
       </Tabs>
-    </div>
+    </div>;
-  );
 };
-
 interface BudgetTabContentProps {
   data: BudgetData;
   formatCurrency: (amount: number) => string;
   calculatePercentage: (spent: number, target: number) => number;
   onSaveBudget: (amount: number) => void;
 }
-
+const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
-const BudgetTabContent: React.FC<BudgetTabContentProps> = ({ 
+  data,
-  data, 
+  formatCurrency,
-  formatCurrency, 
   calculatePercentage,
   onSaveBudget
 }) => {
   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);
@@ -114,9 +89,7 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
   const formatWithCommas = (amount: string) => {
     return amount.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
   };
-  
+  return <div className="space-y-4">
-  return (
-    <div className="space-y-4">
       <div>
         <div className="flex items-center justify-between mb-2">
           <p className="text-lg font-semibold">{formatCurrency(data.spentAmount)}</p>
@@ -124,12 +97,9 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
         </div>
         
         <div className="relative h-3 neuro-pressed overflow-hidden mt-2">
-          <div 
+          <div style={{
-            style={{ width: `${percentage}%` }} 
+          width: `${percentage}%`
-            className={`absolute top-0 left-0 h-full transition-all duration-700 ease-out ${
+        }} className={`absolute top-0 left-0 h-full transition-all duration-700 ease-out ${percentage >= 90 ? "bg-yellow-400" : "bg-neuro-income"}`} />
-              percentage >= 90 ? "bg-yellow-400" : "bg-neuro-income"
-            }`}
-          />
         </div>
         
         <div className="mt-2 flex justify-end">
@@ -147,27 +117,14 @@ 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">
-            <span className="text-sm font-medium text-gray-600">예산 목표 설정하기</span>
+            <span className="text-sm font-medium text-gray-600">예산 설정하기</span>
-            {isOpen ? (
+            {isOpen ? <ChevronUp size={16} className="text-gray-500" /> : <ChevronDown size={16} className="text-gray-500" />}
-              <ChevronUp size={16} className="text-gray-500" />
-            ) : (
-              <ChevronDown size={16} className="text-gray-500" />
-            )}
           </CollapsibleTrigger>
           
           <CollapsibleContent className="pt-2">
             <div className="flex items-center space-x-2">
-              <Input 
+              <Input value={budgetInput} onChange={e => handleInputChange(e.target.value)} placeholder="목표 금액 입력" className="neuro-pressed" />
-                value={budgetInput} 
+              <Button onClick={handleSave} size="icon" className="neuro-flat text-slate-50 bg-slate-400 hover:bg-slate-300">
-                onChange={(e) => handleInputChange(e.target.value)} 
-                placeholder="목표 금액 입력" 
-                className="neuro-pressed" 
-              />
-              <Button 
-                onClick={handleSave} 
-                size="icon" 
-                className="neuro-flat text-slate-50 bg-slate-400 hover:bg-slate-300"
-              >
                 <Check size={18} />
               </Button>
             </div>
@@ -175,8 +132,6 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
           </CollapsibleContent>
         </Collapsible>
       </div>
-    </div>
+    </div>;
-  );
 };
-
+export default BudgetProgressCard;
-export default BudgetProgressCard;