ZELLYY/zellyy-finance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix display issue

Browse Source 
Addresses a problem where certain elements were not being displayed correctly.
This commit is contained in:
gpt-engineer-app[bot]
2025-03-21 11:15:02 +00:00
parent 11d824a38f
commit b69af1781f
2 changed files with 38 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/components/analytics/CategorySpendingList.tsx
View File

@@ -25,10 +25,13 @@ const CategorySpendingList: React.FC<CategorySpendingListProps> = ({
// 카테고리별 색상 매핑
const getCategoryColor = (title: string) => {
// 카테고리 이름에 따라 적절한 색상 반환
switch (title) {
case '식비': return '#81c784';
case '생활비': return '#AED581';
case '음식': return '#81c784';
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) => (
<div key={category.title} className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="w-6 h-6 rounded-full" style={{
backgroundColor: getCategoryColor(category.title)
}}></div>
<span>
{category.title}
{CATEGORY_DESCRIPTIONS[category.title] && (
<span className="text-gray-500 text-sm ml-1">
{CATEGORY_DESCRIPTIONS[category.title]}
</span>
)}
</span>
{categories.map((category) => {
// 카테고리 이름을 직접 표시
const categoryName = category.title;
// 카테고리 설명 찾기
const description = CATEGORY_DESCRIPTIONS[categoryName] || '';
return (
<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)
}}></div>
<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">