socket IO를 사용하였으며 socket.emit("createRoom", roomTitle, selectedGame, numberOfPlayers);
로직을 실행하여 아래의 socket.on("createRoom", ({ room_id }
을 전달 받아 socket.emit("joinRoom", userId, room_id, nickname);
을 실행하였다.
useEffect(() => {
socket.on("createRoom", ({ room_id }) => {
roomId.current = room_id;
socket.emit("joinRoom", userId, room_id, nickname);
});
socket.on("createRoomError", (message) => {
console.log(message);
isGoInClick.current = false;
});
socket.on("joinRoom", () => {
if (roomId.current) {
setRoomId(roomId.current);
setIsModal(false);
router.push(`/room/${roomId.current}`);
}
});
socket.on("joinRoomError", (message) => {
alert(message);
isGoInClick.current = false;
});
return () => {
socket.off("createRoom");
socket.off("createRoomError");
socket.off("joinRoom");
socket.off("joinRoomError");
};
}, []);
사용자의 무분별한 클릭을 방지하기 위해 setTimeOut() 메서드로 일정 시간동안 버튼을 막으려고 하였으나 기능에 비해 코드량이 방대해져 다른 방식을 찾게 되었고 <button> 태그 자체에 disabled라는 속성을 찾아 true(비활성화) 및 false(활성화) 로직으로 변경하였다.
<button disabled={isGoInClick.current} >