게시판 만들어보기 16일차

삭제 기능을 완료하고 수정기능 진행

댓글 수정

댓글 수정 버튼 클릭시에 textarea 창이 펼쳐지게 하기위해서
replyList중에서 내가 선택한 reply일때만 textarea로 변경해주고 버튼도 변경해주고 댓글 내용도 옮겨준다.

$(document).on('click', '[name=modifyReply]', function () {
                let data = {
                    boardId: $("#boardId").val(),
                    replyId: $(this).parent().attr("reply_id"),
                    replyContent: $(this).siblings("h4").attr("reply_content")
                }
                let replyHtml = "";
                for (let i = 0; i < replyList.length; i++) {
                    replyHtml += "<div reply_id='" + replyList[i].id + "'>";
                    replyHtml += "<h2> 닉네임 : " + replyList[i].user.username + "</h2>";
                    if (replyList[i].id == data.replyId) {
                        replyHtml += " <textarea  style=\"width: 1100px\" rows=\"3\" cols=\"30\" id=\"replyModifyContent\" name=\"content\" ></textarea>"

                    } else {
                        replyHtml += "<h4> 댓글 내용 : " + replyList[i].content + "</h4>";
                    }
                    replyHtml += "<p style='text-align: right'> 작성 시간 : " + replyList[i].createTime + "</p>";
                    if (replyList[i].id == data.replyId) {
                        replyHtml += "<button style='float: right' class='btn btn-primary'  name='modifyReplyDone'>수정</button>";
                    } else {
                        replyHtml += "<button style='float: right' class='btn btn-danger'  name='deleteReply'>삭제</button>";
                        replyHtml += "<button style='float: right' class='btn btn-warning' name='modifyReply'>수정</button>";
                    }
                    replyHtml += "</div>";
                }
                $("#locReplyList").html(replyHtml);
                $("#replyModifyContent").val(data.replyContent);
            })

조건문을 걸어주어서 reply id 값이 일치하는지 확인하고 진행 textarea에 이전에 댓글 내용을 보여주기 위해서 속성 설정 이전에 댓글 삭제에서는 parent() 함수를 사용해서 reply id값을 불러왔지만 이번에는 sibling()이라는 형제요소를 갖고오는 함수를 사용해서 댓글 내용을 가져와서 textarea 에 적용

for (let i = 0; i < replyList.length; i++) {
                    replyHtml += "<div reply_id='" + replyList[i].id + "'>";
                    replyHtml += "<h2> 닉네임 : " + replyList[i].user.username + "</h2>";
                    replyHtml += "<h4 reply_content='"+replyList[i].content+"'> 댓글 내용 : " + replyList[i].content + "</h4>";
                    replyHtml += "<p style='text-align: right'> 작성 시간 : " + replyList[i].createTime + "</p>";
                    replyHtml += "<button style='float: right' class='btn btn-danger'  name='deleteReply'>삭제</button>";
                    replyHtml += "<button style='float: right' class='btn btn-warning' name='modifyReply'>수정</button>";
                    replyHtml += "</div>";
                }
                $("#locReplyList").html(replyHtml);

수정하기버튼을 눌른후에 나오는 또다른 수정버튼을 replyModifyDone 이라고 name을 설정해주고
ajax 진행

 $(document).on('click', '[name=modifyReplyDone]', function () {
                let data = {
                    boardId: $("#boardId").val(),
                    replyId: $(this).parent().attr("reply_id"),
                    replyContent: $(this).siblings("textarea").val()
                }
                console.log(data);
                $.ajax({
                    url: "/reply/modify",
                    type: "POST",
                    data: JSON.stringify(data),
                    contentType: "application/json; charset=utf-8",
                    success: function (replyList) {
                        alert("댓글 수정 완료");
                        takeReplyList(replyList);
                    },
                    error: function (req, status, error) {
                        alert("에러가 발생했습니다");
                        console.log(req);
                    }
                })
            })

