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>
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { EXPENSE_CATEGORIES } from '@/constants/categoryIcons';
|
||||
import { useState, useEffect } from "react";
|
||||
import { logger } from "@/utils/logger";
|
||||
import { EXPENSE_CATEGORIES } from "@/constants/categoryIcons";
|
||||
|
||||
interface BudgetData {
|
||||
targetAmount: number;
|
||||
@@ -11,7 +11,10 @@ interface BudgetData {
|
||||
interface UseBudgetTabContentProps {
|
||||
data: BudgetData;
|
||||
calculatePercentage: (spent: number, target: number) => number;
|
||||
onSaveBudget: (amount: number, categoryBudgets?: Record<string, number>) => void;
|
||||
onSaveBudget: (
|
||||
amount: number,
|
||||
categoryBudgets?: Record<string, number>
|
||||
) => void;
|
||||
}
|
||||
|
||||
interface UseBudgetTabContentReturn {
|
||||
@@ -33,53 +36,64 @@ interface UseBudgetTabContentReturn {
|
||||
export const useBudgetTabContent = ({
|
||||
data,
|
||||
calculatePercentage,
|
||||
onSaveBudget
|
||||
onSaveBudget,
|
||||
}: UseBudgetTabContentProps): UseBudgetTabContentReturn => {
|
||||
const [categoryBudgets, setCategoryBudgets] = useState<Record<string, number>>({});
|
||||
const [categoryBudgets, setCategoryBudgets] = useState<
|
||||
Record<string, number>
|
||||
>({});
|
||||
const spentAmount = data.spentAmount;
|
||||
const targetAmount = data.targetAmount;
|
||||
|
||||
// 로그 추가 - 받은 데이터 확인
|
||||
useEffect(() => {
|
||||
console.log(`BudgetTabContent 수신 데이터:`, data);
|
||||
logger.info(`BudgetTabContent 수신 데이터:`, data);
|
||||
}, [data]);
|
||||
|
||||
// 전역 예산 데이터가 변경되었을 때 로컬 상태 갱신
|
||||
useEffect(() => {
|
||||
const handleBudgetDataUpdated = () => {
|
||||
console.log(`BudgetTabContent: 전역 예산 데이터 이벤트 감지, 현재 targetAmount=${targetAmount}`);
|
||||
logger.info(
|
||||
`BudgetTabContent: 전역 예산 데이터 이벤트 감지, 현재 targetAmount=${targetAmount}`
|
||||
);
|
||||
};
|
||||
|
||||
window.addEventListener('budgetDataUpdated', handleBudgetDataUpdated);
|
||||
return () => window.removeEventListener('budgetDataUpdated', handleBudgetDataUpdated);
|
||||
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 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 isLowBudget =
|
||||
targetAmount > 0 && actualPercentage >= 90 && actualPercentage < 100;
|
||||
|
||||
// 프로그레스 바 색상 결정
|
||||
const progressBarColor = isOverBudget ? 'bg-red-500' : isLowBudget ? 'bg-yellow-400' : 'bg-neuro-income';
|
||||
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 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 => ({
|
||||
const numValue = parseInt(value.replace(/,/g, ""), 10) || 0;
|
||||
setCategoryBudgets((prev) => ({
|
||||
...prev,
|
||||
[category]: numValue
|
||||
[category]: numValue,
|
||||
}));
|
||||
};
|
||||
|
||||
@@ -87,10 +101,10 @@ export const useBudgetTabContent = ({
|
||||
const calculateTotalBudget = () => {
|
||||
// 모든 EXPENSE_CATEGORIES에 있는 카테고리 포함해서 합계 계산
|
||||
let total = 0;
|
||||
EXPENSE_CATEGORIES.forEach(category => {
|
||||
EXPENSE_CATEGORIES.forEach((category) => {
|
||||
total += categoryBudgets[category] || 0;
|
||||
});
|
||||
console.log('카테고리 예산 총합:', total, categoryBudgets);
|
||||
logger.info("카테고리 예산 총합:", total, categoryBudgets);
|
||||
return total;
|
||||
};
|
||||
|
||||
@@ -98,25 +112,29 @@ export const useBudgetTabContent = ({
|
||||
const handleSaveCategoryBudgets = () => {
|
||||
// 카테고리 예산 기본값 설정 - 모든 카테고리 포함
|
||||
const updatedCategoryBudgets: Record<string, number> = {};
|
||||
EXPENSE_CATEGORIES.forEach(category => {
|
||||
EXPENSE_CATEGORIES.forEach((category) => {
|
||||
updatedCategoryBudgets[category] = categoryBudgets[category] || 0;
|
||||
});
|
||||
|
||||
|
||||
const totalBudget = calculateTotalBudget();
|
||||
console.log('카테고리 예산 저장 및 총 예산 설정:', totalBudget, updatedCategoryBudgets);
|
||||
|
||||
logger.info(
|
||||
"카테고리 예산 저장 및 총 예산 설정:",
|
||||
totalBudget,
|
||||
updatedCategoryBudgets
|
||||
);
|
||||
|
||||
// 총액이 0이 아닐 때만 저장 처리
|
||||
if (totalBudget > 0) {
|
||||
// 명시적으로 월간 예산으로 설정 - 항상 월간 예산만 저장
|
||||
onSaveBudget(totalBudget, updatedCategoryBudgets);
|
||||
|
||||
|
||||
// 이벤트 발생 추가 (데이터 저장 후 즉시 UI 업데이트를 위해)
|
||||
setTimeout(() => {
|
||||
console.log('예산 데이터 저장 후 이벤트 발생');
|
||||
window.dispatchEvent(new Event('budgetDataUpdated'));
|
||||
logger.info("예산 데이터 저장 후 이벤트 발생");
|
||||
window.dispatchEvent(new Event("budgetDataUpdated"));
|
||||
}, 200);
|
||||
} else {
|
||||
alert('예산을 입력해주세요.');
|
||||
alert("예산을 입력해주세요.");
|
||||
}
|
||||
};
|
||||
|
||||
@@ -124,14 +142,14 @@ export const useBudgetTabContent = ({
|
||||
useEffect(() => {
|
||||
// 로컬 스토리지에서 카테고리 예산 불러오기
|
||||
try {
|
||||
const storedCategoryBudgets = localStorage.getItem('categoryBudgets');
|
||||
const storedCategoryBudgets = localStorage.getItem("categoryBudgets");
|
||||
if (storedCategoryBudgets) {
|
||||
const parsedBudgets = JSON.parse(storedCategoryBudgets);
|
||||
console.log('저장된 카테고리 예산 불러옴:', parsedBudgets);
|
||||
logger.info("저장된 카테고리 예산 불러옴:", parsedBudgets);
|
||||
setCategoryBudgets(parsedBudgets);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('카테고리 예산 불러오기 오류:', error);
|
||||
logger.error("카테고리 예산 불러오기 오류:", error);
|
||||
}
|
||||
}, []);
|
||||
|
||||
@@ -139,7 +157,10 @@ export const useBudgetTabContent = ({
|
||||
const budgetButtonText = isBudgetSet ? "예산 수정하기" : "예산 입력하기";
|
||||
|
||||
// 화면에 표시할 내용 - 디버깅을 위한 로그 추가
|
||||
console.log(`BudgetTabContent 렌더링: targetAmount=${targetAmount}, isBudgetSet=${isBudgetSet}, 표시될 화면:`, isBudgetSet ? "예산 진행 상황" : "예산 입력하기 버튼");
|
||||
logger.info(
|
||||
`BudgetTabContent 렌더링: targetAmount=${targetAmount}, isBudgetSet=${isBudgetSet}, 표시될 화면:`,
|
||||
isBudgetSet ? "예산 진행 상황" : "예산 입력하기 버튼"
|
||||
);
|
||||
|
||||
return {
|
||||
categoryBudgets,
|
||||
@@ -154,6 +175,6 @@ export const useBudgetTabContent = ({
|
||||
budgetStatusText,
|
||||
budgetAmount,
|
||||
budgetButtonText,
|
||||
calculateTotalBudget
|
||||
calculateTotalBudget,
|
||||
};
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user