32.수정삭제하기

cosBook-backend/src/main/java/com/cos/demo/service/BookService.java

@@ -42,7 +42,7 @@ public Book updateBook(Long id, Book book) {
 		//영속화(book 오브젝트)-> 영속성 컨텍스트 보관
 		Book bookEntity=bookRepository.findById(id).orElseThrow(()->new IllegalArgumentException("id 를 확인해 주세요.!")); 
 
-		bookEntity.setTitle(book.getAuthor());
+		bookEntity.setTitle(book.getTitle());
 		bookEntity.setAuthor(book.getAuthor());
 		return bookEntity;
 	}//함수 종료 => 트랜잭션 종료 => 영속화 되어있는 데이터를 DB로 갱신(flush) => commit =======> 더티체킹

cosBook-backend/src/main/java/com/cos/demo/web/BookController.java

@@ -42,7 +42,7 @@ public ResponseEntity<?> findById(@PathVariable Long id){
 
 	@PutMapping("/book/{id}")
 	public ResponseEntity<?> update(@PathVariable Long id, @RequestBody Book book){
-		return new ResponseEntity<>(bookService.getBook(id), HttpStatus.OK);
+		return new ResponseEntity<>(bookService.updateBook(id, book), HttpStatus.OK);
 	}
 
 	@DeleteMapping("/book/{id}")

cosbook-frontend/src/pages/book/Detail.js

@@ -1,9 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
-import { Container } from "react-bootstrap";
+import { useParams, useNavigate } from 'react-router-dom';
+import { Button, Container } from "react-bootstrap";
 
 const Detail = () => {
     const { id } = useParams();
+    let navigate = useNavigate();
 
     const [book, setBook] = useState({
         title: '',
@@ -26,12 +27,37 @@ const Detail = () => {
 
     }, [])
 
+    const deleteBook = () => {
+
+        fetch("http://localhost:8080/book/" + id, {
+            method: "DELETE",
+        })
+            .then((res) => res.text())
+            .then((data) => {
+                console.log("data : ", data);
+                if (data === "ok") {
+                    navigate("/");
+                }
+            })
+            .catch(error => {
+                console.log("에러 ", error);
+            })
+    }
+
+    const updateBook = () => {
+        navigate("/updateForm/" + id);
+    }
+
+
     return (
         <Container>
             <h1>책 상세보기</h1>
+            <Button variant='warning' className='me-3' onClick={updateBook}>수정</Button>
+            {''}
+            <Button variant='danger' onClick={deleteBook}>삭제</Button>
             <hr />
-            <h3>{book.author}</h3>
-            <h1>{book.title}</h1>
+            <h3>저자 - {book.author}</h3>
+            <h1>제목 - {book.title}</h1>
         </Container>
     );
 };

cosbook-frontend/src/pages/book/UpdateForm.js

@@ -1,10 +1,81 @@
-import React from 'react';
+import { useEffect, useState } from 'react';
+import { Container, Form, Button } from "react-bootstrap";
+import { useNavigate, useParams } from 'react-router-dom';
+
+const UpdateForm = (props) => {
+    //const id=props.match.params.id;
+    const { id } = useParams();
+    let navigate = useNavigate();
+
+    const [book, setBook] = useState({
+        title: "",
+        author: ""
+    });
+
+    const changeValue = (e) => {
+        setBook({
+            ...book,
+            [e.target.name]: e.target.value
+        });
+    }
+
+    useEffect(() => {
+        fetch("http://localhost:8080/book/" + id)
+            .then((res) => res.json())
+            .then(data => setBook(data))
+            .catch(error => {
+                console.log("에러 :", error);
+            })
+    }, []);
+
+
+    const submitBook = (e) => {
+        e.preventDefault(); //submit이 action을 안타고 자기할일을 그만함.
+        fetch("http://localhost:8080/book/" + id, {
+            method: 'PUT',
+            //mode: "cors",
+            headers: {
+                "Content-Type": "application/json; charset=utf-8"
+            },
+            body: JSON.stringify(book)
+        })
+            .then((res) => {
+                console.log(1, res);
+                return res.json();
+            })
+            .then(res => {
+                console.log(2, res);
+                if (res != null) {
+                    //props.history.push("/");
+                    navigate("/book/" + id);
+                } else {
+                    alert("책 등록에 실패하였습니다.");
+                }
+            }).catch(error => {
+                console.log("실패", error);
+            })
+    }
+
 
-const UpdateForm = () => {
     return (
-        <div>
-            <h1>책 수정하기</h1>
-        </div>
+        <Container>
+            <h3 className='mb-5'>수정하기</h3>
+            <Form onSubmit={submitBook}>
+                <Form.Group className="mb-3" controlId="formBasicEmail">
+                    <Form.Label>제목</Form.Label>
+                    <Form.Control type="text" placeholder="Enter Title" onChange={changeValue} name="title" value={book.title} />
+                </Form.Group>
+
+                <Form.Group className="mb-3" controlId="formBasicEmail">
+                    <Form.Label>작성자</Form.Label>
+                    <Form.Control type="text" placeholder="Enter Author" onChange={changeValue} name="author" value={book.author} />
+                </Form.Group>
+
+                <Button variant="primary" type="submit">
+                    수정하기
+                </Button>
+            </Form>
+        </Container>
     );
 };