Merge branch 'dev' into feature/#5

package.json

@@ -18,6 +18,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.18.0",
+    "recoil": "^0.7.7",
+    "socket.io-client": "^4.7.2",
     "styled-components": "^6.1.0"
   },
   "devDependencies": {

src/App.tsx

@@ -2,14 +2,17 @@ import { BrowserRouter } from 'react-router-dom';
 import { ChakraProvider } from '@chakra-ui/react';
 import MainRouter from './router/MainRouter';
 import LoginRouter from './router/LoginRouter';
+import { RecoilRoot } from 'recoil';
 
 function App() {
   return (
     <ChakraProvider>
-      <BrowserRouter>
-        <LoginRouter />
-        <MainRouter />
-      </BrowserRouter>
+      <RecoilRoot>
+        <BrowserRouter>
+          <LoginRouter />
+          <MainRouter />
+        </BrowserRouter>
+      </RecoilRoot>
     </ChakraProvider>
   );
 }

src/api/index.ts

@@ -2,6 +2,7 @@ import axios from 'axios';
 import { CONTENT_TYPE, SERVER_ID, SERVER_URL } from '../constant';
 import { JoinData } from '../interfaces/interface';
 
+
 const client = axios.create({
   baseURL: SERVER_URL,
   headers: {
@@ -30,4 +31,61 @@ export const getAllUsers = async (accessToken: string) => {
     },
   });
   return res;
+
+export const createGameRooms = async (
+  accessToken: string,
+  name: string,
+  users: string[],
+  isPrivate: boolean,
+) => {
+  const authData = {
+    name,
+    users,
+    isPrivate,
+  };
+  try {
+    const response = await axios.post(`${SERVER_URL}/chat`, authData, {
+      headers: {
+        'content-type': CONTENT_TYPE,
+        serverId: SERVER_ID,
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+    return response.data;
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+export const getAllGameRooms = async (accessToken: string) => {
+  const response = await axios.get(`${SERVER_URL}/chat/all`, {
+    headers: {
+      'content-type': CONTENT_TYPE,
+      serverId: SERVER_ID,
+      Authorization: `Bearer ${accessToken}`,
+    },
+  });
+  return response.data;
+};
+
+export const participateGameRoom = async (
+  chatId: string,
+  accessToken: string,
+) => {
+  const authData = {
+    chatId,
+  };
+  const response = await axios.patch(
+    `${SERVER_URL}/chat/participate`,
+    authData,
+    {
+      headers: {
+        'content-type': CONTENT_TYPE,
+        serverId: SERVER_ID,
+        Authorization: `Bearer ${accessToken}`,
+      },
+    },
+  );
+  console.log(response.data);
+  return response.data;
 };

src/api/socket.ts

@@ -0,0 +1,11 @@
+import { SERVER_ID, CONTENT_TYPE, SERVER_URL } from '../constant';
+import io from 'socket.io-client';
+export const socketLogin = (accessToken: string) => {
+  const socket = io(`${SERVER_URL}/server`, {
+    extraHeaders: {
+      Authorization: `Bearer ${accessToken}`,
+      serverId: SERVER_ID,
+    },
+  });
+  return socket;
+};

src/components/layout/checkGameRoom.tsx

@@ -0,0 +1,54 @@
+import { useEffect } from 'react';
+import { useRecoilState } from 'recoil';
+import { allRoomState } from '../../states/atom';
+import { getAllGameRooms, participateGameRoom } from '../../api';
+import { useNavigate } from 'react-router-dom';
+
+const CheckGameRoom = () => {
+  const token: any = localStorage.getItem('jwt');
+  const navigate = useNavigate();
+  const [allRooms, setAllRooms] = useRecoilState(allRoomState);
+  const fetchData = async () => {
+    try {
+      const allRoomsData = await getAllGameRooms(token);
+      setAllRooms(allRoomsData.chats);
+    } catch (error) {
+      console.error('데이터 가져오기 오류:', error);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, [allRooms.length]);
+
+  if (allRooms.length === 0) {
+    return <div>No rooms available or an error occurred.</div>;
+  }
+
+  const handleParticipate = async (numberOfPeople: number, chatId: any) => {
+    if (numberOfPeople === 4) {
+      alert('방이 꽉 찼어요.');
+    } else {
+      await participateGameRoom(chatId, token);
+      navigate(`/room/${chatId}`);
+    }
+  };
+
+  return (
+    <>
+      <button onClick={fetchData}>Refresh Data</button>
+      {allRooms.map((element, index) => (
+        <div
+          key={index}
+          onClick={() => handleParticipate(element.users.length, element.id)}>
+          {element.name}
+          <div>{element.users.length}</div>
+          {element.users.length === 4 && <div>Four users in this room</div>}
+          <div>{element.users[0].id}</div>
+        </div>
+      ))}
+    </>
+  );
+};
+
+export default CheckGameRoom;