독서록 보관함 페이지에서 도서 삭제와 독서록 삭제 기능이 가능하다.
우선 도서 삭제는 저장한 도서 목록에서 페이지에 보여지는 도서를 아예 삭제하는 것으로 도서에 대한 정보뿐만 아니라 해당 도서에 작성된 독서록까지 모두 삭제된다.
먼저 도서 삭제에 대해 다뤄보겠다. 도서를 삭제하려면 책 이미지 위에있는 delete를 누르게 되면 삭제가 된다. 하지만 이는 작성했던 독서록 또한 모두 삭제하기 때문에 모달창을 이용하여 재차 확인하였다.
모달 핸들링을 해줄 변수를 만들어주고 useState 초기값은 false로 지정해주었다. 그리고 delete 버튼을 눌렀을때 modalHandle이 true가 되어서 DeleteModal 창이 뜨게 해주었다.
해당 모달창에서는 도서 삭제가 목적이기 때문에 도서 삭제시 필요한 bookId를 state로 넘겨주었다.
모달창을 구현한 DeleteModal.jsx이다.
id에 해당하는 도서를 삭제하는 api이다. 토큰을 헤더에 담고 삭제를 원하는 도서의 id를 주소 마지막 변수에 담은 후 put요청을 하면 해당 도서에 대한 정보가 삭제된다.
예 버튼을 눌렀을때에는 삭제해주는 함수를 부르고 아니오 버튼을 누를때에는 모달창을 꺼주었다.
다음으로 독서록 개별 삭제 기능에 대해 다뤄보겠다.
독서록을 서버에 저장할때 독서록들은 서로 다른 bookReportId를 가지게 된다. 즉 bookReportId를 통해서 독서록을 구분할 수 있는것이다. 독서록 삭제에서도 마찬가지로 삭제하고 싶은 독서록의 bookReportId를 주소 마지막에 변수로 넣어주면 삭제된다.
위 함수는 선택한 독서록을 삭제해주는 함수이다. 성공했을때 값을 filter 메서드를 사용하여 삭제한 독서록을 제외한 나머지를 화면에 반영해주었다.
독서록들의 정보를 담은 bookData는 배열이다. 배열안에 각각의 독서록 정보가 담긴 형태이다. [{}]로 독서록이 담겨있다.
{bookReportId: 15
contents: "첫번째 독서록 내용입니다."
endPage: 30
startDate: "2023-07-03"
startPage: 1
title: "첫번째 독서록"}bookData안에 담긴 하나의 객체의 예시이다.
개별 독서록을 리스트로 나타냈기에 각각의 리스트는 위와 같은 객체에 접근하여 나타내준다. 모든 독서록은 서로 다른 bookReportId를 가지고 있다. 따라서 bookReportId를 함수의 parameter로 전달해주어 선택된 독서록을 삭제할 수 있다.
다음글에서는 작성한 독서록을 열람하는 기능을 작성해보려고 한다.
