signup form 변경

src/client/src/user/Signup.jsx

 import React, { useState } from "react";
 import Button from "react-bootstrap/Button";
+import Container from "react-bootstrap/Container";
+import Row from "react-bootstrap/Row";
+import Col from "react-bootstrap/Col";
 import Form from "react-bootstrap/Form";
-import Modal from 'react-bootstrap/Modal'
-import {Link} from 'react-router-dom'
+import Modal from "react-bootstrap/Modal";
+import { Link } from "react-router-dom";
 import { create } from "./api-user";
 
 function Signup() {
@@ -10,13 +13,18 @@ function Signup() {
     name: "",
     password: "",
     email: "",
+    instructor: false,
     open: false,
     error: "",
   });
 
   const handleChange = (name) => (event) => {
-    const { value } = event.target;
+    const { value, checked } = event.target;
+    if (name === "instructor") {
+      setValues({ ...values, instructor: checked });
+    } else {
       setValues({ ...values, [name]: value });
+    }
   };
 
   const handleSubmit = (event) => {
@@ -25,6 +33,7 @@ function Signup() {
       name: values.name || undefined,
       email: values.email || undefined,
       password: values.password || undefined,
+      instructor: values.instructor || undefined,
     };
     create(user).then((data) => {
       if (data.error) {
@@ -37,14 +46,16 @@ function Signup() {
   };
 
   return (
-    <div>
+    <Container fluid>
+      <Row className="justify-content-center">
+        <Col className="col-sm-6 col-md-7">
           <Form>
             <Form.Group>
               <Form.Label>Name</Form.Label>
               <Form.Control
                 type="text"
                 placeholder="Name"
-            onChange={handleChange('name')}
+                onChange={handleChange("name")}
               />
             </Form.Group>
             <Form.Group>
@@ -52,7 +63,7 @@ function Signup() {
               <Form.Control
                 type="password"
                 placeholder="Password"
-            onChange={handleChange('password')}
+                onChange={handleChange("password")}
               />
             </Form.Group>
             <Form.Group>
@@ -60,25 +71,33 @@ function Signup() {
               <Form.Control
                 type="email"
                 placeholder="Email"
-            onChange={handleChange('email')}
+                onChange={handleChange("email")}
               />
             </Form.Group>
-        <Button onClick={handleSubmit}>확인</Button>
+            <Form.Check
+              type="checkbox"
+              // checked={values.instructor}
+              label="Instructor"
+              onChange={handleChange("instructor")}
+            />
+            <Button className="my-3" onClick={handleSubmit}>
+              확인
+            </Button>
           </Form>
           <Modal show={values.open}>
             <Modal.Header>
               <Modal.Title>New Account</Modal.Title>
             </Modal.Header>
-        <Modal.Body>
-          New Account successfully created.
-        </Modal.Body>
+            <Modal.Body>New Account successfully created.</Modal.Body>
             <Modal.Footer>
-          <Link to='/signin'>
+              <Link to="/signin">
                 <Button>Sign in</Button>
               </Link>
             </Modal.Footer>
           </Modal>
-    </div>
+        </Col>
+      </Row>
+    </Container>
   );
 }