Merge pull request #7 from LeHiHo/feature/#4

게임 방 생성, 게임 방 입장, 게임 방 내 4명 입장 시 block 처리

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

@@ -13,8 +13,6 @@ export const signup = async (
     name,
     picture,
   };
-  console.log(authData);
-
   try {
     return await axios.post(`${SERVER_URL}/signup`, authData, {
       headers: {
@@ -41,23 +39,77 @@ export const login = async (id: string, password: string) => {
     });
     const { accessToken } = response.data;
     localStorage.setItem('jwt', accessToken);
-    console.log('Login successful');
+    return accessToken;
   } catch (error) {
     console.error('Login failed:', error);
   }
 };
 
 export const getAllUsers = async (accessToken: string) => {
+  const response = await axios.get(`${SERVER_URL}/users`, {
+    headers: {
+      'content-type': CONTENT_TYPE,
+      serverId: SERVER_ID,
+      Authorization: `Bearer ${accessToken}`,
+    },
+  });
+  return response.data;
+};
+
+export const createGameRooms = async (
+  accessToken: string,
+  name: string,
+  users: string[],
+  isPrivate: boolean,
+) => {
+  const authData = {
+    name,
+    users,
+    isPrivate,
+  };
   try {
-    const response = await axios.get(`${SERVER_URL}/users`, {
+    const response = await axios.post(`${SERVER_URL}/chat`, authData, {
       headers: {
         'content-type': CONTENT_TYPE,
         serverId: SERVER_ID,
         Authorization: `Bearer ${accessToken}`,
       },
     });
-    console.log(response.data);
+    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;