86 lines
3.2 KiB
TypeScript
86 lines
3.2 KiB
TypeScript
|
|
import React from 'react';
|
|
import { categoryIcons } 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="text-base font-semibold mb-3 mt-8">지출 그래프</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);
|
|
|
|
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}</h3>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between mb-2">
|
|
<p className="text-lg font-semibold">{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;
|