feat : GA4 trackedpage 추가 및 click 이벤트 할당 (정준영 part)

src/App.tsx

@@ -33,7 +33,12 @@ const PageTracker = () => {
     { path: "/my-info", page: "내 정보" },
     { path: "/chat", page: "채팅방" },
     { path: "/select-info", page: "빠른 대화 설정" },
-    { path: "/select-info", page: "친구 저장" }
+    { path: "/mbti-test", page: "Mbti 테스트 첫 화면" },
+    { path: "/mbti-progress", page: "Mbti 테스트 진행중" },
+    { path: "/mbti-result", page: "Mbti 테스트 결과" },
+    { path: "/chat-recommend", page: "대화 주제 추천" },
+    { path: "/chat-tips", page: "대화 꿀팁" },
+    { path: "/chat-temporature", page: "대화 온도 측정" }
   ];
 
   useEffect(() => {

src/components/Profile.tsx

@@ -2,6 +2,7 @@ import { SetStateAction } from "react";
 import { useNavigate } from "react-router-dom";
 import { authInstance } from "@/api/axios";
 import { VirtualFriend } from "@/types/virtualFreind";
+import trackClickEvent from "@/utils/trackClickEvent";
 
 interface ProfileProps {
   info: VirtualFriend;
@@ -12,6 +13,7 @@ const Profile = ({ info, deleteIndex, setVirtualFriendList }: ProfileProps) => {
   const navigate = useNavigate();
 
   const handleDelete = async () => {
+    trackClickEvent("홈", "친구 - 삭제하기 버튼");
     const res = await authInstance.delete(
       `/api/virtual-friend/${info.virtualFriendId}`
     );
@@ -23,6 +25,7 @@ const Profile = ({ info, deleteIndex, setVirtualFriendList }: ProfileProps) => {
   };
 
   const handleNavigate = () => {
+    trackClickEvent("홈", "친구 - 대화 시작하기 버튼");
     navigate("/chat", {
       state: {
         mode: "virtualFriend",

src/components/SubTitle.tsx

@@ -1,4 +1,5 @@
 import { useNavigate } from "react-router-dom";
+import trackClickEvent from "@/utils/trackClickEvent";
 
 const SubTitle = ({ mode }: { mode: "빠른대화" | "친구목록" }) => {
   const navigate = useNavigate();
@@ -16,6 +17,7 @@ const SubTitle = ({ mode }: { mode: "빠른대화" | "친구목록" }) => {
 
   const handleNavigate = () => {
     const type = mode === "빠른대화" ? "fastFriend" : "virtualFriend";
+    trackClickEvent("홈", "친구 추가 버튼");
     navigate("/select-info", { state: { type: type } });
   };
 

src/components/button/KakaoLoginButton.tsx

@@ -1,10 +1,13 @@
+import trackClickEvent from "@/utils/trackClickEvent";
+
 const KakaoLoginButton = () => {
   const kakaoRestApiKey = import.meta.env.VITE_KAKAO_REST_API_KEY;
   const kakaoRedirectUrl = import.meta.env.VITE_KAKAO_REDIRECT_URI;
 
   const kakaoURL = `https://kauth.kakao.com/oauth/authorize?client_id=${kakaoRestApiKey}&redirect_uri=${kakaoRedirectUrl}&response_type=code`;
 
   const handleClick = () => {
+    trackClickEvent("로그인/회원가입", "카카오 로그인 버튼");
     window.location.href = kakaoURL;
   };
 

src/components/button/LoginButton.tsx

@@ -1,8 +1,14 @@
+import trackClickEvent from "@/utils/trackClickEvent";
+
 const LoginButton = () => {
+  const handleClick = () => {
+    trackClickEvent("홈", "로그인 버튼");
+  };
+
   return (
-    <a href="/login">
-      <button className="w-[69px] h-[36px] border-[0.8px] border-gray-300 rounded-lg font-bold text-gray-600 text-md">
-      로그인
+    <a href="/login" onClick={handleClick}>
+      <button className="h-[36px] w-[69px] rounded-lg border-[0.8px] border-gray-300 text-md font-bold text-gray-600">
+        로그인
       </button>
     </a>
   );

src/components/button/RestartButton.tsx

@@ -1,17 +1,22 @@
 import { useNavigate } from "react-router-dom";
+import trackClickEvent from "@/utils/trackClickEvent";
 
 const RestartButton = () => {
-    const navigate = useNavigate();
+  const navigate = useNavigate();
 
-    const goFirstStep = () => {
-        navigate("/mbti-test");
-    }
+  const goFirstStep = () => {
+    trackClickEvent("/MBTI 테스트 결과", "돌아가기 버튼");
+    navigate("/mbti-test");
+  };
 
-    return (
-        <button className="flex justify-center items-center bg-gray-100 rounded-lg w-[72px] h-[60px]" onClick={goFirstStep}>
-            <img src="/icon/restart.svg" alt="다시하기 버튼" width={24} height={24} />
-        </button>
-  )
-}
+  return (
+    <button
+      className="flex h-[60px] w-[72px] items-center justify-center rounded-lg bg-gray-100"
+      onClick={goFirstStep}
+    >
+      <img src="/icon/restart.svg" alt="다시하기 버튼" width={24} height={24} />
+    </button>
+  );
+};
 
-export default RestartButton;
+export default RestartButton;

src/components/button/ShareButton.tsx

@@ -1,12 +1,20 @@
 import { useState } from "react";
 import ShareModal from "@/components/modal/ShareModal";
+import trackClickEvent from "@/utils/trackClickEvent";
 
 const ShareButton = () => {
   const [shareModalIsOpen, setShareModalIsOpen] = useState(false);
 
+  const handleClick = () => {
+    setShareModalIsOpen(true);
+    trackClickEvent("MBTI 테스트 결과", "공유하기 버튼");
+  };
   return (
     <>
-      <button onClick={()=>setShareModalIsOpen(true)} className="flex h-[60px] w-full items-center justify-center rounded-lg border border-primary-light bg-primary-pale font-bold text-primary-normal">
+      <button
+        onClick={handleClick}
+        className="flex h-[60px] w-full items-center justify-center rounded-lg border border-primary-light bg-primary-pale font-bold text-primary-normal"
+      >
         공유하기
       </button>
       {shareModalIsOpen && (

src/components/header/MainHeader.tsx

@@ -1,10 +1,12 @@
 import { Link, useNavigate } from "react-router-dom";
 import LoginButton from "@/components/button/LoginButton";
+import trackClickEvent from "@/utils/trackClickEvent";
 
 const MainHeader = ({ isLoggedIn }: { isLoggedIn: boolean }) => {
   const navigate = useNavigate();
 
   const handleNavigate = () => {
+    trackClickEvent("홈", "내 정보 버튼");
     navigate("/my-info");
   };
 

src/components/tips/TipsMenu.tsx

@@ -1,3 +1,4 @@
+import trackClickEvent from "@/utils/trackClickEvent";
 import { Link } from "react-router-dom";
 
 const TipsMenu = ({
@@ -29,8 +30,12 @@ const TipsMenu = ({
       return;
   }
 
+  const handleClick = () => {
+    trackClickEvent("채팅방", text);
+  };
+
   return (
-    <Link to={href}>
+    <Link to={href} onClick={handleClick}>
       <div className="flex h-[56px] w-full border-t border-gray-100 bg-white px-4 py-4 hover:bg-primary-pale">
         <img src={imageUrl} alt={text} width={20} height={20} />
         <h2 className="text-2lg ml-[22px] font-medium text-gray-800">{text}</h2>

src/pages/MbtiTestIntro.tsx

@@ -2,6 +2,8 @@ import { ChangeEvent, FormEvent, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import Header from "@/components/header/Header";
 import useLayoutSize from "@/hooks/useLayoutSize";
+import trackClickEvent from "@/utils/trackClickEvent";
+
 const MbtiTestIntro = () => {
   const [name, setName] = useState("");
   const navigate = useNavigate();
@@ -59,6 +61,9 @@ const MbtiTestIntro = () => {
           <button
             type="submit"
             className="mt-[60px] h-[60px] w-[320px] rounded-lg bg-primary-normal font-bold text-white hover:opacity-80 lg:w-[460px]"
+            onClick={() =>
+              trackClickEvent("Mbti 테스트 첫 화면", "시작하기 버튼")
+            }
           >
             시작하기
           </button>

src/pages/MbtiTestQuestions.tsx

@@ -1,7 +1,10 @@
+import { useEffect } from "react";
+import { trackPageView } from "@/libs/analytics";
 import { TEST_QNA } from "@/constants/TEST_QNA";
 import MbtiAnswerButtons from "@/components/button/MbtiAnswerButtons";
 import useMbtiTestState from "@/store/useMbtiTestState";
 import Header from "@/components/header/Header";
+import Error from "@/pages/Error";
 
 interface content {
   number: number;
@@ -15,31 +18,36 @@ interface content {
 const MbtiTestQuestions = () => {
   const { currentPage } = useMbtiTestState();
 
+  useEffect(() => {
+    const pageName = `MBTI 테스트 진행중 - Step ${currentPage}`;
+    trackPageView("/mbti-progress", pageName);
+  }, [currentPage]);
+
   if (currentPage) {
     const content: content = TEST_QNA[Number(currentPage) - 1];
 
     return (
-      <div className="sm:w-[360px] md:w-[375px] lg:w-[500px] flex flex-col">
-        <Header title="상대방 MBTI 유추 테스트"/>
-        <main className="flex flex-col items-center justify-center bg-white whitespace-pre-wrap h-full ">
-        <span className="text-lg font-medium text-gray-500">
-          {content.number}/12
-        </span>
-        <h1 className="mt-[20px] text-center text-3xl font-medium whitespace-pre-wrap">
-          {content.question}
-        </h1>
-        <img
-          src={`/icon/mbti_test_${currentPage}.svg`}
-          alt="mbti 테스트 과정 이미지"
-          className="mt-10"
-        />
-        <div className="mt-[93px]">
-          <MbtiAnswerButtons content={content.answers} />
-        </div>
+      <div className="flex flex-col sm:w-[360px] md:w-[375px] lg:w-[500px]">
+        <Header title="상대방 MBTI 유추 테스트" />
+        <main className="flex h-full flex-col items-center justify-center bg-white whitespace-pre-wrap ">
+          <span className="text-lg font-medium text-gray-500">
+            {content.number}/12
+          </span>
+          <h1 className="mt-[20px] text-center text-3xl font-medium whitespace-pre-wrap">
+            {content.question}
+          </h1>
+          <img
+            src={`/icon/mbti_test_${currentPage}.svg`}
+            alt="mbti 테스트 과정 이미지"
+            className="mt-10"
+          />
+          <div className="mt-[93px]">
+            <MbtiAnswerButtons content={content.answers} />
+          </div>
         </main>
       </div>
     );
-  } else return <div>404 error</div>;
+  } else return <Error statusCode="404" />;
 };
 
 export default MbtiTestQuestions;

src/utils/trackClickEvent.ts

@@ -0,0 +1,10 @@
+import { trackEvent } from "@/libs/analytics";
+
+const trackClickEvent = (page: string, element: string) => {
+  trackEvent("Click", {
+    page: page,
+    element: element
+  });
+};
+
+export default trackClickEvent;