Merge branch 'dev' of https://github.com/MBTips/FE-MBTips into fix--GA-pageview-수정

Author: Soohyuniii

public/icon/error.svg

@@ -20,6 +20,7 @@ import MbtiTestQuestions from "@/pages/MbtiTestQuestions";
 import MbtiTestResult from "@/pages/MbtiTestResult";
 import CenteredLayout from "@/components/CenteredLayout";
 import { initGA, trackPageView } from "@/libs/analytics";
+import Error from "@/pages/Error";
 
 const PageTracker = () => {
   const location = useLocation();
@@ -77,16 +78,23 @@ const App = () => {
           <Route path="/" element={<Home />} />
           <Route path="/select-info" element={<SelectInfo />} />
           <Route path="/chat" element={<Chat />} />
-          <Route path="/chat-recommend" element={<ChatRecommend />} />
-          <Route path="/chat-tips" element={<ChatTips />} />
-          <Route path="/chat-temporature" element={<ChatTemporature />} />
+          <Route
+            path="/chat-recommend/:virtualFriendId"
+            element={<ChatRecommend />}
+          />
+          <Route path="/chat-tips/:virtualFriendId" element={<ChatTips />} />
+          <Route
+            path="/chat-temporature/:conversationId"
+            element={<ChatTemporature />}
+          />
           <Route path="/contents/:id" element={<Content />} />
           <Route path="/login" element={<Login />} />
           <Route path="/my-info" element={<MyInfo />} />
           <Route path="/kakao-login" element={<KaKaoLogin />} />
           <Route path="/mbti-test" element={<MbtiTestIntro />} />
           <Route path="/mbti-test-progress" element={<MbtiTestQuestions />} />
           <Route path="/mbti-test-result" element={<MbtiTestResult />} />
+          <Route path="*" element={<Error statusCode="500" />} />
         </Routes>
       </CenteredLayout>
     </Router>

src/App.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/Banner.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/components/button/ChatStartButton.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/Chat.tsx

@@ -0,0 +1,51 @@
+import PrimaryButton from "@/components/button/PrimaryButton";
+import { useNavigate } from "react-router-dom";
+
+const Error = ({ statusCode }: { statusCode: "401" | "404" | "500" }) => {
+  const navigate = useNavigate();
+
+  const content = {
+    401: {
+      title: "세션이 만료되었습니다.",
+      description: `활동이 없어 자동으로 로그아웃되었어요.\n채팅을 이어가려면 다시 로그인해 주세요.`,
+      buttonTitle: "홈으로 가기",
+      onClick: () => {
+        navigate("/");
+      }
+    },
+    404: {
+      title: "페이지를 찾을 수 없습니다.",
+      description: `입력하신 주소가 올바르지 않거나,\n요청하신 페이지가 삭제되었을 수 있습니다.`,
+      buttonTitle: "홈으로 가기",
+      onClick: () => {
+        navigate("/");
+      }
+    },
+    500: {
+      title: "앗! 잠시 오류가 일어났어요",
+      description: `일시적인 문제가 발생했습니다.\n잠시 후 다시 시도해 주세요.`,
+      buttonTitle: "새로고침 버튼",
+      onClick: () => {
+        window.location.reload();
+      }
+    }
+  };
+  return (
+    <main className="relative flex flex-col items-center  bg-white">
+      <div className="absolute bottom-[372px] flex h-[196px] flex-col items-center justify-between">
+        <img src="/icon/error.svg" alt="에러 아이콘" width={63} height={63} />
+        <h1 className="text-2xl font-bold ">{content[statusCode].title}</h1>
+        <p className="text-center whitespace-pre-wrap text-gray-600">
+          {content[statusCode].description}
+        </p>
+      </div>
+      <div className="absolute bottom-[60px]">
+        <PrimaryButton size="md" onClick={content[statusCode].onClick}>
+          {content[statusCode].buttonTitle}
+        </PrimaryButton>
+      </div>
+    </main>
+  );
+};
+
+export default Error;

src/pages/Error.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/MyInfo.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,