Overnap

로그인 컴포넌트 css 수정

1 import React, { useContext, useState } from 'react'; 1 import React, { useContext, useState } from 'react';
2 import { RouteComponentProps } from 'react-router'; 2 import { RouteComponentProps } from 'react-router';
3 +import { Footer } from './Footer';
3 import SocketContext from './SocketContext'; 4 import SocketContext from './SocketContext';
4 5
5 export const Login: React.FC<RouteComponentProps> = ({ history }) => { 6 export const Login: React.FC<RouteComponentProps> = ({ history }) => {
...@@ -7,7 +8,7 @@ export const Login: React.FC<RouteComponentProps> = ({ history }) => { ...@@ -7,7 +8,7 @@ export const Login: React.FC<RouteComponentProps> = ({ history }) => {
7 const [ username, setUsername ] = useState(""); 8 const [ username, setUsername ] = useState("");
8 9
9 const login = () => { 10 const login = () => {
10 - socket.emit('LoginMessage', username, ({ ok } : { ok: boolean }) => { 11 + socket.emit('login', username, ({ ok } : { ok: boolean }) => {
11 if (ok) { 12 if (ok) {
12 history.push('/rooms'); 13 history.push('/rooms');
13 } else { 14 } else {
...@@ -17,26 +18,28 @@ export const Login: React.FC<RouteComponentProps> = ({ history }) => { ...@@ -17,26 +18,28 @@ export const Login: React.FC<RouteComponentProps> = ({ history }) => {
17 } 18 }
18 19
19 return ( 20 return (
21 + <div className="flex flex-col items-center w-screen h-screen">
22 + <div className="mt-auto flex flex-col items-center">
23 + <img className="m-7" src="./logo192.png"/>
20 <div> 24 <div>
21 - <header>Header</header>
22 - <div className="flex items-center">
23 <input type="text" 25 <input type="text"
24 placeholder="Username" 26 placeholder="Username"
25 className="px-3 py-2 bg-white 27 className="px-3 py-2 bg-white
26 - placeholder-gray-300 text-gray-700 text-sm 28 + placeholder-gray-400 text-gray-700 text-sm
27 rounded shadow outline-none focus:outline-none" 29 rounded shadow outline-none focus:outline-none"
28 value={username} 30 value={username}
29 onChange={e => setUsername(e.target.value)} 31 onChange={e => setUsername(e.target.value)}
30 /> 32 />
31 <button className="bg-green-500 active:bg-green-600 33 <button className="bg-green-500 active:bg-green-600
32 text-white font-bold uppercase text-sm 34 text-white font-bold uppercase text-sm
33 - px-5 py-2 ml-3 rounded shadow hover:shadow-lg 35 + px-5 py-2 ml-3 rounded shadow
34 - outline-none focus:outline-none 36 + outline-none focus:outline-none hover:shadow-md
35 - ease-linear transition-all duration-150" 37 + ease-linear transition-all duration-100"
36 type="button" 38 type="button"
37 onClick={() => login()}>Login</button> 39 onClick={() => login()}>Login</button>
38 </div> 40 </div>
39 - <footer>Footer</footer> 41 + </div>
42 + <Footer/>
40 </div> 43 </div>
41 ) 44 )
42 } 45 }
......
...@@ -5,7 +5,9 @@ module.exports = { ...@@ -5,7 +5,9 @@ module.exports = {
5 extend: {}, 5 extend: {},
6 }, 6 },
7 variants: { 7 variants: {
8 - extend: {}, 8 + extend: {
9 + backgroundColor: ['active'],
10 + },
9 }, 11 },
10 plugins: [], 12 plugins: [],
11 } 13 }
......