Overnap

Merge branch 'refactor' into develop

1 import React from 'react'; 1 import React from 'react';
2 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; 2 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
3 import { socket, SocketProvider } from './contexts/SocketContext'; 3 import { socket, SocketProvider } from './contexts/SocketContext';
4 -import { Login } from './pages/Login'; 4 +import Login from './pages/Login';
5 -import { Room } from './pages/Room'; 5 +import Room from './pages/Room';
6 -import { Rooms } from './pages/Rooms'; 6 +import Rooms from './pages/Rooms';
7 7
8 const App: React.FC = () => { 8 const App: React.FC = () => {
9 return ( 9 return (
......
1 import React from 'react'; 1 import React from 'react';
2 2
3 -export const Footer: React.FC = () => { 3 +const Footer: React.FC = () => {
4 return ( 4 return (
5 <div className="mt-auto flex justify-center items-center"> 5 <div className="mt-auto flex justify-center items-center">
6 <a href="http://khuhub.khu.ac.kr/2020105578/nodejs-game"> 6 <a href="http://khuhub.khu.ac.kr/2020105578/nodejs-game">
7 - <img className="object-contain h-12" src="./gitlab.png"/> 7 + <img className="object-contain h-12" alt='logo img' src="./gitlab.png"/>
8 </a> 8 </a>
9 <div className="flex text-gray-600">Made by&nbsp; 9 <div className="flex text-gray-600">Made by&nbsp;
10 - <a href="https://github.com/aren227" target="_blank" 10 + <a href="https://github.com/aren227" target="_blank" rel="noreferrer"
11 className="outline-none focus:outline-none 11 className="outline-none focus:outline-none
12 text-gray-600 hover:text-green-500 12 text-gray-600 hover:text-green-500
13 ease-linear transition-all duration-100">@aren227</a>&nbsp; 13 ease-linear transition-all duration-100">@aren227</a>&nbsp;
14 - <a href="https://github.com/overnap" target="_blank" 14 + <a href="https://github.com/overnap" target="_blank" rel="noreferrer"
15 className="outline-none focus:outline-none 15 className="outline-none focus:outline-none
16 text-gray-600 hover:text-green-500 16 text-gray-600 hover:text-green-500
17 ease-linear transition-all duration-100">@overnap</a> 17 ease-linear transition-all duration-100">@overnap</a>
18 </div> 18 </div>
19 </div> 19 </div>
20 ); 20 );
21 -}
...\ No newline at end of file ...\ No newline at end of file
21 +}
22 +
23 +export default Footer;
...\ No newline at end of file ...\ No newline at end of file
......
1 import React from 'react'; 1 import React from 'react';
2 -import { Footer } from './Footer'; 2 +import Footer from './Footer';
3 3
4 -export const Main: React.FC = ({ children }) => { 4 +const Main: React.FC = ({ children }) => {
5 return ( 5 return (
6 <div className="flex flex-col items-center w-screen h-screen"> 6 <div className="flex flex-col items-center w-screen h-screen">
7 {children} 7 {children}
8 <Footer/> 8 <Footer/>
9 </div> 9 </div>
10 ); 10 );
11 -}
...\ No newline at end of file ...\ No newline at end of file
11 +}
12 +
13 +export default Main;
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -9,7 +9,7 @@ interface CanvasProps { ...@@ -9,7 +9,7 @@ interface CanvasProps {
9 isDrawer: boolean; 9 isDrawer: boolean;
10 } 10 }
11 11
12 -export const Canvas: React.FC<CanvasProps> = ({ isDrawer }) => { 12 +const Canvas: React.FC<CanvasProps> = ({ isDrawer }) => {
13 const socket = useContext(SocketContext); 13 const socket = useContext(SocketContext);
14 const canvasRef = useRef<HTMLCanvasElement>(null); 14 const canvasRef = useRef<HTMLCanvasElement>(null);
15 15
...@@ -185,4 +185,6 @@ export const Canvas: React.FC<CanvasProps> = ({ isDrawer }) => { ...@@ -185,4 +185,6 @@ export const Canvas: React.FC<CanvasProps> = ({ isDrawer }) => {
185 <canvas ref={canvasRef} width='640' height='480' /> 185 <canvas ref={canvasRef} width='640' height='480' />
186 </div> 186 </div>
187 ); 187 );
188 -}
...\ No newline at end of file ...\ No newline at end of file
188 +}
189 +
190 +export default Canvas;
...\ No newline at end of file ...\ No newline at end of file
......
1 import React, { useCallback, useContext, useEffect, useRef, useState } from 'react'; 1 import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
2 import SocketContext from '../../contexts/SocketContext'; 2 import SocketContext from '../../contexts/SocketContext';
3 import { MessageType, RawMessage } from '../common/types'; 3 import { MessageType, RawMessage } from '../common/types';
4 -import { ChatLine } from './ChatLine'; 4 +import ChatLine from './ChatLine';
5 import { ChatData } from './types'; 5 import { ChatData } from './types';
6 6
7 interface ChatProps { 7 interface ChatProps {
...@@ -9,7 +9,7 @@ interface ChatProps { ...@@ -9,7 +9,7 @@ interface ChatProps {
9 h: string; 9 h: string;
10 } 10 }
11 11
12 -export const Chat: React.FC<ChatProps> = (props) => { 12 +const Chat: React.FC<ChatProps> = (props) => {
13 const socket = useContext(SocketContext); 13 const socket = useContext(SocketContext);
14 const [ input, setInput ] = useState(''); 14 const [ input, setInput ] = useState('');
15 const [ chatLines, setChatLines ] = useState<ChatData[]>([]); 15 const [ chatLines, setChatLines ] = useState<ChatData[]>([]);
...@@ -86,4 +86,6 @@ export const Chat: React.FC<ChatProps> = (props) => { ...@@ -86,4 +86,6 @@ export const Chat: React.FC<ChatProps> = (props) => {
86 onKeyPress={handleEnter}></input> 86 onKeyPress={handleEnter}></input>
87 </div> 87 </div>
88 ); 88 );
89 -}
...\ No newline at end of file ...\ No newline at end of file
89 +}
90 +
91 +export default Chat;
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -5,9 +5,11 @@ interface ChatLineProps { ...@@ -5,9 +5,11 @@ interface ChatLineProps {
5 chatData: ChatData; 5 chatData: ChatData;
6 } 6 }
7 7
8 -export const ChatLine: React.FC<ChatLineProps> = ({ chatData }) => { 8 +const ChatLine: React.FC<ChatLineProps> = ({ chatData }) => {
9 return ( 9 return (
10 <div className='w-full px-3 py-1.5 bg-white 10 <div className='w-full px-3 py-1.5 bg-white
11 text-gray-700 text-sm'>{chatData.sender} : {chatData.message}</div> 11 text-gray-700 text-sm'>{chatData.sender} : {chatData.message}</div>
12 ); 12 );
13 } 13 }
14 +
15 +export default ChatLine;
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -2,10 +2,10 @@ import React, { useCallback, useContext, useEffect, useState } from 'react'; ...@@ -2,10 +2,10 @@ import React, { useCallback, useContext, useEffect, useState } from 'react';
2 import { useLocation } from 'react-router'; 2 import { useLocation } from 'react-router';
3 import SocketContext from '../../contexts/SocketContext'; 3 import SocketContext from '../../contexts/SocketContext';
4 import { MessageType, RawMessage } from '../common/types'; 4 import { MessageType, RawMessage } from '../common/types';
5 -import { Canvas } from './Canvas'; 5 +import Canvas from './Canvas';
6 -import { RoundInfo } from './RoundInfo'; 6 +import RoundInfo from './RoundInfo';
7 -import { Role, RoundData } from './types'; 7 +import { RoundData } from './types';
8 -import { Word } from './Word'; 8 +import Word from './Word';
9 9
10 interface GameBoardLocation { 10 interface GameBoardLocation {
11 state: { username: string } 11 state: { username: string }
...@@ -15,7 +15,7 @@ interface GameBoardProps { ...@@ -15,7 +15,7 @@ interface GameBoardProps {
15 isInGame: boolean 15 isInGame: boolean
16 } 16 }
17 17
18 -export const GameBoard: React.FC<GameBoardProps> = ({ isInGame }) => { 18 +const GameBoard: React.FC<GameBoardProps> = ({ isInGame }) => {
19 const socket = useContext(SocketContext); 19 const socket = useContext(SocketContext);
20 const location: GameBoardLocation = useLocation(); 20 const location: GameBoardLocation = useLocation();
21 21
...@@ -37,8 +37,8 @@ export const GameBoard: React.FC<GameBoardProps> = ({ isInGame }) => { ...@@ -37,8 +37,8 @@ export const GameBoard: React.FC<GameBoardProps> = ({ isInGame }) => {
37 setWords([]); 37 setWords([]);
38 38
39 const data = rawMessage.message as RoundData; 39 const data = rawMessage.message as RoundData;
40 - console.log('테스트 location ', location.state.username); 40 + // console.log(location.state.username);
41 - console.log('테스트 rolse ', data.roles); 41 + // console.log(data.roles);
42 const index = data.roles.findIndex(x => x.username === location.state.username); 42 const index = data.roles.findIndex(x => x.username === location.state.username);
43 setIsDrawer(data.roles[index].role === 'drawer'); 43 setIsDrawer(data.roles[index].role === 'drawer');
44 setWordChosen(''); 44 setWordChosen('');
...@@ -64,18 +64,24 @@ export const GameBoard: React.FC<GameBoardProps> = ({ isInGame }) => { ...@@ -64,18 +64,24 @@ export const GameBoard: React.FC<GameBoardProps> = ({ isInGame }) => {
64 64
65 useEffect(() => { 65 useEffect(() => {
66 socket.on('msg', handleStart); 66 socket.on('msg', handleStart);
67 - socket.on('msg', handleGetWordLength);
68 socket.on('msg', handleWordSet); 67 socket.on('msg', handleWordSet);
69 socket.on('msg', handleAnswer); 68 socket.on('msg', handleAnswer);
70 69
71 return () => { 70 return () => {
72 socket.off('msg', handleStart); 71 socket.off('msg', handleStart);
73 - socket.off('msg', handleGetWordLength);
74 socket.off('msg', handleWordSet); 72 socket.off('msg', handleWordSet);
75 socket.off('msg', handleAnswer); 73 socket.off('msg', handleAnswer);
76 } 74 }
77 }, []); 75 }, []);
78 76
77 + useEffect(() => {
78 + socket.on('msg', handleGetWordLength);
79 +
80 + return () => {
81 + socket.off('msg', handleGetWordLength);
82 + }
83 + }, [wordChosen]);
84 +
79 return ( 85 return (
80 <div className={`w-auto ${isInGame ? '' : 'hidden'}`}> 86 <div className={`w-auto ${isInGame ? '' : 'hidden'}`}>
81 <div className='w-full flex flex-col justify-center items-center'> 87 <div className='w-full flex flex-col justify-center items-center'>
...@@ -85,4 +91,6 @@ export const GameBoard: React.FC<GameBoardProps> = ({ isInGame }) => { ...@@ -85,4 +91,6 @@ export const GameBoard: React.FC<GameBoardProps> = ({ isInGame }) => {
85 <RoundInfo round={round} wordChosen={wordChosen} /> 91 <RoundInfo round={round} wordChosen={wordChosen} />
86 </div> 92 </div>
87 ); 93 );
88 -}
...\ No newline at end of file ...\ No newline at end of file
94 +}
95 +
96 +export default GameBoard;
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -12,7 +12,7 @@ interface ReadyProps { ...@@ -12,7 +12,7 @@ interface ReadyProps {
12 users: User[]; 12 users: User[];
13 } 13 }
14 14
15 -export const Ready: React.FC<ReadyProps> = ({ users }) => { 15 +const Ready: React.FC<ReadyProps> = ({ users }) => {
16 const socket = useContext(SocketContext); 16 const socket = useContext(SocketContext);
17 const location: ReadyLocation = useLocation(); 17 const location: ReadyLocation = useLocation();
18 18
...@@ -58,3 +58,5 @@ export const Ready: React.FC<ReadyProps> = ({ users }) => { ...@@ -58,3 +58,5 @@ export const Ready: React.FC<ReadyProps> = ({ users }) => {
58 onClick={() => handleReady()}>{isAdmin ? 'Start' : 'Ready'}</button> 58 onClick={() => handleReady()}>{isAdmin ? 'Start' : 'Ready'}</button>
59 ); 59 );
60 } 60 }
61 +
62 +export default Ready;
...\ No newline at end of file ...\ No newline at end of file
......
1 -import React, { useCallback, useContext, useEffect, useState } from 'react'; 1 +import React from 'react';
2 -import { useHistory, useLocation } from 'react-router'; 2 +import { RoomData } from './types';
3 -import SocketContext from '../../contexts/SocketContext';
4 -import { MessageResponse, MessageType, RawMessage } from '../common/types';
5 -import { RoomData, UpdateRoomUser } from './types';
6 3
7 interface RoomInfoProps { 4 interface RoomInfoProps {
8 roomData: RoomData; 5 roomData: RoomData;
9 } 6 }
10 7
11 -export const RoomInfo: React.FC<RoomInfoProps> = ({ roomData }) => { 8 +const RoomInfo: React.FC<RoomInfoProps> = ({ roomData }) => {
12 return ( 9 return (
13 <div className='m-3 my-8 w-5/6 flex items-center place-content-between'> 10 <div className='m-3 my-8 w-5/6 flex items-center place-content-between'>
14 <div>{roomData.name}</div> 11 <div>{roomData.name}</div>
15 <div>{roomData.users.length}/{roomData.maxUsers}</div> 12 <div>{roomData.users.length}/{roomData.maxUsers}</div>
16 </div> 13 </div>
17 ); 14 );
18 -}
...\ No newline at end of file ...\ No newline at end of file
15 +}
16 +
17 +export default RoomInfo;
...\ No newline at end of file ...\ No newline at end of file
......
1 import React from 'react'; 1 import React from 'react';
2 -import SocketContext from '../../contexts/SocketContext'; 2 +import Timer from './Timer';
3 -import { Timer } from './Timer';
4 -import { RoundData } from './types';
5 3
6 interface RoundInfoProps { 4 interface RoundInfoProps {
7 round: number; 5 round: number;
8 wordChosen: string; 6 wordChosen: string;
9 } 7 }
10 8
11 -export const RoundInfo: React.FC<RoundInfoProps> = ({ round, wordChosen }) => { 9 +const RoundInfo: React.FC<RoundInfoProps> = ({ round, wordChosen }) => {
12 return ( 10 return (
13 <div className='p-3 m-3 h-14 rounded shadow flex items-center place-content-between'> 11 <div className='p-3 m-3 h-14 rounded shadow flex items-center place-content-between'>
14 <Timer /> 12 <Timer />
...@@ -16,4 +14,6 @@ export const RoundInfo: React.FC<RoundInfoProps> = ({ round, wordChosen }) => { ...@@ -16,4 +14,6 @@ export const RoundInfo: React.FC<RoundInfoProps> = ({ round, wordChosen }) => {
16 <div>Round {round}/5</div> 14 <div>Round {round}/5</div>
17 </div> 15 </div>
18 ); 16 );
19 -}
...\ No newline at end of file ...\ No newline at end of file
17 +}
18 +
19 +export default RoundInfo;
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -7,7 +7,7 @@ interface timer { ...@@ -7,7 +7,7 @@ interface timer {
7 time: number; 7 time: number;
8 }; 8 };
9 9
10 -export const Timer: React.FC = () => { 10 +const Timer: React.FC = () => {
11 const socket = useContext(SocketContext); 11 const socket = useContext(SocketContext);
12 12
13 const [ time, setTime ] = useState(0); 13 const [ time, setTime ] = useState(0);
...@@ -52,4 +52,6 @@ export const Timer: React.FC = () => { ...@@ -52,4 +52,6 @@ export const Timer: React.FC = () => {
52 🕒 {time} 52 🕒 {time}
53 </div> 53 </div>
54 ); 54 );
55 -}
...\ No newline at end of file ...\ No newline at end of file
55 +}
56 +
57 +export default Timer;
...\ No newline at end of file ...\ No newline at end of file
......
1 import React from 'react'; 1 import React from 'react';
2 import { User } from './types'; 2 import { User } from './types';
3 -import { UserStatus } from './UserStatus'; 3 +import UserStatus from './UserStatus';
4 4
5 interface UserInfoProps { 5 interface UserInfoProps {
6 users: User[]; 6 users: User[];
7 } 7 }
8 8
9 -export const UserInfo: React.FC<UserInfoProps> = ({ users }) => { 9 +const UserInfo: React.FC<UserInfoProps> = ({ users }) => {
10 return ( 10 return (
11 <div className='w-7/12 h-60 flex justify-center'> 11 <div className='w-7/12 h-60 flex justify-center'>
12 {users.map((user) => (<UserStatus key={user.username} user={user} />))} 12 {users.map((user) => (<UserStatus key={user.username} user={user} />))}
13 </div> 13 </div>
14 ); 14 );
15 -}
...\ No newline at end of file ...\ No newline at end of file
15 +}
16 +
17 +export default UserInfo
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -7,7 +7,7 @@ interface UserRoleProps { ...@@ -7,7 +7,7 @@ interface UserRoleProps {
7 isInGame: boolean; 7 isInGame: boolean;
8 } 8 }
9 9
10 -export const UserRole: React.FC<UserRoleProps> = ({ isInGame }) => { 10 +const UserRole: React.FC<UserRoleProps> = ({ isInGame }) => {
11 const socket = useContext(SocketContext); 11 const socket = useContext(SocketContext);
12 const [ roles, setRoles ] = useState<RoleData[]>([]); 12 const [ roles, setRoles ] = useState<RoleData[]>([]);
13 13
...@@ -39,3 +39,5 @@ export const UserRole: React.FC<UserRoleProps> = ({ isInGame }) => { ...@@ -39,3 +39,5 @@ export const UserRole: React.FC<UserRoleProps> = ({ isInGame }) => {
39 </div> 39 </div>
40 ); 40 );
41 } 41 }
42 +
43 +export default UserRole;
......
...@@ -5,7 +5,7 @@ interface UserStatusProps { ...@@ -5,7 +5,7 @@ interface UserStatusProps {
5 user: User; 5 user: User;
6 } 6 }
7 7
8 -export const UserStatus: React.FC<UserStatusProps> = ({ user }) => { 8 +const UserStatus: React.FC<UserStatusProps> = ({ user }) => {
9 return ( 9 return (
10 <div className='p-3 h-12 m-4 rounded-lg shadow'> 10 <div className='p-3 h-12 m-4 rounded-lg shadow'>
11 <div className={`${user.admin ? 'text-blue-500' : 11 <div className={`${user.admin ? 'text-blue-500' :
...@@ -15,4 +15,6 @@ export const UserStatus: React.FC<UserStatusProps> = ({ user }) => { ...@@ -15,4 +15,6 @@ export const UserStatus: React.FC<UserStatusProps> = ({ user }) => {
15 {user.nickname}</div> 15 {user.nickname}</div>
16 </div> 16 </div>
17 ) 17 )
18 -}
...\ No newline at end of file ...\ No newline at end of file
18 +}
19 +
20 +export default UserStatus;
...\ No newline at end of file ...\ No newline at end of file
......
1 import React, { useCallback, useContext } from 'react'; 1 import React, { useCallback, useContext } from 'react';
2 -import { IndexType } from 'typescript';
3 import SocketContext from '../../contexts/SocketContext'; 2 import SocketContext from '../../contexts/SocketContext';
4 import { MessageResponse, MessageType, RawMessage } from '../common/types'; 3 import { MessageResponse, MessageType, RawMessage } from '../common/types';
5 4
...@@ -10,7 +9,7 @@ interface WordProps { ...@@ -10,7 +9,7 @@ interface WordProps {
10 setWords: (value: React.SetStateAction<string[]>) => void; 9 setWords: (value: React.SetStateAction<string[]>) => void;
11 } 10 }
12 11
13 -export const Word: React.FC<WordProps> = (props) => { 12 +const Word: React.FC<WordProps> = (props) => {
14 const socket = useContext(SocketContext); 13 const socket = useContext(SocketContext);
15 14
16 const handleChoose = useCallback(() => { 15 const handleChoose = useCallback(() => {
...@@ -24,7 +23,7 @@ export const Word: React.FC<WordProps> = (props) => { ...@@ -24,7 +23,7 @@ export const Word: React.FC<WordProps> = (props) => {
24 props.setWordChosen(props.word); 23 props.setWordChosen(props.word);
25 } 24 }
26 }); 25 });
27 - }, [props.setWordChosen]); 26 + }, [props.word, props.setWords, props.setWordChosen]);
28 27
29 return ( 28 return (
30 <button className={`bg-green-500 active:bg-green-600 fixed 29 <button className={`bg-green-500 active:bg-green-600 fixed
...@@ -36,3 +35,5 @@ export const Word: React.FC<WordProps> = (props) => { ...@@ -36,3 +35,5 @@ export const Word: React.FC<WordProps> = (props) => {
36 onClick={() => handleChoose()}>{props.word}</button> 35 onClick={() => handleChoose()}>{props.word}</button>
37 ); 36 );
38 } 37 }
38 +
39 +export default Word;
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -3,13 +3,12 @@ import { useHistory, useLocation } from 'react-router-dom'; ...@@ -3,13 +3,12 @@ import { useHistory, useLocation } from 'react-router-dom';
3 import SocketContext from '../../contexts/SocketContext'; 3 import SocketContext from '../../contexts/SocketContext';
4 import { MessageResponse, MessageType, RawMessage } 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';
7 6
8 interface CreateLocation { 7 interface CreateLocation {
9 state: { username: string } 8 state: { username: string }
10 } 9 }
11 10
12 -export const Create: React.FC = () => { 11 +const Create: React.FC = () => {
13 const history = useHistory(); 12 const history = useHistory();
14 const socket = useContext(SocketContext); 13 const socket = useContext(SocketContext);
15 const [ roomName, setRoomName ] = useState(''); 14 const [ roomName, setRoomName ] = useState('');
...@@ -33,7 +32,7 @@ export const Create: React.FC = () => { ...@@ -33,7 +32,7 @@ export const Create: React.FC = () => {
33 console.log('방 생성 오류'); 32 console.log('방 생성 오류');
34 } 33 }
35 }); 34 });
36 - }, [roomName]); 35 + }, [roomName, location.state.username]);
37 36
38 return ( 37 return (
39 <div className="flex items-center"> 38 <div className="flex items-center">
...@@ -55,3 +54,5 @@ export const Create: React.FC = () => { ...@@ -55,3 +54,5 @@ export const Create: React.FC = () => {
55 </div> 54 </div>
56 ); 55 );
57 } 56 }
57 +
58 +export default Create;
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -4,7 +4,7 @@ interface RefreshProps { ...@@ -4,7 +4,7 @@ interface RefreshProps {
4 refreshRooms: () => void 4 refreshRooms: () => void
5 } 5 }
6 6
7 -export const Refresh: React.FC<RefreshProps> = ({ refreshRooms }) => { 7 +const Refresh: React.FC<RefreshProps> = ({ refreshRooms }) => {
8 return ( 8 return (
9 <button className="bg-green-500 active:bg-green-600 9 <button className="bg-green-500 active:bg-green-600
10 text-white uppercase text-xl 10 text-white uppercase text-xl
...@@ -15,3 +15,5 @@ export const Refresh: React.FC<RefreshProps> = ({ refreshRooms }) => { ...@@ -15,3 +15,5 @@ export const Refresh: React.FC<RefreshProps> = ({ refreshRooms }) => {
15 onClick={() => refreshRooms()}>⟳</button> 15 onClick={() => refreshRooms()}>⟳</button>
16 ); 16 );
17 } 17 }
18 +
19 +export default Refresh;
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -13,7 +13,7 @@ interface RoomBlockProps { ...@@ -13,7 +13,7 @@ interface RoomBlockProps {
13 room: Room 13 room: Room
14 } 14 }
15 15
16 -export const RoomBlock: React.FC<RoomBlockProps> = ({ room }) => { 16 +const RoomBlock: React.FC<RoomBlockProps> = ({ room }) => {
17 const history = useHistory(); 17 const history = useHistory();
18 const socket = useContext(SocketContext); 18 const socket = useContext(SocketContext);
19 const location: RoomBlockLocation = useLocation(); 19 const location: RoomBlockLocation = useLocation();
...@@ -40,7 +40,7 @@ export const RoomBlock: React.FC<RoomBlockProps> = ({ room }) => { ...@@ -40,7 +40,7 @@ export const RoomBlock: React.FC<RoomBlockProps> = ({ room }) => {
40 } else { 40 } else {
41 //TODO: 자리 꽉찼다는 MODAL 41 //TODO: 자리 꽉찼다는 MODAL
42 } 42 }
43 - }, []); 43 + }, [location.state.username, room]);
44 44
45 return ( 45 return (
46 <button className={`flex items-center place-content-between m-2 w-5/6 46 <button className={`flex items-center place-content-between m-2 w-5/6
...@@ -57,3 +57,5 @@ export const RoomBlock: React.FC<RoomBlockProps> = ({ room }) => { ...@@ -57,3 +57,5 @@ export const RoomBlock: React.FC<RoomBlockProps> = ({ room }) => {
57 </button> 57 </button>
58 ); 58 );
59 } 59 }
60 +
61 +export default RoomBlock;
...\ No newline at end of file ...\ No newline at end of file
......
1 import React, { useCallback, 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, RawMessage } 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 +const Login: React.FC = () => {
8 const history = useHistory(); 8 const history = useHistory();
9 const socket = useContext(SocketContext); 9 const socket = useContext(SocketContext);
10 const [ username, setUsername ] = useState(""); 10 const [ username, setUsername ] = useState("");
...@@ -29,7 +29,7 @@ export const Login: React.FC = () => { ...@@ -29,7 +29,7 @@ export const Login: React.FC = () => {
29 return ( 29 return (
30 <Main> 30 <Main>
31 <div className="mt-auto flex flex-col items-center"> 31 <div className="mt-auto flex flex-col items-center">
32 - <img className="m-7" src="./logo192.png"/> 32 + <img className="m-7" src="./logo192.png" alt='logo img' />
33 <div> 33 <div>
34 <input type="text" 34 <input type="text"
35 placeholder="Username" 35 placeholder="Username"
...@@ -51,3 +51,5 @@ export const Login: React.FC = () => { ...@@ -51,3 +51,5 @@ export const Login: React.FC = () => {
51 </Main> 51 </Main>
52 ) 52 )
53 } 53 }
54 +
55 +export default Login;
...\ No newline at end of file ...\ No newline at end of file
......
1 import React, { useCallback, useContext, useEffect, useState } from 'react'; 1 import React, { useCallback, useContext, useEffect, useState } from 'react';
2 import { useHistory, useLocation } from 'react-router'; 2 import { useHistory, useLocation } from 'react-router';
3 -import { Main } from '../components/common/Main'; 3 +import Main from '../components/common/Main';
4 import { MessageResponse, MessageType, RawMessage } from '../components/common/types'; 4 import { MessageResponse, MessageType, RawMessage } from '../components/common/types';
5 -import { Canvas } from '../components/room/Canvas'; 5 +import Chat from '../components/room/Chat';
6 -import { Chat } from '../components/room/Chat'; 6 +import GameBoard from '../components/room/GameBoard';
7 -import { GameBoard } from '../components/room/GameBoard'; 7 +import Ready from '../components/room/Ready';
8 -import { Ready } from '../components/room/Ready'; 8 +import RoomInfo from '../components/room/RoomInfo';
9 -import { RoomInfo } from '../components/room/RoomInfo';
10 import { RoomData, UpdateRoomUser } from '../components/room/types'; 9 import { RoomData, UpdateRoomUser } from '../components/room/types';
11 -import { UserInfo } from '../components/room/UserInfo'; 10 +import UserInfo from '../components/room/UserInfo';
12 -import { UserRole } from '../components/room/UserRole'; 11 +import UserRole from '../components/room/UserRole';
13 -import { UserStatus } from '../components/room/UserStatus';
14 import SocketContext from '../contexts/SocketContext'; 12 import SocketContext from '../contexts/SocketContext';
15 13
16 interface RoomLocation { 14 interface RoomLocation {
17 state: { roomData: RoomData } 15 state: { roomData: RoomData }
18 } 16 }
19 17
20 -export const Room: React.FC = () => { 18 +const Room: React.FC = () => {
21 const history = useHistory(); 19 const history = useHistory();
22 const socket = useContext(SocketContext); 20 const socket = useContext(SocketContext);
23 const location: RoomLocation = useLocation(); 21 const location: RoomLocation = useLocation();
...@@ -40,9 +38,9 @@ export const Room: React.FC = () => { ...@@ -40,9 +38,9 @@ export const Room: React.FC = () => {
40 }, []); 38 }, []);
41 39
42 const handleUpdateRoomUser = useCallback((rawMessage: RawMessage) => { 40 const handleUpdateRoomUser = useCallback((rawMessage: RawMessage) => {
43 - if (rawMessage.type == MessageType.ROOM_USER_UPDATE) { 41 + if (rawMessage.type === MessageType.ROOM_USER_UPDATE) {
44 const data = rawMessage.message as UpdateRoomUser; 42 const data = rawMessage.message as UpdateRoomUser;
45 - if (data.state == 'removed') { 43 + if (data.state === 'removed') {
46 const newUsers = roomData.users; 44 const newUsers = roomData.users;
47 const index = newUsers.findIndex(x => x.username === data.user.username); 45 const index = newUsers.findIndex(x => x.username === data.user.username);
48 if (index < 0) { 46 if (index < 0) {
...@@ -81,7 +79,7 @@ export const Room: React.FC = () => { ...@@ -81,7 +79,7 @@ export const Room: React.FC = () => {
81 return () => { 79 return () => {
82 socket.off('msg', handleUpdateRoomUser); 80 socket.off('msg', handleUpdateRoomUser);
83 } 81 }
84 - }, [roomData]); 82 + }, [handleUpdateRoomUser]);
85 83
86 useEffect(() => { 84 useEffect(() => {
87 // 비정상적인 루트로 방을 들어오면 로그인 화면으로 푸시 85 // 비정상적인 루트로 방을 들어오면 로그인 화면으로 푸시
...@@ -102,7 +100,7 @@ export const Room: React.FC = () => { ...@@ -102,7 +100,7 @@ export const Room: React.FC = () => {
102 } 100 }
103 socket.emit('msg', rawMessage, (response : MessageResponse<undefined>) => {}); 101 socket.emit('msg', rawMessage, (response : MessageResponse<undefined>) => {});
104 } 102 }
105 - }, []) 103 + }, [location.state]);
106 104
107 return ( 105 return (
108 <Main> 106 <Main>
...@@ -125,4 +123,6 @@ export const Room: React.FC = () => { ...@@ -125,4 +123,6 @@ export const Room: React.FC = () => {
125 </div> 123 </div>
126 </Main> 124 </Main>
127 ); 125 );
128 -}
...\ No newline at end of file ...\ No newline at end of file
126 +}
127 +
128 +export default Room;
...\ No newline at end of file ...\ No newline at end of file
......
1 import React, { useCallback, useContext, useEffect, useState } from 'react'; 1 import React, { useCallback, useContext, useEffect, 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, RawMessage } from '../components/common/types'; 4 import { MessageResponse, MessageType, RawMessage } from '../components/common/types';
5 -import { Create } from '../components/rooms/Create'; 5 +import Create from '../components/rooms/Create';
6 -import { Refresh } from '../components/rooms/Refrsh'; 6 +import Refresh from '../components/rooms/Refrsh';
7 -import { RoomBlock } from '../components/rooms/RoomBlock'; 7 +import RoomBlock from '../components/rooms/RoomBlock';
8 import { Room } from '../components/rooms/types'; 8 import { Room } from '../components/rooms/types';
9 import SocketContext from '../contexts/SocketContext'; 9 import SocketContext from '../contexts/SocketContext';
10 10
11 -export const Rooms: React.FC = () => { 11 +const Rooms: React.FC = () => {
12 const history = useHistory(); 12 const history = useHistory();
13 const socket = useContext(SocketContext); 13 const socket = useContext(SocketContext);
14 const [ rooms, setRooms ] = useState<Room[]>([]); 14 const [ rooms, setRooms ] = useState<Room[]>([]);
...@@ -42,3 +42,5 @@ export const Rooms: React.FC = () => { ...@@ -42,3 +42,5 @@ export const Rooms: React.FC = () => {
42 </Main> 42 </Main>
43 ) 43 )
44 } 44 }
45 +
46 +export default Rooms;
...\ No newline at end of file ...\ No newline at end of file
......