Feat: 방 생성, 방 입장 로직 구현

package.json

@@ -19,6 +19,7 @@
     "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/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,7 +39,7 @@ 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);
   }
@@ -57,3 +55,61 @@ export const getAllUsers = async (accessToken: string) => {
   });
   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.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;

src/components/layout/createGameRoom.tsx

@@ -0,0 +1,78 @@
+import React, { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { createGameRooms } from '../../api';
+import { io } from 'socket.io-client';
+import { SERVER_URL, CONTENT_TYPE, SERVER_ID } from '../../constant';
+import { useRecoilState } from 'recoil';
+import { allRoomState } from '../../states/atom';
+
+const CreateGameRoom = () => {
+  const [allRooms, setAllRooms] = useRecoilState(allRoomState);
+  const navigate = useNavigate();
+  const [name, setName] = useState('');
+  const [users, setUsers] = useState([]);
+  const [isPrivate, setIsPrivate] = useState(false);
+  const token: any = localStorage.getItem('jwt');
+
+  const onChange = (e: React.ChangeEvent<any>) => {
+    const { value, name } = e.target;
+    console.log(value, name);
+    if (value === 'Private') {
+      setIsPrivate(true);
+    } else {
+      setIsPrivate(false);
+    }
+  };
+
+  const onChangeName = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setName(e.target.value);
+  };
+
+  const submit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const check = await createGameRooms(token, name, users, isPrivate);
+    if (check === undefined) {
+      alert('중복된 방이 있습니다.');
+    } else {
+      alert('방 생성 성공.');
+      const socket = io(`${SERVER_URL}/chat?chatId=${check.id}`, {
+        extraHeaders: {
+          Authorization: `Bearer ${token}`,
+          'content-type': CONTENT_TYPE,
+          serverId: SERVER_ID,
+        },
+      });
+      console.log(socket.connected);
+      socket.on('message-to-client', (messageObject: any) => {
+        console.log(messageObject);
+      });
+
+      setAllRooms([...allRooms, check]);
+
+      navigate(`/room/:${check.id}`);
+    }
+  };
+
+  return (
+    <>
+      <div> CreateGameRoom</div>
+      <form onSubmit={submit}>
+        <label>name</label>
+        <input
+          type="text"
+          placeholder="plz insert name"
+          value={name}
+          onChange={onChangeName}
+        />
+        <label>isPrivate</label>
+        <select name="isPrivate" onChange={onChange}>
+          <option value="UnPrivate">UnPrivate</option>
+          <option value="Private">Private</option>
+        </select>
+        <button type="submit">create Room!</button>
+      </form>
+    </>
+  );
+};
+
+export default CreateGameRoom;