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

Visual edit in Lovable

Browse Source 
Edited UI in Lovable
This commit is contained in:
gpt-engineer-app[bot]
2025-03-21 08:30:43 +00:00
parent f550c49633
commit d9d566a8ee
1 changed files with 14 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/BudgetCategoriesSection.tsx
View File

@@ -1,8 +1,6 @@
import React from 'react';
import { categoryIcons } from '@/constants/categoryIcons';
import { formatCurrency } from '@/utils/formatters';
interface BudgetCategoriesSectionProps {
categories: {
title: string;
@@ -10,7 +8,6 @@ interface BudgetCategoriesSectionProps {
total: number;
}[];
}
const BudgetCategoriesSection: React.FC<BudgetCategoriesSectionProps> = ({
categories
}) => {
@@ -21,9 +18,7 @@ const BudgetCategoriesSection: React.FC<BudgetCategoriesSectionProps> = ({
// 예산 초과 여부 확인
const isOverBudget = category.current > category.total && category.total > 0;
// 실제 백분율 계산 (초과해도 실제 퍼센트로 표시)
const actualPercentage = category.total > 0
? Math.round((category.current / category.total) * 100)
: 0;
const actualPercentage = category.total > 0 ? Math.round(category.current / category.total * 100) : 0;
// 프로그레스 바용 퍼센트 - 제한 없이 실제 퍼센트 표시
const displayPercentage = actualPercentage;
@@ -31,23 +26,12 @@ const BudgetCategoriesSection: React.FC<BudgetCategoriesSectionProps> = ({
const isLowBudget = category.total > 0 && actualPercentage >= 90 && actualPercentage < 100;
// 프로그레스 바 색상 결정
const progressBarColor = isOverBudget
? 'bg-red-500'
: isLowBudget
? 'bg-yellow-400'
: 'bg-neuro-income';
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' : ''}`}>
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]}
@@ -56,15 +40,14 @@ const BudgetCategoriesSection: React.FC<BudgetCategoriesSectionProps> = ({
</div>
<div className="flex items-center justify-between mb-2">
<p className="text-lg font-semibold">{formatCurrency(category.current)}</p>
<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 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">
@@ -75,11 +58,9 @@ const BudgetCategoriesSection: React.FC<BudgetCategoriesSectionProps> = ({
{displayPercentage}%
</span>
</div>
</div>
);
</div>;
})}
</div>
</>;
};
export default BudgetCategoriesSection;