Visual edit in Lovable

Edited UI in Lovable

src/components/BudgetInputCard.tsx

@@ -1,10 +1,8 @@
-
 import React, { useState, useEffect } 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 } from 'lucide-react';
-
 interface BudgetGoalProps {
   initialBudgets: {
     daily: number;
@@ -13,13 +11,15 @@ interface BudgetGoalProps {
   };
   onSave: (type: 'daily' | 'weekly' | 'monthly', amount: number) => void;
 }
-
+const BudgetInputCard: React.FC<BudgetGoalProps> = ({
-const BudgetInputCard: React.FC<BudgetGoalProps> = ({ initialBudgets, onSave }) => {
+  initialBudgets,
+  onSave
+}) => {
   const [selectedTab, setSelectedTab] = useState<'daily' | 'weekly' | 'monthly'>('daily');
   const [budgetInputs, setBudgetInputs] = useState({
     daily: initialBudgets.daily.toString(),
     weekly: initialBudgets.weekly.toString(),
-    monthly: initialBudgets.monthly.toString(),
+    monthly: initialBudgets.monthly.toString()
   });
 
   // Format for display without commas
@@ -31,33 +31,27 @@ const BudgetInputCard: React.FC<BudgetGoalProps> = ({ initialBudgets, onSave })
   const formatWithCommas = (amount: string) => {
     return amount.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
   };
-
   useEffect(() => {
     setBudgetInputs({
       daily: formatForInput(initialBudgets.daily),
       weekly: formatForInput(initialBudgets.weekly),
-      monthly: formatForInput(initialBudgets.monthly),
+      monthly: formatForInput(initialBudgets.monthly)
     });
   }, [initialBudgets]);
-
   const handleInputChange = (value: string, type: 'daily' | 'weekly' | 'monthly') => {
     // Remove all non-numeric characters
     const numericValue = value.replace(/[^0-9]/g, '');
-    
     setBudgetInputs(prev => ({
       ...prev,
       [type]: numericValue
     }));
   };
-
   const handleSave = () => {
     const amount = parseInt(budgetInputs[selectedTab], 10) || 0;
     onSave(selectedTab, amount);
   };
-
+  return <div className="neuro-card">
-  return (
+      <Tabs defaultValue="daily" value={selectedTab} onValueChange={value => setSelectedTab(value as 'daily' | 'weekly' | 'monthly')} className="w-full">
-    <div className="neuro-card">
-      <Tabs defaultValue="daily" value={selectedTab} onValueChange={(value) => setSelectedTab(value as 'daily' | 'weekly' | 'monthly')} 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">
             일일 목표
@@ -72,13 +66,8 @@ const BudgetInputCard: React.FC<BudgetGoalProps> = ({ initialBudgets, onSave })
 
         <TabsContent value="daily" className="space-y-4 mt-0">
           <div className="flex items-center space-x-2">
-            <Input 
+            <Input value={budgetInputs.daily} onChange={e => handleInputChange(e.target.value, 'daily')} placeholder="목표 금액 입력" className="neuro-pressed" />
-              value={budgetInputs.daily}
+            <Button onClick={handleSave} size="icon" className="neuro-flat text-slate-50 bg-slate-500 hover:bg-slate-400">
-              onChange={(e) => handleInputChange(e.target.value, 'daily')}
-              placeholder="목표 금액 입력"
-              className="neuro-pressed"
-            />
-            <Button onClick={handleSave} size="icon" className="neuro-flat">
               <Check size={18} />
             </Button>
           </div>
@@ -87,12 +76,7 @@ const BudgetInputCard: React.FC<BudgetGoalProps> = ({ initialBudgets, onSave })
 
         <TabsContent value="weekly" className="space-y-4 mt-0">
           <div className="flex items-center space-x-2">
-            <Input 
+            <Input value={budgetInputs.weekly} onChange={e => handleInputChange(e.target.value, 'weekly')} placeholder="목표 금액 입력" className="neuro-pressed" />
-              value={budgetInputs.weekly}
-              onChange={(e) => handleInputChange(e.target.value, 'weekly')}
-              placeholder="목표 금액 입력"
-              className="neuro-pressed"
-            />
             <Button onClick={handleSave} size="icon" className="neuro-flat">
               <Check size={18} />
             </Button>
@@ -102,12 +86,7 @@ const BudgetInputCard: React.FC<BudgetGoalProps> = ({ initialBudgets, onSave })
 
         <TabsContent value="monthly" className="space-y-4 mt-0">
           <div className="flex items-center space-x-2">
-            <Input 
+            <Input value={budgetInputs.monthly} onChange={e => handleInputChange(e.target.value, 'monthly')} placeholder="목표 금액 입력" className="neuro-pressed" />
-              value={budgetInputs.monthly}
-              onChange={(e) => handleInputChange(e.target.value, 'monthly')}
-              placeholder="목표 금액 입력"
-              className="neuro-pressed"
-            />
             <Button onClick={handleSave} size="icon" className="neuro-flat">
               <Check size={18} />
             </Button>
@@ -115,8 +94,6 @@ const BudgetInputCard: React.FC<BudgetGoalProps> = ({ initialBudgets, onSave })
           <p className="text-xs text-gray-500">현재 월간 목표: {formatWithCommas(budgetInputs.monthly)}원</p>
         </TabsContent>
       </Tabs>
-    </div>
+    </div>;
-  );
 };
-
+export default BudgetInputCard;
-export default BudgetInputCard;