Overnap
Builds for 1 pipeline failed in 1 minute 19 seconds

Merge branch 'feature/server-connection' into develop

...@@ -4,10 +4,15 @@ export interface MessageResponse<T> { ...@@ -4,10 +4,15 @@ export interface MessageResponse<T> {
4 result?: T; 4 result?: T;
5 } 5 }
6 6
7 +export interface RawMessage {
8 + type: string;
9 + message: any;
10 +}
11 +
7 export const MessageType = { 12 export const MessageType = {
8 LOGIN: "login", 13 LOGIN: "login",
9 - ROOM_LIST_REQUEST: "room_list_request", 14 + ROOM_LIST_REQUEST: "roomList",
10 - ROOM_JOIN: "room_join", 15 + ROOM_JOIN: "joinRoom",
11 ROOM_LEAVE: "room_leave", 16 ROOM_LEAVE: "room_leave",
12 ROOM_USER_UPDATE: "room_user_update", 17 ROOM_USER_UPDATE: "room_user_update",
13 ROOM_CHAT: "room_chat", 18 ROOM_CHAT: "room_chat",
......
1 -import React, { useContext } from 'react'; 1 +import React, { useCallback, useContext } from 'react';
2 import { useHistory } from 'react-router'; 2 import { useHistory } from 'react-router';
3 import SocketContext from '../../contexts/SocketContext'; 3 import SocketContext from '../../contexts/SocketContext';
4 -import { MessageResponse, MessageType } from '../common/types'; 4 +import { MessageResponse, MessageType, RawMessage } from '../common/types';
5 import { RoomData } from '../room/types'; 5 import { RoomData } from '../room/types';
6 import { Room } from './types'; 6 import { Room } from './types';
7 7
...@@ -12,9 +12,13 @@ interface RoomBlockProps { ...@@ -12,9 +12,13 @@ interface RoomBlockProps {
12 export const RoomBlock: React.FC<RoomBlockProps> = ({ room }) => { 12 export const RoomBlock: React.FC<RoomBlockProps> = ({ room }) => {
13 const history = useHistory(); 13 const history = useHistory();
14 const socket = useContext(SocketContext); 14 const socket = useContext(SocketContext);
15 - const joinRoom = () => { 15 + const joinRoom = useCallback(() => {
16 if (room.currentUsers < room.maxUsers) { 16 if (room.currentUsers < room.maxUsers) {
17 - socket.emit(MessageType.ROOM_JOIN, (response: MessageResponse<RoomData>) => { 17 + const rawMessage: RawMessage = {
18 + type: MessageType.ROOM_JOIN,
19 + message: { uuid: room.uuid }
20 + }
21 + socket.emit('msg', rawMessage, (response: MessageResponse<RoomData>) => {
18 if (response.ok) { 22 if (response.ok) {
19 history.push({ 23 history.push({
20 pathname: '/' + room.uuid, 24 pathname: '/' + room.uuid,
...@@ -27,7 +31,7 @@ export const RoomBlock: React.FC<RoomBlockProps> = ({ room }) => { ...@@ -27,7 +31,7 @@ export const RoomBlock: React.FC<RoomBlockProps> = ({ room }) => {
27 } else { 31 } else {
28 //TODO: 자리 꽉찼다는 MODAL 32 //TODO: 자리 꽉찼다는 MODAL
29 } 33 }
30 - } 34 + }, []);
31 35
32 return ( 36 return (
33 <button className={`flex items-center place-content-between m-2 w-5/6 37 <button className={`flex items-center place-content-between m-2 w-5/6
......
1 -import React, { useContext, useState } from 'react'; 1 +import React, { useCallback, useContext, useState } from 'react';
2 import { useHistory } from 'react-router'; 2 import { useHistory } from 'react-router';
3 import { Main } from '../components/common/Main'; 3 import { Main } from '../components/common/Main';
4 -import { MessageResponse, MessageType } from '../components/common/types'; 4 +import { MessageResponse, MessageType, RawMessage } from '../components/common/types';
5 import SocketContext from '../contexts/SocketContext'; 5 import SocketContext from '../contexts/SocketContext';
6 6
7 export const Login: React.FC = () => { 7 export const Login: React.FC = () => {
...@@ -9,15 +9,19 @@ export const Login: React.FC = () => { ...@@ -9,15 +9,19 @@ export const Login: React.FC = () => {
9 const socket = useContext(SocketContext); 9 const socket = useContext(SocketContext);
10 const [ username, setUsername ] = useState(""); 10 const [ username, setUsername ] = useState("");
11 11
12 - const login = () => { 12 + const login = useCallback(() => {
13 - socket.emit(MessageType.LOGIN, username, (response : MessageResponse<null>) => { 13 + const rawMessage: RawMessage = {
14 + type: MessageType.LOGIN,
15 + message: { username }
16 + }
17 + socket.emit('msg', rawMessage, (response : MessageResponse<undefined>) => {
14 if (response.ok) { 18 if (response.ok) {
15 history.push('/rooms'); 19 history.push('/rooms');
16 } else { 20 } else {
17 console.error('login error!'); // TODO: 팝업 에러? 21 console.error('login error!'); // TODO: 팝업 에러?
18 } 22 }
19 }); 23 });
20 - } 24 + }, []);
21 25
22 return ( 26 return (
23 <Main> 27 <Main>
......
1 import React, { useCallback, useContext, useEffect, useState } from 'react'; 1 import React, { useCallback, useContext, useEffect, useState } from 'react';
2 import { Main } from '../components/common/Main'; 2 import { Main } from '../components/common/Main';
3 -import { MessageResponse, MessageType } from '../components/common/types'; 3 +import { MessageResponse, MessageType, RawMessage } from '../components/common/types';
4 import { RoomBlock } from '../components/rooms/RoomBlock'; 4 import { RoomBlock } from '../components/rooms/RoomBlock';
5 import { Room } from '../components/rooms/types'; 5 import { Room } from '../components/rooms/types';
6 import SocketContext from '../contexts/SocketContext'; 6 import SocketContext from '../contexts/SocketContext';
...@@ -10,12 +10,17 @@ export const Rooms: React.FC = () => { ...@@ -10,12 +10,17 @@ export const Rooms: React.FC = () => {
10 const [ rooms, setRooms ] = useState<Room[]>([]); 10 const [ rooms, setRooms ] = useState<Room[]>([]);
11 11
12 const refreshRooms = useCallback(() => { 12 const refreshRooms = useCallback(() => {
13 - socket.emit(MessageType.ROOM_LIST_REQUEST, (response: MessageResponse<Room[]>) => { 13 + const rawMessage: RawMessage = {
14 + type: MessageType.ROOM_LIST_REQUEST,
15 + message: {}
16 + }
17 + socket.emit('msg', rawMessage, (response: MessageResponse<Room[]>) => {
14 if (response.ok) { 18 if (response.ok) {
15 setRooms(response.result!); 19 setRooms(response.result!);
16 } else { 20 } else {
17 // TODO: 에러 핸들링 21 // TODO: 에러 핸들링
18 console.log("방 목록을 수신하지 못함"); 22 console.log("방 목록을 수신하지 못함");
23 + console.log(response);
19 } 24 }
20 }); 25 });
21 }, []); 26 }, []);
......