export default로 일괄 변경

 import React from 'react';
 import React from 'react';
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 import { socket, SocketProvider } from './contexts/SocketContext';
 import { socket, SocketProvider } from './contexts/SocketContext';
-import { Login } from './pages/Login';
-import { Room } from './pages/Room';
-import { Rooms } from './pages/Rooms';
+import Login from './pages/Login';
+import Room from './pages/Room';
+import Rooms from './pages/Rooms';
 
 
 const App: React.FC = () => {
 const App: React.FC = () => {
   return (
   return (

 import React from 'react';
 import React from 'react';
 
 
-export const Footer: React.FC = () => {
+const Footer: React.FC = () => {
   return (
   return (
     <div className="mt-auto flex justify-center items-center">
     <div className="mt-auto flex justify-center items-center">
       <a href="http://khuhub.khu.ac.kr/2020105578/nodejs-game">
       <a href="http://khuhub.khu.ac.kr/2020105578/nodejs-game">
@@ -19,3 +19,5 @@ export const Footer: React.FC = () => {
     </div>
     </div>
   );
   );
 }
 }
+
+export default Footer;
\ No newline at end of file

 import React from 'react';
 import React from 'react';
-import { Footer } from './Footer';
+import Footer from './Footer';
 
 
-export const Main: React.FC = ({ children }) => {
+const Main: React.FC = ({ children }) => {
   return (
   return (
     <div className="flex flex-col items-center w-screen h-screen">
     <div className="flex flex-col items-center w-screen h-screen">
       {children}
       {children}
@@ -9,3 +9,5 @@ export const Main: React.FC = ({ children }) => {
     </div>
     </div>
   );
   );
 }
 }
+
+export default Main;
\ No newline at end of file

@@ -9,7 +9,7 @@ interface CanvasProps {
   isDrawer: boolean;
   isDrawer: boolean;
 }
 }
 
 
-export const Canvas: React.FC<CanvasProps> = ({ isDrawer }) => {
+const Canvas: React.FC<CanvasProps> = ({ isDrawer }) => {
   const socket = useContext(SocketContext);
   const socket = useContext(SocketContext);
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const canvasRef = useRef<HTMLCanvasElement>(null);
   
   
@@ -186,3 +186,5 @@ export const Canvas: React.FC<CanvasProps> = ({ isDrawer }) => {
     </div>
     </div>
   );
   );
 }
 }
+
+export default Canvas;
\ No newline at end of file

 import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import SocketContext from '../../contexts/SocketContext';
 import SocketContext from '../../contexts/SocketContext';
 import { MessageType, RawMessage } from '../common/types';
 import { MessageType, RawMessage } from '../common/types';
-import { ChatLine } from './ChatLine';
+import ChatLine from './ChatLine';
 import { ChatData } from './types';
 import { ChatData } from './types';
 
 
 interface ChatProps {
 interface ChatProps {
@@ -9,7 +9,7 @@ interface ChatProps {
   h: string;
   h: string;
 }
 }
 
 
-export const Chat: React.FC<ChatProps> = (props) => {
+const Chat: React.FC<ChatProps> = (props) => {
   const socket = useContext(SocketContext);
   const socket = useContext(SocketContext);
   const [ input, setInput ] = useState('');
   const [ input, setInput ] = useState('');
   const [ chatLines, setChatLines ] = useState<ChatData[]>([]);
   const [ chatLines, setChatLines ] = useState<ChatData[]>([]);
@@ -87,3 +87,5 @@ export const Chat: React.FC<ChatProps> = (props) => {
     </div>
     </div>
   );
   );
 }
 }
+
+export default Chat;
\ No newline at end of file

@@ -5,9 +5,11 @@ interface ChatLineProps {
   chatData: ChatData;
   chatData: ChatData;
 }
 }
 
 
-export const ChatLine: React.FC<ChatLineProps> = ({ chatData }) => {
+const ChatLine: React.FC<ChatLineProps> = ({ chatData }) => {
   return (
   return (
     <div className='w-full px-3 py-1.5 bg-white
     <div className='w-full px-3 py-1.5 bg-white
     text-gray-700 text-sm'>{chatData.sender} : {chatData.message}</div>
     text-gray-700 text-sm'>{chatData.sender} : {chatData.message}</div>
   );
   );
 }
 }
+
+export default ChatLine;
\ No newline at end of file

@@ -2,10 +2,10 @@ import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { useLocation } from 'react-router';
 import { useLocation } from 'react-router';
 import SocketContext from '../../contexts/SocketContext';
 import SocketContext from '../../contexts/SocketContext';
 import { MessageType, RawMessage } from '../common/types';
 import { MessageType, RawMessage } from '../common/types';
-import { Canvas } from './Canvas';
-import { RoundInfo } from './RoundInfo';
+import Canvas from './Canvas';
+import RoundInfo from './RoundInfo';
 import { RoundData } from './types';
 import { RoundData } from './types';
-import { Word } from './Word';
+import Word from './Word';
 
 
 interface GameBoardLocation {
 interface GameBoardLocation {
   state: { username: string }
   state: { username: string }
@@ -15,7 +15,7 @@ interface GameBoardProps {
   isInGame: boolean
   isInGame: boolean
 }
 }
 
 
-export const GameBoard: React.FC<GameBoardProps> = ({ isInGame }) => {
+const GameBoard: React.FC<GameBoardProps> = ({ isInGame }) => {
   const socket = useContext(SocketContext);
   const socket = useContext(SocketContext);
   const location: GameBoardLocation = useLocation();
   const location: GameBoardLocation = useLocation();
 
 
@@ -92,3 +92,5 @@ export const GameBoard: React.FC<GameBoardProps> = ({ isInGame }) => {
     </div>
     </div>
   );
   );
 }
 }
+
+export default GameBoard;
\ No newline at end of file

@@ -12,7 +12,7 @@ interface ReadyProps {
   users: User[];
   users: User[];
 }
 }
 
 
-export const Ready: React.FC<ReadyProps> = ({ users }) => {
+const Ready: React.FC<ReadyProps> = ({ users }) => {
   const socket = useContext(SocketContext);
   const socket = useContext(SocketContext);
   const location: ReadyLocation = useLocation();
   const location: ReadyLocation = useLocation();
   
   
@@ -58,3 +58,5 @@ export const Ready: React.FC<ReadyProps> = ({ users }) => {
                     onClick={() => handleReady()}>{isAdmin ? 'Start' : 'Ready'}</button>
                     onClick={() => handleReady()}>{isAdmin ? 'Start' : 'Ready'}</button>
   );
   );
 }
 }
+
+export default Ready;
\ No newline at end of file

@@ -5,7 +5,7 @@ interface RoomInfoProps {
   roomData: RoomData;
   roomData: RoomData;
 }
 }
 
 
