react-springboot : 책 등록하기

react-springboot/book/book-backend/src/main/java/com/example/book/web/BookController.java

@@ -19,6 +19,7 @@ public class BookController {
         return new ResponseEntity<>(bookService.모두가져오기(), HttpStatus.OK);
     }
 
+    @CrossOrigin
     @PostMapping ("/book")
     public ResponseEntity<?> save(@RequestBody Book book) {
         return new ResponseEntity<>(bookService.저장하기(book), HttpStatus.CREATED);

react-springboot/book/book-frontend/src/pages/book/SaveForm.js

@@ -1,9 +1,68 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { Button, Form } from 'react-bootstrap';
+
+const SaveForm = (props) => {
+  const [book, setBook] = useState({
+    title: '',
+    author: '',
+  });
+
+  const changeValue = (e) => {
+    setBook({
+      ...book,
+      [e.target.name]: e.target.value,
+    });
+  };
+
+  const submitBook = (e) => {
+    e.preventDefault();
+    fetch('http://localhost:8080/book', {
+      method: 'post',
+      headers: {
+        'Content-Type': 'application/json; charset=utf-8',
+      },
+      body: JSON.stringify(book),
+    })
+      .then((res) => {
+        return res.status === 201 ? res.json() : null;
+      })
+      .then((res) => {
+        res !== null ? props.history.push('/') : alert('책 등록 실패');
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  };
 
-const SaveForm = () => {
   return (
     <div>
-      <h1>책 등록하기</h1>
+      <Form onSubmit={submitBook}>
+        <Form.Group controlId="formBasicEmail">
+          <Form.Label>Title</Form.Label>
+          <Form.Control
+            type="text"
+            placeholder="Enter title"
+            onChange={changeValue}
+            name="title"
+          />
+          <Form.Text className="text-muted"></Form.Text>
+        </Form.Group>
+
+        <Form.Group controlId="formBasicEmail">
+          <Form.Label>Author</Form.Label>
+          <Form.Control
+            type="text"
+            placeholder="Enter author"
+            onChange={changeValue}
+            name="author"
+          />
+          <Form.Text className="text-muted"></Form.Text>
+        </Form.Group>
+
+        <Button variant="primary" type="submit">
+          Submit
+        </Button>
+      </Form>
     </div>
   );
 };