From 7b29f31c7b140a73351ec5cb6045ea9abcfd839a Mon Sep 17 00:00:00 2001 From: "gpt-engineer-app[bot]" <159125892+gpt-engineer-app[bot]@users.noreply.github.com> Date: Sat, 22 Mar 2025 08:21:57 +0000 Subject: [PATCH] Revert previous changes Reverting the previous commit due to unresolved issues. --- src/components/BudgetTabContent.tsx | 23 ++++++---- src/contexts/budget/budgetUtils.ts | 3 ++ .../budget/hooks/useBudgetDataState.ts | 21 ++++++--- .../budget/hooks/useExtendedBudgetUpdate.ts | 43 +++++++++++++------ 4 files changed, 64 insertions(+), 26 deletions(-) diff --git a/src/components/BudgetTabContent.tsx b/src/components/BudgetTabContent.tsx index 74467ad..83fbbd0 100644 --- a/src/components/BudgetTabContent.tsx +++ b/src/components/BudgetTabContent.tsx @@ -29,17 +29,22 @@ const BudgetTabContent: React.FC = ({ const spentAmount = data.spentAmount; const targetAmount = data.targetAmount; - // 실제 백분율 계산 (초과해도 실제 퍼센트로 표시) - const actualPercentage = targetAmount > 0 ? Math.round(spentAmount / targetAmount * 100) : 0; - const percentage = actualPercentage; - - // 예산이 설정되었는지 여부 확인 (정확히 0이면 미설정으로 간주) + // 예산 설정 여부 확인 (더 엄격하게 체크) const isBudgetSet = targetAmount > 0; + + // 디버깅을 위한 로그 추가 + useEffect(() => { + console.log(`BudgetTabContent 렌더링: targetAmount=${targetAmount}, isBudgetSet=${isBudgetSet}`); + }, [targetAmount, isBudgetSet]); + // 실제 백분율 계산 (초과해도 실제 퍼센트로 표시) + const actualPercentage = targetAmount > 0 ? Math.round((spentAmount / targetAmount) * 100) : 0; + const percentage = Math.min(actualPercentage, 100); // 대시보드 표시용으로는 100% 제한 + // 예산 초과 여부 계산 const isOverBudget = spentAmount > targetAmount && targetAmount > 0; // 예산이 얼마 남지 않은 경우 (10% 미만) - const isLowBudget = targetAmount > 0 && percentage >= 90 && percentage < 100; + const isLowBudget = targetAmount > 0 && actualPercentage >= 90 && actualPercentage < 100; // 프로그레스 바 색상 결정 const progressBarColor = isOverBudget ? 'bg-red-500' : isLowBudget ? 'bg-yellow-400' : 'bg-neuro-income'; @@ -49,7 +54,7 @@ const BudgetTabContent: React.FC = ({ const budgetAmount = isOverBudget ? formatCurrency(Math.abs(targetAmount - spentAmount)) : formatCurrency(Math.max(0, targetAmount - spentAmount)); const handleCategoryInputChange = (value: string, category: string) => { - const numValue = parseInt(value, 10) || 0; + const numValue = parseInt(value.replace(/,/g, ''), 10) || 0; setCategoryBudgets(prev => ({ ...prev, [category]: numValue @@ -125,7 +130,7 @@ const BudgetTabContent: React.FC = ({
@@ -135,7 +140,7 @@ const BudgetTabContent: React.FC = ({ {budgetStatusText}{budgetAmount}
- {percentage}% + {actualPercentage}%
diff --git a/src/contexts/budget/budgetUtils.ts b/src/contexts/budget/budgetUtils.ts index 503cf7d..0f73641 100644 --- a/src/contexts/budget/budgetUtils.ts +++ b/src/contexts/budget/budgetUtils.ts @@ -93,6 +93,9 @@ export const calculateUpdatedBudgetData = ( console.log(`최종 예산 계산: 월간=${monthlyAmount}원, 주간=${weeklyAmount}원, 일일=${dailyAmount}원`); // 새로운 BudgetData를 생성하되, 기존의 spentAmount는 유지합니다 + // prevBudgetData 출력하여 디버깅 + console.log("이전 예산 데이터:", JSON.stringify(prevBudgetData)); + return { daily: { targetAmount: dailyAmount, diff --git a/src/contexts/budget/hooks/useBudgetDataState.ts b/src/contexts/budget/hooks/useBudgetDataState.ts index 24dc381..1eb9330 100644 --- a/src/contexts/budget/hooks/useBudgetDataState.ts +++ b/src/contexts/budget/hooks/useBudgetDataState.ts @@ -31,6 +31,7 @@ export const useBudgetDataState = (transactions: Transaction[]) => { await new Promise(resolve => queueMicrotask(() => resolve())); const loadedData = loadBudgetDataFromStorage(); + console.log('로드된 예산 데이터:', JSON.stringify(loadedData)); // 새로 로드한 데이터와 현재 데이터가 다를 때만 업데이트 if (JSON.stringify(loadedData) !== JSON.stringify(budgetData)) { @@ -95,8 +96,7 @@ export const useBudgetDataState = (transactions: Transaction[]) => { // 예산 목표 업데이트 함수 - 수정됨 const handleBudgetGoalUpdate = useCallback(( type: BudgetPeriod, - amount: number, - newCategoryBudgets?: Record + amount: number ) => { try { console.log(`예산 목표 업데이트 시작: ${type}, 금액: ${amount}`); @@ -126,6 +126,11 @@ export const useBudgetDataState = (transactions: Transaction[]) => { // 이벤트 발생시켜 다른 컴포넌트에 알림 window.dispatchEvent(new Event('budgetDataUpdated')); + // 1초 후 데이터 갱신 이벤트 한 번 더 발생 (UI 갱신 확실히 하기 위함) + setTimeout(() => { + window.dispatchEvent(new Event('budgetDataUpdated')); + }, 1000); + console.log('예산 목표 업데이트 완료:', updatedBudgetData); // 성공 메시지 표시 @@ -149,7 +154,13 @@ export const useBudgetDataState = (transactions: Transaction[]) => { try { console.log('예산 데이터 초기화'); clearAllBudgetData(); - setBudgetData(loadBudgetDataFromStorage()); + + // 로컬스토리지에서 다시 로드 + const freshData = loadBudgetDataFromStorage(); + setBudgetData(freshData); + + // 이벤트 발생시켜 다른 컴포넌트에 알림 + window.dispatchEvent(new Event('budgetDataUpdated')); } catch (error) { console.error('예산 데이터 초기화 중 오류:', error); toast({ @@ -160,9 +171,9 @@ export const useBudgetDataState = (transactions: Transaction[]) => { } }, []); - // 예산 데이터 변경 시 로그 기록 + // 디버깅 로그 추가 useEffect(() => { - console.log('최신 예산 데이터:', budgetData); + console.log('최신 예산 데이터:', JSON.stringify(budgetData)); }, [budgetData]); return { diff --git a/src/contexts/budget/hooks/useExtendedBudgetUpdate.ts b/src/contexts/budget/hooks/useExtendedBudgetUpdate.ts index 11f251d..bfc6066 100644 --- a/src/contexts/budget/hooks/useExtendedBudgetUpdate.ts +++ b/src/contexts/budget/hooks/useExtendedBudgetUpdate.ts @@ -17,34 +17,37 @@ export const useExtendedBudgetUpdate = ( amount: number, newCategoryBudgets?: Record ) => { - console.log(`확장된 예산 목표 업데이트: ${type}, 금액: ${amount}`, newCategoryBudgets); + console.log(`확장된 예산 목표 업데이트: ${type}, 금액: ${amount}, 카테고리 예산:`, newCategoryBudgets); // 카테고리 예산이 제공된 경우 업데이트 if (newCategoryBudgets) { try { + // 카테고리명 표준화 처리 + let updatedCategoryBudgets = { ...newCategoryBudgets }; + // 교통비 값이 있으면 교통으로 통합 - if (newCategoryBudgets['교통비'] && !newCategoryBudgets['교통']) { - newCategoryBudgets['교통'] = newCategoryBudgets['교통비']; - delete newCategoryBudgets['교통비']; + if (updatedCategoryBudgets['교통비'] && !updatedCategoryBudgets['교통']) { + updatedCategoryBudgets['교통'] = updatedCategoryBudgets['교통비']; + delete updatedCategoryBudgets['교통비']; } // 식비 값이 있으면 음식으로 통합 - if (newCategoryBudgets['식비'] && !newCategoryBudgets['음식']) { - newCategoryBudgets['음식'] = newCategoryBudgets['식비']; - delete newCategoryBudgets['식비']; + if (updatedCategoryBudgets['식비'] && !updatedCategoryBudgets['음식']) { + updatedCategoryBudgets['음식'] = updatedCategoryBudgets['식비']; + delete updatedCategoryBudgets['식비']; } // 생활비 값이 있으면 쇼핑으로 통합 - if (newCategoryBudgets['생활비'] && !newCategoryBudgets['쇼핑']) { - newCategoryBudgets['쇼핑'] = newCategoryBudgets['생활비']; - delete newCategoryBudgets['생활비']; + if (updatedCategoryBudgets['생활비'] && !updatedCategoryBudgets['쇼핑']) { + updatedCategoryBudgets['쇼핑'] = updatedCategoryBudgets['생활비']; + delete updatedCategoryBudgets['생활비']; } // 카테고리 예산 저장 - updateCategoryBudgets(newCategoryBudgets); + updateCategoryBudgets(updatedCategoryBudgets); // 총액 계산 (0 확인) - const totalAmount = Object.values(newCategoryBudgets).reduce((sum, val) => sum + val, 0); + const totalAmount = Object.values(updatedCategoryBudgets).reduce((sum, val) => sum + val, 0); console.log('카테고리 총액:', totalAmount); if (totalAmount <= 0) { @@ -60,11 +63,19 @@ export const useExtendedBudgetUpdate = ( // 월간 예산을 설정하면 자동으로 일간/주간 예산도 계산됨 handleBudgetGoalUpdate('monthly', totalAmount); + // 명시적으로 BudgetData 업데이트 이벤트 발생 + window.dispatchEvent(new Event('budgetDataUpdated')); + // 성공 토스트 표시 toast({ title: "카테고리 예산 설정 완료", description: `월간 총 예산이 ${totalAmount.toLocaleString()}원으로 설정되었습니다.` }); + + // 1초 후 페이지 리프레시 (데이터 표시 강제 갱신) + setTimeout(() => { + window.dispatchEvent(new Event('budgetDataUpdated')); + }, 1000); } catch (error) { console.error('카테고리 예산 업데이트 오류:', error); toast({ @@ -87,12 +98,20 @@ export const useExtendedBudgetUpdate = ( handleBudgetGoalUpdate(type, amount); + // 명시적으로 BudgetData 업데이트 이벤트 발생 + window.dispatchEvent(new Event('budgetDataUpdated')); + // 성공 토스트 표시 const periodText = type === 'daily' ? '일일' : type === 'weekly' ? '주간' : '월간'; toast({ title: "예산 설정 완료", description: `${periodText} 예산이 ${amount.toLocaleString()}원으로 설정되었습니다.` }); + + // 1초 후 페이지 리프레시 (데이터 표시 강제 갱신) + setTimeout(() => { + window.dispatchEvent(new Event('budgetDataUpdated')); + }, 1000); } }, [categoryBudgets, handleBudgetGoalUpdate, updateCategoryBudgets]);