Merge pull request #76 from Gosrock/dev

FEAT : 구글 애널리틱스

.github/workflows/docker-push.yml

@@ -16,7 +16,7 @@ jobs:
       - name: Create .env file
         run: |
           touch .env
-          echo REACT_APP_KAKAO_APP_KEY=${{ secrets.REACT_APP_KAKAO_APP_KEY }}\ >> .env
+          echo "${{ secrets.ENV_VARS }}" >> .env
       # 도커 메타데이터 가져오기
       - name: Docker meta
         id: docker_meta

README.md

@@ -55,9 +55,46 @@
 
 <br/>
 
+## 5. 뷰
 
+<details>
+<summary><h4>로그인, 인증</h4></summary>
+<div>
+<img src="https://user-images.githubusercontent.com/55226431/184935269-357fbb5b-8637-4fc9-bcc4-27ee9e0d3b44.png" width='100%'>
+</div>
+</details>
+
+<details>
+<summary><h4>티켓 예매</h4></summary>
+<div>
+<img src="https://user-images.githubusercontent.com/55226431/184935315-ceebf79f-3de3-4a3e-aaaf-fa2b68ef5375.png" width='100%'>
+</div>
+</details>
+
+<details>
+<summary><h4>티켓 QR (실시간 소켓 통신을 통한 입장확인)</h4></summary>
+<div>
+<img src="https://user-images.githubusercontent.com/55226431/184935407-3736a8d4-f946-4484-a598-10e5a857c635.png" width='100%'>
+</div>
+</details>
+
+<details>
+<summary><h4>응원톡</h4></summary>
+<div>
+<img src="https://user-images.githubusercontent.com/55226431/184935454-98f1e572-f7cc-4d52-8306-c47e6ac21bbc.png" width='100%'>
+</div>
+</details>
+
+<details>
+<summary><h4>마이페이지</h4></summary>
+<div>
+<img src="https://user-images.githubusercontent.com/55226431/184935486-498e561b-1eba-4dc7-9faa-8996f678483f.png" width='100%'>
+</div>
+</details>
+
+<br/>
 
-## 5. 폴더 구조
+## 6. 폴더 구조
 
 ```bash
 ├── .github # 액션 워크플로우 세팅
@@ -80,7 +117,7 @@
 
 <br/>
 
-## 6. 참여자
+## 7. 참여자
 <table>
     <tr align="center">
         <td><B>Leader • Front-end • UI/UX<B></td>

package.json

@@ -19,6 +19,7 @@
     "react-animated-numbers": "^0.13.0",
     "react-cookie": "^4.1.1",
     "react-dom": "^18.2.0",
+    "react-ga": "^3.3.1",
     "react-intersection-observer": "^9.4.0",
     "react-query": "^3.39.1",
     "react-responsive": "^9.0.0-beta.10",

src/App.tsx

@@ -10,6 +10,7 @@ import RequireAuth from './components/auth/RequireAuth';
 import useApiError from './apis/error/useApiError';
 import { useQueryClient } from 'react-query';
 import RefuseAuth from './components/auth/RefuseAuth';
+import useGAPageTracking from './components/common/GAPageTracking';
 
 function App() {
   const { handleError } = useApiError();
@@ -22,7 +23,7 @@ function App() {
       },
     },
   });
-
+  useGAPageTracking();
   return (
     <Routes location={location}>
       <Route path="/" element={<Landing />} />

src/components/auth/RefuseAuth.tsx

@@ -12,7 +12,6 @@ const RefuseAuth = () => {
   const registerToken = localStorage.getItem('registerToken');
   // undefined or token
   const location = useLocation();
-  console.log(location.pathname);
   if (accessToken) {
     // 어세스 토큰 있으면 마이페이지로 되돌려버림
     openModal({

src/components/common/GAPageTracking.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import ReactGA from 'react-ga';
+
+const TRACKING_ID = process.env.REACT_APP_GA_TRACKING_ID!;
+
+const useGAPageTracking = () => {
+  const location = useLocation();
+  const [initialized, setInitialized] = useState(false);
+  /* localhost는 인지 못하게  */
+  useEffect(() => {
+    if (!window.location.href.includes('localhost')) {
+      ReactGA.initialize(TRACKING_ID);
+    }
+    setInitialized(true);
+  }, []);
+
+  useEffect(() => {
+    if (initialized) {
+      ReactGA.pageview(location.pathname + location.search);
+    }
+  }, [initialized, location]);
+
+  // 개발용
+  /*   useEffect(() => {
+    ReactGA.initialize(TRACKING_ID);
+    ReactGA.pageview(location.pathname + location.search);
+  }, [location]); */
+};
+
+export default useGAPageTracking;

src/components/landing/teams/Teams.tsx

@@ -52,7 +52,7 @@ const Teams = ({ isPC, type }: ITeams) => {
           <p>YB</p>
           <Container type={type} isPC={isPC}>
             <p>9월 1일 목요일</p>
-            <p>저녁 7시</p>
+            <p>저녁 6시</p>
           </Container>
         </>
       ) : (

src/pages/auth/Login.tsx

@@ -39,7 +39,6 @@ const Login = () => {
       { phoneNumber: valueSend },
       {
         onSuccess: (data) => {
-          console.log(data);
           setAuth({
             ...auth,
             phoneNumber: data.data.phoneNumber,

yarn.lock

@@ -12095,6 +12095,11 @@ react-error-overlay@^6.0.11:
   resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz"
   integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
+react-ga@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/react-ga/-/react-ga-3.3.1.tgz#d8e1f4e05ec55ed6ff944dcb14b99011dfaf9504"
+  integrity sha512-4Vc0W5EvXAXUN/wWyxvsAKDLLgtJ3oLmhYYssx+YzphJpejtOst6cbIHCIyF50Fdxuf5DDKqRYny24yJ2y7GFQ==
+
 react-inspector@^5.1.0:
   version "5.1.1"
   resolved "https://registry.npmjs.org/react-inspector/-/react-inspector-5.1.1.tgz"