import { useState, useEffect } from "react"; import { logger } from "@/utils/logger"; import { EXPENSE_CATEGORIES } from "@/constants/categoryIcons"; interface BudgetData { targetAmount: number; spentAmount: number; remainingAmount: number; } interface UseBudgetTabContentProps { data: BudgetData; calculatePercentage: (spent: number, target: number) => number; onSaveBudget: ( amount: number, categoryBudgets?: Record ) => void; } interface UseBudgetTabContentReturn { categoryBudgets: Record; handleCategoryInputChange: (value: string, category: string) => void; handleSaveCategoryBudgets: () => void; isBudgetSet: boolean; actualPercentage: number; percentage: number; isOverBudget: boolean; isLowBudget: boolean; progressBarColor: string; budgetStatusText: string; budgetAmount: string; budgetButtonText: string; calculateTotalBudget: () => number; } export const useBudgetTabContent = ({ data, calculatePercentage, onSaveBudget, }: UseBudgetTabContentProps): UseBudgetTabContentReturn => { const [categoryBudgets, setCategoryBudgets] = useState< Record >({}); const spentAmount = data.spentAmount; const targetAmount = data.targetAmount; // 로그 추가 - 받은 데이터 확인 useEffect(() => { logger.info(`BudgetTabContent 수신 데이터:`, data); }, [data]); // 전역 예산 데이터가 변경되었을 때 로컬 상태 갱신 useEffect(() => { const handleBudgetDataUpdated = () => { logger.info( `BudgetTabContent: 전역 예산 데이터 이벤트 감지, 현재 targetAmount=${targetAmount}` ); }; window.addEventListener("budgetDataUpdated", handleBudgetDataUpdated); return () => window.removeEventListener("budgetDataUpdated", handleBudgetDataUpdated); }, [targetAmount]); // 예산 설정 여부 확인 - 데이터 targetAmount가 실제로 0보다 큰지 확인 const isBudgetSet = targetAmount > 0; // 실제 백분율 계산 (초과해도 실제 퍼센트로 표시) 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 && actualPercentage >= 90 && actualPercentage < 100; // 프로그레스 바 색상 결정 const progressBarColor = isOverBudget ? "bg-red-500" : isLowBudget ? "bg-yellow-400" : "bg-neuro-income"; // 남은 예산 또는 초과 예산 텍스트 및 금액 const budgetStatusText = isOverBudget ? "예산 초과: " : "남은 예산: "; const budgetAmount = isOverBudget ? Math.abs(targetAmount - spentAmount).toLocaleString() : Math.max(0, targetAmount - spentAmount).toLocaleString(); const handleCategoryInputChange = (value: string, category: string) => { const numValue = parseInt(value.replace(/,/g, ""), 10) || 0; setCategoryBudgets((prev) => ({ ...prev, [category]: numValue, })); }; // 카테고리별 예산 합계 계산 const calculateTotalBudget = () => { // 모든 EXPENSE_CATEGORIES에 있는 카테고리 포함해서 합계 계산 let total = 0; EXPENSE_CATEGORIES.forEach((category) => { total += categoryBudgets[category] || 0; }); logger.info("카테고리 예산 총합:", total, categoryBudgets); return total; }; // 카테고리 예산 저장 const handleSaveCategoryBudgets = () => { // 카테고리 예산 기본값 설정 - 모든 카테고리 포함 const updatedCategoryBudgets: Record = {}; EXPENSE_CATEGORIES.forEach((category) => { updatedCategoryBudgets[category] = categoryBudgets[category] || 0; }); const totalBudget = calculateTotalBudget(); logger.info( "카테고리 예산 저장 및 총 예산 설정:", totalBudget, updatedCategoryBudgets ); // 총액이 0이 아닐 때만 저장 처리 if (totalBudget > 0) { // 명시적으로 월간 예산으로 설정 - 항상 월간 예산만 저장 onSaveBudget(totalBudget, updatedCategoryBudgets); // 이벤트 발생 추가 (데이터 저장 후 즉시 UI 업데이트를 위해) setTimeout(() => { logger.info("예산 데이터 저장 후 이벤트 발생"); window.dispatchEvent(new Event("budgetDataUpdated")); }, 200); } else { alert("예산을 입력해주세요."); } }; // 기존 카테고리 예산 불러오기 useEffect(() => { // 로컬 스토리지에서 카테고리 예산 불러오기 try { const storedCategoryBudgets = localStorage.getItem("categoryBudgets"); if (storedCategoryBudgets) { const parsedBudgets = JSON.parse(storedCategoryBudgets); logger.info("저장된 카테고리 예산 불러옴:", parsedBudgets); setCategoryBudgets(parsedBudgets); } } catch (error) { logger.error("카테고리 예산 불러오기 오류:", error); } }, []); // 예산 여부에 따른 텍스트 결정 const budgetButtonText = isBudgetSet ? "예산 수정하기" : "예산 입력하기"; // 화면에 표시할 내용 - 디버깅을 위한 로그 추가 logger.info( `BudgetTabContent 렌더링: targetAmount=${targetAmount}, isBudgetSet=${isBudgetSet}, 표시될 화면:`, isBudgetSet ? "예산 진행 상황" : "예산 입력하기 버튼" ); return { categoryBudgets, handleCategoryInputChange, handleSaveCategoryBudgets, isBudgetSet, actualPercentage, percentage, isOverBudget, isLowBudget, progressBarColor, budgetStatusText, budgetAmount, budgetButtonText, calculateTotalBudget, }; };