From cb29d6fe6993a8eb00f753cc25d0ac3ab8564bdd 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:49:00 +0000
Subject: [PATCH] Fix: Match chart colors to category list
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Updated the expense chart to use the same colors as the category spending list for 음식, 쇼핑, and 교통비.
---
 src/components/ExpenseChart.tsx               |  1 +
 .../analytics/CategorySpendingList.tsx        | 16 ++-----------
 src/pages/Analytics.tsx                       |  8 +++----
 src/utils/categoryColorUtils.ts               | 24 +++++++++++++++++++
 4 files changed, 30 insertions(+), 19 deletions(-)
 create mode 100644 src/utils/categoryColorUtils.ts

diff --git a/src/components/ExpenseChart.tsx b/src/components/ExpenseChart.tsx
index 6a96208..0450ab6 100644
--- a/src/components/ExpenseChart.tsx
+++ b/src/components/ExpenseChart.tsx
@@ -1,6 +1,7 @@
 
 import React from 'react';
 import { PieChart, Pie, Cell, ResponsiveContainer } from 'recharts';
+import { getCategoryColor } from '@/utils/categoryColorUtils';
 
 interface ExpenseData {
   name: string;
diff --git a/src/components/analytics/CategorySpendingList.tsx b/src/components/analytics/CategorySpendingList.tsx
index 1cc8aaa..d357553 100644
--- a/src/components/analytics/CategorySpendingList.tsx
+++ b/src/components/analytics/CategorySpendingList.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { formatCurrency } from '@/utils/formatters';
 import { useIsMobile } from '@/hooks/use-mobile';
 import { CATEGORY_DESCRIPTIONS } from '@/constants/categoryIcons';
+import { getCategoryColor } from '@/utils/categoryColorUtils';
 
 interface CategorySpending {
   title: string;
@@ -23,19 +24,6 @@ const CategorySpendingList: React.FC<CategorySpendingListProps> = ({
 }) => {
   const isMobile = useIsMobile();
   
-  // 카테고리별 색상 매핑
-  const getCategoryColor = (title: string) => {
-    // 카테고리 이름에 따라 적절한 색상 반환
-    switch (title) {
-      case '음식': return '#81c784';
-      case '쇼핑': return '#AED581';
-      case '교통비': return '#2E7D32';
-      case '식비': return '#81c784'; // 이전 이름과의 호환성 유지
-      case '생활비': return '#AED581'; // 이전 이름과의 호환성 유지
-      default: return '#4CAF50';
-    }
-  };
-
   return (
     <div className={`neuro-card mb-6 w-full ${className}`}>
       {categories.some(cat => cat.current > 0) ? (
@@ -50,7 +38,7 @@ const CategorySpendingList: React.FC<CategorySpendingListProps> = ({
               <div key={categoryName} className="flex items-center justify-between">
                 <div className="flex items-center gap-3">
                   <div className="w-6 h-6 rounded-full" style={{
-                    backgroundColor: getCategoryColor(categoryName)
+                    backgroundColor: getCategoryColor(categoryName) // 일관된 색상 적용
                   }}></div>
                   <span>
                     {categoryName}
diff --git a/src/pages/Analytics.tsx b/src/pages/Analytics.tsx
index 2cdb0e1..2668b50 100644
--- a/src/pages/Analytics.tsx
+++ b/src/pages/Analytics.tsx
@@ -1,4 +1,3 @@
-
 import React, { useState, useEffect } from 'react';
 import NavBar from '@/components/NavBar';
 import ExpenseChart from '@/components/ExpenseChart';
@@ -6,6 +5,7 @@ import AddTransactionButton from '@/components/AddTransactionButton';
 import { useBudget } from '@/contexts/BudgetContext';
 import { MONTHS_KR } from '@/hooks/useTransactions';
 import { useIsMobile } from '@/hooks/use-mobile';
+import { getCategoryColor } from '@/utils/categoryColorUtils';
 
 // 새로 분리한 컴포넌트들 불러오기
 import PeriodSelector from '@/components/analytics/PeriodSelector';
@@ -78,14 +78,12 @@ const Analytics = () => {
   const savings = Math.max(0, totalBudget - totalExpense);
   const savingsPercentage = totalBudget > 0 ? Math.round(savings / totalBudget * 100) : 0;
   
-  // 카테고리별 지출 차트 데이터 생성
+  // 카테고리별 지출 차트 데이터 생성 - 색상 유틸리티 사용
   const categorySpending = getCategorySpending();
   const expenseData = categorySpending.map(category => ({
     name: category.title,
     value: category.current,
-    color: category.title === '식비' ? '#81c784' : 
-          category.title === '생활비' ? '#AED581' : 
-          category.title === '교통비' ? '#2E7D32' : '#4CAF50'
+    color: getCategoryColor(category.title) // 일관된 색상 적용
   }));
 
   // 월별 데이터 생성 - 샘플 데이터 제거하고 현재 달만 실제 데이터 사용
diff --git a/src/utils/categoryColorUtils.ts b/src/utils/categoryColorUtils.ts
new file mode 100644
index 0000000..a0e52a2
--- /dev/null
+++ b/src/utils/categoryColorUtils.ts
@@ -0,0 +1,24 @@
+
+// 카테고리별 색상 유틸리티 함수
+
+/**
+ * 카테고리에 따른 일관된 색상을 반환하는 함수
+ * @param category 카테고리 이름
+ * @returns 해당 카테고리의 색상 코드
+ */
+export const getCategoryColor = (category: string): string => {
+  // 카테고리 이름 소문자화 및 공백 제거로 일관성 유지
+  const normalizedCategory = category.trim().toLowerCase();
+  
+  // 카테고리별 색상 매핑
+  if (normalizedCategory.includes('음식') || normalizedCategory.includes('식비')) {
+    return '#81c784'; // 초록색 (식비)
+  } else if (normalizedCategory.includes('쇼핑') || normalizedCategory.includes('생활비')) {
+    return '#AED581'; // 연한 녹색 (쇼핑/생활비)
+  } else if (normalizedCategory.includes('교통')) {
+    return '#2E7D32'; // 진한 녹색 (교통비)
+  }
+  
+  // 기본 색상
+  return '#4CAF50'; // 기본 녹색
+};