feat(analytics): ga4 & gtm 추가 (#351)

apps/spectator/app/analytics.tsx

@@ -0,0 +1,17 @@
+import { GoogleAnalytics, GoogleTagManager } from '@next/third-parties/google';
+import { Analytics as VercelAnalytics } from '@vercel/analytics/next';
+import { SpeedInsights as VercelSpeedInsights } from '@vercel/speed-insights/next';
+
+export default function AnalyticsProvider() {
+  if (process.env.NODE_ENV === 'development') return;
+
+  return (
+    <>
+      <VercelAnalytics />
+      <VercelSpeedInsights />
+
+      <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_ID || ''} />
+      <GoogleTagManager gtmId={process.env.NEXT_PUBLIC_GTM_ID || ''} />
+    </>
+  );
+}

apps/spectator/app/layout.tsx

@@ -1,13 +1,12 @@
 import { Toaster } from '@hcc/ui';
-import { Analytics } from '@vercel/analytics/react';
-import { SpeedInsights } from '@vercel/speed-insights/next';
 import { clsx } from 'clsx';
 import { extend } from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import { Metadata, Viewport } from 'next';
 import localFont from 'next/font/local';
 import { ReactNode } from 'react';
 
+import AnalyticsProvider from './analytics';
 import * as styles from './layout.css';
 import Providers from './Providers';
 import '@hcc/styles/dist/globals.css';
@@ -50,8 +49,8 @@ export default function RootLayout({ children }: RootLayoutProps) {
           <Toaster />
           {children}
         </Providers>
-        <Analytics />
-        <SpeedInsights />
+
+        <AnalyticsProvider />
       </body>
     </html>
   );

apps/spectator/package.json

@@ -20,6 +20,7 @@
     "@hcc/icons": "workspace:^",
     "@hcc/styles": "workspace:*",
     "@hcc/ui": "workspace:*",
+    "@next/third-parties": "^15.0.2",
     "@stomp/stompjs": "^7.0.0",
     "@tanstack/react-query": "^5.17.19",
     "@tanstack/react-query-devtools": "^5.17.21",