From 11d824a38f2a849b5ad22c005c1e3f2ed69af3ce 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 10:10:25 +0000
Subject: [PATCH] Update category labels

Add descriptions to category labels in the UI.
---
 src/components/analytics/CategorySpendingList.tsx | 10 +++++++++-
 src/constants/categoryIcons.tsx                   |  7 +++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/analytics/CategorySpendingList.tsx b/src/components/analytics/CategorySpendingList.tsx
index 0adb5e0..42de0c5 100644
--- a/src/components/analytics/CategorySpendingList.tsx
+++ b/src/components/analytics/CategorySpendingList.tsx
@@ -2,6 +2,7 @@
 import React from 'react';
 import { formatCurrency } from '@/utils/formatters';
 import { useIsMobile } from '@/hooks/use-mobile';
+import { CATEGORY_DESCRIPTIONS } from '@/constants/categoryIcons';
 
 interface CategorySpending {
   title: string;
@@ -42,7 +43,14 @@ const CategorySpendingList: React.FC<CategorySpendingListProps> = ({
                 <div className="w-6 h-6 rounded-full" style={{
                   backgroundColor: getCategoryColor(category.title)
                 }}></div>
-                <span>{category.title}</span>
+                <span>
+                  {category.title}
+                  {CATEGORY_DESCRIPTIONS[category.title] && (
+                    <span className="text-gray-500 text-sm ml-1">
+                      {CATEGORY_DESCRIPTIONS[category.title]}
+                    </span>
+                  )}
+                </span>
               </div>
               <div className="text-right">
                 <p className="font-medium">
diff --git a/src/constants/categoryIcons.tsx b/src/constants/categoryIcons.tsx
index 3d314c4..47144cd 100644
--- a/src/constants/categoryIcons.tsx
+++ b/src/constants/categoryIcons.tsx
@@ -13,6 +13,13 @@ export const categoryIcons: Record<string, React.ReactNode> = {
 // 지출 카테고리 목록 - 3개로 제한
 export const EXPENSE_CATEGORIES = ['음식', '쇼핑', '교통비'];
 
+// 카테고리 부가 설명 정의
+export const CATEGORY_DESCRIPTIONS: Record<string, string> = {
+  음식: '(식비, 음료)',
+  쇼핑: '',
+  교통비: '(차량 유지비)',
+};
+
 // 기본 카테고리 예산 설정
 export const DEFAULT_CATEGORY_BUDGETS = {
   음식: 400000,