controller 설정

    @PostMapping("/reply/modify")
    @ResponseBody
    public List<Reply> modify(@RequestBody ReplyModifyDto replyModifyDto) {
        System.out.println(replyModifyDto);
       replyService.modify(replyModifyDto);
        List<Reply> byBoardId = replyService.findByBoardId(replyModifyDto.getBoardId());
        return byBoardId;
    }

service 설정

    @Transactional
    public void modify(ReplyModifyDto replyModifyDto) {
        Reply reply = replyRepository.findById(replyModifyDto.getReplyId()).get();
        reply.setContent(replyModifyDto.getReplyContent());
    }

수정 완료

오류 수정

댓글 등록 및 삭제 후에 수정버튼 클릭시 replyList를 제대로 가져오지 못하는 오류
글 삭제시에 오류 발생 ->글은 댓글과의 연관인데 글을 바로 삭제하려해서 오류가 발생하는거같음

댓글 등록 및 삭제 후에 수정버튼 클릭시 replyList를 제대로 가져오지 못하는 오류

$(document).on('click', '[name=modifyReply]', function () {
                let data = {
                    boardId: $("#boardId").val(),
                    replyId: $(this).parent().attr("reply_id"),
                    replyContent: $(this).siblings("h4").attr("reply_content")
                }
                console.log(data.replyId);
                console.log(data.replyContent);
                let replyHtml = "";
                for (let i = 0; i < replyList.length; i++) {
                    replyHtml += "<div reply_id='" + replyList[i].id + "'>";
                    replyHtml += "<h2> 닉네임 : " + replyList[i].user.username + "</h2>";
                    if (replyList[i].id == data.replyId) {
                        replyHtml += " <textarea  style=\"width: 1100px\" rows=\"3\" cols=\"30\" id=\"replyModifyContent\" name=\"content\" ></textarea>"
                    } else {
                        replyHtml += "<h4 reply_content='"+replyList[i].content+"'> 댓글 내용 : " + replyList[i].content + "</h4>";
                    }
                    replyHtml += "<p style='text-align: right'> 작성 시간 : " + replyList[i].createTime + "</p>";
                    if (replyList[i].id == data.replyId) {
                        replyHtml += "<button style='float: right' class='btn btn-primary'  name='modifyReplyDone'>수정</button>";
                    } else {
                        replyHtml += "<button style='float: right' class='btn btn-danger'  name='deleteReply'>삭제</button>";
                        replyHtml += "<button style='float: right' class='btn btn-warning' name='modifyReply'>수정</button>";
                    }
                    replyHtml += "</div>";
                }
                $("#locReplyList").html(replyHtml);
                $("#replyModifyContent").val(data.replyContent);
            })

댓글 수정버튼 클릭시에 클릭했던 댓글창이 textarea창으로 바뀌게 설정해두었지만 알고보니 replyList를 넘겨주지 않았다. 이 부분에서 사용했던 replyList는

/*<![CDATA[*/
            let replyList = /*[[ ${replyList} ]]*/;
            /*]]*/

이전에 script 부분에서 th:inline="javascript" 를 사용해서 타임리프로 넘겨준 replyList를 사용하고있었다.
따라서 이 넘겨받은 replyList를 계속해서 업데이트 시켜준다.

function takeReplyList (_replyList) {
				
                replyList = _replyList;//이부분 수정
                let replyHtml = "";
                for (let i = 0; i < _replyList.length; i++) {
                    replyHtml += "<div reply_id='" + _replyList[i].id + "'>";
                    replyHtml += "<h2> 닉네임 : " + _replyList[i].user.username + "</h2>";
                    replyHtml += "<h4 reply_content='"+_replyList[i].content+"'> 댓글 내용 : " + _replyList[i].content + "</h4>";
                    replyHtml += "<p style='text-align: right'> 작성 시간 : " + _replyList[i].createTime + "</p>";
                    replyHtml += "<button style='float: right' class='btn btn-danger'  name='deleteReply'>삭제</button>";
                    replyHtml += "<button style='float: right' class='btn btn-warning' name='modifyReply'>수정</button>";
                    replyHtml += "</div>";
                }
                $("#locReplyList").html(replyHtml);
            }