• 오류사항은 댓글 수정하기를 눌렀을때 댓글을 수정하는 input이 나와야하는데 아무런 반응이 없다.

• 댓글 수정하면 동작하는 함수

// UPDATE - 댓글 수정창을 보여주도록 하는 함수
function editComment(commentId) {
    // 사용자 검증 요청
    $.ajax({
        url: '/board/comment/validComment?commentId=' + commentId,
        type: 'GET',
        success: function (response) {
            // 댓글 요소 선택
            let commentElement = $(`.comment[data-comment-id=${commentId}]`);

            // 현재 댓글 내용 가져오기
            let currentContent = commentElement.find('.content').text();

            // 댓글 내용을 입력창으로 바꾸기
            commentElement.find('.content').html(`
                <textarea class="edit-input">${currentContent}</textarea>
                <button onclick="updateComment(${commentId})">수정 완료</button>
            `);
        },
        error: function (xhr, status, error) {
            alert('유저가 다릅니다. 수정할 수 없습니다.');
        }
    });
}

• 문제점
  • 댓글 수정 로직에서는 댓글 요소를 선택하고, 현재 댓글 내용을 가져와서 입력창으로 바꾸는 작업을 수행합니다. 그런데, 댓글 요소를 선택하는 코드에서 data-comment-id 속성을 사용하고 있는데, HTML 코드에서 해당 속성이 누락되어 있습니다.
  • 댓글 요소를 선택할 수 있도록 HTML 코드에서 각 댓글 요소에 data-comment-id 속성을 추가해야 합니다. JavaScript에서 댓글을 렌더링하는 부분을 다음과 같이 수정하면 됩니다:
• 수정사항
  • 일단 댓글을 받아오는 ajax코드를 확인했다. 여기에 빠진 속성을 추가해줘야 한다.

// READ - 댓글을 받아와서 뿌려주는 로직 (페이징 적용)
let currentPage = 1;

function getComments(boardId, page) {
    $.ajax({
        url: '/board/comment/get/' + boardId,
        method: 'GET',
        data: {page: page - 1}, // 페이지 번호는 0부터 시작하므로 -1
        success: function (response) {
            let comments = response.content;
            let commentListHtml = '';
            comments.forEach(function (comment) {
                commentListHtml += `<div class="comment" onmouseover="showActions(this)" onmouseout="hideActions(this)">`;
                commentListHtml += `<span class="author">${comment.userResponse.username}:</span> `;
                commentListHtml += `${comment.content} `;
                commentListHtml += `<div class="actions" style="display:none;">
                        <button onclick="editComment(${comment.boardCommentId})">수정</button>
                        <button onclick="deleteComment(${comment.boardCommentId})">삭제</button>
                    </div>`;
                commentListHtml += `</div>`;
            });
            $('#comment-list').html(commentListHtml);

            // 페이징 처리
            let totalPages = response.totalPages; // 전체 페이지 수
            let paginationHtml = '';
            for (let i = 1; i <= totalPages; i++) {
                paginationHtml += `<button onclick="getComments(${boardId}, ${i})">${i}</button>`;
            }
            $('#pagination').html(paginationHtml);
        }
    });
}

• 수정완료
  • div class=”comment”에 **data-comment-id="${comment.boardCommentId}"**를 추가했다.

// READ - 댓글을 받아와서 뿌려주는 로직 (페이징 적용)
let currentPage = 1;

function getComments(boardId, page) {
    $.ajax({
        url: '/board/comment/get/' + boardId,
        method: 'GET',
        data: {page: page - 1},
        success: function (response) {
            let comments = response.content;
            let commentListHtml = '';
            comments.forEach(function (comment) {
                commentListHtml += `<div class="comment" data-comment-id="${comment.boardCommentId}" onmouseover="showActions(this)" onmouseout="hideActions(this)">`;
                commentListHtml += `<span class="author">${comment.userResponse.username}:</span>`;
                commentListHtml += `<div class="content">${comment.content}</div>`;
                commentListHtml += `<div class="actions" style="display:none;">`; // 클래스 이름을 원래대로 돌림
                commentListHtml += `<button onclick="editComment(${comment.boardCommentId})">수정</button>`; // 클래스 제거
                commentListHtml += `<button onclick="deleteComment(${comment.boardCommentId})">삭제</button>`; // 클래스 제거
                commentListHtml += `</div>`;
                commentListHtml += `</div>`;
            });
            $('#comment-list').html(commentListHtml);

            // 페이징 처리
            let totalPages = response.totalPages; // 전체 페이지 수
            let paginationHtml = '';
            for (let i = 1; i <= totalPages; i++) {
                paginationHtml += `<button onclick="getComments(${boardId}, ${i})">${i}</button>`;
            }
            $('#pagination').html(paginationHtml);
        }
    });
}

• 이렇게 수정하면 댓글 요소에 data-comment-id 속성이 추가되고, editComment 함수에서 해당 속성을 사용하여 댓글 요소를 선택할 수 있게 됩니다. 이로써 댓글 수정창이 정상적으로 나타나게 될 것입니다.