72 lines
2.2 KiB
TypeScript
72 lines
2.2 KiB
TypeScript
|
|
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;
|
|
current: number;
|
|
total: number;
|
|
}
|
|
|
|
interface CategorySpendingListProps {
|
|
categories: CategorySpending[];
|
|
totalExpense: number;
|
|
className?: string;
|
|
}
|
|
|
|
const CategorySpendingList: React.FC<CategorySpendingListProps> = ({
|
|
categories,
|
|
totalExpense,
|
|
className = ""
|
|
}) => {
|
|
const isMobile = useIsMobile();
|
|
|
|
return (
|
|
<div className={`neuro-card mb-6 w-full ${className}`}>
|
|
{categories.some(cat => cat.current > 0) ? (
|
|
<div className="space-y-4 px-1 py-4">
|
|
{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-4 h-4 rounded-full" style={{
|
|
backgroundColor: getCategoryColor(categoryName) // 일관된 색상 적용
|
|
}}></div>
|
|
<span className="text-sm">
|
|
{categoryName}
|
|
{description && (
|
|
<span className="text-gray-500 text-xs ml-1">
|
|
{description}
|
|
</span>
|
|
)}
|
|
</span>
|
|
</div>
|
|
<div className="text-right">
|
|
<p className="font-medium text-sm">
|
|
{formatCurrency(category.current)}
|
|
</p>
|
|
{/* 퍼센트 표시 제거 */}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
) : (
|
|
<div className="py-8 text-center text-gray-400">
|
|
<p>아직 지출 내역이 없습니다</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CategorySpendingList;
|