-export const RoomInfo: React.FC<RoomInfoProps> = ({ roomData }) => {
+const RoomInfo: React.FC<RoomInfoProps> = ({ roomData }) => {
   return (
   return (
     <div className='m-3 my-8 w-5/6 flex items-center place-content-between'>
     <div className='m-3 my-8 w-5/6 flex items-center place-content-between'>
       <div>{roomData.name}</div>
       <div>{roomData.name}</div>
@@ -13,3 +13,5 @@ export const RoomInfo: React.FC<RoomInfoProps> = ({ roomData }) => {
     </div>
     </div>
   );
   );
 }
 }
+
+export default RoomInfo;
\ No newline at end of file

 import React from 'react';
 import React from 'react';
-import { Timer } from './Timer';
+import Timer from './Timer';
 
 
 interface RoundInfoProps {
 interface RoundInfoProps {
   round: number;
   round: number;
   wordChosen: string;
   wordChosen: string;
 }
 }
 
 
-export const RoundInfo: React.FC<RoundInfoProps> = ({ round, wordChosen }) => {
+const RoundInfo: React.FC<RoundInfoProps> = ({ round, wordChosen }) => {
   return (
   return (
     <div className='p-3 m-3 h-14 rounded shadow flex items-center place-content-between'>
     <div className='p-3 m-3 h-14 rounded shadow flex items-center place-content-between'>
       <Timer />
       <Timer />
@@ -15,3 +15,5 @@ export const RoundInfo: React.FC<RoundInfoProps> = ({ round, wordChosen }) => {
     </div>
     </div>
   );
   );
 }
 }
+
+export default RoundInfo;
\ No newline at end of file

@@ -7,7 +7,7 @@ interface timer {
   time: number;
   time: number;
 };
 };
 
 
-export const Timer: React.FC = () => {
+const Timer: React.FC = () => {
   const socket = useContext(SocketContext);
   const socket = useContext(SocketContext);
 
 
   const [ time, setTime ] = useState(0);
   const [ time, setTime ] = useState(0);
@@ -53,3 +53,5 @@ export const Timer: React.FC = () => {
     </div>
     </div>
   );
   );
 }
 }
+
+export default Timer;
\ No newline at end of file

 import React from 'react';
 import React from 'react';
 import { User } from './types';
 import { User } from './types';
-import { UserStatus } from './UserStatus';
+import UserStatus from './UserStatus';
 
 
 interface UserInfoProps {
 interface UserInfoProps {
   users: User[];
   users: User[];
 }
 }
 
 
