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:
hansoo
2025-07-12 15:27:54 +09:00
parent 6a208d6b06
commit 9851627ff1
411 changed files with 14458 additions and 8680 deletions

View File

@@ -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,
};
};