로그인 컴포넌트 css 수정

 import React, { useContext, useState } from 'react';
 import { RouteComponentProps } from 'react-router';
+import { Footer } from './Footer';
 import SocketContext from './SocketContext';
 
 export const Login: React.FC<RouteComponentProps> = ({ history }) => {
@@ -7,7 +8,7 @@ export const Login: React.FC<RouteComponentProps> = ({ history }) => {
     const [ username, setUsername ] = useState("");
 
     const login = () => {
-      socket.emit('LoginMessage', username, ({ ok } : { ok: boolean }) => {
+      socket.emit('login', username, ({ ok } : { ok: boolean }) => {
         if (ok) {
           history.push('/rooms');
         } else {
@@ -17,26 +18,28 @@ export const Login: React.FC<RouteComponentProps> = ({ history }) => {
     }
 
     return (
-      <div>
-        <header>Header</header>
-        <div className="flex items-center">
-          <input type="text"
-              placeholder="Username"
-              className="px-3 py-2 bg-white
-                  placeholder-gray-300 text-gray-700 text-sm
-                  rounded shadow outline-none focus:outline-none"
-              value={username}
-              onChange={e => setUsername(e.target.value)}
-          />
-          <button className="bg-green-500 active:bg-green-600
-                          text-white font-bold uppercase text-sm
-                          px-5 py-2 ml-3 rounded shadow hover:shadow-lg
-                          outline-none focus:outline-none
-                          ease-linear transition-all duration-150"
-                  type="button"
-                  onClick={() => login()}>Login</button>
+      <div className="flex flex-col items-center w-screen h-screen">
+        <div className="mt-auto flex flex-col items-center">
+          <img className="m-7" src="./logo192.png"/>
+          <div>
+            <input type="text"
+                placeholder="Username"
+                className="px-3 py-2 bg-white
+                    placeholder-gray-400 text-gray-700 text-sm
+                    rounded shadow outline-none focus:outline-none"
+                value={username}
+                onChange={e => setUsername(e.target.value)}
+            />
+            <button className="bg-green-500 active:bg-green-600
+                            text-white font-bold uppercase text-sm
+                            px-5 py-2 ml-3 rounded shadow
+                            outline-none focus:outline-none hover:shadow-md
+                            ease-linear transition-all duration-100"
+                    type="button"
+                    onClick={() => login()}>Login</button>
+          </div>
         </div>
-        <footer>Footer</footer>
+        <Footer/>
       </div>
     )
 }

@@ -5,7 +5,9 @@ module.exports = {
     extend: {},
   },
   variants: {
-    extend: {},
+    extend: {
+      backgroundColor: ['active'],
+    },
   },
   plugins: [],
 }