15차 배포 Test (Dev -> Main)

src/App.tsx

@@ -1,26 +1,28 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import {
   BrowserRouter as Router,
   Routes,
   Route,
   useLocation
 } from "react-router-dom";
+import { initGA, trackPageView } from "@/libs/analytics";
 import Home from "@/pages/Home";
 import SelectInfo from "@/pages/SelectInfo";
 import Chat from "@/pages/Chat";
 import ChatRecommend from "@/pages/ChatRecommend";
 import ChatTips from "@/pages/ChatTips";
-import ChatTemporature from "@/pages/ChatTemporature";
+import ChatTemperature from "@/pages/ChatTemperature";
 import Content from "@/pages/Content";
 import Login from "@/pages/Login";
 import MyInfo from "@/pages/MyInfo";
 import KaKaoLogin from "@/pages/KaKaoLogin";
 import MbtiTestIntro from "@/pages/MbtiTestIntro";
 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";
+import CenteredLayout from "@/components/CenteredLayout";
+import ToastMessage from "@/components/ToastMessage";
+import useAuthStore from "@/store/useAuthStore";
 
 const PageTracker = () => {
   const location = useLocation();
@@ -69,26 +71,46 @@ const PageTracker = () => {
 };
 
 const App = () => {
+  const { logout } = useAuthStore();
+  const [toastMessage, setToastMessage] = useState("");
+  const storageAuth = localStorage.getItem("auth-storage");
+  const parsedAuth = storageAuth ? JSON.parse(storageAuth).state : null;
+
+  const checkSession = () => {
+    const expirationTime = new Date(
+      new Date(parsedAuth.loginTime).getTime() + 24 * 60 * 60 * 1000
+    );
+    const now = new Date();
+    if (now > expirationTime) {
+      setToastMessage("로그인 세션이 만료되었습니다.");
+      logout();
+    }
+  };
+
   useEffect(() => {
     initGA();
+    if (parsedAuth) checkSession();
   }, []);
 
   return (
     <Router>
       <PageTracker />
       <CenteredLayout>
+        {toastMessage && (
+          <ToastMessage
+            message={toastMessage}
+            onClose={() => setToastMessage("")}
+          />
+        )}
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/select-info" element={<SelectInfo />} />
           <Route path="/chat" element={<Chat />} />
+          <Route path="/chat-recommend/:mbti" element={<ChatRecommend />} />
+          <Route path="/chat-tips/:mbti" element={<ChatTips />} />
           <Route
-            path="/chat-recommend/:virtualFriendId"
-            element={<ChatRecommend />}
-          />
-          <Route path="/chat-tips/:virtualFriendId" element={<ChatTips />} />
-          <Route
-            path="/chat-temporature/:conversationId"
-            element={<ChatTemporature />}
+            path="/chat-temperature/:conversationId"
+            element={<ChatTemperature />}
           />
           <Route path="/contents/:id" element={<Content />} />
           <Route path="/login" element={<Login />} />

src/api/axios.ts

@@ -3,7 +3,7 @@ import useAuthStore from "@/store/useAuthStore";
 
 const instance = axios.create({
   baseURL: import.meta.env.VITE_API_BASE_URL,
-  timeout: 10000,
+  timeout: 100000,
   headers: {
     "Content-Type": "application/json"
   }
@@ -12,7 +12,7 @@ const instance = axios.create({
 // 인증 절차가 필요한 API는 authInstance로 HTTP요청
 const authInstance = axios.create({
   baseURL: import.meta.env.VITE_API_BASE_URL,
-  timeout: 10000,
+  timeout: 100000,
   headers: {
     "Content-Type": "application/json"
   }

src/components/button/TwitterShareButton.tsx

@@ -6,8 +6,7 @@ const TwitterShareButton = ({ title }: { title: string }) => {
       href={`https://twitter.com/intent/tweet?text=${title}&url=${currentUrl}`}
       className="flex flex-col items-center gap-1"
     >
-      <img src="/icon/twitter.svg" alt="트위터 아이콘" width={76} height={76} />
-      <p className="text-md text-gray-800">트위터</p>
+      <img src="/icon/twitter.svg" alt="트위터 아이콘" width={72} height={72} />
     </a>
   );
 };

src/components/button/UrlCopyButton.tsx

@@ -1,23 +1,36 @@
-const UrlCopyButton = ({currentUrl} : {currentUrl : string}) => {
-    const handleCopy = () => {
-      navigator.clipboard
-        .writeText(currentUrl)
-        .then(() => {
-          alert("URL이 복사되었습니다!"); // toast로 바꾸어야 함 -> 4.10 정준영
-        })
-        .catch((err) => {
-          console.error("URL 복사 실패:", err); 
-        });
-    };
-
-    return (
+import ToastMessage from "@/components/ToastMessage";
+import { useState } from "react";
+
+const UrlCopyButton = ({ currentUrl }: { currentUrl: string }) => {
+  const [toastMessage, setToastMessage] = useState<string>("");
+
+  const handleCopy = () => {
+    navigator.clipboard
+      .writeText(currentUrl)
+      .then(() => {
+        setToastMessage("URL을 복사했습니다.");
+      })
+      .catch((err) => {
+        console.error("URL 복사 실패:", err);
+      });
+  };
+
+  return (
+    <>
       <button
         onClick={handleCopy}
-        className="bg-primary-normal h-8 text-white flex items-center justify-center rounded-[20px] px-4 py-2"
+        className="flex h-8 items-center justify-center rounded-[20px] bg-primary-normal px-4 py-2 text-white"
       >
         복사
       </button>
-    );
-  };
-
-  export default UrlCopyButton;
+      {toastMessage && (
+        <ToastMessage
+          message={toastMessage}
+          onClose={() => setToastMessage("")}
+        />
+      )}
+    </>
+  );
+};
+
+export default UrlCopyButton;

src/components/tips/TipsMenu.tsx

@@ -2,9 +2,13 @@ import trackClickEvent from "@/utils/trackClickEvent";
 import { Link } from "react-router-dom";
 
 const TipsMenu = ({
-  mode
+  mode,
+  mbti,
+  conversationId
 }: {
-  mode: "topic" | "conversation" | "temporature";
+  mode: "topic" | "conversation" | "temperature";
+  mbti?: string;
+  conversationId?: string;
 }) => {
   let text = "";
   let tagElement = "";
@@ -16,19 +20,19 @@ const TipsMenu = ({
       text = "대화 주제 추천";
       tagElement = "대화 주제 추천";
       imageUrl = "/icon/starbubble.svg";
-      href = "/chat-recommend";
+      href = `/chat-recommend/${mbti}`;
       break;
     case "conversation":
       text = "대화 꿀팁";
       tagElement = "대화 꿀팁";
       imageUrl = "/icon/lightbulb.svg";
-      href = "/chat-tips";
+      href = `/chat-tips/${mbti}`;
       break;
-    case "temporature":
+    case "temperature":
       text = "현재 대화의 온도 측정하기";
       tagElement = "대화의 온도";
       imageUrl = "/icon/thermometer.svg";
-      href = "/chat-temporature";
+      href = `/chat-temperature/${conversationId}`;
       break;
     default:
       return;

src/components/tips/TipsMenuContainer.tsx

@@ -1,11 +1,17 @@
 import TipsMenu from "@/components/tips/TipsMenu";
 
-const TipsMenuContainer = () => {
+const TipsMenuContainer = ({
+  conversationId,
+  mbti
+}: {
+  conversationId: string;
+  mbti: string;
+}) => {
   return (
     <>
-      <TipsMenu mode="topic" />
-      <TipsMenu mode="conversation" />
-      <TipsMenu mode="temporature" />
+      <TipsMenu mode="topic" mbti={mbti} />
+      <TipsMenu mode="conversation" mbti={mbti} />
+      <TipsMenu mode="temperature" conversationId={conversationId} />
     </>
   );
 };

src/index.css

@@ -30,6 +30,7 @@ body {
 
 main {
   @media screen and (min-width: 360px) {
+    background-color: white;
     font-size: 14px;
     width: 360px;
   }