Feature/채팅 컨텐츠 페이지 개발

src/App.tsx

@@ -5,12 +5,13 @@ import {
   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";
@@ -19,7 +20,6 @@ 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";
 
 const PageTracker = () => {
@@ -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(() => {
@@ -78,14 +82,11 @@ const App = () => {
           <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/tips/TipsMenu.tsx

@@ -1,9 +1,13 @@
 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 imageUrl = "";
@@ -13,17 +17,17 @@ const TipsMenu = ({
     case "topic":
       text = "대화 주제 추천";
       imageUrl = "/icon/starbubble.svg";
-      href = "/chat-recommend";
+      href = `/chat-recommend/${mbti}`;
       break;
     case "conversation":
       text = "대화 꿀팁";
       imageUrl = "/icon/lightbulb.svg";
-      href = "/chat-tips";
+      href = `/chat-tips/${mbti}`;
       break;
-    case "temporature":
+    case "temperature":
       text = "현재 대화의 온도 측정하기";
       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;
   }

src/mock/chatRecommend.ts

@@ -0,0 +1,165 @@
+export const chatRecommend: Record<
+  string,
+  { title: string; description: string }
+> = {
+  INTJ: {
+    title: "INTJ (용의주도한 전략가)와 대화 주제 추천",
+    description: `INTJ는 미래지향적이고 전략적으로 사고해요. 현실의 비효율을 개선하거나, 지적인 주제에서 깊이 있게 탐구하는 걸 좋아해요
+
+      1. "앞으로 10년 후엔 어떤 직업이 뜰까?"
+      2. "너만의 문제 해결 방식이 있어?"
+      3. "최적의 루틴이 있다면 어떤 구조일까?"
+      4. "세상이 돌아가는 방식 중 비효율적이라 생각하는 건?"
+      5. "인공지능 시대에 인간의 역할은 뭘까?"`
+  },
+  INTP: {
+    title: "INTP (논리적인 사색가)와 대화 주제 추천",
+    description: `INTP는 철학적이고 복잡한 논리 구조에 매료돼요. 상상력과 논리가 교차하는 질문이면 한도 끝도 없이 빠져들어요
+
+      1. "세상에서 가장 논리적으로 이상한 건 뭐라고 생각해?"
+      2. "의식이란 과연 존재하는 걸까?"
+      3. "가짜 기억이 실제 감정보다 의미 있을 수 있을까?"
+      4. "우리가 사는 이 세계가 시뮬레이션이라면?"
+      5. "시간이 역행한다면 사회는 어떻게 바뀔까?"`
+  },
+  ENTJ: {
+    title: "ENTJ (결단력 있는 리더)와 대화 주제 추천",
+    description: `ENTJ는 성과와 성장, 그리고 리더십에 관심이 많아요. 논리적인 목표 설정과 시스템화된 사고방식이 대화에서 살아나요.
+
+      1. "효율을 극대화하려면 가장 먼저 바꿔야 할 건?"
+      2. "최고의 조직문화란 뭘까?"
+      3. "리더는 타고나는 걸까, 만들어지는 걸까?"
+      4. "네가 생각하는 성공 공식은?"
+      5. "투자하고 싶은 사업 아이템 있어?"`
+  },
+  ENTP: {
+    title: "ENTP (창의적인 도전가)와 대화 주제 추천",
+    description: `ENTP는 반항적이고 새로운 관점에 목말라 있어요. 토론과 아이디어 싸움에서 에너지를 얻는 편이라 엉뚱하지만 깊은 주제가 매력을 느껴요.
+
+      1. "만약 세상에 법이 없다면 무슨 일이 벌어질까?"
+      2. "모든 정보를 다 공유하면 더 나은 사회가 될까?"
+      3. "너무 급진적인 변화가 필요한 분야는?"
+      4. "요즘 너만 알고 있는 신기한 서비스 있어?"
+      5. "가장 말도 안 되는 아이디어 하나 말해줘!"`
+  },
+  INFJ: {
+    title: "INFJ (통찰력 있는 조언자)와 대화 주제 추천",
+    description: `INFJ는 의미와 깊이를 추구하는 편이에요. 감정적이되 매우 지적이라, 인생·사람·철학을 주제로 깊은 대화를 좋아해요.
+
+      1. "사람들의 무의식적인 패턴은 어떻게 알 수 있을까?"
+      2. "운명과 선택 중 어느 쪽이 더 중요하다고 생각해?"
+      3. "내면의 성장을 위해 가장 중요한 건 뭘까?"
+      4. "사람에게 진짜 위로가 되는 건 뭐라고 봐?"
+      5. "넌 어떤 세상을 꿈꾸고 있어?"`
+  },
+  INFP: {
+    title: "INFP (순수한 이상주의자)와 대화 주제 추천",
+    description: `INFP는 감정과 가치에 따라 움직여요. 진심 어린 감정 공유나 이상적인 이야기, 따뜻한 주제를 좋아해요.
+
+      1. "넌 어떤 가치를 지킬 때 제일 나답다고 느껴?"
+      2. "가장 기억에 남는 감정은 어떤 거였어?"
+      3. "이 세상이 널 이해하지 못할 때 어떻게 해?"
+      4. "넌 어떤 이야기에 쉽게 울어?"
+      5. "네가 만들고 싶은 세상은 어떤 모습이야?"`
+  },
+  ENFJ: {
+    title: "ENFJ (따뜻한 리더)와 대화 주제 추천",
+    description: `ENFJ는 대인관계의 조화와 성장에 관심이 많아요. 사람 사이의 정서적 연결에 대한 대화를 즐겨요.
+
+      1. "사람들이 서로 더 잘 이해하려면 어떻게 해야 할까?"
+      2. "진짜 소통이란 어떤 거라고 생각해?"
+      3. "네가 도와주고 싶은 사람은 어떤 사람이야?"
+      4. "사람을 이끄는 힘은 어디서 나올까?"
+      5. "넌 어떤 상황에서 타인을 가장 잘 이해해?"`
+  },
+  ENFP: {
+    title: "ENFP (열정적인 탐험가)와 대화 주제 추천",
+    description: `ENFP는 자유롭고 창의적인 에너지를 가진 타입이에요. 대화는 진지하되 재밌게, 영감을 주는 이야기를 좋아해요.
+
+      1. "하고 싶은 게 너무 많을 땐 어떻게 정해?"
+      2. "네가 가장 몰입했던 순간은?"
+      3. "자유롭다는 느낌은 언제 가장 강해?"
+      4. "새로운 아이디어가 떠오를 땐 어때?"
+      5. "내가 생각 못한 미친 아이디어 하나만 말해줘!"`
+  },
+  ISTJ: {
+    title: "ISTJ (신중한 관리자)와 대화 주제 추천",
+    description: `ISTJ는 신뢰성과 논리, 경험 중심 사고를 중시해요. 실질적이고 명확한 주제가 안정감을 줘요.
+
+      1. "네가 가장 신뢰하는 원칙은 뭐야?"
+      2. "효율적인 하루 루틴은 어떻게 구성돼?"
+      3. "너무 감정적인 결정은 위험하다고 생각해?"
+      4. "왜 일의 기준을 그렇게 중요하게 여겨?"
+      5. "지금까지 배운 인생 교훈 하나 말해줄래?"`
+  },
+  ISFJ: {
+    title: "ISFJ (헌신적인 수호자)와 대화 주제 추천",
+    description: `ISFJ는 배려와 조화를 중요시해요. 감정 표현은 조심스럽지만 따뜻한 주제엔 마음을 열기 쉬워요.
+
+      1. "넌 어떻게 주변 사람을 챙기고 있어?"
+      2. "누군가에게 고마웠던 기억 있어?"
+      3. "작은 배려가 큰 의미가 됐던 적은?"
+      4. "넌 언제 마음이 가장 따뜻해져?"
+      5. "네가 소중히 여기는 전통은 뭐야?"`
+  },
+  ESTJ: {
+    title: "ESTJ (현실적인 관리자)와 대화 주제 추천",
+    description: `ESTJ는 목표지향적이고 조직적인 사람이에요. 실질적이고 일 중심의 대화를 즐겨요.
+
+      1. "실행력 좋은 사람의 공통점은 뭐라고 생각해?"
+      2. "성과를 내기 위해 가장 중요한 건 뭐야?"
+      3. "팀을 이끄는 방법 중 최고의 방식은?"
+      4. "네가 본 가장 일 잘하는 사람은 어떤 사람이었어?"
+      5. "결정을 빨리 내리는 기준은 뭐야?"`
+  },
+  ESFJ: {
+    title: "ESFJ (다정한 조직자)와 대화 주제 추천",
+    description: `ESFJ는 관계 중심적이고 감정 조화를 중요시해요. 사람 사이의 연결과 공감에 관련된 이야기를 좋아해요.
+
+      1. "넌 어떤 상황에서 가장 공감하게 돼?"
+      2. "주변 사람들 기분 잘 읽는 편이야?"
+      3. "친구랑 갈등 생기면 어떻게 풀어?"
+      4. "모두가 함께 잘 지내려면 뭘 해야 할까?"
+      5. "감정 표현은 왜 중요하다고 생각해?"`
+  },
+  ISTP: {
+    title: "ISTP (과묵한 장인)과 대화 주제 추천",
+    description: `ISTP는 분석적이면서도 실용적인 성향이라, 구체적이고 ‘쓸모 있는’ 대화를 좋아해요.
+
+      1. "요즘 푹 빠진 도구나 기술 있어?"
+      2. "손으로 무언가 만들 때 어떤 기분이야?"
+      3. "문제가 생기면 보통 어떻게 접근해?"
+      4. "고장 난 물건 고치는 거 좋아해?"
+      5. "한번쯤 해보고 싶은 실험적인 취미 있어?"`
+  },
+  ISFP: {
+    title: "ISFP (조용한 예술가)와 대화 주제 추천",
+    description: `ISFP는 감성적이고 감각 중심적이에요. 표현적이고 잔잔한 감정을 나누는 대화를 편하게 느껴요.
+
+      1. "요즘 감성 터졌던 순간 있었어?"
+      2. "네가 아름답다고 느끼는 건 뭐야?"
+      3. "사람에게 감동 받았던 순간은?"
+      4. "네 감정을 표현하는 방법은?"
+      5. "네가 좋아하는 예술 작품은 뭐야?"`
+  },
+  ESTP: {
+    title: "ESTP (에너지 넘치는 모험가)와 대화 주제 추천",
+    description: `ESTP는 즉흥적이고 활동적인 걸 좋아해서, 실시간 반응이 오고 가는 신나는 주제가 잘 맞아요.
+
+      1. "가장 재밌었던 즉흥 여행은?"
+      2. "위험했지만 스릴 있었던 경험 있어?"
+      3. "승부욕 불타올랐던 순간?"
+      4. "요즘 재밌게 하는 활동이나 운동은?"
+      5. "만약 하루 뭐든 할 수 있다면 뭘 해볼래?"`
+  },
+  ESFP: {
+    title: "ESFP (인생을 즐기는 연예인)과 대화 주제 추천",
+    description: `ESFP는 밝고 에너지 넘쳐요. 즐거움, 사람, 즉흥성 관련 대화에 잘 반응하고 분위기를 업시켜줘요.
+
+      1. "최근에 제일 재밌었던 파티는?"
+      2. "기분 좋게 사람들과 어울릴 때는 언제야?"
+      3. "좋아하는 노래로 플레이리스트 하나 짜줘!"
+      4. "넌 어떻게 주변을 즐겁게 만들어?"
+      5. "지금 당장 하고 싶은 거 3가지!"`
+  }
+};