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;
-    setValues({ ...values, [name]: value });
+    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,48 +46,58 @@ function Signup() {
   };
 
   return (
-    <div>
-      <Form>
-        <Form.Group>
-          <Form.Label>Name</Form.Label>
-          <Form.Control
-            type="text"
-            placeholder="Name"
-            onChange={handleChange('name')}
-          />
-        </Form.Group>
-        <Form.Group>
-          <Form.Label>Password</Form.Label>
-          <Form.Control
-            type="password"
-            placeholder="Password"
-            onChange={handleChange('password')}
-          />
-        </Form.Group>
-        <Form.Group>
-          <Form.Label>Email</Form.Label>
-          <Form.Control
-            type="email"
-            placeholder="Email"
-            onChange={handleChange('email')}
-          />
-        </Form.Group>
-        <Button 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.Footer>
-          <Link to='/signin'>
-            <Button>Sign in</Button>
-          </Link>
-        </Modal.Footer>
-      </Modal>
-    </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")}
+              />
+            </Form.Group>
+            <Form.Group>
+              <Form.Label>Password</Form.Label>
+              <Form.Control
+                type="password"
+                placeholder="Password"
+                onChange={handleChange("password")}
+              />
+            </Form.Group>
+            <Form.Group>
+              <Form.Label>Email</Form.Label>
+              <Form.Control
+                type="email"
+                placeholder="Email"
+                onChange={handleChange("email")}
+              />
+            </Form.Group>
+            <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.Footer>
+              <Link to="/signin">
+                <Button>Sign in</Button>
+              </Link>
+            </Modal.Footer>
+          </Modal>
+        </Col>
+      </Row>
+    </Container>
   );
 }