성능 개선을 위해 퍼포먼스 모니터링 API 추가

src/components/pages/board/PostCardList.tsx

@@ -5,6 +5,7 @@ import { usePosts } from '@/hooks/usePosts';
 import { useInView } from 'react-intersection-observer';
 import PostCardSkeleton from '@/components/ui/PostCardSkeleton';
 import { useScrollRestoration } from '@/hooks/useScrollRestoration';
+import { usePerformanceMonitoring } from '@/hooks/usePerformanceMonitoring';
 interface PostCardListProps {
   boardId: string;
   onPostClick: (postId: string) => void;
@@ -14,6 +15,7 @@ interface PostCardListProps {
 const PostCardList: React.FC<PostCardListProps> = ({ boardId, onPostClick, selectedAuthorId }) => {
   const [inViewRef, inView] = useInView();
   const [limitCount] = useState(7);
+  usePerformanceMonitoring('PostCardList')
 
   const {
     data: postPages,

src/components/pages/notification/NotificationsPage.tsx

@@ -9,7 +9,9 @@ import { useInView } from 'react-intersection-observer';
 import { Loader2 } from 'lucide-react';
 import { useNotifications } from '@/hooks/useNotifications';
 import { Skeleton } from '@/components/ui/skeleton';
+import { usePerformanceMonitoring } from '@/hooks/usePerformanceMonitoring';
 const NotificationsPage: React.FC = () => {
+  usePerformanceMonitoring('NotificationsPage');
   const { currentUser } = useAuth();
   const [inViewRef, inView] = useInView();
   const [limitCount] = useState(10);

src/components/pages/stats/StatsPage.tsx

@@ -3,8 +3,10 @@ import { UserStatsCard } from "./UserStatsCard"
 import { useWritingStats } from "@/hooks/useWritingStats"
 import StatsHeader from "./StatsHeader"
 import { StatsNoticeBanner } from "./StatsNoticeBanner"
+import { usePerformanceMonitoring } from "@/hooks/usePerformanceMonitoring"
 
 export default function StatsPage() {
+    usePerformanceMonitoring('StatsPage');
     const { writingStats, isLoading, error } = useWritingStats()
 
     if (isLoading) {

src/firebase.ts

@@ -8,6 +8,7 @@ import {
   UserCredential,
 } from 'firebase/auth';
 import { connectFirestoreEmulator, getFirestore } from 'firebase/firestore';
+import { getPerformance } from "firebase/performance";
 import { getStorage } from 'firebase/storage';
 import { getFunctions, connectFunctionsEmulator } from 'firebase/functions';
 
@@ -30,6 +31,7 @@ const storage = getStorage(app);
 const functions = getFunctions(app);
 // Google Auth Provider
 const provider = new GoogleAuthProvider();
+const performance = getPerformance(app);
 
 // Auth functions
 const signInWithGoogle = async (): Promise<UserCredential> => {
@@ -59,4 +61,4 @@ if (process.env.NODE_ENV === 'development') {
 }
 
 
-export { auth, firestore, signInWithGoogle, signOutUser, storage, app };
+export { auth, firestore, signInWithGoogle, signOutUser, storage, app, performance };

src/hooks/usePerformanceMonitoring.ts

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+import { trace } from 'firebase/performance';
+import { performance } from '@/firebase';
+
+export function usePerformanceMonitoring(pageName: string) {
+  useEffect(() => {
+    if (!performance) return;
+
+    const pageLoadTrace = trace(performance, `${pageName}_page_load`);
+    pageLoadTrace.start();
+
+    return () => {
+      pageLoadTrace.stop();
+    };
+  }, [pageName]);
+}