68 lines
1.9 KiB
TypeScript
68 lines
1.9 KiB
TypeScript
|
|
import React from 'react';
|
|
import { formatCurrency } from '@/utils/formatters';
|
|
import { useIsMobile } from '@/hooks/use-mobile';
|
|
|
|
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();
|
|
|
|
// 카테고리별 색상 매핑
|
|
const getCategoryColor = (title: string) => {
|
|
switch (title) {
|
|
case '식비': return '#81c784';
|
|
case '생활비': return '#AED581';
|
|
case '교통비': return '#2E7D32';
|
|
default: return '#4CAF50';
|
|
}
|
|
};
|
|
|
|
return (
|
|
<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}</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>
|
|
) : (
|
|
<div className="py-8 text-center text-gray-400">
|
|
<p>아직 지출 내역이 없습니다</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CategorySpendingList;
|