feat: GTM(Google Tag Manager) 통합을 위한 Analytics 컴포넌트 추가 (#57)

* feat: GTM(Google Tag Manager) 통합을 위한 Analytics 컴포넌트 추가

@next/third-parties 라이브러리를 사용하여 GTM을 통합하고,
Clarity/Hotjar는 GTM 콘솔에서 관리하는 방식으로 구현

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* ci: gtm id 를 nextjs 환경 변수에 추가

* refactor: 개발 환경에서 GTM ID 미설정 시 경고 메시지 추가

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
Co-authored-by: RookieAND <gwangin1999@naver.com>

Author: 3 people

.github/workflows/production-deploy.yml

@@ -45,6 +45,7 @@ jobs:
         run: |
           echo "NEXT_PUBLIC_API_URL=${{ secrets.NEXT_PUBLIC_API_URL }}" > .env.production
           echo "NEXT_PUBLIC_AWS_S3=${{ secrets.NEXT_PUBLIC_AWS_S3 }}" >> .env.production
+          echo "NEXT_PUBLIC_GTM_ID=${{ secrets.NEXT_PUBLIC_GTM_ID }}" >> .env.production
 
       - name: Build and Push Client image
         if: steps.changes.outputs.client == 'true'

app/layout.tsx

@@ -1,5 +1,6 @@
 import type { Metadata, Viewport } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
+import { Analytics } from "#/components/analytics";
 import "./globals.css";
 
 const geistSans = Geist({
@@ -47,6 +48,7 @@ export default function RootLayout({
 				className={`${geistSans.variable} ${geistMono.variable} antialiased ygi:overflow-x-hidden`}
 			>
 				{children}
+				<Analytics />
 			</body>
 		</html>
 	);

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@hookform/resolvers": "^5.2.2",
     "@lottiefiles/react-lottie-player": "^3.6.0",
+    "@next/third-parties": "^16.1.6",
     "@radix-ui/react-slot": "^1.2.4",
     "@tanstack/react-query": "^5.90.16",
     "class-variance-authority": "^0.7.1",

pnpm-lock.yaml

@@ -0,0 +1,18 @@
+"use client";
+
+import { GoogleTagManager } from "@next/third-parties/google";
+
+const GTM_ID = process.env.NEXT_PUBLIC_GTM_ID;
+
+export const Analytics = () => {
+	if (!GTM_ID) {
+		if (process.env.NODE_ENV === "development") {
+			console.warn(
+				"Google Tag Manager ID(NEXT_PUBLIC_GTM_ID) is not configured.",
+			);
+		}
+		return null;
+	}
+
+	return <GoogleTagManager gtmId={GTM_ID} />;
+};

src/components/analytics/Analytics.tsx

@@ -0,0 +1 @@
+export { Analytics } from "./Analytics";