Visual edit in Lovable

Edited UI in Lovable

src/components/BudgetTabContent.tsx

@@ -1,23 +1,19 @@
-
 import React, { useState, useEffect } from 'react';
 import { Plus, Wallet } 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,37 +22,24 @@ 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 
+  const actualPercentage = targetAmount > 0 ? Math.round(spentAmount / targetAmount * 100) : 0;
-    ? Math.round((spentAmount / targetAmount) * 100) 
-    : 0;
   const percentage = actualPercentage;
   const isFirstBudget = targetAmount === 0;
-  
+
   // 예산 초과 여부 계산
   const isOverBudget = spentAmount > targetAmount;
   // 예산이 얼마 남지 않은 경우 (10% 미만)
   const isLowBudget = targetAmount > 0 && percentage >= 90 && percentage < 100;
-  
+
   // 프로그레스 바 색상 결정
-  const progressBarColor = isOverBudget 
+  const progressBarColor = isOverBudget ? 'bg-red-500' : isLowBudget ? 'bg-yellow-400' : 'bg-neuro-income';
-    ? 'bg-red-500' 
+
-    : isLowBudget 
-      ? 'bg-yellow-400' 
-      : 'bg-neuro-income';
-  
   // 남은 예산 또는 초과 예산 텍스트 및 금액
-  const budgetStatusText = isOverBudget 
+  const budgetStatusText = isOverBudget ? '예산 초과: ' : '남은 예산: ';
-    ? '예산 초과: ' 
+  const budgetAmount = isOverBudget ? formatCurrency(Math.abs(targetAmount - spentAmount)) : formatCurrency(Math.max(0, targetAmount - spentAmount));
-    : '남은 예산: ';
-  
-  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 => ({
@@ -64,21 +47,17 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
       [category]: numValue
     }));
   };
-  
+  return <div>
-  return (
+      {targetAmount > 0 ? <>
-    <div>
-      {targetAmount > 0 ? (
-        <>
           <div className="flex justify-between items-center mb-3">
             <div className="text-2xl font-bold">{formatCurrency(spentAmount)}</div>
             <div className="text-sm text-gray-500">/ {formatCurrency(targetAmount)}</div>
           </div>
           
           <div className="w-full h-2 neuro-pressed overflow-hidden mb-3">
-            <div 
+            <div className={`h-full ${progressBarColor} transition-all duration-700 ease-out`} style={{
-              className={`h-full ${progressBarColor} transition-all duration-700 ease-out`}
+          width: `${Math.min(percentage, 100)}%`
-              style={{ width: `${Math.min(percentage, 100)}%` }}
+        }} />
-            />
           </div>
           
           <div className="flex justify-between items-center">
@@ -91,52 +70,31 @@ 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-base font-bold">
-              onClick={() => setShowBudgetInput(true)}
-              className="text-neuro-income text-sm font-medium hover:underline flex items-center text-[15px]"
-            >
               <Plus size={16} className="mr-1" /> 예산 수정하기
             </button>
           </div>
-        </>
+        </> : <div className="py-4 text-center">
-      ) : (
-        <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"
-          >
             <Wallet className="mr-2" size={18} />
             지금 예산 설정하기
           </Button>
-        </div>
+        </div>}
-      )}
       
-      {showBudgetInput && (
+      {showBudgetInput && <div className="mt-4">
-        <div className="mt-4">
           <div className="neuro-card p-4">
             <div className="mb-4">
               <h3 className="text-base font-medium mb-3">전체 예산 설정</h3>
               <div className="flex items-center space-x-2">
-                <input
+                <input type="text" className="w-full p-2 rounded neuro-pressed" placeholder="예산 금액 입력" value={targetAmount > 0 ? targetAmount : ''} onChange={e => {
-                  type="text"
+              const value = e.target.value.replace(/[^0-9]/g, '');
-                  className="w-full p-2 rounded neuro-pressed"
+              if (value) {
-                  placeholder="예산 금액 입력"
+                const amount = parseInt(value, 10);
-                  value={targetAmount > 0 ? targetAmount : ''}
+                onSaveBudget(amount, categoryBudgets);
-                  onChange={(e) => {
+              }
-                    const value = e.target.value.replace(/[^0-9]/g, '');
+            }} />
-                    if (value) {
+                <Button onClick={() => setShowBudgetInput(false)} size="icon" className="bg-neuro-income hover:bg-neuro-income/90 text-white">
-                      const amount = parseInt(value, 10);
-                      onSaveBudget(amount, categoryBudgets);
-                    }
-                  }}
-                />
-                <Button 
-                  onClick={() => setShowBudgetInput(false)}
-                  size="icon" 
-                  className="bg-neuro-income hover:bg-neuro-income/90 text-white"
-                >
                   <Wallet size={18} />
                 </Button>
               </div>
@@ -144,16 +102,10 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
             
             <div>
               <h3 className="text-base font-medium mb-3">카테고리별 예산 설정</h3>
-              <CategoryBudgetInputs
+              <CategoryBudgetInputs categoryBudgets={categoryBudgets} handleCategoryInputChange={handleCategoryInputChange} />
-                categoryBudgets={categoryBudgets}
-                handleCategoryInputChange={handleCategoryInputChange}
-              />
             </div>
           </div>
-        </div>
+        </div>}
-      )}
+    </div>;
-    </div>
-  );
 };
-
+export default BudgetTabContent;
-export default BudgetTabContent;