14차 배포 Test (Dev -> Main)

src/App.tsx

@@ -33,7 +33,11 @@ const PageTracker = () => {
     { path: "/my-info", page: "내 정보" },
     { path: "/chat", page: "채팅방" },
     { path: "/select-info", page: "빠른 대화 설정" },
-    { path: "/select-info", page: "친구 저장" }
+    { path: "/mbti-test", page: "바이럴 콘텐츠 소개" },
+    { path: "/mbti-result", page: "바이럴 콘텐츠 결과" },
+    { path: "/chat-recommend", page: "대화주제추천" },
+    { path: "/chat-tips", page: "대화 꿀팁" },
+    { path: "/chat-temporature", page: "대화 온도" }
   ];
 
   useEffect(() => {
@@ -67,7 +71,6 @@ const PageTracker = () => {
 const App = () => {
   useEffect(() => {
     initGA();
-    console.log("init");
   }, []);
 
   return (

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,11 +25,13 @@ const Profile = ({ info, deleteIndex, setVirtualFriendList }: ProfileProps) => {
   };
 
   const handleNavigate = () => {
+    trackClickEvent("홈", "친구 - 바로 대화하기");
     navigate("/chat", {
       state: {
         mode: "virtualFriend",
         mbti: info.mbti,
-        id: info.virtualFriendId
+        id: info.virtualFriendId,
+        name: info.virtualFriendName
       }
     });
   };

src/components/SubTitle.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
+import trackClickEvent from "@/utils/trackClickEvent";
 import ActionConfirmModal from "@/components/modal/ActionConfirmModal";
 import useAuthStore from "@/store/useAuthStore";
 
@@ -20,6 +21,7 @@ const SubTitle = ({ mode }: { mode: "빠른대화" | "친구목록" }) => {
   };
 
   const handleNavigate = () => {
+    trackClickEvent("홈", "친구 - 추가");
     if (isLoggedIn) {
       const type = mode === "빠른대화" ? "fastFriend" : "virtualFriend";
       navigate("/select-info", { state: { type: type } });

src/components/button/ChatStartButton.tsx

@@ -1,4 +1,4 @@
-import { useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import { trackEvent } from "@/libs/analytics";
 
 type ChatStartButtonProps = {
@@ -8,13 +8,17 @@ type ChatStartButtonProps = {
 
 const ChatStartButton = ({ mode, mbti }: ChatStartButtonProps) => {
   const navigate = useNavigate();
+  const pathname = useLocation().pathname;
 
   const handleNavigate = () => {
     switch (mode) {
       case "go-fast":
         trackEvent("Click", {
-          page: "홈",
-          element: "빠른 대화 시작"
+          page: pathname === "/mbti-test-result" ? "바이럴 콘텐츠 결과" : "홈",
+          element:
+            pathname === "/mbti-test-result"
+              ? "대화 시작하기"
+              : "빠른 대화 시작"
         });
         navigate("/select-info", { state: { type: "fastFriend", mbti } });
         break;

src/components/button/KakaoLoginButton.tsx

@@ -1,3 +1,5 @@
+import trackClickEvent from "@/utils/trackClickEvent";
+
 const KakaoLoginButton = () => {
   const kakaoRestApiKey = import.meta.env.VITE_KAKAO_REST_API_KEY;
   const kakaoRedirectUrl =
@@ -8,6 +10,7 @@ const KakaoLoginButton = () => {
   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,20 @@
 import { useNavigate } from "react-router-dom";
 
 const RestartButton = () => {
-    const navigate = useNavigate();
+  const navigate = useNavigate();
 
-    const goFirstStep = () => {
-        navigate("/mbti-test");
-    }
+  const goFirstStep = () => {
+    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

@@ -4,9 +4,15 @@ import ShareModal from "@/components/modal/ShareModal";
 const ShareButton = () => {
   const [shareModalIsOpen, setShareModalIsOpen] = useState(false);
 
+  const handleClick = () => {
+    setShareModalIsOpen(true);
+  };
   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 = ({
@@ -6,31 +7,39 @@ const TipsMenu = ({
   mode: "topic" | "conversation" | "temporature";
 }) => {
   let text = "";
+  let tagElement = "";
   let imageUrl = "";
   let href = "";
 
   switch (mode) {
     case "topic":
       text = "대화 주제 추천";
+      tagElement = "대화 주제 추천";
       imageUrl = "/icon/starbubble.svg";
       href = "/chat-recommend";
       break;
     case "conversation":
       text = "대화 꿀팁";
+      tagElement = "대화 꿀팁";
       imageUrl = "/icon/lightbulb.svg";
       href = "/chat-tips";
       break;
     case "temporature":
       text = "현재 대화의 온도 측정하기";
+      tagElement = "대화의 온도";
       imageUrl = "/icon/thermometer.svg";
       href = "/chat-temporature";
       break;
     default:
       return;
   }
 
+  const handleClick = () => {
+    trackClickEvent("채팅방", tagElement);
+  };
+
   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>