82 lines
3.4 KiB
TypeScript
82 lines
3.4 KiB
TypeScript
|
|
import React from 'react';
|
|
import { categoryIcons, CATEGORY_DESCRIPTIONS } from '@/constants/categoryIcons';
|
|
import { formatCurrency } from '@/utils/formatters';
|
|
|
|
interface BudgetCategoriesSectionProps {
|
|
categories: {
|
|
title: string;
|
|
current: number;
|
|
total: number;
|
|
}[];
|
|
}
|
|
|
|
const BudgetCategoriesSection: React.FC<BudgetCategoriesSectionProps> = ({
|
|
categories
|
|
}) => {
|
|
return <>
|
|
<h2 className="font-semibold mb-3 mt-8 text-lg">지출 그래프</h2>
|
|
<div className="neuro-card mb-8">
|
|
{categories.map((category, index) => {
|
|
// 예산 초과 여부 확인
|
|
const isOverBudget = category.current > category.total && category.total > 0;
|
|
// 실제 백분율 계산 (초과해도 실제 퍼센트로 표시)
|
|
const actualPercentage = category.total > 0 ? Math.round(category.current / category.total * 100) : 0;
|
|
// 프로그레스 바용 퍼센트 - 제한 없이 실제 퍼센트 표시
|
|
const displayPercentage = actualPercentage;
|
|
|
|
// 예산이 얼마 남지 않은 경우 (10% 미만)
|
|
const isLowBudget = category.total > 0 && actualPercentage >= 90 && actualPercentage < 100;
|
|
|
|
// 프로그레스 바 색상 결정
|
|
const progressBarColor = isOverBudget ? 'bg-red-500' : isLowBudget ? 'bg-yellow-400' : 'bg-neuro-income';
|
|
|
|
// 남은 예산 또는 초과 예산
|
|
const budgetStatusText = isOverBudget ? '예산 초과: ' : '남은 예산: ';
|
|
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' : ''}`}>
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<div className="text-neuro-income">
|
|
{categoryIcons[category.title]}
|
|
</div>
|
|
<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 className="flex items-center justify-between mb-2">
|
|
<p className="font-semibold text-base">{formatCurrency(category.current)}</p>
|
|
<p className="text-sm text-gray-500">/ {formatCurrency(category.total)}</p>
|
|
</div>
|
|
|
|
<div className="relative h-3 neuro-pressed overflow-hidden">
|
|
<div className={`absolute top-0 left-0 h-full transition-all duration-700 ease-out ${progressBarColor}`} style={{
|
|
width: `${Math.min(displayPercentage, 100)}%`
|
|
}} />
|
|
</div>
|
|
|
|
<div className="mt-2 flex justify-between items-center">
|
|
<span className={`text-xs font-medium ${isOverBudget ? 'text-red-500' : 'text-neuro-income'}`}>
|
|
{budgetStatusText}{formatCurrency(budgetAmount)}
|
|
</span>
|
|
<span className="text-xs font-medium text-gray-500">
|
|
{displayPercentage}%
|
|
</span>
|
|
</div>
|
|
</div>;
|
|
})}
|
|
</div>
|
|
</>;
|
|
};
|
|
|
|
export default BudgetCategoriesSection;
|