From 42c9355e76a09ef4195de791714d5fc3ab81a3d3 Mon Sep 17 00:00:00 2001 From: "gpt-engineer-app[bot]" <159125892+gpt-engineer-app[bot]@users.noreply.github.com> Date: Tue, 18 Mar 2025 02:22:58 +0000 Subject: [PATCH] Refactor category budget setting The category budget setting is now based on the monthly budget amount, which is then divided into daily and weekly budgets. --- src/components/BudgetTabContent.tsx | 33 ++++-- src/components/security/DataResetSection.tsx | 2 +- src/contexts/budget/budgetUtils.ts | 105 ++++++------------- src/contexts/budget/storage/resetStorage.ts | 47 ++++----- src/utils/storageUtils.ts | 6 +- 5 files changed, 78 insertions(+), 115 deletions(-) diff --git a/src/components/BudgetTabContent.tsx b/src/components/BudgetTabContent.tsx index 7b98d42..7fe32a9 100644 --- a/src/components/BudgetTabContent.tsx +++ b/src/components/BudgetTabContent.tsx @@ -1,4 +1,3 @@ - import React, { useState, useEffect } from 'react'; import { CirclePlus, Save, Check } from 'lucide-react'; import BudgetInputCard from './BudgetInputCard'; @@ -94,17 +93,23 @@ const BudgetTabContent: React.FC = ({ // 예산 여부에 따른 텍스트 결정 const budgetButtonText = targetAmount > 0 ? "예산 수정하기" : "예산 입력하기"; - return
- {targetAmount > 0 ? <> + + return ( +
+ {targetAmount > 0 ? ( + <>
{formatCurrency(spentAmount)}
/ {formatCurrency(targetAmount)}
-
+
@@ -125,15 +130,19 @@ const BudgetTabContent: React.FC = ({ {budgetButtonText}
- :
+ + ) : ( +
아직 예산이 설정되지 않았습니다
-
} +
+ )} - {showBudgetInput &&
+ {showBudgetInput && ( +

카테고리별 예산 설정

@@ -155,7 +164,9 @@ const BudgetTabContent: React.FC = ({
-
} -
; +
+ )} +
+ ); }; export default BudgetTabContent; diff --git a/src/components/security/DataResetSection.tsx b/src/components/security/DataResetSection.tsx index cc3df86..a2ec32a 100644 --- a/src/components/security/DataResetSection.tsx +++ b/src/components/security/DataResetSection.tsx @@ -18,8 +18,8 @@ const DataResetSection = () => { await resetAllData(); setIsResetDialogOpen(false); + // 데이터 초기화 후 애플리케이션 리로드 // toast 알림은 useDataReset.ts에서 처리하므로 여기서는 제거 - // 페이지 새로고침 코드 제거 (navigate 사용으로 대체) }; return ( diff --git a/src/contexts/budget/budgetUtils.ts b/src/contexts/budget/budgetUtils.ts index 3270f30..692f748 100644 --- a/src/contexts/budget/budgetUtils.ts +++ b/src/contexts/budget/budgetUtils.ts @@ -1,4 +1,3 @@ - import { BudgetData, BudgetPeriod, CategoryBudget, Transaction } from './types'; import { EXPENSE_CATEGORIES } from '@/constants/categoryIcons'; @@ -53,7 +52,7 @@ export const calculateCategorySpending = ( })); }; -// 예산 데이터 업데이트 계산 +// 예산 데이터 업데이트 계산 - 수정된 함수 export const calculateUpdatedBudgetData = ( prevBudgetData: BudgetData, type: BudgetPeriod, @@ -61,79 +60,35 @@ export const calculateUpdatedBudgetData = ( ): BudgetData => { console.log(`예산 업데이트 계산: 타입=${type}, 금액=${amount}`); - if (type === 'monthly') { - // 문제 수정: 일일 예산은 월간/30, 주간 예산은 월간/4.3으로 계산 - const dailyAmount = Math.round(amount / 30); - const weeklyAmount = Math.round(amount / 4.3); - - console.log(`월간 예산 ${amount}원으로 설정 → 일일: ${dailyAmount}원, 주간: ${weeklyAmount}원`); - - return { - daily: { - targetAmount: dailyAmount, - spentAmount: prevBudgetData.daily.spentAmount, - remainingAmount: Math.max(0, dailyAmount - prevBudgetData.daily.spentAmount) - }, - weekly: { - targetAmount: weeklyAmount, - spentAmount: prevBudgetData.weekly.spentAmount, - remainingAmount: Math.max(0, weeklyAmount - prevBudgetData.weekly.spentAmount) - }, - monthly: { - targetAmount: amount, - spentAmount: prevBudgetData.monthly.spentAmount, - remainingAmount: Math.max(0, amount - prevBudgetData.monthly.spentAmount) - } - }; - } else if (type === 'weekly') { - // 문제 수정: 월간 예산은 주간*4.3, 일일 예산은 주간/7로 계산 - const monthlyAmount = Math.round(amount * 4.3); - const dailyAmount = Math.round(amount / 7); - - console.log(`주간 예산 ${amount}원으로 설정 → 월간: ${monthlyAmount}원, 일일: ${dailyAmount}원`); - - return { - daily: { - targetAmount: dailyAmount, - spentAmount: prevBudgetData.daily.spentAmount, - remainingAmount: Math.max(0, dailyAmount - prevBudgetData.daily.spentAmount) - }, - weekly: { - targetAmount: amount, - spentAmount: prevBudgetData.weekly.spentAmount, - remainingAmount: Math.max(0, amount - prevBudgetData.weekly.spentAmount) - }, - monthly: { - targetAmount: monthlyAmount, - spentAmount: prevBudgetData.monthly.spentAmount, - remainingAmount: Math.max(0, monthlyAmount - prevBudgetData.monthly.spentAmount) - } - }; - } else { - // 문제 수정: 주간 예산은 일일*7, 월간 예산은 일일*30으로 계산 - const weeklyAmount = Math.round(amount * 7); - const monthlyAmount = Math.round(amount * 30); - - console.log(`일일 예산 ${amount}원으로 설정 → 주간: ${weeklyAmount}원, 월간: ${monthlyAmount}원`); - - return { - daily: { - targetAmount: amount, - spentAmount: prevBudgetData.daily.spentAmount, - remainingAmount: Math.max(0, amount - prevBudgetData.daily.spentAmount) - }, - weekly: { - targetAmount: weeklyAmount, - spentAmount: prevBudgetData.weekly.spentAmount, - remainingAmount: Math.max(0, weeklyAmount - prevBudgetData.weekly.spentAmount) - }, - monthly: { - targetAmount: monthlyAmount, - spentAmount: prevBudgetData.monthly.spentAmount, - remainingAmount: Math.max(0, monthlyAmount - prevBudgetData.monthly.spentAmount) - } - }; - } + // 카테고리 예산은 항상 월간 기준이므로, monthly 계산 방식 사용 + // 월간→주간→일간 순서로 변환 + const monthlyAmount = type === 'monthly' ? amount : + type === 'weekly' ? Math.round(amount * 4.3) : + Math.round(amount * 30); + + // 월간 금액에서 주간, 일간 계산 + const weeklyAmount = Math.round(monthlyAmount / 4.3); + const dailyAmount = Math.round(monthlyAmount / 30); + + console.log(`예산 변환: 월간=${monthlyAmount}원, 주간=${weeklyAmount}원, 일간=${dailyAmount}원`); + + return { + daily: { + targetAmount: dailyAmount, + spentAmount: prevBudgetData.daily.spentAmount, + remainingAmount: Math.max(0, dailyAmount - prevBudgetData.daily.spentAmount) + }, + weekly: { + targetAmount: weeklyAmount, + spentAmount: prevBudgetData.weekly.spentAmount, + remainingAmount: Math.max(0, weeklyAmount - prevBudgetData.weekly.spentAmount) + }, + monthly: { + targetAmount: monthlyAmount, + spentAmount: prevBudgetData.monthly.spentAmount, + remainingAmount: Math.max(0, monthlyAmount - prevBudgetData.monthly.spentAmount) + } + }; }; // 지출액 계산 (일일, 주간, 월간) diff --git a/src/contexts/budget/storage/resetStorage.ts b/src/contexts/budget/storage/resetStorage.ts index 45251e9..3cea7e1 100644 --- a/src/contexts/budget/storage/resetStorage.ts +++ b/src/contexts/budget/storage/resetStorage.ts @@ -23,18 +23,18 @@ export const resetAllData = (): void => { 'categoryBudgets', 'budgetData', 'budget', - 'monthlyExpenses', // 월간 지출 데이터 - 'categorySpending', // 카테고리별 지출 데이터 - 'expenseAnalytics', // 지출 분석 데이터 - 'expenseHistory', // 지출 이력 - 'budgetHistory', // 예산 이력 - 'analyticsCache', // 분석 캐시 데이터 - 'monthlyTotals', // 월간 합계 데이터 - 'analytics', // 분석 페이지 데이터 - 'dailyBudget', // 일일 예산 - 'weeklyBudget', // 주간 예산 - 'monthlyBudget', // 월간 예산 - 'chartData', // 차트 데이터 + 'monthlyExpenses', + 'categorySpending', + 'expenseAnalytics', + 'expenseHistory', + 'budgetHistory', + 'analyticsCache', + 'monthlyTotals', + 'analytics', + 'dailyBudget', + 'weeklyBudget', + 'monthlyBudget', + 'chartData', ]; try { @@ -42,6 +42,7 @@ export const resetAllData = (): void => { dataKeys.forEach(key => { console.log(`삭제 중: ${key}`); localStorage.removeItem(key); + localStorage.removeItem(`${key}_backup`); // 백업 키도 함께 삭제 }); // 파일별 초기화 함수 호출 @@ -61,19 +62,15 @@ export const resetAllData = (): void => { localStorage.setItem('transactions_backup', JSON.stringify([])); // 이벤트 발생시켜 데이터 로드 트리거 - 이벤트 순서 최적화 - try { - // 한 번에 모든 이벤트 발생 - const events = [ - new Event('transactionUpdated'), - new Event('budgetDataUpdated'), - new Event('categoryBudgetsUpdated'), - new StorageEvent('storage') - ]; - - events.forEach(event => window.dispatchEvent(event)); - } catch (e) { - console.error('이벤트 발생 오류:', e); - } + const events = [ + new Event('transactionUpdated'), + new Event('budgetDataUpdated'), + new Event('categoryBudgetsUpdated'), + new StorageEvent('storage') + ]; + + // 모든 이벤트 동시에 발생 + events.forEach(event => window.dispatchEvent(event)); // 중요: 사용자 설정 값 복원 (백업한 값이 있는 경우) if (dontShowWelcomeValue) { diff --git a/src/utils/storageUtils.ts b/src/utils/storageUtils.ts index b670065..c8a2949 100644 --- a/src/utils/storageUtils.ts +++ b/src/utils/storageUtils.ts @@ -65,7 +65,7 @@ export const loadBudgetFromStorage = (): number => { return 0; }; -// 모든 데이터 완전히 초기화 +// 모든 데이터 완전히 초기화 - 성능 최적화 export const resetAllStorageData = (): void => { console.log('완전 초기화 시작 - resetAllStorageData'); @@ -80,7 +80,7 @@ export const resetAllStorageData = (): void => { // 모든 Storage 키 목록 (로그인 관련 항목 제외) const keysToRemove = [ - 'transactions', + 'transactions', 'budget', 'monthlyExpenses', 'budgetData', @@ -100,7 +100,7 @@ export const resetAllStorageData = (): void => { 'budgetHistory', 'transactionHistory', 'lastSync', - 'syncEnabled', // 동기화 설정도 초기화 + 'syncEnabled' ]; // 키 동시에 삭제 (성능 최적화)