Overnap

Merge branch 'develop' into feature/room

......@@ -23,7 +23,7 @@
"web-vitals": "^1.0.1"
},
"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",
"test": "react-scripts test",
"eject": "react-scripts eject",
......
......@@ -4,10 +4,15 @@ export interface MessageResponse<T> {
result?: T;
}
export interface RawMessage {
type: string;
message: any;
}
export const MessageType = {
LOGIN: "login",
ROOM_LIST_REQUEST: "room_list_request",
ROOM_JOIN: "room_join",
ROOM_LIST_REQUEST: "roomList",
ROOM_JOIN: "joinRoom",
ROOM_LEAVE: "room_leave",
ROOM_USER_UPDATE: "room_user_update",
ROOM_CHAT: "room_chat",
......
import React, { useContext } from 'react';
import React, { useCallback, useContext } from 'react';
import { useHistory } from 'react-router';
import SocketContext from '../../contexts/SocketContext';
import { MessageResponse, MessageType } from '../common/types';
import { MessageResponse, MessageType, RawMessage } from '../common/types';
import { RoomData } from '../room/types';
import { Room } from './types';
interface RoomProps {
interface RoomBlockProps {
room: Room
}
export const RoomInfo: React.FC<RoomProps> = ({ room }) => {
export const RoomBlock: React.FC<RoomBlockProps> = ({ room }) => {
const history = useHistory();
const socket = useContext(SocketContext);
const joinRoom = () => {
const joinRoom = useCallback(() => {
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) {
history.push({
pathname: '/' + room.uuid,
......@@ -27,7 +31,7 @@ export const RoomInfo: React.FC<RoomProps> = ({ room }) => {
} else {
//TODO: 자리 꽉찼다는 MODAL
}
}
}, []);
return (
<button className={`flex items-center place-content-between m-2 w-5/6
......
import React from 'react';
import { io } from 'socket.io-client';
export const socket = io('http://localhost/');
export const socket = io('http://localhost:3000/');
const SocketContext = React.createContext(socket);
export const SocketProvider = SocketContext.Provider;
......
import React, { useContext, useState } from 'react';
import React, { useCallback, useContext, useState } from 'react';
import { useHistory } from 'react-router';
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';
export const Login: React.FC = () => {
......@@ -9,15 +9,19 @@ export const Login: React.FC = () => {
const socket = useContext(SocketContext);
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) {
history.push('/rooms');
} else {
console.error('login error!'); // TODO: 팝업 에러?
}
});
}
}, []);
return (
<Main>
......
import React, { useContext, useEffect, useState } from 'react';
import React, { useCallback, useContext, useEffect, useState } from 'react';
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 SocketContext from '../contexts/SocketContext';
......@@ -9,41 +9,28 @@ export const Rooms: React.FC = () => {
const socket = useContext(SocketContext);
const [ rooms, setRooms ] = useState<Room[]>([]);
// for test
const testingRoom1: Room = {
uuid: '23525',
name: 'Hello World!',
currentUsers: 3,
maxUsers: 4
const refreshRooms = useCallback(() => {
const rawMessage: RawMessage = {
type: MessageType.ROOM_LIST_REQUEST,
message: {}
}
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[]>) => {
socket.emit('msg', rawMessage, (response: MessageResponse<Room[]>) => {
if (response.ok) {
setRooms(response.result!);
} else {
// TODO: 에러 핸들링
console.log("방 목록을 수신하지 못함");
console.log(response);
}
});
}
}, []);
// useEffect(refreshRooms, []);
useEffect(refreshRooms, []);
return (
<Main>
<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>
</Main>
)
......