diff --git a/src/components/pages/board/PostCardList.tsx b/src/components/pages/board/PostCardList.tsx index ac228fc..c9d5669 100644 --- a/src/components/pages/board/PostCardList.tsx +++ b/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 = ({ boardId, onPostClick, selectedAuthorId }) => { const [inViewRef, inView] = useInView(); const [limitCount] = useState(7); + usePerformanceMonitoring('PostCardList') const { data: postPages, diff --git a/src/components/pages/notification/NotificationsPage.tsx b/src/components/pages/notification/NotificationsPage.tsx index c43b0ca..7d1cb01 100644 --- a/src/components/pages/notification/NotificationsPage.tsx +++ b/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); diff --git a/src/components/pages/stats/StatsPage.tsx b/src/components/pages/stats/StatsPage.tsx index 6e6b5c5..cbf62cc 100644 --- a/src/components/pages/stats/StatsPage.tsx +++ b/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) { diff --git a/src/firebase.ts b/src/firebase.ts index 8d249fc..f879622 100644 --- a/src/firebase.ts +++ b/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 => { @@ -59,4 +61,4 @@ if (process.env.NODE_ENV === 'development') { } -export { auth, firestore, signInWithGoogle, signOutUser, storage, app }; \ No newline at end of file +export { auth, firestore, signInWithGoogle, signOutUser, storage, app, performance }; \ No newline at end of file diff --git a/src/hooks/usePerformanceMonitoring.ts b/src/hooks/usePerformanceMonitoring.ts new file mode 100644 index 0000000..c1d2175 --- /dev/null +++ b/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]); +} \ No newline at end of file