Merge pull request #8 from Toy2-team10/TALK-4--feat/chatList

Feat: 채팅방 목록 조회 기능 구현

Author: jseo9732

apis/axios.ts

@@ -1,10 +1,14 @@
 import axios from 'axios';
 
+const accessToken =
+  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImNiN2ZiMTExZTp1c2VyMyIsImlhdCI6MTY5OTUzMzExMiwiZXhwIjoxNzAwMTM3OTEyfQ.4eslctzcBGQAwkcKT97IbF0i-9-MZ0kvhjY4A6sK8Wo';
+
 const instance = axios.create({
   baseURL: 'https://fastcampus-chat.net',
   // 여기에 공통 설정을 추가할 수 있습니다.
   headers: {
     'Content-Type': 'application/json',
+    Authorization: `Bearer ${accessToken}`,
     serverId: process.env.NEXT_PUBLIC_API_KEY,
   },
 });

apis/chatListAPI.ts

@@ -0,0 +1,14 @@
+import instance from './axios';
+
+const chatListAPI = {
+  // 로그인
+  getAllChatList() {
+    return instance.get('/chat/all');
+  },
+  // 회원가입
+  getMyChatList() {
+    return instance.get('/chat');
+  },
+};
+
+export default chatListAPI;

pages/all-chat-list/chatList.module.scss

@@ -0,0 +1,23 @@
+import { useState, useEffect } from 'react';
+import Link from 'next/link';
+import chatListAPI from '../../apis/chatListAPI';
+
+export default function AllChatList() {
+  const [allChatList, setAllChatList] = useState([]);
+  const getAllChat = async () => {
+    const chatAllList = await chatListAPI.getAllChatList();
+    setAllChatList(chatAllList.data.chats);
+  };
+  useEffect(() => {
+    getAllChat();
+  }, []);
+  return (
+    <>
+      {allChatList.map(chat => (
+        <Link href={`/chat/${chat.id}`} key={chat.id}>
+          <div>{chat.name}</div>
+        </Link>
+      ))}
+    </>
+  );
+}

pages/all-chat-list/index.tsx

@@ -0,0 +1,23 @@
+import { useState, useEffect } from 'react';
+import Link from 'next/link';
+import chatListAPI from '../../apis/chatListAPI';
+
+export default function MyChatList() {
+  const [myChatList, setMyChatList] = useState([]);
+  const getMyChat = async () => {
+    const ChatMyList = await chatListAPI.getMyChatList();
+    setMyChatList(ChatMyList.data.chats);
+  };
+  useEffect(() => {
+    getMyChat();
+  }, []);
+  return (
+    <>
+      {myChatList.map(chat => (
+        <Link href={`/chat/${chat.id}`} key={chat.id}>
+          <div>{chat.name}</div>
+        </Link>
+      ))}
+    </>
+  );
+}