로그인 컴포넌트 css 수정

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

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