Revert previous changes

Reverting the previous commit due to unresolved issues.
2025-03-22 08:21:57 +00:00
parent ae2a28efbb
commit 7b29f31c7b
4 changed files with 64 additions and 26 deletions
--- a/src/components/BudgetTabContent.tsx
+++ b/src/components/BudgetTabContent.tsx
@@ -29,17 +29,22 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
  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<BudgetTabContentProps> = ({
  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<BudgetTabContentProps> = ({
            <div
              className={`h-full ${progressBarColor} transition-all duration-700 ease-out`}
              style={{
-                width: `${Math.min(percentage, 100)}%`,
+                width: `${percentage}%`,
              }}
            />
          </div>
@@ -135,7 +140,7 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
              {budgetStatusText}{budgetAmount}
            </div>
            <div className="text-sm font-medium text-gray-500">
-              {percentage}%
+              {actualPercentage}%
            </div>
          </div>

--- 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,
--- 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<void>(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<string, number>
+    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 {
--- 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<string, number>
  ) => {
-    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]);