Overnap

(WIP) 로그인 컴포넌트 구현

1 +import React, { useContext, useState } from 'react';
2 +import { RouteComponentProps } from 'react-router';
3 +import SocketContext from './SocketContext';
4 +
5 +export const Login: React.FC<RouteComponentProps> = ({ history }) => {
6 + const socket = useContext(SocketContext);
7 + const [ username, setUsername ] = useState("");
8 +
9 + const login = () => {
10 + socket.emit('LoginMessage', username, ({ ok } : { ok: boolean }) => {
11 + if (ok) {
12 + history.push('/rooms');
13 + } else {
14 + console.error('login error!'); // TODO: 팝업 에러?
15 + }
16 + });
17 + }
18 +
19 + return (
20 + <div>
21 + <header>Header</header>
22 + <div className="flex items-center">
23 + <input type="text"
24 + placeholder="Username"
25 + className="px-3 py-2 bg-white
26 + placeholder-gray-300 text-gray-700 text-sm
27 + rounded shadow outline-none focus:outline-none"
28 + value={username}
29 + onChange={e => setUsername(e.target.value)}
30 + />
31 + <button className="bg-green-500 active:bg-green-600
32 + text-white font-bold uppercase text-sm
33 + px-5 py-2 ml-3 rounded shadow hover:shadow-lg
34 + outline-none focus:outline-none
35 + ease-linear transition-all duration-150"
36 + type="button"
37 + onClick={() => login()}>Login</button>
38 + </div>
39 + <footer>Footer</footer>
40 + </div>
41 + )
42 +}