feat: GA click event

Author: Soohyuniii

src/components/Banner.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from "react";
 import { Link } from "react-router-dom";
 import { cls } from "@/utils/cls";
 import Indicator from "@/components/Indicator";
+import { trackEvent } from "@/libs/analytics";
 
 interface BannerImage {
   sm: string;
@@ -28,12 +29,14 @@ const bannerImages: BannerImage[] = [
     md: "/image/home_banner3_md.png",
     lg: "/image/home_banner3_lg.png",
     description: "MBTI별 피해야 할 대화스타일 및 주제"
-  },
+  }
 ];
 
 const Banner = () => {
   const [order, setOrder] = useState<number>(0);
 
+  const bannerEventElements = ["배너 1", "배너 2", "배너 3"];
+
   useEffect(() => {
     const interval = setInterval(() => {
       setOrder((prev) => (prev + 1) % bannerImages.length);
@@ -43,18 +46,33 @@ const Banner = () => {
 
   return (
     <div className="relative flex h-[184px] w-full">
-      <Link to={order === 0 ? "/mbti-test" : `/contents/${order}`} className="absolute w-full h-full">
+      <Link
+        to={order === 0 ? "/mbti-test" : `/contents/${order}`}
+        className="absolute h-full w-full"
+        onClick={() => {
+          if (bannerEventElements[order]) {
+            trackEvent("Click", {
+              page: "홈",
+              element: bannerEventElements[order]
+            });
+          }
+        }}
+      >
         {bannerImages.map((image, index) => (
           <picture
             key={index}
             className={cls(
-              "absolute transition-opacity duration-500 w-full h-full",
+              "absolute h-full w-full transition-opacity duration-500",
               order === index ? "opacity-100" : "opacity-0"
             )}
           >
             <source media="(min-width: 500px)" srcSet={image.lg} />
             <source media="(min-width: 375px)" srcSet={image.md} />
-            <img src={image.sm} alt={image.description} className="w-full h-full object-cover" />
+            <img
+              src={image.sm}
+              alt={image.description}
+              className="h-full w-full object-cover"
+            />
           </picture>
         ))}
       </Link>

src/components/button/ChatStartButton.tsx

@@ -1,20 +1,36 @@
 import { useNavigate } from "react-router-dom";
-
-const ChatStartButton = ({mode} : {mode: "go-fast" | "go-virtual" | "go-chat"}) => {
+import { trackEvent } from "@/libs/analytics";
+const ChatStartButton = ({
+  mode
+}: {
+  mode: "go-fast" | "go-virtual" | "go-chat";
+}) => {
   const navigate = useNavigate();
 
   const handleNavigate = () => {
-    switch(mode) {
-      case "go-fast" : navigate("/select-info", {state:"fastFriend"});
-      break;
-      case "go-virtual" : navigate("/select-info", {state:"virtualFriend"});
-      break;
-      case "go-chat" : navigate("/chat");
-      break;  
-      default : console.error("mode is invalid", mode);
-      return;
+    switch (mode) {
+      case "go-fast":
+        trackEvent("Click", {
+          page: "홈",
+          element: "빠른 대화 시작"
+        });
+        navigate("/select-info", { state: "fastFriend" });
+        break;
+      case "go-virtual":
+        trackEvent("Click", {
+          page: "홈",
+          element: "친구 - 바로 대화하기"
+        });
+        navigate("/select-info", { state: "virtualFriend" });
+        break;
+      case "go-chat":
+        navigate("/chat");
+        break;
+      default:
+        console.error("mode is invalid", mode);
+        return;
     }
-  }
+  };
   return (
     <button
       className="flex h-[56px] w-[320px] items-center justify-center rounded-lg bg-primary-normal font-bold text-white md:w-[335px] lg:w-[460px]"

src/pages/Chat.tsx

@@ -6,8 +6,8 @@ import ChatActionBar from "@/components/ChatActionBar";
 import pickMbtiImage from "@/utils/pickMbtiImage";
 import instance from "@/api/axios";
 import { useLocation } from "react-router-dom";
-import { cls } from "@/utils/cls";
 import TipsMenuContainer from "@/components/tips/TipsMenuContainer";
+import { trackEvent } from "@/libs/analytics";
 
 interface Message {
   role: "user" | "assistant";
@@ -27,13 +27,24 @@ const Chat = () => {
   const [isOpen, setIsOpen] = useState(false);
   const bottomRef = useRef<HTMLDivElement | null>(null);
 
+  const chatTitle = `${mbti}와 대화`;
+  const assistantInfo = mbti;
+  const assistantImgUrl = pickMbtiImage(assistantInfo);
+
   useEffect(() => {
     bottomRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages, isOpen]);
 
-  const chatTitle = `${mbti}와 대화`;
-  const assistantInfo = mbti;
-  const assistantImgUrl = pickMbtiImage(assistantInfo);
+  const handleToggleTips = () => {
+    const nextAction = !isOpen;
+
+    trackEvent("Click", {
+      page: "채팅방",
+      element: nextAction ? "콘텐츠 열기" : "콘텐츠 닫기"
+    });
+
+    setIsOpen(nextAction);
+  };
 
   const handleSend = async (messageToSend: string) => {
     if (!messageToSend.trim()) return;
@@ -127,7 +138,7 @@ const Chat = () => {
       </div>
       <ChatActionBar
         isOpen={isOpen}
-        setIsOpen={setIsOpen}
+        setIsOpen={handleToggleTips}
         value={input}
         onChange={handleChange}
         onKeyUp={handleKeyup}

src/pages/MyInfo.tsx

@@ -4,6 +4,7 @@ import ActionConfirmModal from "@/components/modal/ActionConfirmModal";
 import useAuthStore from "@/store/useAuthStore";
 import { useNavigate } from "react-router-dom";
 import TermsAndPrivacyModal from "@/components/modal/TermsAndPrivacyModal";
+import { trackEvent } from "@/libs/analytics";
 
 type ModalType = "logout" | "withdraw" | "terms" | "privacy" | null;
 
@@ -33,9 +34,17 @@ const MyInfo = () => {
 
   const handleConfirm = () => {
     if (modalType === "logout") {
+      trackEvent("Click", {
+        page: "내 정보",
+        element: "로그아웃"
+      });
       logout();
       navigate("/login");
     } else if (modalType === "withdraw") {
+      trackEvent("Click", {
+        page: "내 정보",
+        element: "회원탈퇴"
+      });
       console.log("회원탈퇴 실행"); //TODO: 회원탈퇴 기능 구현 시 추가 필요
     }
     setModalType(null);

src/pages/SelectInfo.tsx

@@ -5,6 +5,7 @@ import Header from "@/components/header/Header";
 import { getMBTIgroup, mapAgeToNumber } from "@/utils/helpers";
 import instance from "@/api/axios";
 import ToastMessage from "@/components/ToastMessage";
+import { trackEvent } from "@/libs/analytics";
 
 type FastFriendResponse = {
   header: {
@@ -182,6 +183,10 @@ const SelectInfo = () => {
       const responseData = response.data.data;
 
       if (mode === "virtualFriend" && isVirtualFriendResponse(responseData)) {
+        trackEvent("Click", {
+          page: "친구 저장",
+          element: "대화 시작하기"
+        });
         navigate("/chat", {
           state: {
             mbti,
@@ -190,6 +195,10 @@ const SelectInfo = () => {
           }
         });
       } else if (mode === "fastFriend" && typeof responseData === "number") {
+        trackEvent("Click", {
+          page: "빠른 대화 설정",
+          element: "대화 시작하기"
+        });
         navigate("/chat", {
           state: {
             mbti,