Merge pull request #163 from Soohyuniii/feat/chat-api-연동-작업

feat: chat api 연동 작업

Author: Soohyuniii

src/pages/Chat.tsx

@@ -5,13 +5,21 @@ import ChatMessage from "@/components/ChatMessage";
 import ChatActionBar from "@/components/ChatActionBar";
 import pickMbtiImage from "@/utils/pickMbtiImage";
 import instance from "@/api/axios";
+import { useLocation } from "react-router-dom";
 
 interface Message {
   role: "user" | "assistant";
   content: string;
 }
 
+interface ChatResponse {
+  data: string;
+}
+
 const Chat = () => {
+  const { state } = useLocation();
+  const { mbti, mode, id } = state;
+
   const [messages, setMessages] = useState<Message[]>([]);
   const [input, setInput] = useState("");
   const [isOpen, setIsOpen] = useState(false);
@@ -21,8 +29,8 @@ const Chat = () => {
     bottomRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
 
-  const chatTitle = "ENFP와 대화"; //TODO: API 연동 후 수정 필요
-  const assistantInfo = "ENFP"; //TODO: API 연동 후 수정 필요
+  const chatTitle = `${mbti}와 대화`;
+  const assistantInfo = mbti;
   const assistantImgUrl = pickMbtiImage(assistantInfo);
 
   const handleSend = async (messageToSend: string) => {
@@ -36,17 +44,27 @@ const Chat = () => {
     setInput("");
 
     try {
-      //TODO: API 분기처리 필요
-      const response = await instance.post(
-        "/api/fast-friend/message",
-        JSON.stringify({ content: messageToSend })
-      );
+      let url = "";
+      let payload = {};
+
+      if (mode === "fastFriend") {
+        url = "/api/fast-friend/message";
+        payload = { fastFriendId: id, content: messageToSend };
+      } else {
+        url = "/api/message";
+        payload = {
+          conversationId: id,
+          messageContent: messageToSend
+        };
+      }
+
+      const response = await instance.post<ChatResponse>(url, payload);
 
       setMessages([
         ...newMessages,
         {
           role: "assistant",
-          content: JSON.stringify(response.data) || "응답이 없어요"
+          content: response.data.data || "응답이 없어요"
         }
       ]);
     } catch (e) {

src/pages/SelectInfo.tsx

@@ -1,12 +1,45 @@
 import { ChangeEvent, useState } from "react";
-import { useLocation } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import FormButton from "@/components/button/FormButton";
 import Header from "@/components/Header";
 import { getMBTIgroup, mapAgeToNumber } from "@/utils/helpers";
 import instance from "@/api/axios";
 import ToastMessage from "@/components/ToastMessage";
 
+type FastFriendResponse = {
+  header: {
+    code: number;
+    message: string;
+  };
+  data: number;
+};
+
+type VirtualFriendResponse = {
+  header: {
+    code: number;
+    message: string;
+  };
+  data: {
+    conversationId: number;
+    virtualFriendId: number;
+    mbti: string;
+    virtualFriendName: string;
+    virtualFriendAge: number;
+    virtualFriendSex: "MALE" | "FEMALE";
+    virtualFriendRelationship: string;
+  };
+};
+
+type FriendResponse = FastFriendResponse | VirtualFriendResponse;
+
+function isVirtualFriendResponse(
+  data: number | VirtualFriendResponse["data"]
+): data is VirtualFriendResponse["data"] {
+  return typeof data === "object" && data !== null && "conversationId" in data;
+}
+
 const SelectInfo = () => {
+  const navigate = useNavigate();
   const location = useLocation();
   const mode = location.state; // mode: fastFriend, virtualFriend 두 종류 존재
   const isNameRequired = mode === "virtualFriend";
@@ -142,10 +175,31 @@ const SelectInfo = () => {
       mode === "virtualFriend" ? "api/virtual-friend" : "api/fast-friend";
 
     try {
-      const response = await instance.post(`/${apiUrl}`, selectedData);
-      console.log("Success!!", response.data);
+      const response = await instance.post<FriendResponse>(
+        `/${apiUrl}`,
+        selectedData
+      );
+      const responseData = response.data.data;
+
+      if (mode === "virtualFriend" && isVirtualFriendResponse(responseData)) {
+        navigate("/chat", {
+          state: {
+            mbti,
+            mode,
+            id: responseData.conversationId
+          }
+        });
+      } else if (mode === "fastFriend" && typeof responseData === "number") {
+        navigate("/chat", {
+          state: {
+            mbti,
+            mode,
+            id: responseData
+          }
+        });
+      }
     } catch (error) {
-      console.error("Select Info Error", error);
+      console.error(error);
     }
   };