Update budget display and input
- Allow budget progress bar to exceed 100% when over budget. - Streamline budget input by directly displaying category budgets.
This commit is contained in:
gpt-engineer-app[bot]
@@ -20,9 +20,15 @@ const BudgetCategoriesSection: React.FC<BudgetCategoriesSectionProps> = ({
|
||||
{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;
|
||||
// 프로그레스 바용 퍼센트 (100%로 제한하지 않음)
|
||||
const displayPercentage = actualPercentage;
|
||||
|
||||
// 예산이 얼마 남지 않은 경우 (10% 미만)
|
||||
const percentage = Math.min(Math.round((category.current / (category.total || 1)) * 100), 100);
|
||||
const isLowBudget = category.total > 0 && percentage >= 90 && percentage < 100;
|
||||
const isLowBudget = category.total > 0 && actualPercentage >= 90 && actualPercentage < 100;
|
||||
|
||||
// 프로그레스 바 색상 결정
|
||||
const progressBarColor = isOverBudget
|
||||
@@ -57,7 +63,7 @@ const BudgetCategoriesSection: React.FC<BudgetCategoriesSectionProps> = ({
|
||||
<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: `${percentage}%` }}
|
||||
style={{ width: `${Math.min(displayPercentage, 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -66,7 +72,7 @@ const BudgetCategoriesSection: React.FC<BudgetCategoriesSectionProps> = ({
|
||||
{budgetStatusText}{formatCurrency(budgetAmount)}
|
||||
</span>
|
||||
<span className="text-xs font-medium text-gray-500">
|
||||
{percentage}%
|
||||
{displayPercentage}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Plus, Wallet } from 'lucide-react';
|
||||
import BudgetInputCard from './BudgetInputCard';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import CategoryBudgetInputs from './CategoryBudgetInputs';
|
||||
|
||||
interface BudgetData {
|
||||
targetAmount: number;
|
||||
@@ -23,11 +24,16 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
|
||||
calculatePercentage,
|
||||
onSaveBudget
|
||||
}) => {
|
||||
const [categoryBudgets, setCategoryBudgets] = useState<Record<string, number>>({});
|
||||
const [showBudgetInput, setShowBudgetInput] = useState(false);
|
||||
|
||||
const spentAmount = data.spentAmount;
|
||||
const targetAmount = data.targetAmount;
|
||||
const percentage = calculatePercentage(spentAmount, targetAmount);
|
||||
// 실제 백분율 계산 (초과해도 실제 퍼센트로 표시)
|
||||
const actualPercentage = targetAmount > 0
|
||||
? Math.round((spentAmount / targetAmount) * 100)
|
||||
: 0;
|
||||
const percentage = actualPercentage;
|
||||
const isFirstBudget = targetAmount === 0;
|
||||
|
||||
// 예산 초과 여부 계산
|
||||
@@ -51,6 +57,14 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
|
||||
? formatCurrency(Math.abs(targetAmount - spentAmount))
|
||||
: formatCurrency(Math.max(0, targetAmount - spentAmount));
|
||||
|
||||
const handleCategoryInputChange = (value: string, category: string) => {
|
||||
const numValue = parseInt(value, 10) || 0;
|
||||
setCategoryBudgets(prev => ({
|
||||
...prev,
|
||||
[category]: numValue
|
||||
}));
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
{targetAmount > 0 ? (
|
||||
@@ -63,7 +77,7 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
|
||||
<div className="w-full h-2 neuro-pressed overflow-hidden mb-3">
|
||||
<div
|
||||
className={`h-full ${progressBarColor} transition-all duration-700 ease-out`}
|
||||
style={{ width: `${percentage}%` }}
|
||||
style={{ width: `${Math.min(percentage, 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -78,7 +92,7 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
|
||||
|
||||
<div className="mt-6">
|
||||
<button
|
||||
onClick={() => setShowBudgetInput(!showBudgetInput)}
|
||||
onClick={() => setShowBudgetInput(true)}
|
||||
className="text-neuro-income text-sm font-medium hover:underline flex items-center text-[15px]"
|
||||
>
|
||||
<Plus size={16} className="mr-1" /> 예산 수정하기
|
||||
@@ -101,18 +115,41 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
|
||||
|
||||
{showBudgetInput && (
|
||||
<div className="mt-4">
|
||||
<BudgetInputCard
|
||||
initialBudgets={{
|
||||
daily: isFirstBudget ? 0 : data.targetAmount,
|
||||
weekly: isFirstBudget ? 0 : data.targetAmount,
|
||||
monthly: isFirstBudget ? 0 : data.targetAmount
|
||||
<div className="neuro-card p-4">
|
||||
<div className="mb-4">
|
||||
<h3 className="text-base font-medium mb-3">전체 예산 설정</h3>
|
||||
<div className="flex items-center space-x-2">
|
||||
<input
|
||||
type="text"
|
||||
className="w-full p-2 rounded neuro-pressed"
|
||||
placeholder="예산 금액 입력"
|
||||
value={targetAmount > 0 ? targetAmount : ''}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value.replace(/[^0-9]/g, '');
|
||||
if (value) {
|
||||
const amount = parseInt(value, 10);
|
||||
onSaveBudget(amount, categoryBudgets);
|
||||
}
|
||||
}}
|
||||
onSave={(type, amount) => {
|
||||
onSaveBudget(amount);
|
||||
setShowBudgetInput(false);
|
||||
}}
|
||||
highlight={isFirstBudget}
|
||||
/>
|
||||
<Button
|
||||
onClick={() => setShowBudgetInput(false)}
|
||||
size="icon"
|
||||
className="bg-neuro-income hover:bg-neuro-income/90 text-white"
|
||||
>
|
||||
<Wallet size={18} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-base font-medium mb-3">카테고리별 예산 설정</h3>
|
||||
<CategoryBudgetInputs
|
||||
categoryBudgets={categoryBudgets}
|
||||
handleCategoryInputChange={handleCategoryInputChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import React from 'react';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { EXPENSE_CATEGORIES } from '@/constants/categoryIcons';
|
||||
import { useIsMobile } from '@/hooks/use-mobile';
|
||||
import { toast } from '@/components/ui/use-toast';
|
||||
|
||||
interface CategoryBudgetInputsProps {
|
||||
categoryBudgets: Record<string, number>;
|
||||
@@ -15,7 +14,6 @@ const CategoryBudgetInputs: React.FC<CategoryBudgetInputsProps> = ({
|
||||
handleCategoryInputChange
|
||||
}) => {
|
||||
const isMobile = useIsMobile();
|
||||
const previousBudgetsRef = useRef<Record<string, number>>({});
|
||||
|
||||
// Format number with commas for display
|
||||
const formatWithCommas = (value: number): string => {
|
||||
@@ -36,40 +34,6 @@ const CategoryBudgetInputs: React.FC<CategoryBudgetInputsProps> = ({
|
||||
}, 300);
|
||||
};
|
||||
|
||||
// 컴포넌트가 마운트될 때 categoryBudgets가 로컬 스토리지에서 다시 로드되도록 이벤트 리스너 설정
|
||||
useEffect(() => {
|
||||
const handleStorageChange = () => {
|
||||
// 부모 컴포넌트에서 데이터가 업데이트되므로 별도 처리 필요 없음
|
||||
console.log('카테고리 예산 데이터 변경 감지됨');
|
||||
};
|
||||
|
||||
window.addEventListener('categoryBudgetsUpdated', handleStorageChange);
|
||||
window.addEventListener('storage', handleStorageChange);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('categoryBudgetsUpdated', handleStorageChange);
|
||||
window.removeEventListener('storage', handleStorageChange);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// 값이 변경될 때마다 토스트 메시지 표시
|
||||
useEffect(() => {
|
||||
const hasChanges = Object.keys(categoryBudgets).some(
|
||||
category => categoryBudgets[category] !== previousBudgetsRef.current[category]
|
||||
);
|
||||
|
||||
const totalBudget = Object.values(categoryBudgets).reduce((sum, val) => sum + val, 0);
|
||||
const previousTotal = Object.values(previousBudgetsRef.current).reduce((sum, val) => sum + val, 0);
|
||||
|
||||
// 이전 값과 다르고, 총 예산이 있는 경우 토스트 표시
|
||||
if (hasChanges && totalBudget > 0 && totalBudget !== previousTotal) {
|
||||
// 토스트 메시지는 storage에서 처리
|
||||
}
|
||||
|
||||
// 현재 값을 이전 값으로 업데이트
|
||||
previousBudgetsRef.current = { ...categoryBudgets };
|
||||
}, [categoryBudgets]);
|
||||
|
||||
return (
|
||||
<div className="space-y-2 w-full">
|
||||
{EXPENSE_CATEGORIES.map(category => (
|
||||
|
||||
Reference in New Issue
Block a user