- 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>
181 lines
5.8 KiB
TypeScript
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,
|
|
};
|
|
};
|