Refactor budget calculation logic

Modify budget calculation to use monthly input as the base and adjust tab order.

src/components/BudgetProgressCard.tsx

@@ -53,8 +53,8 @@ const BudgetProgressCard: React.FC<BudgetProgressCardProps> = ({
   // 초기 탭 설정을 위한 효과
   useEffect(() => {
     if (!selectedTab) {
-      console.log("초기 탭 설정: monthly");
+      console.log("초기 탭 설정: daily");
-      setSelectedTab('monthly');
+      setSelectedTab('daily');
     }
   }, []);
 
@@ -76,7 +76,7 @@ const BudgetProgressCard: React.FC<BudgetProgressCardProps> = ({
       monthly: budgetData.monthly.targetAmount
     });
     
-    // 탭 값 업데이트 (주간 탭은 별도 처리 없이 직접 사용)
+    // 탭 값 업데이트
     setSelectedTab(value);
   };
 
@@ -89,7 +89,7 @@ const BudgetProgressCard: React.FC<BudgetProgressCardProps> = ({
 
   return (
     <div className="neuro-card mb-6 overflow-hidden w-full">
-      <Tabs defaultValue="monthly" value={selectedTab} onValueChange={handleTabChange} className="w-full">
+      <Tabs defaultValue="daily" value={selectedTab} onValueChange={handleTabChange} className="w-full">
         <TabsList className="grid grid-cols-3 mb-4 bg-transparent">
           <TabsTrigger 
             value="daily"
@@ -97,18 +97,18 @@ const BudgetProgressCard: React.FC<BudgetProgressCardProps> = ({
           >
             오늘
           </TabsTrigger>
-          <TabsTrigger 
-            value="monthly" 
-            className="data-[state=active]:shadow-[inset_4px_4px_8px_rgba(209,217,230,0.9),inset_-4px_-4px_8px_rgba(255,255,255,0.9)] data-[state=active]:bg-transparent data-[state=active]:font-medium transition-all duration-200"
-          >
-            월간
-          </TabsTrigger>
           <TabsTrigger 
             value="weekly" 
             className="data-[state=active]:shadow-[inset_4px_4px_8px_rgba(209,217,230,0.9),inset_-4px_-4px_8px_rgba(255,255,255,0.9)] data-[state=active]:bg-transparent data-[state=active]:font-medium transition-all duration-200"
           >
             주간
           </TabsTrigger>
+          <TabsTrigger 
+            value="monthly" 
+            className="data-[state=active]:shadow-[inset_4px_4px_8px_rgba(209,217,230,0.9),inset_-4px_-4px_8px_rgba(255,255,255,0.9)] data-[state=active]:bg-transparent data-[state=active]:font-medium transition-all duration-200"
+          >
+            월간
+          </TabsTrigger>
         </TabsList>
         
         <div className="text-sm text-gray-600 mb-2 px-1">지출 / 예산</div>

src/contexts/budget/hooks/useBudgetGoalUpdate.ts

@@ -34,7 +34,7 @@ export const useBudgetGoalUpdate = (
       // 현재 최신 예산 데이터 로드 (다른 곳에서 변경되었을 수 있음)
       const currentBudgetData = safelyLoadBudgetData();
       
-      // 예산 데이터 업데이트
+      // 예산 데이터 업데이트 - 월간 기준으로 계산
       const updatedBudgetData = calculateUpdatedBudgetData(currentBudgetData, type, amount);
       console.log('새 예산 데이터 계산됨:', updatedBudgetData);
       
@@ -46,7 +46,7 @@ export const useBudgetGoalUpdate = (
       // 이벤트 발생시켜 다른 컴포넌트에 알림
       window.dispatchEvent(new Event('budgetDataUpdated'));
       
-      // 1초 후 데이터 갱신 이벤트 한 번 더 발생 (UI 갱신 확실히 하기 위함)
+      // 시간차를 두고 이벤트 추가 발생 (UI 갱신 확실히 하기 위함)
       setTimeout(() => {
         window.dispatchEvent(new Event('budgetDataUpdated'));
         window.dispatchEvent(new StorageEvent('storage', {
@@ -55,15 +55,6 @@ export const useBudgetGoalUpdate = (
         }));
       }, 500);
       
-      // 2초 후 데이터 갱신 이벤트 한 번 더 발생
-      setTimeout(() => {
-        window.dispatchEvent(new Event('budgetDataUpdated'));
-        window.dispatchEvent(new StorageEvent('storage', {
-          key: 'budgetData',
-          newValue: JSON.stringify(updatedBudgetData)
-        }));
-      }, 2000);
-      
       console.log('예산 목표 업데이트 완료:', updatedBudgetData);
       
       // 성공 메시지 표시

src/contexts/budget/hooks/useBudgetState.ts

@@ -9,7 +9,7 @@ import { safelyLoadBudgetData } from '../budgetUtils';
 export const useBudgetState = () => {
   // 초기 데이터 로드 시 safelyLoadBudgetData 함수 사용
   const [budgetData, setBudgetData] = useState<BudgetData>(safelyLoadBudgetData());
-  const [selectedTab, setSelectedTab] = useState<BudgetPeriod>("daily");
+  const [selectedTab, setSelectedTab] = useState<BudgetPeriod>("daily"); // 초기값을 daily로 변경
   const [isInitialized, setIsInitialized] = useState(false);
   const [lastUpdateTime, setLastUpdateTime] = useState(0);
 

src/contexts/budget/hooks/useExtendedBudgetUpdate.ts

@@ -17,9 +17,20 @@ export const useExtendedBudgetUpdate = (
   ) => {
     console.log('확장 예산 업데이트 시작:', type, amount, newCategoryBudgets);
     
-    // 예산 업데이트
+    // 항상 입력값을 월간 기준으로 변환하여 예산 업데이트
-    console.log(`예산 업데이트: 타입=${type}, 금액=${amount}`);
+    let monthlyAmount = amount;
-    handleBudgetUpdate(type, amount);
+    
+    if (type === 'weekly') {
+      // 주간 예산을 월간으로 변환 (4.345주/월)
+      monthlyAmount = Math.round(amount * 4.345);
+    } else if (type === 'daily') {
+      // 일일 예산을 월간으로 변환 (30일/월)
+      monthlyAmount = Math.round(amount * 30);
+    }
+    
+    // 월간 기준으로 예산 업데이트
+    console.log(`예산 업데이트: 원래 타입=${type}, 금액=${amount}, 변환된 월간 금액=${monthlyAmount}`);
+    handleBudgetUpdate('monthly', monthlyAmount);
     
     // 카테고리 예산 업데이트 (제공된 경우)
     if (newCategoryBudgets) {

src/contexts/budget/utils/budgetCalculation.ts

@@ -21,24 +21,22 @@ export const calculateUpdatedBudgetData = (
   let weeklyAmount = 0;
   let dailyAmount = 0;
   
-  // 입력된 타입에 따라 적절한 예산 금액 설정
+  // 항상 월간 예산을 기준으로 계산 (어떤 타입이 입력되든)
   if (type === 'monthly') {
     // 월간 예산이 입력된 경우 - 이를 기준으로 주간/일일 계산
     monthlyAmount = amount;
-    weeklyAmount = Math.round(monthlyAmount / 4.345);
-    dailyAmount = 4000000; // 일일 예산 고정 값
   } else if (type === 'weekly') {
-    // 주간 예산이 입력된 경우 - 이를 기준으로 월간 계산, 일일은 고정값
+    // 주간 예산이 입력된 경우 - 이를 월간으로 환산 (4.345주/월 기준)
-    weeklyAmount = amount;
+    monthlyAmount = Math.round(amount * 4.345);
-    monthlyAmount = amount; // 주간 예산을 월간 예산으로 직접 사용
-    dailyAmount = 4000000; // 일일 예산 고정 값
   } else if (type === 'daily') {
-    // 일일 예산이 입력된 경우 - 고정값 사용
+    // 일일 예산이 입력된 경우 - 이를 월간으로 환산 (30일/월 기준)
-    dailyAmount = 4000000; // 일일 예산 고정 값
+    monthlyAmount = Math.round(amount * 30);
-    weeklyAmount = Math.round(dailyAmount * 7);
-    monthlyAmount = Math.round(dailyAmount * 30);
   }
   
+  // 월간 예산을 기준으로 주간/일일 예산 계산
+  weeklyAmount = Math.round(monthlyAmount / 4.345); // 한 달 평균 4.345주
+  dailyAmount = Math.round(monthlyAmount / 30);     // 한 달 평균 30일
+  
   console.log(`최종 예산 계산 결과: 월간=${monthlyAmount}원, 주간=${weeklyAmount}원, 일일=${dailyAmount}원`);
   
   // 로그에 이전 예산 데이터 출력