feat: 구글 애널리틱스 적용

package.json

@@ -23,6 +23,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.11",
+    "react-ga4": "^2.1.0",
     "react-hook-form": "^7.46.0",
     "react-icons": "^4.11.0",
     "react-router-dom": "^6.15.0"

src/App.tsx

@@ -1,6 +1,7 @@
 import { Suspense, useEffect } from 'react';
 import { Outlet } from 'react-router-dom';
 import { getItemFromStorage, setItemToStorage } from '@/utils/localStorage';
+import RouteChangeTracker from '@components/RouterTracker';
 import { useThemeContext } from '@hooks/useThemeContext';
 import { ToastContextProvider } from './context/ToastContext';
 import { LoadingPage } from './pages';
@@ -9,6 +10,8 @@ import MockUpPage from './pages/MockUpPage';
 const App = () => {
   const { theme, updateDarkMode } = useThemeContext();
 
+  RouteChangeTracker();
+
   useEffect(
     () => {
       if (

src/components/RouterTracker.tsx

@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react';
+import ReactGA from 'react-ga4';
+import { useLocation } from 'react-router-dom';
+
+/**
+ * uri 변경 추적 컴포넌트
+ * uri가 변경될 때마다 pageview 이벤트 전송
+ */
+const RouteChangeTracker = () => {
+  const location = useLocation();
+  const [initialized, setInitialized] = useState(false);
+
+  // 구글 애널리틱스 운영서버만 적용
+  useEffect(() => {
+    if (import.meta.env.REACT_APP_GOOGLE_ANALYTICS) {
+      ReactGA.initialize(import.meta.env.REACT_APP_GOOGLE_ANALYTICS);
+      setInitialized(true);
+    }
+  }, []);
+
+  // location 변경 감지시 pageview 이벤트 전송
+  useEffect(() => {
+    if (initialized) {
+      ReactGA.set({ page: location.pathname });
+      ReactGA.send('pageview');
+    }
+  }, [initialized, location]);
+};
+
+export default RouteChangeTracker;