From e55dfac3a944b9681b4afbf730d45ca04f50a8b3 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Fri, 21 Mar 2025 11:17:55 +0000
Subject: [PATCH] Update category descriptions

Update category descriptions in the spending graph card.
---
 src/components/BudgetCategoriesSection.tsx | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/components/BudgetCategoriesSection.tsx b/src/components/BudgetCategoriesSection.tsx
index 512003a..c066a9d 100644
--- a/src/components/BudgetCategoriesSection.tsx
+++ b/src/components/BudgetCategoriesSection.tsx
@@ -1,6 +1,8 @@
+
 import React from 'react';
-import { categoryIcons } from '@/constants/categoryIcons';
+import { categoryIcons, CATEGORY_DESCRIPTIONS } from '@/constants/categoryIcons';
 import { formatCurrency } from '@/utils/formatters';
+
 interface BudgetCategoriesSectionProps {
   categories: {
     title: string;
@@ -8,6 +10,7 @@ interface BudgetCategoriesSectionProps {
     total: number;
   }[];
 }
+
 const BudgetCategoriesSection: React.FC<BudgetCategoriesSectionProps> = ({
   categories
 }) => {
@@ -31,12 +34,23 @@ const BudgetCategoriesSection: React.FC<BudgetCategoriesSectionProps> = ({
         // 남은 예산 또는 초과 예산
         const budgetStatusText = isOverBudget ? '예산 초과: ' : '남은 예산: ';
         const budgetAmount = isOverBudget ? Math.abs(category.total - category.current) : Math.max(0, category.total - category.current);
+        
+        // 카테고리 설명 가져오기
+        const description = CATEGORY_DESCRIPTIONS[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>
+              <h3 className="text-sm font-medium text-gray-600">
+                {category.title}
+                {description && (
+                  <span className="text-gray-500 text-xs ml-1">
+                    {description}
+                  </span>
+                )}
+              </h3>
             </div>
             
             <div className="flex items-center justify-between mb-2">
@@ -63,4 +77,5 @@ const BudgetCategoriesSection: React.FC<BudgetCategoriesSectionProps> = ({
     </div>
   </>;
 };
-export default BudgetCategoriesSection;
\ No newline at end of file
+
+export default BudgetCategoriesSection;