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 (
20 - <div> 21 + <div className="flex flex-col items-center w-screen h-screen">
21 - <header>Header</header> 22 + <div className="mt-auto flex flex-col items-center">
22 - <div className="flex items-center"> 23 + <img className="m-7" src="./logo192.png"/>
23 - <input type="text" 24 + <div>
24 - placeholder="Username" 25 + <input type="text"
25 - className="px-3 py-2 bg-white 26 + placeholder="Username"
26 - placeholder-gray-300 text-gray-700 text-sm 27 + className="px-3 py-2 bg-white
27 - rounded shadow outline-none focus:outline-none" 28 + placeholder-gray-400 text-gray-700 text-sm
28 - value={username} 29 + rounded shadow outline-none focus:outline-none"
29 - onChange={e => setUsername(e.target.value)} 30 + value={username}
30 - /> 31 + onChange={e => setUsername(e.target.value)}
31 - <button className="bg-green-500 active:bg-green-600 32 + />
32 - text-white font-bold uppercase text-sm 33 + <button className="bg-green-500 active:bg-green-600
33 - px-5 py-2 ml-3 rounded shadow hover:shadow-lg 34 + text-white font-bold uppercase text-sm
34 - outline-none focus:outline-none 35 + px-5 py-2 ml-3 rounded shadow
35 - ease-linear transition-all duration-150" 36 + outline-none focus:outline-none hover:shadow-md
36 - type="button" 37 + ease-linear transition-all duration-100"
37 - onClick={() => login()}>Login</button> 38 + type="button"
39 + onClick={() => login()}>Login</button>
40 + </div>
38 </div> 41 </div>
39 - <footer>Footer</footer> 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 }
......