signup 시작

src/client/src/MainRouter.jsx

@@ -5,6 +5,7 @@ import Home from "./core/Home";
 import Menu from "./core/Menu";
 import NewQuiz from './quiz/NewQuiz'
 import Quiz from './quiz/Quiz'
+import Signup from "./user/Signup"
 
 function MainRouter() {
   return (
@@ -18,6 +19,9 @@ function MainRouter() {
         <Route path="/signin">
           <Signin />
         </Route>
+        <Route path="/signup">
+          <Signup />
+        </Route>
         <Route path='/quiz/new'>
           <NewQuiz />
         </Route>

src/client/src/core/Menu.jsx

-import React from "react";
-import Navbar from "react-bootstrap/Navbar";
-import Nav from "react-bootstrap/Nav";
-import NavDropdown from "react-bootstrap/NavDropdown";
-import Button from "react-bootstrap/Button";
-import auth from "../auth/auth-helpers";
-import { Link, useHistory } from "react-router-dom";
-import { useAuth } from "../auth/auth-context";
+import React from "react"
+import Navbar from "react-bootstrap/Navbar"
+import Nav from "react-bootstrap/Nav"
+import NavDropdown from "react-bootstrap/NavDropdown"
+import Button from "react-bootstrap/Button"
+import auth from "../auth/auth-helpers"
+import { Link, useHistory } from "react-router-dom"
+import { useAuth } from "../auth/auth-context"
 
 function Menu() {
-  const {authUser, setAuthUser} = useAuth()
-  const history = useHistory();
+  const { authUser, setAuthUser } = useAuth()
+  const history = useHistory()
 
   return (
     <Navbar sticky="top" bg="dark" variant="dark" expand="sm">
@@ -37,21 +37,26 @@ function Menu() {
           <Button
             onClick={() =>
               auth.clearJwt(() => {
-                history.push("/");
-                setAuthUser(false);
+                history.push("/")
+                setAuthUser(false)
               })
             }
           >
             Sign out
           </Button>
         ) : (
+            <>
               <Link to="/signin">
                 <Button>Sign in</Button>
               </Link>
+              <Link to="/signup">
+                <Button>Sign up</Button>
+              </Link>
+            </>
           )}
       </Navbar.Collapse>
     </Navbar>
-  );
+  )
 }
 
-export default Menu;
+export default Menu

src/client/src/user/Signup.jsx

+import React, { useState } from 'react'
+import Button from 'react-bootstrap/Button'
+import Form from 'react-bootstrap/Form'
+
+function Signup() {
+  const [values, setValues] = useState({
+    name: '',
+    password: '',
+    email: '',
+    open: false,
+    error: '',
+  })
+
+  return (
+    <div>
+      <Form>
+        <Form.Group>
+          <Form.Label>Name</Form.Label>
+          <Form.Control type='text' placeholder='Name' />
+        </Form.Group>
+        <Form.Group>
+          <Form.Label>Password</Form.Label>
+          <Form.Control type='password' placeholder='Password' />
+        </Form.Group>
+        <Form.Group>
+          <Form.Label>Email</Form.Label>
+          <Form.Control type='email' placeholder='Email' />
+        </Form.Group>
+        <Button>확인</Button>
+      </Form>
+    </div>
+  )
+}
+
+export default Signup

src/client/src/user/api-user.js

+const create = async (user) => {
+  try {
+    const response = await fetch('/api/users/', {
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(user)
+    })
+    return await response.json()
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+export {
+  create,
+}
\ No newline at end of file