Feature/#81 (#82)

* feat: add firebase and remove @amplitude/analytics-browser dependency

* refactor: remove existing GA

* refactor: 필요없는 조건문 삭제

package.json

@@ -3,7 +3,6 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@amplitude/analytics-browser": "^1.4.0",
     "@b1nd/b1nd-design-core": "^1.0.4",
     "@b1nd/b1nd-react-util": "^1.0.2",
     "@b1nd/b1nd-styled-components-theme": "^1.0.4",
@@ -21,6 +20,7 @@
     "dayjs": "^1.11.5",
     "dotenv": "^16.0.3",
     "esbuild": "^0.15.5",
+    "firebase": "^10.11.0",
     "js-cookie": "^3.0.1",
     "js-sha512": "^0.8.0",
     "react": "^18.2.0",

src/components/common/Header/index.tsx

@@ -2,8 +2,6 @@ import * as S from "./style";
 import logo from "@src/assets/logo/dodam_text_logo.svg";
 import { AiFillInfoCircle } from "@react-icons/all-files/ai/AiFillInfoCircle";
 import { HEADER_LINKS } from "@src/constants/header/header.constant";
-import { pageView } from "@src/lib/ga/gtag";
-import { track } from "@amplitude/analytics-browser";
 
 const Header = () => {
   const currentSelect = "홈";
@@ -20,13 +18,7 @@ const Header = () => {
               isSelect={link.name === currentSelect}
               key={`header/${link.name}Item`}
             >
-              <span
-                onClick={() => {
-                  pageView(link.name);
-                  track(link.name + "접속");
-                  window.location.href = link.link;
-                }}
-              >
+              <span onClick={() => (window.location.href = link.link)}>
                 {link.name}
               </span>
             </S.HeaderItem>

src/components/home/MyInfo/index.tsx

@@ -1,15 +1,10 @@
-import React, { useEffect } from "react";
+import React from "react";
 import MyInfoHeader from "./MyInfoHeader";
 import MyInfoWakeupSong from "./MyInfoWakeupSong";
 import MyInfoTopImage from "@src/assets/images/myinfo/myInfoTop.svg";
 import * as S from "./style";
-import { track } from "@amplitude/analytics-browser";
 
 const MyInfo = () => {
-  useEffect(() => {
-    track("(메인페이지)내 기상송 조회");
-  }, []);
-
   return (
     <S.MyInfoContainer style={{ marginLeft: "auto" }}>
       <S.MyInfoTopIcon src={MyInfoTopImage} alt="myInfo myInfoTopImage" />

src/components/home/Point/index.tsx

@@ -4,14 +4,16 @@ import PointChartIcon from "@src/assets/icons/point/pointChart.png";
 import { useRecoilState } from "recoil";
 import { pointViewTypeAtom } from "@src/store/point/pointStore";
 import { ErrorBoundary } from "react-error-boundary";
-import { Suspense } from "react";
+import { Suspense, useEffect } from "react";
 import PointDashBoard from "./PointDashBoard";
 import PointDashBoardFallbackLoader from "@src/components/common/FallbackLoader/PointDashBoard";
 import ErrorFallback from "@src/components/common/ErrorFallback";
+import { useLogGA } from "@src/hooks/ga/useLogGA";
 
 const Point = () => {
   const [isDormitoryPointView, setIsDormitoryPointView] =
     useRecoilState(pointViewTypeAtom);
+  const { handleGALogEvent } = useLogGA();
 
   const onChangeView = () => {
     setIsDormitoryPointView((prev) =>

src/hooks/ga/useLogGA.ts

@@ -0,0 +1,16 @@
+import { getAnalytics, logEvent } from "firebase/analytics";
+import { initializeApp } from "firebase/app";
+import CONFIG from "@src/config/config.json";
+
+export const useLogGA = () => {
+  const app = initializeApp(CONFIG.GOOGLE_ANALYTICS);
+  const analytics = getAnalytics(app);
+
+  const handleGALogEvent = (view: string) => {
+    logEvent(analytics, view);
+  };
+
+  return {
+    handleGALogEvent,
+  };
+};

src/hooks/meal/useHandleMealDate.ts

@@ -1,24 +1,22 @@
-import { track } from "@amplitude/analytics-browser";
 import dayjs from "dayjs";
 import { useRecoilState } from "recoil";
 import { mealDateAtom } from "@src/store/meal/mealStore";
+import { useLogGA } from "../ga/useLogGA";
 
 const useHandleMealDate = () => {
   const [, setDate] = useRecoilState(mealDateAtom);
+  const { handleGALogEvent } = useLogGA();
 
   const handleMealDate = (e: Date) => {
     setDate(dayjs(e).format("YYYY-MM-DD"));
-    track("(메인페이지) 급식조회");
   };
 
   const prevMealDate = () => {
     setDate((prev) => dayjs(prev).subtract(1, "day").format("YYYY-MM-DD"));
-    track("(메인페이지) 급식조회");
   };
 
   const nextMealDate = () => {
     setDate((prev) => dayjs(prev).add(1, "day").format("YYYY-MM-DD"));
-    track("(메인페이지) 급식조회");
   };
 
   return {

src/hooks/pass/useApplyPass.ts

@@ -186,16 +186,6 @@ const useApplyPass = () => {
       ),
     };
 
-    console.log(typeof validApplyPass.endAt);
-
-    if (
-      typeof validApplyPass.endAt === "string" ||
-      typeof validApplyPass.startAt === "string"
-    ) {
-      showToast("시간형식을 올바르게 지정해주세요!", "INFO");
-      return;
-    }
-
     if (validApplyPass.reason.trim() === "") {
       showToast("외출사유를 작성해주세요!", "INFO");
       return;

src/pages/homePage.tsx

@@ -1,27 +1,11 @@
+import { useLogGA } from "@src/hooks/ga/useLogGA";
 import PageTemplate from "../components/common/PageTemplate";
 import Home from "../components/home";
-import { init, track } from "@amplitude/analytics-browser";
-import { useEffect } from "react";
-import ReactGA from "react-ga4";
-import { pageView } from "../lib/ga/gtag";
 import useTokenCheck from "../hooks/auth/useTokenCheck";
 
 const HomePage = () => {
-  useEffect(() => {
-    if (!window.location.href.includes("localhost")) {
-      if (process.env.GOOGLE_ANALYTICS_ID) {
-        ReactGA.initialize(process.env.GOOGLE_ANALYTICS_ID);
-        pageView("메인페이지");
-      }
-
-      if (process.env.AMPLITUDE_KEY) {
-        init(process.env.AMPLITUDE_KEY);
-        track("메인페이지 접속");
-      }
-    }
-  }, []);
-
   useTokenCheck();
+  const { handleGALogEvent } = useLogGA();
 
   return (
     <PageTemplate>