Overnap

export default로 일괄 변경

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">
...@@ -19,3 +19,5 @@ export const Footer: React.FC = () => { ...@@ -19,3 +19,5 @@ export const Footer: React.FC = () => {
19 </div> 19 </div>
20 ); 20 );
21 } 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}
...@@ -9,3 +9,5 @@ export const Main: React.FC = ({ children }) => { ...@@ -9,3 +9,5 @@ export const Main: React.FC = ({ children }) => {
9 </div> 9 </div>
10 ); 10 );
11 } 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
...@@ -186,3 +186,5 @@ export const Canvas: React.FC<CanvasProps> = ({ isDrawer }) => { ...@@ -186,3 +186,5 @@ export const Canvas: React.FC<CanvasProps> = ({ isDrawer }) => {
186 </div> 186 </div>
187 ); 187 );
188 } 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[]>([]);
...@@ -87,3 +87,5 @@ export const Chat: React.FC<ChatProps> = (props) => { ...@@ -87,3 +87,5 @@ export const Chat: React.FC<ChatProps> = (props) => {
87 </div> 87 </div>
88 ); 88 );
89 } 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 { 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
...@@ -92,3 +92,5 @@ export const GameBoard: React.FC<GameBoardProps> = ({ isInGame }) => { ...@@ -92,3 +92,5 @@ export const GameBoard: React.FC<GameBoardProps> = ({ isInGame }) => {
92 </div> 92 </div>
93 ); 93 );
94 } 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
......
...@@ -5,7 +5,7 @@ interface RoomInfoProps { ...@@ -5,7 +5,7 @@ interface RoomInfoProps {
5 roomData: RoomData; 5 roomData: RoomData;
6 } 6 }
7 7
8 -export const RoomInfo: React.FC<RoomInfoProps> = ({ roomData }) => { 8 +const RoomInfo: React.FC<RoomInfoProps> = ({ roomData }) => {
9 return ( 9 return (
10 <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'>
11 <div>{roomData.name}</div> 11 <div>{roomData.name}</div>
...@@ -13,3 +13,5 @@ export const RoomInfo: React.FC<RoomInfoProps> = ({ roomData }) => { ...@@ -13,3 +13,5 @@ export const RoomInfo: React.FC<RoomInfoProps> = ({ roomData }) => {
13 </div> 13 </div>
14 ); 14 );
15 } 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 { Timer } from './Timer'; 2 +import Timer from './Timer';
3 3
4 interface RoundInfoProps { 4 interface RoundInfoProps {
5 round: number; 5 round: number;
6 wordChosen: string; 6 wordChosen: string;
7 } 7 }
8 8
9 -export const RoundInfo: React.FC<RoundInfoProps> = ({ round, wordChosen }) => { 9 +const RoundInfo: React.FC<RoundInfoProps> = ({ round, wordChosen }) => {
10 return ( 10 return (
11 <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'>
12 <Timer /> 12 <Timer />
...@@ -15,3 +15,5 @@ export const RoundInfo: React.FC<RoundInfoProps> = ({ round, wordChosen }) => { ...@@ -15,3 +15,5 @@ export const RoundInfo: React.FC<RoundInfoProps> = ({ round, wordChosen }) => {
15 </div> 15 </div>
16 ); 16 );
17 } 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);
...@@ -53,3 +53,5 @@ export const Timer: React.FC = () => { ...@@ -53,3 +53,5 @@ export const Timer: React.FC = () => {
53 </div> 53 </div>
54 ); 54 );
55 } 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 } 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' :
...@@ -16,3 +16,5 @@ export const UserStatus: React.FC<UserStatusProps> = ({ user }) => { ...@@ -16,3 +16,5 @@ export const UserStatus: React.FC<UserStatusProps> = ({ user }) => {
16 </div> 16 </div>
17 ) 17 )
18 } 18 }
19 +
20 +export default UserStatus;
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -9,7 +9,7 @@ interface WordProps { ...@@ -9,7 +9,7 @@ interface WordProps {
9 setWords: (value: React.SetStateAction<string[]>) => void; 9 setWords: (value: React.SetStateAction<string[]>) => void;
10 } 10 }
11 11
12 -export const Word: React.FC<WordProps> = (props) => { 12 +const Word: React.FC<WordProps> = (props) => {
13 const socket = useContext(SocketContext); 13 const socket = useContext(SocketContext);
14 14
15 const handleChoose = useCallback(() => { 15 const handleChoose = useCallback(() => {
...@@ -35,3 +35,5 @@ export const Word: React.FC<WordProps> = (props) => { ...@@ -35,3 +35,5 @@ export const Word: React.FC<WordProps> = (props) => {
35 onClick={() => handleChoose()}>{props.word}</button> 35 onClick={() => handleChoose()}>{props.word}</button>
36 ); 36 );
37 } 37 }
38 +
39 +export default Word;
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -8,7 +8,7 @@ interface CreateLocation { ...@@ -8,7 +8,7 @@ interface CreateLocation {
8 state: { username: string } 8 state: { username: string }
9 } 9 }
10 10
11 -export const Create: React.FC = () => { 11 +const Create: React.FC = () => {
12 const history = useHistory(); 12 const history = useHistory();
13 const socket = useContext(SocketContext); 13 const socket = useContext(SocketContext);
14 const [ roomName, setRoomName ] = useState(''); 14 const [ roomName, setRoomName ] = useState('');
...@@ -54,3 +54,5 @@ export const Create: React.FC = () => { ...@@ -54,3 +54,5 @@ export const Create: React.FC = () => {
54 </div> 54 </div>
55 ); 55 );
56 } 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();
...@@ -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("");
...@@ -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 { Chat } from '../components/room/Chat'; 5 +import Chat from '../components/room/Chat';
6 -import { GameBoard } from '../components/room/GameBoard'; 6 +import GameBoard from '../components/room/GameBoard';
7 -import { Ready } from '../components/room/Ready'; 7 +import Ready from '../components/room/Ready';
8 -import { RoomInfo } from '../components/room/RoomInfo'; 8 +import RoomInfo from '../components/room/RoomInfo';
9 import { RoomData, UpdateRoomUser } from '../components/room/types'; 9 import { RoomData, UpdateRoomUser } from '../components/room/types';
10 -import { UserInfo } from '../components/room/UserInfo'; 10 +import UserInfo from '../components/room/UserInfo';
11 -import { UserRole } from '../components/room/UserRole'; 11 +import UserRole from '../components/room/UserRole';
12 import SocketContext from '../contexts/SocketContext'; 12 import SocketContext from '../contexts/SocketContext';
13 13
14 interface RoomLocation { 14 interface RoomLocation {
15 state: { roomData: RoomData } 15 state: { roomData: RoomData }
16 } 16 }
17 17
18 -export const Room: React.FC = () => { 18 +const Room: React.FC = () => {
19 const history = useHistory(); 19 const history = useHistory();
20 const socket = useContext(SocketContext); 20 const socket = useContext(SocketContext);
21 const location: RoomLocation = useLocation(); 21 const location: RoomLocation = useLocation();
...@@ -124,3 +124,5 @@ export const Room: React.FC = () => { ...@@ -124,3 +124,5 @@ export const Room: React.FC = () => {
124 </Main> 124 </Main>
125 ); 125 );
126 } 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
......