+
+
+);
+
// 오류 화면 컴포넌트
const ErrorScreen: React.FC<{ error: Error | null; retry: () => void }> = ({
error,
@@ -123,23 +140,44 @@ function App() {
useEffect(() => {
document.title = "Zellyy Finance";
+ // Zustand 스토어 초기화
+ const initializeApp = async () => {
+ try {
+ await initializeStores();
+ setAppState("ready");
+ } catch (error) {
+ logger.error("앱 초기화 실패", error);
+ setError(error instanceof Error ? error : new Error("앱 초기화 실패"));
+ setAppState("error");
+ }
+ };
+
// 애플리케이션 초기화 시간 지연 설정
const timer = setTimeout(() => {
- setAppState("ready");
- }, 1500); // 1.5초 후 로딩 상태 해제
+ initializeApp();
+ }, 1500); // 1.5초 후 초기화 시작
- return () => clearTimeout(timer);
+ // 컴포넌트 언마운트 시 스토어 정리
+ return () => {
+ clearTimeout(timer);
+ cleanupStores();
+ };
}, []);
// 재시도 기능
- const handleRetry = () => {
+ const handleRetry = async () => {
setAppState("loading");
setError(null);
- // 재시도 시 지연 후 상태 변경
- setTimeout(() => {
+ try {
+ // 재시도 시 스토어 재초기화
+ await initializeStores();
setAppState("ready");
- }, 1500);
+ } catch (error) {
+ logger.error("재시도 실패", error);
+ setError(error instanceof Error ? error : new Error("재시도 실패"));
+ setAppState("error");
+ }
};
// 로딩 상태 표시
@@ -159,10 +197,10 @@ function App() {
}
return (
- 페이지를 로딩하고 있습니다...
+
-
- onSaveBudget("monthly", amount, categoryBudgets)
- }
- />
-
- );
-};
+ // budgetDataUpdated 이벤트 감지
+ useEffect(() => {
+ window.addEventListener("budgetDataUpdated", handleBudgetDataUpdated);
+ return () =>
+ window.removeEventListener(
+ "budgetDataUpdated",
+ handleBudgetDataUpdated
+ );
+ }, [handleBudgetDataUpdated]);
+
+ logger.info(`BudgetProgressCard 상태: 월=${isMonthlyBudgetSet}`);
+
+ return (
+ 지출 / 예산
+ // 초기 탭 설정을 위한 효과
+ useEffect(() => {
+ handleTabSetting();
+ }, [handleTabSetting]);
-
+
+ );
+ }
+);
+
+BudgetProgressCard.displayName = "BudgetProgressCard";
export default BudgetProgressCard;
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 48ca2b5..52116c2 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,24 +1,33 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, memo, useMemo, useCallback } from "react";
import { logger } from "@/utils/logger";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Skeleton } from "@/components/ui/skeleton";
-import { useAuth } from "@/contexts/auth";
+import { useAuth } from "@/stores";
import { useIsMobile } from "@/hooks/use-mobile";
import { isIOSPlatform } from "@/utils/platform";
import NotificationPopover from "./notification/NotificationPopover";
import useNotifications from "@/hooks/useNotifications";
-const Header: React.FC = () => {
+const Header: React.FC = memo(() => {
const { user } = useAuth();
- const userName = user?.user_metadata?.username || "익명";
+ const _isMobile = useIsMobile();
const [imageLoaded, setImageLoaded] = useState(false);
const [imageError, setImageError] = useState(false);
- const isMobile = useIsMobile();
const [isIOS, setIsIOS] = useState(false);
const { notifications, clearAllNotifications, markAsRead } =
useNotifications();
- // 플랫폼 감지
+ // 사용자 이름 메모이제이션
+ const userName = useMemo(() => {
+ return user?.user_metadata?.username || "익명";
+ }, [user?.user_metadata?.username]);
+
+ // 인사말 메모이제이션
+ const greeting = useMemo(() => {
+ return user ? `${userName}님, 반갑습니다` : "반갑습니다";
+ }, [user, userName]);
+
+ // 플랫폼 감지 - 한 번만 실행
useEffect(() => {
const checkPlatform = async () => {
try {
@@ -33,24 +42,36 @@ const Header: React.FC = () => {
checkPlatform();
}, []);
+ // 이미지 로드 핸들러 메모이제이션
+ const handleImageLoad = useCallback(() => {
+ setImageLoaded(true);
+ }, []);
+
+ const handleImageError = useCallback(() => {
+ logger.error("아바타 이미지 로드 실패");
+ setImageError(true);
+ }, []);
+
// 이미지 프리로딩 처리
useEffect(() => {
const preloadImage = new Image();
preloadImage.src = "/zellyy.png";
- preloadImage.onload = () => {
- setImageLoaded(true);
- };
- preloadImage.onerror = () => {
- logger.error("아바타 이미지 로드 실패");
- setImageError(true);
- };
- }, []);
+ preloadImage.onload = handleImageLoad;
+ preloadImage.onerror = handleImageError;
- // iOS 전용 헤더 클래스 - 안전 영역 적용
- const headerClass = isIOS ? "ios-notch-padding" : "py-4";
+ return () => {
+ preloadImage.onload = null;
+ preloadImage.onerror = null;
+ };
+ }, [handleImageLoad, handleImageError]);
+
+ // iOS 전용 헤더 클래스 메모이제이션
+ const headerClass = useMemo(() => {
+ return isIOS ? "ios-notch-padding" : "py-4";
+ }, [isIOS]);
return (
- 지출 / 예산
+
+
-
- {user ? `${userName}님, 반갑습니다` : "반갑습니다"} -
+{greeting}
젤리의 적자탈출
setIsEditDialogOpen(true)}
>
diff --git a/src/components/__tests__/BudgetProgressCard.test.tsx b/src/components/__tests__/BudgetProgressCard.test.tsx
new file mode 100644
index 0000000..ea8e004
--- /dev/null
+++ b/src/components/__tests__/BudgetProgressCard.test.tsx
@@ -0,0 +1,447 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi, beforeEach, afterEach } from "vitest";
+import BudgetProgressCard from "../BudgetProgressCard";
+import { BudgetData } from "@/contexts/budget/types";
+import { logger } from "@/utils/logger";
+
+// Mock logger
+vi.mock("@/utils/logger", () => ({
+ logger: {
+ info: vi.fn(),
+ error: vi.fn(),
+ warn: vi.fn(),
+ },
+}));
+
+// Mock BudgetTabContent component
+vi.mock("../BudgetTabContent", () => ({
+ default: ({
+ data,
+ formatCurrency,
+ calculatePercentage,
+ onSaveBudget,
+ }: any) => (
+ 
+ ),
+ AvatarFallback: ({ children }: any) => (
+ {children}
+);
+
+describe('LoginForm', () => {
+ const mockSetEmail = vi.fn();
+ const mockSetPassword = vi.fn();
+ const mockSetShowPassword = vi.fn();
+ const mockHandleLogin = vi.fn();
+
+ const defaultProps = {
+ email: '',
+ setEmail: mockSetEmail,
+ password: '',
+ setPassword: mockSetPassword,
+ showPassword: false,
+ setShowPassword: mockSetShowPassword,
+ isLoading: false,
+ isSettingUpTables: false,
+ loginError: null,
+ handleLogin: mockHandleLogin,
+ };
+
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ describe('rendering', () => {
+ it('renders the login form with all fields', () => {
+ render( = ({
loginError.includes("Not Found"));
return (
+
+ ),
+}));
+
+describe("BudgetProgressCard", () => {
+ const mockSetSelectedTab = vi.fn();
+ const mockFormatCurrency = vi.fn((amount) => `${amount.toLocaleString()}원`);
+ const mockCalculatePercentage = vi.fn((spent, target) =>
+ target > 0 ? Math.round((spent / target) * 100) : 0
+ );
+ const mockOnSaveBudget = vi.fn();
+
+ const mockBudgetData: BudgetData = {
+ monthly: {
+ targetAmount: 100000,
+ spentAmount: 75000,
+ remainingAmount: 25000,
+ },
+ weekly: {
+ targetAmount: 25000,
+ spentAmount: 18000,
+ remainingAmount: 7000,
+ },
+ daily: {
+ targetAmount: 3500,
+ spentAmount: 2800,
+ remainingAmount: 700,
+ },
+ };
+
+ const defaultProps = {
+ budgetData: mockBudgetData,
+ selectedTab: "monthly",
+ setSelectedTab: mockSetSelectedTab,
+ formatCurrency: mockFormatCurrency,
+ calculatePercentage: mockCalculatePercentage,
+ onSaveBudget: mockOnSaveBudget,
+ };
+
+ beforeEach(() => {
+ vi.clearAllMocks();
+ // Mock window.dispatchEvent
+ global.dispatchEvent = vi.fn();
+ // Mock window event listeners
+ global.addEventListener = vi.fn();
+ global.removeEventListener = vi.fn();
+ });
+
+ afterEach(() => {
+ vi.clearAllTimers();
+ });
+
+ describe("렌더링", () => {
+ it("기본 컴포넌트 구조가 올바르게 렌더링된다", () => {
+ render({data.targetAmount}
+ {data.spentAmount}
+ {data.remainingAmount}
+
+ {formatCurrency ? formatCurrency(data.targetAmount) : "no formatter"}
+
+
+ {calculatePercentage
+ ? calculatePercentage(data.spentAmount, data.targetAmount)
+ : "no calculator"}
+
+
+
+ {isSubmitting.toString()}
+ {form ? 'form-present' : 'form-missing'}
+
+ )
+}));
+
+vi.mock('../expenses/ExpenseSubmitActions', () => ({
+ default: ({ onCancel, isSubmitting }: any) => (
+
+
+
+
+ )
+}));
+
+describe('ExpenseForm', () => {
+ const mockOnSubmit = vi.fn();
+ const mockOnCancel = vi.fn();
+
+ const defaultProps = {
+ onSubmit: mockOnSubmit,
+ onCancel: mockOnCancel,
+ isSubmitting: false,
+ };
+
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ describe('rendering', () => {
+ it('renders the form with all child components', () => {
+ render(알림
+}));
+
+vi.mock('@/components/ui/avatar', () => ({
+ Avatar: ({ children, className }: any) => (
+ {children}
+ ),
+ AvatarImage: ({ src, alt }: any) => (
+ {children}
+ ),
+}));
+
+vi.mock('@/components/ui/skeleton', () => ({
+ Skeleton: ({ className }: any) => (
+ Loading...
+ ),
+}));
+
+import { useAuth } from '@/stores';
+
+describe('Header', () => {
+ const mockUseAuth = vi.mocked(useAuth);
+
+ beforeEach(() => {
+ vi.clearAllMocks();
+
+ // Image constructor 모킹
+ global.Image = class {
+ onload: (() => void) | null = null;
+ onerror: (() => void) | null = null;
+ src: string = '';
+
+ constructor() {
+ setTimeout(() => {
+ if (this.onload) this.onload();
+ }, 0);
+ }
+ } as any;
+ });
+
+ describe('기본 렌더링', () => {
+ it('헤더가 올바르게 렌더링된다', () => {
+ mockUseAuth.mockReturnValue({ user: null });
+
+ render(
+
+ ) : null
+}));
+
+vi.mock('../transaction/TransactionIcon', () => ({
+ default: ({ category }: { category: string }) => (
+ Edit Dialog for: {transaction.title}
+
+
+ {category} icon
+ )
+}));
+
+vi.mock('../transaction/TransactionDetails', () => ({
+ default: ({ title, date }: { title: string; date: string }) => (
+
+
+ )
+}));
+
+vi.mock('../transaction/TransactionAmount', () => ({
+ default: ({ amount }: { amount: number }) => (
+ {title}
+ {date}
+ {amount}원
+ )
+}));
+
+// Mock logger
+vi.mock('@/utils/logger', () => ({
+ logger: {
+ info: vi.fn(),
+ error: vi.fn(),
+ },
+}));
+
+describe('TransactionCard', () => {
+ const mockTransaction: Transaction = {
+ id: 'test-transaction-1',
+ title: 'Coffee Shop',
+ amount: 5000,
+ date: '2024-06-15',
+ category: 'Food',
+ type: 'expense',
+ paymentMethod: '신용카드',
+ };
+
+ describe('rendering', () => {
+ it('renders transaction card with all components', () => {
+ render(
-