Implement login

@@ -4,6 +4,8 @@
   "description": "Dropbox alternative cloud file service",
   "description": "Dropbox alternative cloud file service",
   "private": true,
   "private": true,
   "dependencies": {
   "dependencies": {
+    "@ant-design/icons": "^4.2.1",
+    "antd": "^4.3.3",
     "classnames": "^2.2.6",
     "classnames": "^2.2.6",
     "ky": "^0.20.0",
     "ky": "^0.20.0",
     "miragejs": "^0.1.40",
     "miragejs": "^0.1.40",

-import React from "react";
+import React, { Fragment } from "react";
+import { Switch, Route, Redirect } from "react-router-dom";
+
+import { Login } from "auth/Login";
+import { useAuth } from "auth/useAuth";
 
 
 export function App() {
 export function App() {
-  return <div>Hello World!</div>;
+  const { token, login } = useAuth();
+  return (
+    <Fragment>
+      <Switch>
+        <Route path="/login">
+          <Login login={login} />
+        </Route>
+      </Switch>
+      {token === null && <Redirect to="/login" />}
+    </Fragment>
+  );
 }
 }

+.layout {
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+}
+
+.content {
+  width: 640px;
+  flex-grow: 0;
+  background: #fff;
+  padding: 80px 50px 50px;
+}
+
+#components-form-demo-normal-login .login-form-forgot {
+  float: right;
+}
+
+#components-form-demo-normal-login .ant-col-rtl .login-form-forgot {
+  float: left;
+}
+
+#components-form-demo-normal-login .login-form-button {
+  width: 100%;
+}

+import React, { useCallback, useState } from "react";
+import { Form, Input, Button, Checkbox, Layout } from "antd";
+import { UserOutlined, LockOutlined } from "@ant-design/icons";
+import { useHistory } from "react-router-dom";
+
+import styles from "./Login.module.scss";
+
+export type LoginProps = {
+  login: (
+    username: string,
+    password: string,
+    remember: boolean
+  ) => Promise<void>;
+};
+
+export function Login({ login }: LoginProps) {
+  const [error, setError] = useState<boolean>(false);
+  const history = useHistory();
+
+  const handleLogin = useCallback(
+    async ({ username, password, remember }) => {
+      setError(false);
+      try {
+        await login(username, password, remember);
+        history.push("/");
+      } catch {
+        setError(true);
+      }
+    },
+    [login, history]
+  );
+
+  return (
+    <Layout className={styles.layout}>
+      <Layout.Content className={styles.content}>
+        <Form
+          name="login"
+          initialValues={{ remember: true }}
+          onFinish={handleLogin}
+        >
+          <Form.Item
+            name="username"
+            rules={[{ required: true, message: "아이디를 입력하세요" }]}
+            {...(error && {
+              validateStatus: "error",
+            })}
+          >
+            <Input prefix={<UserOutlined />} placeholder="아이디" />
+          </Form.Item>
+          <Form.Item
+            name="password"
+            rules={[{ required: true, message: "Please input your Password!" }]}
+            {...(error && {
+              validateStatus: "error",
+              help: "로그인에 실패했습니다",
+            })}
+          >
+            <Input
+              prefix={<LockOutlined />}
+              type="password"
+              placeholder="비밀번호"
+            />
+          </Form.Item>
+          <Form.Item>
+            <Form.Item name="remember" valuePropName="checked" noStyle>
+              <Checkbox>자동 로그인</Checkbox>
+            </Form.Item>
+          </Form.Item>
+
+          <Form.Item>
+            <Button type="primary" htmlType="submit">
+              로그인
+            </Button>
+          </Form.Item>
+        </Form>
+      </Layout.Content>
+    </Layout>
+  );
+}

+import { useState, useCallback } from "react";
+import ky from "ky";
+
+interface LoginResponse {
+  status: number;
+  data: {
+    access_token: string;
+    refresh_token: string;
+    expiration: string;
+  };
+}
+
+interface Token {
+  accessToken: string;
+  refreshToken: string;
+  expiration: Date;
+}
+
+export function useAuth() {
+  const [token, setToken] = useState<Token | null>(() => {
+    const item = localStorage.getItem("token");
+    if (item) {
+      const token = JSON.parse(item);
+      token.expiration = new Date(token.expiration);
+      return token;
+    }
+    return null;
+  });
+
+  const login = useCallback(
+    async (username: string, password: string, remember: boolean) => {
+      const response = await ky
+        .post("/users/login", {
+          json: {
+            user_id: username,
+            password: password,
+          },
+        })
+        .json<LoginResponse>();
+
+      const token = {
+        accessToken: response.data.access_token,
+        refreshToken: response.data.refresh_token,
+        expiration: new Date(response.data.expiration),
+      };
+
+      setToken(token);
+
+      if (remember) {
+        localStorage.setItem("token", JSON.stringify(token));
+      }
+    },
+    []
+  );
+
+  return { token, login };
+}

-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+#root {
+  height: 100%;
 }
 }

 import React from "react";
 import React from "react";
 import ReactDOM from "react-dom";
 import ReactDOM from "react-dom";
+import { BrowserRouter } from "react-router-dom";
 
 
+import "antd/dist/antd.css";
 import "./index.css";
 import "./index.css";
 
 
 import { App } from "./App";
 import { App } from "./App";
@@ -10,9 +12,9 @@ import * as serviceWorker from "./serviceWorker";
 import "./server";
 import "./server";
 
 
 ReactDOM.render(
 ReactDOM.render(
-  <React.StrictMode>
+  <BrowserRouter>
     <App />
     <App />
-  </React.StrictMode>,
+  </BrowserRouter>,
   document.getElementById("root")
   document.getElementById("root")
 );
 );
 
 

@@ -46,8 +46,6 @@ createServer({
   factories: {},
   factories: {},
 
 
   routes() {
   routes() {
-    this.namespace = "api";
-
     this.get("/items/:item_id/children", (schema, request) => {
     this.get("/items/:item_id/children", (schema, request) => {
       const directory = schema.find("item", request.params.item_id);
       const directory = schema.find("item", request.params.item_id);
       if (!directory || !directory.is_folder) {
       if (!directory || !directory.is_folder) {