Update category descriptions

Update category descriptions in the spending graph card.
This commit is contained in:
gpt-engineer-app[bot]
2025-03-21 11:17:55 +00:00
parent b69af1781f
commit e55dfac3a9

View File

@@ -1,6 +1,8 @@
import React from 'react'; import React from 'react';
import { categoryIcons } from '@/constants/categoryIcons'; import { categoryIcons, CATEGORY_DESCRIPTIONS } from '@/constants/categoryIcons';
import { formatCurrency } from '@/utils/formatters'; import { formatCurrency } from '@/utils/formatters';
interface BudgetCategoriesSectionProps { interface BudgetCategoriesSectionProps {
categories: { categories: {
title: string; title: string;
@@ -8,6 +10,7 @@ interface BudgetCategoriesSectionProps {
total: number; total: number;
}[]; }[];
} }
const BudgetCategoriesSection: React.FC<BudgetCategoriesSectionProps> = ({ const BudgetCategoriesSection: React.FC<BudgetCategoriesSectionProps> = ({
categories categories
}) => { }) => {
@@ -31,12 +34,23 @@ const BudgetCategoriesSection: React.FC<BudgetCategoriesSectionProps> = ({
// 남은 예산 또는 초과 예산 // 남은 예산 또는 초과 예산
const budgetStatusText = isOverBudget ? '예산 초과: ' : '남은 예산: '; const budgetStatusText = isOverBudget ? '예산 초과: ' : '남은 예산: ';
const budgetAmount = isOverBudget ? Math.abs(category.total - category.current) : Math.max(0, category.total - category.current); 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' : ''}`}> 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="flex items-center gap-2 mb-1">
<div className="text-neuro-income"> <div className="text-neuro-income">
{categoryIcons[category.title]} {categoryIcons[category.title]}
</div> </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>
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
@@ -63,4 +77,5 @@ const BudgetCategoriesSection: React.FC<BudgetCategoriesSectionProps> = ({
</div> </div>
</>; </>;
}; };
export default BudgetCategoriesSection;
export default BudgetCategoriesSection;