Merge branch 'develop' into feature/room

@@ -23,7 +23,7 @@
     "web-vitals": "^1.0.1"
     "web-vitals": "^1.0.1"
   },
   },
   "scripts": {
   "scripts": {
-    "start": "npm run twcss && react-scripts start",
+    "start": "npm run twcss && set PORT=3001 && react-scripts start",
     "build": "npm run twcss && react-scripts build",
     "build": "npm run twcss && react-scripts build",
     "test": "react-scripts test",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "eject": "react-scripts eject",

@@ -4,10 +4,15 @@ export interface MessageResponse<T> {
   result?: T;
   result?: T;
 }
 }
 
 
+export interface RawMessage {
+  type: string;
+  message: any;
+}
+
 export const MessageType = {
 export const MessageType = {
   LOGIN: "login",
   LOGIN: "login",
-  ROOM_LIST_REQUEST: "room_list_request",
-  ROOM_JOIN: "room_join",
+  ROOM_LIST_REQUEST: "roomList",
+  ROOM_JOIN: "joinRoom",
   ROOM_LEAVE: "room_leave",
   ROOM_LEAVE: "room_leave",
   ROOM_USER_UPDATE: "room_user_update",
   ROOM_USER_UPDATE: "room_user_update",
   ROOM_CHAT: "room_chat",
   ROOM_CHAT: "room_chat",

-import React, { useContext } from 'react';
+import React, { useCallback, useContext } from 'react';
 import { useHistory } from 'react-router';
 import { useHistory } from 'react-router';
 import SocketContext from '../../contexts/SocketContext';
 import SocketContext from '../../contexts/SocketContext';
-import { MessageResponse, MessageType } from '../common/types';
+import { MessageResponse, MessageType, RawMessage } from '../common/types';
 import { RoomData } from '../room/types';
 import { RoomData } from '../room/types';
 import { Room } from './types';
 import { Room } from './types';
 
 
-interface RoomProps {
+interface RoomBlockProps {
   room: Room
   room: Room
 }
 }
 
 
-export const RoomInfo: React.FC<RoomProps> = ({ room }) => {
+export const RoomBlock: React.FC<RoomBlockProps> = ({ room }) => {
   const history = useHistory();
   const history = useHistory();
   const socket = useContext(SocketContext);
   const socket = useContext(SocketContext);
-  const joinRoom = () => {
+  const joinRoom = useCallback(() => {
     if (room.currentUsers < room.maxUsers) {
     if (room.currentUsers < room.maxUsers) {
-      socket.emit(MessageType.ROOM_JOIN, (response: MessageResponse<RoomData>) => {
+      const rawMessage: RawMessage = {
+        type: MessageType.ROOM_JOIN,
+        message: { uuid: room.uuid }
+      }
+      socket.emit('msg', rawMessage, (response: MessageResponse<RoomData>) => {
         if (response.ok) {
         if (response.ok) {
           history.push({
           history.push({
             pathname: '/' + room.uuid,
             pathname: '/' + room.uuid,
@@ -27,7 +31,7 @@ export const RoomInfo: React.FC<RoomProps> = ({ room }) => {
     } else {
     } else {
       //TODO: 자리 꽉찼다는 MODAL
       //TODO: 자리 꽉찼다는 MODAL
     }
     }
-  }
+  }, []);
 
 
   return (
   return (
     <button className={`flex items-center place-content-between m-2 w-5/6 
     <button className={`flex items-center place-content-between m-2 w-5/6 

 import React from 'react';
 import React from 'react';
 import { io } from 'socket.io-client';
 import { io } from 'socket.io-client';
 
 
-export const socket = io('http://localhost/');
+export const socket = io('http://localhost:3000/');
 const SocketContext = React.createContext(socket);
 const SocketContext = React.createContext(socket);
 
 
 export const SocketProvider = SocketContext.Provider;
 export const SocketProvider = SocketContext.Provider;

-import React, { useContext, useState } from 'react';
+import React, { useCallback, useContext, useState } from 'react';
 import { useHistory } from 'react-router';
 import { useHistory } from 'react-router';
 import { Main } from '../components/common/Main';
 import { Main } from '../components/common/Main';
-import { MessageResponse, MessageType } from '../components/common/types';
+import { MessageResponse, MessageType, RawMessage } from '../components/common/types';
 import SocketContext from '../contexts/SocketContext';
 import SocketContext from '../contexts/SocketContext';
 
 
 export const Login: React.FC = () => {
 export const Login: React.FC = () => {
@@ -9,15 +9,19 @@ export const Login: React.FC = () => {
     const socket = useContext(SocketContext);
     const socket = useContext(SocketContext);
     const [ username, setUsername ] = useState("");
     const [ username, setUsername ] = useState("");
 
 
-    const login = () => {
-      socket.emit(MessageType.LOGIN, username, (response : MessageResponse<null>) => {
+    const login = useCallback(() => {
+      const rawMessage: RawMessage = {
+        type: MessageType.LOGIN,
+        message: { username }
+      }
+      socket.emit('msg', rawMessage, (response : MessageResponse<undefined>) => {
         if (response.ok) {
         if (response.ok) {
           history.push('/rooms');
           history.push('/rooms');
         } else {
         } else {
           console.error('login error!'); // TODO: 팝업 에러?
           console.error('login error!'); // TODO: 팝업 에러?
         }
         }
       });
       });
-    }
+    }, []);
 
 
     return (
     return (
       <Main>
       <Main>

-import React, { useContext, useEffect, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { Main } from '../components/common/Main';
 import { Main } from '../components/common/Main';
-import { MessageResponse, MessageType } from '../components/common/types';
-import { RoomInfo } from '../components/rooms/RoomInfo';
+import { MessageResponse, MessageType, RawMessage } from '../components/common/types';
+import { RoomBlock } from '../components/rooms/RoomBlock';
 import { Room } from '../components/rooms/types';
 import { Room } from '../components/rooms/types';
 import SocketContext from '../contexts/SocketContext';
 import SocketContext from '../contexts/SocketContext';
 
 
@@ -9,41 +9,28 @@ export const Rooms: React.FC = () => {
   const socket = useContext(SocketContext);
   const socket = useContext(SocketContext);
   const [ rooms, setRooms ] = useState<Room[]>([]);
   const [ rooms, setRooms ] = useState<Room[]>([]);
 
 
-  // for test
-  const testingRoom1: Room = {
-    uuid: '23525',
-    name: 'Hello World!',
-    currentUsers: 3,
-    maxUsers: 4
-  }
-  const testingRoom2: Room = {
-    uuid: '235252134',
-    name: 'Bonjour World!',
-    currentUsers: 6,
-    maxUsers: 6
-  }
-  useEffect(() => {
-    setRooms([testingRoom1, testingRoom2]);
-    // refreshRooms()
-  }, []);
-
-  const refreshRooms = () => {
-    socket.emit(MessageType.ROOM_LIST_REQUEST, (response: MessageResponse<Room[]>) => {
+  const refreshRooms = useCallback(() => {
+    const rawMessage: RawMessage = {
+      type: MessageType.ROOM_LIST_REQUEST,
+      message: {}
+    }
+    socket.emit('msg', rawMessage, (response: MessageResponse<Room[]>) => {
       if (response.ok) {
       if (response.ok) {
         setRooms(response.result!);
         setRooms(response.result!);
       } else {
       } else {
         // TODO: 에러 핸들링
         // TODO: 에러 핸들링
         console.log("방 목록을 수신하지 못함");
         console.log("방 목록을 수신하지 못함");
+        console.log(response);
       }
       }
     });
     });
-  }
+  }, []);
 
 
-  // useEffect(refreshRooms, []);
+  useEffect(refreshRooms, []);
 
 
   return (
   return (
     <Main>
     <Main>
       <div className='mt-auto w-screen flex flex-col items-center'>
       <div className='mt-auto w-screen flex flex-col items-center'>
-        {rooms.map((room) => (<RoomInfo key={room.uuid} room={room} />))}
+        {rooms.map((room) => (<RoomBlock key={room.uuid} room={room} />))}
       </div>
       </div>
     </Main>
     </Main>
   )
   )