Visual edit in Lovable

Edited UI in Lovable

src/components/BudgetCategoriesSection.tsx

@@ -1,8 +1,6 @@
-
 import React from 'react';
 import { categoryIcons } from '@/constants/categoryIcons';
 import { formatCurrency } from '@/utils/formatters';
-
 interface BudgetCategoriesSectionProps {
   categories: {
     title: string;
@@ -10,7 +8,6 @@ interface BudgetCategoriesSectionProps {
     total: number;
   }[];
 }
-
 const BudgetCategoriesSection: React.FC<BudgetCategoriesSectionProps> = ({
   categories
 }) => {
@@ -21,33 +18,20 @@ const BudgetCategoriesSection: React.FC<BudgetCategoriesSectionProps> = ({
         // 예산 초과 여부 확인
         const isOverBudget = category.current > category.total && category.total > 0;
         // 실제 백분율 계산 (초과해도 실제 퍼센트로 표시)
-        const actualPercentage = category.total > 0 
+        const actualPercentage = category.total > 0 ? Math.round(category.current / category.total * 100) : 0;
-          ? Math.round((category.current / category.total) * 100) 
-          : 0;
         // 프로그레스 바용 퍼센트 - 제한 없이 실제 퍼센트 표시
         const displayPercentage = actualPercentage;
-        
+
         // 예산이 얼마 남지 않은 경우 (10% 미만)
         const isLowBudget = category.total > 0 && actualPercentage >= 90 && actualPercentage < 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 ? Math.abs(category.total - category.current) : Math.max(0, category.total - category.current);
-          : '남은 예산: ';
+        return <div key={index} className={`${index !== 0 ? 'mt-4 pt-4 border-t border-gray-100' : ''}`}>
-        
-        const budgetAmount = isOverBudget 
-          ? Math.abs(category.total - category.current)
-          : Math.max(0, category.total - category.current);
-        
-        return (
-          <div key={index} className={`${index !== 0 ? 'mt-4 pt-4 border-t border-gray-100' : ''}`}>
             <div className="flex items-center gap-2 mb-1">
               <div className="text-neuro-income">
                 {categoryIcons[category.title]}
@@ -56,15 +40,14 @@ const BudgetCategoriesSection: React.FC<BudgetCategoriesSectionProps> = ({
             </div>
             
             <div className="flex items-center justify-between mb-2">
-              <p className="text-lg font-semibold">{formatCurrency(category.current)}</p>
+              <p className="font-semibold text-base">{formatCurrency(category.current)}</p>
               <p className="text-sm text-gray-500">/ {formatCurrency(category.total)}</p>
             </div>
             
             <div className="relative h-3 neuro-pressed overflow-hidden">
-              <div 
+              <div className={`absolute top-0 left-0 h-full transition-all duration-700 ease-out ${progressBarColor}`} style={{
-                className={`absolute top-0 left-0 h-full transition-all duration-700 ease-out ${progressBarColor}`}
+              width: `${Math.min(displayPercentage, 100)}%`
-                style={{ width: `${Math.min(displayPercentage, 100)}%` }}
+            }} />
-              />
             </div>
             
             <div className="mt-2 flex justify-between items-center">
@@ -75,11 +58,9 @@ const BudgetCategoriesSection: React.FC<BudgetCategoriesSectionProps> = ({
                 {displayPercentage}%
               </span>
             </div>
-          </div>
+          </div>;
-        );
       })}
     </div>
   </>;
 };
-
+export default BudgetCategoriesSection;
-export default BudgetCategoriesSection;