이제 삭제버튼 누를때 삭제가 되야한다.
그리고 x 버튼 자체가 본인이 쓴 댓글에만 보이게 해줘야한다.
그럴려면 principalId 값이 필요한데
header.jsp 에서 body 태그 바로 밑에
<!-- principalId 담아두는 곳 -->
<input type="hidden" id="principalId" value = "${principal.user.id}">
JavaScript
복사
story.js 위에 부분에 선언해둔다
// (0) 현재 로긴한 사용자 아이디
let principalId = $("#principalId").val();
alert("사용자번호 : "+principalId);
JavaScript
복사
타임라인에서 새로고침하면 바로 알럿으로 ssar 로그인한 유저의 번호가 온다
getStoryItem()함수의 코멘트 부분을 댓글 단 사람만 x 버튼 보여지게 수정해준다
image.comments.forEach((comment)=>{
item += `
<div class="sl__item__contents__comment" id="storyCommentItem-${comment.id}">
<p>
<b>${comment.user.username} :</b> ${comment.content}
</p>`;
if(principalId == comment.user.id){
item += `
<button>
<i class="fas fa-times"></i>
</button>
`
}
item += `
</div>
`;
})
item += `
</div>
JavaScript
복사
ssar이 단 댓글
love로 로그인해서 보는 타임라인
이제 x 버튼 누르면 삭제되게 해주자
버튼에 onclick으로 삭제버튼함수를 생성
if(principalId == comment.user.id){
item += `
<button onclick = "deleteComment(${comment.id})">
<i class="fas fa-times"></i>
</button>
`
}
JavaScript
복사
// (5) 댓글 삭제
function deleteComment(commentId) {
$.ajax({
type: "delete",
url : `/api/comment/${commentId}`,
dataType: "json"
}).done(res=>{
console.log("성공", res)
}).fail(error=>{
console.log("오류", error)
});
}
JavaScript
복사
CommentApiController.java 에 댓글삭제 함수에 관련해서 틀만 추가
@DeleteMapping("/api/comment/{id}")
public ResponseEntity<?> commentDelete(@PathVariable int id){
commentService.댓글삭제(id);
return null;
}
Java
복사
CommentService.java
@Transactional
public void 댓글삭제(int id) {
try {
commentRepository.deleteById(id);
} catch (Exception e) {
throw new CustomApiException(e.getMessage());
}
}
Java
복사
혹시 삭제하다가 터질수도 있으니까 try catch로 한번 잡아준다
CommentApiController.java 에 댓글삭제 함수 이어서 추가
@DeleteMapping("/api/comment/{id}")
public ResponseEntity<?> commentDelete(@PathVariable int id){
commentService.댓글삭제(id);
return new ResponseEntity<>(new CMRespDto<>(1, "댓글삭제성공", null), HttpStatus.OK);
}
Java
복사
8번째 댓글을 삭제에 성공했지만 바로 화면에서 사라지지 않는다
새로고침해주면 잘보니 7번째를 삭제했다..ㅎㅎ
ajax 성공에
$(`#storyCommentItem-${commentId}`).remove();
JavaScript
복사
이제 순서대로 바로바로 사라진다.
근데 다른 이미지 사진에 댓글을 달고
x 버튼을 누르면 반응이 없다
왜냐면 댓글쓰기 함수에 댓글삭제 함수를 추가안해줘서 그렇다
그리고 지금 댓글쓰기 부분은 이미 로그인한 사람이 쓰는거라서 같은인물인지 체크해줄 필요가 없다
addComment() 댓글쓰기 함수의 ajax 성공 부분에 onclick 추가
let content = `
<div class="sl__item__contents__comment" id="storyCommentItem-${comment.id}">
<p>
<b>${comment.user.username} :</b>
${comment.content}
</p>
<button onclick = "deleteComment(${comment.id})"><i class="fas fa-times"></i></button>
</div>
`;
JavaScript
복사
삭제되고 이제 댓글쓰고 삭제해보자
삭제 성공