From bc79576548c3178812309f373be3bcf6cc1cbb90 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=97=90=EC=9D=B4=EB=93=A0?=
 <62369936+gyeongza@users.noreply.github.com>
Date: Thu, 12 Oct 2023 10:57:37 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B5=AC=EA=B8=80=20=EC=95=A0=EB=84=90?=
 =?UTF-8?q?=EB=A6=AC=ED=8B=B1=EC=8A=A4=20=EC=A0=81=EC=9A=A9=EB=90=98?=
 =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EC=98=A4=EB=A5=98=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20(ga=20->=20ga4=EB=A1=9C=20=EB=B3=80=EA=B2=BD)=20(#6?=
 =?UTF-8?q?67)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

chore: react-ga4 패키지 추가
---
 frontend/package-lock.json | 19 +++++++++----------
 frontend/package.json      |  2 +-
 frontend/src/App.tsx       | 26 ++++++++++++++------------
 3 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 7c74556af..6baa6682b 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -17,7 +17,7 @@
         "history": "^5.3.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-ga": "^3.3.1",
+        "react-ga4": "^2.1.0",
         "react-router-dom": "^6.14.2",
         "styled-components": "^6.0.4"
       },
@@ -14992,6 +14992,7 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -15863,6 +15864,7 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dev": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -16254,14 +16256,10 @@
       "integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
       "dev": true
     },
-    "node_modules/react-ga": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/react-ga/-/react-ga-3.3.1.tgz",
-      "integrity": "sha512-4Vc0W5EvXAXUN/wWyxvsAKDLLgtJ3oLmhYYssx+YzphJpejtOst6cbIHCIyF50Fdxuf5DDKqRYny24yJ2y7GFQ==",
-      "peerDependencies": {
-        "prop-types": "^15.6.0",
-        "react": "^15.6.2 || ^16.0 || ^17 || ^18"
-      }
+    "node_modules/react-ga4": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/react-ga4/-/react-ga4-2.1.0.tgz",
+      "integrity": "sha512-ZKS7PGNFqqMd3PJ6+C2Jtz/o1iU9ggiy8Y8nUeksgVuvNISbmrQtJiZNvC/TjDsqD0QlU5Wkgs7i+w9+OjHhhQ=="
     },
     "node_modules/react-inspector": {
       "version": "6.0.2",
@@ -16275,7 +16273,8 @@
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "dev": true
     },
     "node_modules/react-refresh": {
       "version": "0.11.0",
diff --git a/frontend/package.json b/frontend/package.json
index b2ffc4ca0..09d116701 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -24,7 +24,7 @@
     "history": "^5.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-ga": "^3.3.1",
+    "react-ga4": "^2.1.0",
     "react-router-dom": "^6.14.2",
     "styled-components": "^6.0.4"
   },
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 0dc9985f2..574d45e3a 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,4 +1,4 @@
-import React, { Suspense } from 'react';
+import React, { Suspense, useEffect } from 'react';
 import { styled } from 'styled-components';
 import { Outlet } from 'react-router-dom';
 import ToastProvider from './contexts/ToastContext';
@@ -8,22 +8,24 @@ import LoadingPage from './pages/LoadingPage';
 import ModalProvider from './contexts/ModalContext';
 import { QueryClientProvider, QueryErrorResetBoundary } from '@tanstack/react-query';
 import { queryClient } from './hooks/query/queryClient';
-import ReactGA from 'react-ga';
 import { createBrowserHistory } from 'history';
 import ErrorBoundary from './components/ErrorBoundary/ErrorBoundary';
+import ReactGA from 'react-ga4';
 
-const gaTrackingId = process.env.REACT_APP_GA_TRACKING_ID;
-if (gaTrackingId) {
-  ReactGA.initialize(gaTrackingId);
-}
+const App = () => {
+  useEffect(() => {
+    const gaTrackingId = process.env.REACT_APP_GA_TRACKING_ID;
+    if (gaTrackingId) {
+      ReactGA.initialize(gaTrackingId);
+    }
 
-const history = createBrowserHistory();
-history.listen((response: { location: { pathname: string } }) => {
-  ReactGA.set({ page: response.location.pathname });
-  ReactGA.pageview(response.location.pathname);
-});
+    const history = createBrowserHistory();
+    history.listen((response) => {
+      ReactGA.set({ page: response.location.pathname });
+      ReactGA.send(response.location.pathname);
+    });
+  }, []);
 
-const App = () => {
   ChannelService.loadScript();
 
   if (CHANNEL_SERVICE_KEY) {