Merge branch 'feature/polish' into develop

@@ -5,6 +5,10 @@
     <a href="http://khuhub.khu.ac.kr/2020105578/nodejs-game/commits/develop"><img alt="build status" src="http://khuhub.khu.ac.kr/2020105578/nodejs-game/badges/develop/build.svg" /></a>
     <a href="http://khuhub.khu.ac.kr/2020105578/nodejs-game/commits/develop"><img alt="build status" src="http://khuhub.khu.ac.kr/2020105578/nodejs-game/badges/develop/build.svg" /></a>
     <a href="http://khuhub.khu.ac.kr/2020105578/nodejs-game/commits/develop"><img alt="coverage report" src="http://khuhub.khu.ac.kr/2020105578/nodejs-game/badges/develop/coverage.svg" /></a>
     <a href="http://khuhub.khu.ac.kr/2020105578/nodejs-game/commits/develop"><img alt="coverage report" src="http://khuhub.khu.ac.kr/2020105578/nodejs-game/badges/develop/coverage.svg" /></a>
 </p>
 </p>
+![logo](./web/public/logo.png)
+
+
+
 Typescript로 작성된 오픈소스 그림퀴즈 웹 어플리케이션입니다.
 Typescript로 작성된 오픈소스 그림퀴즈 웹 어플리케이션입니다.
 
 
 캐치마인드와 skribbl.io로 대표되는 인기 게임 장르이나,
 캐치마인드와 skribbl.io로 대표되는 인기 게임 장르이나,

@@ -29,7 +29,7 @@ const Login: React.FC = () => {
     return (
     return (
       <Main>
       <Main>
         <div className="mt-auto flex flex-col items-center">
         <div className="mt-auto flex flex-col items-center">
-          <img className="m-7" src="./logo192.png" alt='logo img' />
+          <img className="m-7" src="./logo.png" alt='logo img' />
           <div>
           <div>
             <input type="text"
             <input type="text"
                 placeholder="Username"
                 placeholder="Username"

@@ -28,7 +28,12 @@ const Rooms: React.FC = () => {
     });
     });
   }, []);
   }, []);
 
 
-  useEffect(refreshRooms, []);
+  useEffect(() => {
+    // 뒤로가기 키로 빠져나오면 ping listener를 unsubscribe
+    socket.off('ping');
+
+    refreshRooms();
+  }, []);
 
 
   return (
   return (
     <Main>
     <Main>
@@ -37,7 +42,11 @@ const Rooms: React.FC = () => {
         <Create />
         <Create />
       </div>
       </div>
       <div className='mt-auto w-screen flex flex-col items-center'>
       <div className='mt-auto w-screen flex flex-col items-center'>
-        {rooms.map((room) => (<RoomBlock key={room.uuid} room={room} />))}
+        {
+          rooms.length > 0 ?
+          rooms.map((room) => (<RoomBlock key={room.uuid} room={room} />))
+          : (<div className='text-lg'>There's no room at all.</div>)
+        }
       </div>
       </div>
     </Main>
     </Main>
   )
   )