Display remaining budget in graph

Display the remaining budget amount in the expense graph section.

src/components/BudgetCategoriesSection.tsx

@@ -17,34 +17,43 @@ const BudgetCategoriesSection: React.FC<BudgetCategoriesSectionProps> = ({
   return <>
     <h2 className="text-lg font-semibold mb-3 mt-8">지출 그래프</h2>
     <div className="neuro-card mb-8">
-      {categories.map((category, index) => (
+      {categories.map((category, index) => {
-        <div key={index} className={`${index !== 0 ? 'mt-4 pt-4 border-t border-gray-100' : ''}`}>
+        // 남은 예산 계산 (음수가 되지 않도록)
-          <div className="flex items-center gap-2 mb-1">
+        const remaining = Math.max(0, category.total - category.current);
-            <div className="text-neuro-income">
+        const percentage = Math.min(Math.round((category.current / category.total) * 100), 100);
-              {categoryIcons[category.title]}
+        
+        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]}
+              </div>
+              <h3 className="text-sm font-medium text-gray-600">{category.title}</h3>
+            </div>
+            
+            <div className="flex items-center justify-between mb-2">
+              <p className="text-lg font-semibold">{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 
+                className={`absolute top-0 left-0 h-full transition-all duration-700 ease-out bg-neuro-income`}
+                style={{ width: `${percentage}%` }}
+              />
+            </div>
+            
+            <div className="mt-2 flex justify-between items-center">
+              <span className="text-xs text-neuro-income font-medium">
+                남은 예산: {formatCurrency(remaining)}
+              </span>
+              <span className="text-xs font-medium text-gray-500">
+                {percentage}%
+              </span>
             </div>
-            <h3 className="text-sm font-medium text-gray-600">{category.title}</h3>
           </div>
-          
+        );
-          <div className="flex items-center justify-between mb-2">
+      })}
-            <p className="text-lg font-semibold">{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 
-              className={`absolute top-0 left-0 h-full transition-all duration-700 ease-out bg-neuro-income`}
-              style={{ width: `${Math.min(Math.round((category.current / category.total) * 100), 100)}%` }}
-            />
-          </div>
-          
-          <div className="mt-2 flex justify-end">
-            <span className="text-xs font-medium text-gray-500">
-              {Math.min(Math.round((category.current / category.total) * 100), 100)}%
-            </span>
-          </div>
-        </div>
-      ))}
     </div>
   </>;
 };