[BYOB-105] Google Analytics 연결 테스트 (#14)

* feat: Google Analytics 사용을 위한 @next/third-parties 설치 및 RootLayout 수정

* feat: GA ID 환경변수 설정

.github/workflows/front_dev.yml

@@ -19,6 +19,7 @@ jobs:
       run: |
         echo "NEXT_PUBLIC_BASE_URL=${{ secrets.NEXT_PUBLIC_BASE_URL_DEV }}" > .env
         echo "NEXT_PUBLIC_API_BASE_URL=${{ secrets.NEXT_PUBLIC_API_BASE_URL_DEV }}" >> .env
+        echo "NEXT_PUBLIC_GA_ID=${{ secrets.NEXT_PUBLIC_GA_ID }}" >> .env
 
     - name: Build Docker image
       run: docker build -t ${{ secrets.DOCKERHUB_USERNAME }}/jumo_test_front .

package.json

@@ -16,6 +16,7 @@
     "@mui/icons-material": "^5.16.1",
     "@mui/material": "^5.16.1",
     "@mui/material-nextjs": "^5.16.1",
+    "@next/third-parties": "^14.2.5",
     "@tanstack/react-query": "^5.51.3",
     "axios": "^1.3.4",
     "embla-carousel-react": "^8.1.6",

src/app/layout.tsx

@@ -2,9 +2,12 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
 import Provider from "./provider";
+import { GoogleAnalytics } from "@next/third-parties/google"
 
 const inter = Inter({ subsets: ["latin"] });
 
+const gaId = process.env.NEXT_PUBLIC_GA_ID;
+
 export const metadata: Metadata = {
   title: "Create Next App",
   description: "Generated by create next app",
@@ -22,6 +25,7 @@ export default function RootLayout({
           {children}
         </Provider>
       </body>
+      { gaId && <GoogleAnalytics gaId={gaId} /> }
     </html>
   );
 }