chore: 구글 애널리틱스 설정 (#76)

Author: stableh

package-lock.json

@@ -16,6 +16,7 @@
     "js-cookie": "^3.0.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-ga4": "^2.1.0",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.24.0",
     "redux-persist": "^6.0.0",

package.json

@@ -5,8 +5,18 @@ import {theme} from './styles/theme/Theme';
 import Home from '@pages/index/Home';
 import Login from '@pages/index/Login';
 import ProtectedRoute from './components/ProtectedRoute';
+import {useEffect} from 'react';
 
+import ReactGA from 'react-ga4';
+
+function initializeAnalytics() {
+  ReactGA.initialize(import.meta.env.VITE_GTM_ID);
+  ReactGA.send({ hitType: 'pageview', page: '/' });
+}
 function App() {
+  useEffect(() => {
+    initializeAnalytics();
+  }, []);
   return (
     <ThemeProvider theme={theme}>
       <GlobalStyle />

src/App.tsx

@@ -28,7 +28,7 @@ function LoginForm() {
     setRandomStudentId(generateRandomStudentId);
   };
   const handleCopyStudentId = () => {
-    navigator.clipboard.writeText(randomStudentId)
+    navigator.clipboard.writeText(randomStudentId.toString())
       .then(() => {
         alert('복사 완료!');
       })

src/components/LoginForm/index.tsx

@@ -16,7 +16,7 @@ interface ButtonProps {
     searchOption: string,
   ) => Promise<void>;
   searchOption: string;
-  isRegistrationStarted: boolean;
+  isRegistrationStarted?: boolean;
 }
 
 function FilterButton({

src/components/common/FilterButton.tsx

@@ -101,7 +101,7 @@ const FaqWrap = styled.div`
     }
 `;
 
-const FooterWrap = styled.div`
+/*const FooterWrap = styled.div`
   ${props => props.theme.texts.loginContent};
   letter-spacing: 0;
   > em {
@@ -114,6 +114,6 @@ const FooterWrap = styled.div`
     font-size: 1.2rem;
     margin: 0.7rem 0 3rem 0;
   }
-`;
+`;*/
 
 export default Login;