-export const UserInfo: React.FC<UserInfoProps> = ({ users }) => {
+const UserInfo: React.FC<UserInfoProps> = ({ users }) => {
   return (
   return (
     <div className='w-7/12 h-60 flex justify-center'>
     <div className='w-7/12 h-60 flex justify-center'>
       {users.map((user) => (<UserStatus key={user.username} user={user} />))}
       {users.map((user) => (<UserStatus key={user.username} user={user} />))}
     </div>
     </div>
   );
   );
 }
 }
+
+export default UserInfo
\ No newline at end of file

@@ -7,7 +7,7 @@ interface UserRoleProps {
   isInGame: boolean;
   isInGame: boolean;
 }
 }
 
 
-export const UserRole: React.FC<UserRoleProps> = ({ isInGame }) => {
+const UserRole: React.FC<UserRoleProps> = ({ isInGame }) => {
   const socket = useContext(SocketContext);
   const socket = useContext(SocketContext);
   const [ roles, setRoles ] = useState<RoleData[]>([]);
   const [ roles, setRoles ] = useState<RoleData[]>([]);
 
 
@@ -39,3 +39,5 @@ export const UserRole: React.FC<UserRoleProps> = ({ isInGame }) => {
     </div>
     </div>
   );
   );
 }
 }
+
+export default UserRole;

@@ -5,7 +5,7 @@ interface UserStatusProps {
   user: User;
   user: User;
 }
 }
 
 
-export const UserStatus: React.FC<UserStatusProps> = ({ user }) => {
+const UserStatus: React.FC<UserStatusProps> = ({ user }) => {
   return (
   return (
     <div className='p-3 h-12 m-4 rounded-lg shadow'>
     <div className='p-3 h-12 m-4 rounded-lg shadow'>
       <div className={`${user.admin ? 'text-blue-500' :
       <div className={`${user.admin ? 'text-blue-500' :
@@ -16,3 +16,5 @@ export const UserStatus: React.FC<UserStatusProps> = ({ user }) => {
     </div>
     </div>
   )
   )
 }
 }
+
+export default UserStatus;
\ No newline at end of file

@@ -9,7 +9,7 @@ interface WordProps {
   setWords: (value: React.SetStateAction<string[]>) => void;
   setWords: (value: React.SetStateAction<string[]>) => void;
 }
 }
 
 
-export const Word: React.FC<WordProps> = (props) => {
+const Word: React.FC<WordProps> = (props) => {
   const socket = useContext(SocketContext);
   const socket = useContext(SocketContext);
 
 
   const handleChoose = useCallback(() => {
   const handleChoose = useCallback(() => {
@@ -35,3 +35,5 @@ export const Word: React.FC<WordProps> = (props) => {
                     onClick={() => handleChoose()}>{props.word}</button>
                     onClick={() => handleChoose()}>{props.word}</button>
   );
   );
 }
 }
+
+export default Word;
\ No newline at end of file

@@ -8,7 +8,7 @@ interface CreateLocation {
   state: { username: string }
   state: { username: string }
 }
 }
 
 
-export const Create: React.FC = () => {
+const Create: React.FC = () => {
   const history = useHistory();
   const history = useHistory();
   const socket = useContext(SocketContext);
   const socket = useContext(SocketContext);
   const [ roomName, setRoomName ] = useState('');
   const [ roomName, setRoomName ] = useState('');
@@ -54,3 +54,5 @@ export const Create: React.FC = () => {
     </div>
     </div>
   );
   );
 }
 }
+
+export default Create;
\ No newline at end of file

@@ -4,7 +4,7 @@ interface RefreshProps {
   refreshRooms: () => void
   refreshRooms: () => void
 }
 }
 
 
-export const Refresh: React.FC<RefreshProps> = ({ refreshRooms }) => {
+const Refresh: React.FC<RefreshProps> = ({ refreshRooms }) => {
   return (
   return (
     <button className="bg-green-500 active:bg-green-600
     <button className="bg-green-500 active:bg-green-600
                             text-white uppercase text-xl
                             text-white uppercase text-xl
@@ -15,3 +15,5 @@ export const Refresh: React.FC<RefreshProps> = ({ refreshRooms }) => {
                     onClick={() => refreshRooms()}>⟳</button>
                     onClick={() => refreshRooms()}>⟳</button>
   );
   );
 }
 }
+
+export default Refresh;
\ No newline at end of file

@@ -13,7 +13,7 @@ interface RoomBlockProps {
   room: Room
   room: Room
 }
 }
 
 
-export const RoomBlock: React.FC<RoomBlockProps> = ({ room }) => {
+const RoomBlock: React.FC<RoomBlockProps> = ({ room }) => {
   const history = useHistory();
   const history = useHistory();
   const socket = useContext(SocketContext);
   const socket = useContext(SocketContext);
   const location: RoomBlockLocation = useLocation();
   const location: RoomBlockLocation = useLocation();
@@ -57,3 +57,5 @@ export const RoomBlock: React.FC<RoomBlockProps> = ({ room }) => {
     </button>
     </button>
   );
   );
 }
 }
+
+export default RoomBlock;
\ No newline at end of file

 import React, { useCallback, useContext, useState } from 'react';
 import React, { useCallback, useContext, useState } from 'react';
 import { useHistory } from 'react-router';
 import { useHistory } from 'react-router';
-import { Main } from '../components/common/Main';
+import Main from '../components/common/Main';
 import { MessageResponse, MessageType, RawMessage } from '../components/common/types';
 import { MessageResponse, MessageType, RawMessage } from '../components/common/types';
 import SocketContext from '../contexts/SocketContext';
 import SocketContext from '../contexts/SocketContext';
 
 
-export const Login: React.FC = () => {
+const Login: React.FC = () => {
     const history = useHistory();
     const history = useHistory();
     const socket = useContext(SocketContext);
     const socket = useContext(SocketContext);
     const [ username, setUsername ] = useState("");
     const [ username, setUsername ] = useState("");
@@ -51,3 +51,5 @@ export const Login: React.FC = () => {
       </Main>
       </Main>
     )
     )
 }
 }
