chore: GA 적용

Author: odukong

.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.env

package.json

@@ -18,6 +18,7 @@
     "framer-motion": "^12.27.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "react-ga4": "^2.1.0",
     "react-router-dom": "^7.11.0"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -1,11 +1,14 @@
-import App from "@app/App";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
+import ReactGA from "react-ga4";
 
+import App from "@app/App";
 import { AppProviders } from "@app/providers";
 
 import "@app/styles/global.css";
 
+ReactGA.initialize(import.meta.env.VITE_GA_TRACKING_ID);
+
 const rootEl = document.getElementById("root");
 if (!rootEl) throw new Error('Root element "#root" not found');
 

src/app/main.tsx

@@ -1,9 +1,5 @@
 import { useRef } from "react";
-
-import { CHARACTER, FLOAT_IMG, KEY } from "@/shared/assets/images";
-import useDevice from "@/shared/model/use-device";
-
-import * as styles from "./landing-page.css";
+import ReactGA from "react-ga4";
 
 import {
   LandingCard,
@@ -13,13 +9,22 @@ import {
   AlertModal,
 } from "@/features/landing";
 import { LANDING_CARD_ITEMS } from "@/features/landing/config/landing-card.constant";
+import { CHARACTER, FLOAT_IMG, KEY } from "@/shared/assets/images";
+import useDevice from "@/shared/model/use-device";
+
+import * as styles from "./landing-page.css";
 
 const LandingPage = () => {
   const { isMobile } = useDevice();
   const modalRef = useRef<HTMLDialogElement>(null);
   const sectionRef = useRef<HTMLDivElement>(null);
 
   const handleModal = () => {
+    ReactGA.event({
+      category: "Button",
+      action: "Click Button",
+      label: "Click Service Button", // 어떤 버튼 요소인지 구별
+    });
     modalRef.current?.showModal();
   };