react-springboot : 책 삭제하기

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

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { Button } from 'react-bootstrap';
 
 const Detail = (props) => {
   const id = props.match.params.id;
@@ -15,11 +16,25 @@ const Detail = (props) => {
       .then((res) => {
         setBook(res);
       });
-  }, []);
+  }, [id]);
+
+  const deleteBook = () => {
+    fetch('http://localhost:8080/book/' + id, {
+      method: 'delete',
+    })
+      .then((res) => res.text())
+      .then((res) => {
+        res === 'ok' ? props.history.push('/') : alert('삭제실패');
+      });
+  };
 
   return (
     <div>
       <h1>책 상세보기</h1>
+      <Button variant="warning">수정</Button>{' '}
+      <Button variant="danger" onClick={deleteBook}>
+        삭제
+      </Button>
       <hr />
       <h3>{book.author}</h3>
       <h1>{book.title}</h1>