Fix display issue

Addresses a problem where certain elements were not being displayed correctly.

src/components/analytics/CategorySpendingList.tsx

@@ -25,10 +25,13 @@ const CategorySpendingList: React.FC<CategorySpendingListProps> = ({
   
   // 카테고리별 색상 매핑
   const getCategoryColor = (title: string) => {
+    // 카테고리 이름에 따라 적절한 색상 반환
     switch (title) {
-      case '식비': return '#81c784';
+      case '음식': return '#81c784';
-      case '생활비': return '#AED581';
+      case '쇼핑': return '#AED581';
       case '교통비': return '#2E7D32';
+      case '식비': return '#81c784'; // 이전 이름과의 호환성 유지
+      case '생활비': return '#AED581'; // 이전 이름과의 호환성 유지
       default: return '#4CAF50';
     }
   };
@@ -37,31 +40,38 @@ const CategorySpendingList: React.FC<CategorySpendingListProps> = ({
     <div className={`neuro-card mb-6 w-full ${className}`}>
       {categories.some(cat => cat.current > 0) ? (
         <div className="space-y-4">
-          {categories.map((category) => (
+          {categories.map((category) => {
-            <div key={category.title} className="flex items-center justify-between">
+            // 카테고리 이름을 직접 표시
-              <div className="flex items-center gap-3">
+            const categoryName = category.title;
-                <div className="w-6 h-6 rounded-full" style={{
+            // 카테고리 설명 찾기
-                  backgroundColor: getCategoryColor(category.title)
+            const description = CATEGORY_DESCRIPTIONS[categoryName] || '';
-                }}></div>
+            
-                <span>
+            return (
-                  {category.title}
+              <div key={categoryName} className="flex items-center justify-between">
-                  {CATEGORY_DESCRIPTIONS[category.title] && (
+                <div className="flex items-center gap-3">
-                    <span className="text-gray-500 text-sm ml-1">
+                  <div className="w-6 h-6 rounded-full" style={{
-                      {CATEGORY_DESCRIPTIONS[category.title]}
+                    backgroundColor: getCategoryColor(categoryName)
-                    </span>
+                  }}></div>
-                  )}
+                  <span>
-                </span>
+                    {categoryName}
+                    {description && (
+                      <span className="text-gray-500 text-sm ml-1">
+                        {description}
+                      </span>
+                    )}
+                  </span>
+                </div>
+                <div className="text-right">
+                  <p className="font-medium">
+                    {formatCurrency(category.current)}
+                  </p>
+                  <p className="text-xs text-gray-500">
+                    {totalExpense > 0 ? Math.round(category.current / totalExpense * 100) : 0}%
+                  </p>
+                </div>
               </div>
-              <div className="text-right">
+            );
-                <p className="font-medium">
+          })}
-                  {formatCurrency(category.current)}
-                </p>
-                <p className="text-xs text-gray-500">
-                  {totalExpense > 0 ? Math.round(category.current / totalExpense * 100) : 0}%
-                </p>
-              </div>
-            </div>
-          ))}
         </div>
       ) : (
         <div className="py-8 text-center text-gray-400">

src/constants/categoryIcons.tsx

@@ -18,6 +18,8 @@ export const CATEGORY_DESCRIPTIONS: Record<string, string> = {
   음식: '(식비, 음료)',
   쇼핑: '',
   교통비: '(차량 유지비)',
+  식비: '(식비, 음료)',      // 이전 이름과의 호환성 유지
+  생활비: '',                // 이전 이름과의 호환성 유지
 };
 
 // 기본 카테고리 예산 설정