Files
zellyy-finance/src/hooks/budget/useBudgetTabContent.ts
hansoo 9851627ff1 feat: Add CI/CD pipeline and code quality improvements
- Add GitHub Actions workflow for automated CI/CD
- Configure Node.js 18.x and 20.x matrix testing
- Add TypeScript type checking step
- Add ESLint code quality checks with enhanced rules
- Add Prettier formatting verification
- Add production build validation
- Upload build artifacts for deployment
- Set up automated testing on push/PR
- Replace console.log with environment-aware logger
- Add pre-commit hooks for code quality
- Exclude archive folder from linting

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-07-12 15:27:54 +09:00

181 lines
5.8 KiB
TypeScript

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<string, number>
) => void;
}
interface UseBudgetTabContentReturn {
categoryBudgets: Record<string, number>;
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<string, number>
>({});
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<string, number> = {};
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,
};
};