react-springboot : 책 상세보기 페이지

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

@@ -9,17 +9,16 @@ import org.springframework.web.bind.annotation.*;
 
 @RestController
 @RequiredArgsConstructor
+@CrossOrigin
 public class BookController {
 
     private final BookService bookService;
 
-    @CrossOrigin
     @GetMapping("/book")
     public ResponseEntity<?> findAll() {
         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/components/BookItem.js

@@ -8,7 +8,7 @@ const BookItem = (props) => {
     <Card>
       <Card.Body>
         <Card.Title>{title}</Card.Title>
-        <Link to={'/post/' + id} className="btn btn-primary">
+        <Link to={'/book/' + id} className="btn btn-primary">
           상세보기
         </Link>
       </Card.Body>

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

@@ -1,12 +1,30 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+
+const Detail = (props) => {
+  const id = props.match.params.id;
+
+  const [book, setBook] = useState({
+    id: '',
+    title: '',
+    author: '',
+  });
+
+  useEffect(() => {
+    fetch('http://localhost:8080/book/' + id)
+      .then((res) => res.json())
+      .then((res) => {
+        setBook(res);
+      });
+  }, []);
 
-const Detail = () => {
   return (
     <div>
-      <h1>상세보기 페이지</h1>
+      <h1>책 상세보기</h1>
+      <hr />
+      <h3>{book.author}</h3>
+      <h1>{book.title}</h1>
     </div>
   );
 };
 
 export default Detail;
-<h1>상세보기 페이지</h1>;

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

@@ -68,4 +68,3 @@ const SaveForm = (props) => {
 };
 
 export default SaveForm;
-<h1>책 등록하기</h1>;