Implement signup

@@ -2,6 +2,7 @@ import React from "react";
 import { Switch, Route, Redirect } from "react-router-dom";
 import { Switch, Route, Redirect } from "react-router-dom";
 
 
 import { Login } from "auth/Login";
 import { Login } from "auth/Login";
+import { Signup } from "auth/Signup";
 import { useAuth, TokenContext } from "auth/useAuth";
 import { useAuth, TokenContext } from "auth/useAuth";
 
 
 import { Page } from "layout/Page";
 import { Page } from "layout/Page";
@@ -16,6 +17,9 @@ export function App() {
       <Route path="/login">
       <Route path="/login">
         <Login login={token.login} />
         <Login login={token.login} />
       </Route>
       </Route>
+      <Route path="/signup">
+        <Signup />
+      </Route>
       <Route>
       <Route>
         {token.token !== null ? (
         {token.token !== null ? (
           <TokenContext.Provider value={token}>
           <TokenContext.Provider value={token}>

 import React, { useCallback, useState } from "react";
 import React, { useCallback, useState } from "react";
 import { Form, Input, Button, Checkbox, Layout } from "antd";
 import { Form, Input, Button, Checkbox, Layout } from "antd";
 import { UserOutlined, LockOutlined } from "@ant-design/icons";
 import { UserOutlined, LockOutlined } from "@ant-design/icons";
-import { useHistory } from "react-router-dom";
+import { useHistory, Link } from "react-router-dom";
 
 
 import styles from "./Login.module.scss";
 import styles from "./Login.module.scss";
 
 
@@ -49,7 +49,7 @@ export function Login({ login }: LoginProps) {
           </Form.Item>
           </Form.Item>
           <Form.Item
           <Form.Item
             name="password"
             name="password"
-            rules={[{ required: true, message: "Please input your Password!" }]}
+            rules={[{ required: true, message: "비밀번호를 입력하세요" }]}
             {...(error && {
             {...(error && {
               validateStatus: "error",
               validateStatus: "error",
               help: "로그인에 실패했습니다",
               help: "로그인에 실패했습니다",
@@ -71,6 +71,9 @@ export function Login({ login }: LoginProps) {
             <Button type="primary" htmlType="submit">
             <Button type="primary" htmlType="submit">
               로그인
               로그인
             </Button>
             </Button>
+            <Link to="/signup" style={{ marginLeft: 24 }}>
+              회원가입
+            </Link>
           </Form.Item>
           </Form.Item>
         </Form>
         </Form>
       </Layout.Content>
       </Layout.Content>

+import React, { useCallback, useState } from "react";
+import { Form, Input, Button, Layout, message } from "antd";
+import { UserOutlined, LockOutlined, TagOutlined } from "@ant-design/icons";
+import { useHistory } from "react-router-dom";
+
+import styles from "./Login.module.scss";
+import ky from "ky";
+
+export function Signup() {
+  const [error, setError] = useState<boolean>(false);
+  const [check, setCheck] = useState<boolean>(false);
+  const history = useHistory();
+
+  const handleSignup = useCallback(
+    async ({ user_id, password, password_check, name }) => {
+      if (password !== password_check) {
+        return setCheck(true);
+      } else {
+        setCheck(false);
+      }
+
+      setError(false);
+      try {
+        const body = new URLSearchParams();
+        body.set("user_id", user_id);
+        body.set("password", password);
+        body.set("name", name);
+
+        await ky.post("/users/signup/", { body });
+
+        message.success("회원가입이 완료되었습니다");
+        history.push("/login");
+      } catch {
+        setError(true);
+      }
+    },
+    [history]
+  );
+
+  return (
+    <Layout className={styles.layout}>
+      <Layout.Content className={styles.content}>
+        <Form name="signup" onFinish={handleSignup}>
+          <Form.Item
+            name="user_id"
+            rules={[{ required: true, message: "아이디를 입력하세요" }]}
+            {...(error && {
+              validateStatus: "error",
+            })}
+          >
+            <Input prefix={<UserOutlined />} placeholder="아이디" />
+          </Form.Item>
+          <Form.Item
+            name="password"
+            rules={[{ required: true, message: "비밀번호를 입력하세요" }]}
+            {...(error && {
+              validateStatus: "error",
+              help: "로그인에 실패했습니다",
+            })}
+          >
+            <Input
+              prefix={<LockOutlined />}
+              type="password"
+              placeholder="비밀번호"
+            />
+          </Form.Item>
+          <Form.Item
+            name="password_check"
+            rules={[
+              { required: true, message: "비밀번호를 한번 더 입력하세요" },
+            ]}
+            {...(error && {
+              validateStatus: "error",
+              help: "로그인에 실패했습니다",
+            })}
+            {...(check && {
+              validateStatus: "error",
+              help: "비밀번호가 일치하지 않습니다",
+            })}
+          >
+            <Input
+              prefix={<LockOutlined />}
+              type="password"
+              placeholder="비밀번호 확인"
+            />
+          </Form.Item>
+          <Form.Item
+            name="name"
+            rules={[{ required: true, message: "이름을 입력하세요" }]}
+            {...(error && {
+              validateStatus: "error",
+            })}
+          >
+            <Input prefix={<TagOutlined />} placeholder="이름" />
+          </Form.Item>
+
+          <Form.Item>
+            <Button type="primary" htmlType="submit">
+              회원 가입
+            </Button>
+          </Form.Item>
+        </Form>
+      </Layout.Content>
+    </Layout>
+  );
+}

@@ -178,6 +178,9 @@ export function FileList() {
         })}
         })}
         dataSource={list}
         dataSource={list}
         pagination={false}
         pagination={false}
+        locale={{
+          emptyText: "파일이 없습니다",
+        }}
       />
       />
     </div>
     </div>
   );
   );