+
+export default Login;
\ No newline at end of file

 import React, { useCallback, useContext, useEffect, useState } from 'react';
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { useHistory, useLocation } from 'react-router';
 import { useHistory, useLocation } from 'react-router';
-import { Main } from '../components/common/Main';
+import Main from '../components/common/Main';
 import { MessageResponse, MessageType, RawMessage } from '../components/common/types';
 import { MessageResponse, MessageType, RawMessage } from '../components/common/types';
-import { Chat } from '../components/room/Chat';
-import { GameBoard } from '../components/room/GameBoard';
-import { Ready } from '../components/room/Ready';
-import { RoomInfo } from '../components/room/RoomInfo';
+import Chat from '../components/room/Chat';
+import GameBoard from '../components/room/GameBoard';
+import Ready from '../components/room/Ready';
+import RoomInfo from '../components/room/RoomInfo';
 import { RoomData, UpdateRoomUser } from '../components/room/types';
 import { RoomData, UpdateRoomUser } from '../components/room/types';
-import { UserInfo } from '../components/room/UserInfo';
-import { UserRole } from '../components/room/UserRole';
+import UserInfo from '../components/room/UserInfo';
+import UserRole from '../components/room/UserRole';
 import SocketContext from '../contexts/SocketContext';
 import SocketContext from '../contexts/SocketContext';
 
 
 interface RoomLocation {
 interface RoomLocation {
   state: { roomData: RoomData }
   state: { roomData: RoomData }
 }
 }
 
 
-export const Room: React.FC = () => {
+const Room: React.FC = () => {
   const history = useHistory();
   const history = useHistory();
   const socket = useContext(SocketContext);
   const socket = useContext(SocketContext);
   const location: RoomLocation = useLocation();
   const location: RoomLocation = useLocation();
@@ -124,3 +124,5 @@ export const Room: React.FC = () => {
     </Main>
     </Main>
   );
   );
 }
 }
+
+export default Room;
\ No newline at end of file

 import React, { useCallback, useContext, useEffect, useState } from 'react';
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { useHistory } from 'react-router';
 import { useHistory } from 'react-router';
-import { Main } from '../components/common/Main';
+import Main from '../components/common/Main';
 import { MessageResponse, MessageType, RawMessage } from '../components/common/types';
 import { MessageResponse, MessageType, RawMessage } from '../components/common/types';
-import { Create } from '../components/rooms/Create';
-import { Refresh } from '../components/rooms/Refrsh';
-import { RoomBlock } from '../components/rooms/RoomBlock';
+import Create from '../components/rooms/Create';
+import Refresh from '../components/rooms/Refrsh';
+import RoomBlock from '../components/rooms/RoomBlock';
 import { Room } from '../components/rooms/types';
 import { Room } from '../components/rooms/types';
 import SocketContext from '../contexts/SocketContext';
 import SocketContext from '../contexts/SocketContext';
 
 
-export const Rooms: React.FC = () => {
+const Rooms: React.FC = () => {
   const history = useHistory();
   const history = useHistory();
   const socket = useContext(SocketContext);
   const socket = useContext(SocketContext);
   const [ rooms, setRooms ] = useState<Room[]>([]);
   const [ rooms, setRooms ] = useState<Room[]>([]);
@@ -42,3 +42,5 @@ export const Rooms: React.FC = () => {
     </Main>
     </Main>
   )
   )
 }
 }
+
+export default Rooms;
\ No newline at end of file