Feature/openchat 기능 개발

src/App.tsx

@@ -21,6 +21,7 @@ import MbtiTestIntro from "@/pages/MbtiTestIntro";
 import MbtiTestQuestions from "@/pages/MbtiTestQuestions";
 import MbtiTestResult from "@/pages/MbtiTestResult";
 import Error from "@/pages/Error";
+
 import CenteredLayout from "@/components/CenteredLayout";
 import ToastMessage from "@/components/ToastMessage";
 import useAuthStore from "@/store/useAuthStore";
@@ -145,6 +146,7 @@ const App = () => {
           <Route path="/mbti-test" element={<MbtiTestIntro />} />
           <Route path="/mbti-test-progress" element={<MbtiTestQuestions />} />
           <Route path="/mbti-test-result/:mbti" element={<MbtiTestResult />} />
+
           <Route path="*" element={<Error statusCode="500" />} />
         </Routes>
       </CenteredLayout>

src/api/openChat.ts

@@ -0,0 +1,101 @@
+import { authInstance } from "./axios";
+import {
+  OpenChatRoom,
+  OpenChatMessage,
+  CreateOpenChatRequest,
+  OpenChatRoomsResponse,
+  CreateOpenChatResponse
+} from "@/types/openChat";
+
+/**
+ * 오픈 채팅방 목록 조회
+ */
+export const getOpenChatRooms = async (): Promise<OpenChatRoom[]> => {
+  try {
+    const response =
+      await authInstance.get<OpenChatRoomsResponse>("/api/open-chat");
+    return response.data.data;
+  } catch (error) {
+    console.error("Failed to fetch open chat rooms:", error);
+    throw new Error("오픈 채팅방 목록을 불러올 수 없습니다.");
+  }
+};
+
+/**
+ * 오픈 채팅방 메시지 조회
+ * @param openChatId - 오픈 채팅방 ID
+ * @param openChatMessageId - 마지막 메시지 번호 (선택사항)
+ */
+export const getOpenChatMessages = async (
+  openChatId: number,
+  openChatMessageId?: number
+): Promise<{ messages: OpenChatMessage[]; hasMore: boolean }> => {
+  try {
+    const params = openChatMessageId
+      ? `?openChatMessageId=${openChatMessageId}`
+      : "";
+    const response = await authInstance.get<{ data: OpenChatMessage[] }>(
+      `/api/open-chat/${openChatId}${params}`
+    );
+
+    // API 응답 데이터 검증 - 실제 API 구조에 맞게 수정
+    if (
+      response.data &&
+      response.data.data &&
+      Array.isArray(response.data.data)
+    ) {
+      return {
+        messages: response.data.data,
+        hasMore: false // 일단 false로 설정, 필요시 서버에서 제공
+      };
+    } else {
+      console.warn("API 응답 데이터가 예상 형식과 다름:", response.data);
+      return { messages: [], hasMore: false };
+    }
+  } catch (error) {
+    console.error("Failed to fetch open chat messages:", error);
+    // 오류 발생 시 빈 데이터 반환 (앱이 중단되지 않도록)
+    return { messages: [], hasMore: false };
+  }
+};
+
+/**
+ * 오픈 채팅방 생성
+ * @param chatData - 채팅방 생성 데이터
+ */
+export const createOpenChatRoom = async (
+  chatData: CreateOpenChatRequest
+): Promise<{ openChatId: number }> => {
+  try {
+    const response = await authInstance.post<CreateOpenChatResponse>(
+      "/api/open-chat",
+      chatData
+    );
+    return response.data.data;
+  } catch (error) {
+    console.error("Failed to create open chat room:", error);
+    throw new Error("오픈 채팅방을 생성할 수 없습니다.");
+  }
+};
+
+/**
+ * 오픈 채팅방 상세 정보 조회
+ * @param openChatId - 오픈 채팅방 ID
+ */
+export const getOpenChatRoomDetail = async (
+  openChatId: number
+): Promise<OpenChatRoom> => {
+  try {
+    const rooms = await getOpenChatRooms();
+    const room = rooms.find((room) => room.id === openChatId);
+
+    if (!room) {
+      throw new Error("채팅방을 찾을 수 없습니다.");
+    }
+
+    return room;
+  } catch (error) {
+    console.error("Failed to fetch open chat room detail:", error);
+    throw new Error("채팅방 정보를 불러올 수 없습니다.");
+  }
+};

src/components/Profile.tsx

@@ -13,6 +13,7 @@ interface ProfileProps {
     chatTitle: string;
     description: string;
     image: string;
+    openChatId?: number;
   };
 }
 const Profile = ({
@@ -55,7 +56,8 @@ const Profile = ({
         state: {
           type: "topicChat",
           chatTitle: topicData.chatTitle,
-          description: topicData.description
+          description: topicData.description,
+          openChatId: topicData.openChatId || 1
         }
       });
     }

src/components/TopicProfileContainer.tsx

@@ -1,25 +1,82 @@
+import { useEffect, useState } from "react";
 import Profile from "@/components/Profile";
+import { getOpenChatRooms } from "@/api/openChat";
+import { OpenChatRoom } from "@/types/openChat";
 
 type TopicData = {
   chatTitle: string;
   description: string;
   image: string;
+  openChatId: number;
 };
 
-const topicData: TopicData[] = [
-  {
-    chatTitle: "N의 대화",
-    description: "망상력 N% 대화방",
-    image: "/image/N의_대화.svg"
-  },
-  {
-    chatTitle: "F의 대화",
-    description: "F 감성 대화방",
-    image: "/image/F의_대화.svg"
+const TopicProfileContainer = () => {
+  const [topicData, setTopicData] = useState<TopicData[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const loadOpenChatRooms = async () => {
+      try {
+        const rooms = await getOpenChatRooms();
+        const convertedData: TopicData[] = rooms.map((room: OpenChatRoom) => ({
+          chatTitle: room.title,
+          description: room.description,
+          image: room.imageUrl || "/image/N의_대화.svg",
+          openChatId: room.id
+        }));
+
+        if (convertedData.length !== 0) {
+          setTopicData(convertedData);
+        } else {
+          setTopicData([
+            {
+              chatTitle: "N의 대화",
+              description: "망상력 N% 대화방",
+              image: "/image/N의_대화.svg",
+              openChatId: 1
+            },
+            {
+              chatTitle: "F의 대화",
+              description: "F 감성 대화방",
+              image: "/image/F의_대화.svg",
+              openChatId: 2
+            }
+          ]);
+        }
+      } catch (error) {
+        console.error("Failed to load open chat rooms:", error);
+        // 오류 시 기본값 사용
+        setTopicData([
+          {
+            chatTitle: "N의 대화",
+            description: "망상력 N% 대화방",
+            image: "/image/N의_대화.svg",
+            openChatId: 1
+          },
+          {
+            chatTitle: "F의 대화",
+            description: "F 감성 대화방",
+            image: "/image/F의_대화.svg",
+            openChatId: 2
+          }
+        ]);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadOpenChatRooms();
+  }, []);
+
+  if (isLoading) {
+    return (
+      <div className="grid grid-cols-2 gap-7">
+        <div className="h-[192px] w-[157px] animate-pulse rounded-[8px] bg-gray-100" />
+        <div className="h-[192px] w-[157px] animate-pulse rounded-[8px] bg-gray-100" />
+      </div>
+    );
   }
-];
 
-const TopicProfileContainer = () => {
   return (
     <div className="grid grid-cols-2 gap-7">
       {topicData.map((topic, index) => (