게시물에 댓글 보기 & 작성 기능 추가하기 (댓글 API 활용)
포스팅은 따로 하지 않았지만 게시물 목록 화면(index.html)에서 각 게시물 하단에 각 게시물의 링크를 클립보드에 복사할 수 있는 버튼과, 현재 게시물에 작성된 댓글의 개수를 보여지도록 구현해놓은 상태입니다.
메인화면에서 보여지는 모습
여기서 댓글을 클릭하면 id를 포함한 쿼리 파라미터를 이용해 상세 페이지로 이동하도록 설정했습니다.
location.href = `post.html?id=${post.id}`;
그렇게 이동한 post.html에서는 URL에서 id 값을 추출하여 해당 게시물을 불러옵니다.
const postId = new URLSearchParams(location.search).get("id"); const postUrl = `https://myDomain.com/wp-json/wp/v2/posts/${postId}`;
상세 페이지(post.html) 구조:
<h3>댓글</h3> <div id="commentList"></div> <h4>댓글 작성</h4> <textarea id="commentContent" placeholder="댓글을 입력하세요"></textarea> <button onclick="submitComment()">댓글 작성</button>
📥 댓글 불러오기 (GET):
워드프레스의 댓글 REST API는 아래처럼 간단히 호출할 수 있습니다.
const commentsUrl = `https://myDomain.com/wp-json/wp/v2/comments?post=${postId}`; const res = await fetch(commentsUrl); const comments = await res.json();
그리고 우리는 이것을 이용해 댓글 트리를 그려줍니다.
function renderComments(comments, parentId = 0, depth = 0) { return comments .filter(c => c.parent === parentId) .map(c => { const replies = renderComments(comments, c.id, depth + 1); const indent = `margin-left: ${depth * 20}px`; return ` <div class="comment" style="${indent}"> <div class="comment-author">${c.author_name}</div> <div class="comment-content">${c.content.rendered}</div> <button onclick="showReplyForm(${c.id}, ${depth + 1})">답글</button> <div id="reply-form-${c.id}"></div> ${replies} </div> `; }).join(""); }
📝 댓글 작성 (POST)
async function submitComment(parentId = 0) { const textareaId = parentId ? `replyContent-${parentId}` : "commentContent"; const content = document.getElementById(textareaId).value.trim(); if (!content) return alert("댓글을 입력해주세요."); const res = await fetch("https://myDomain.com/wp-json/wp/v2/comments", { method: "POST", headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}`, // 로그인 토큰 }, body: JSON.stringify({ post: postId, content, parent: parentId, }), }); if (res.ok) { document.getElementById(textareaId).value = ""; loadComments(); // 새로고침 없이 댓글 반영 } else { const err = await res.json(); alert("댓글 작성에 실패했습니다: " + (err.message || "오류")); } }
답글에 댓글을 달기위한 답글 폼 동적 생성:
function showReplyForm(parentId, depth) { const container = document.getElementById(`reply-form-${parentId}`); container.innerHTML = ` <textarea id="replyContent-${parentId}" placeholder="답글을 입력하세요"></textarea> <button onclick="submitComment(${parentId})">답글 작성</button> `; }
완성된 모습
지금까지 총 6편에 걸쳐 워드프레스 REST API를 활용해 나만의 사이트를 만드는 과정을 정리해보았습니다.
사용자 인증부터 게시물 작성, 이미지 업로드, 검색, 댓글 기능까지, 기본적인 기능은 어느 정도 구현되었기에 이 연재는 여기서 마무리하려 합니다.
하지만 사실, 지금부터가 진짜 시작입니다.
이제부터는 각자의 스타일에 맞게 사이트를 만들어나가기 나름입니다.
예를 들면 이런 것들입니다:
사실 1~2편 쓰는 동안 실제 구현은 대부분 끝나버렸고, 그 이후로는 글을 작성하기위해서 핵심기능만 빼내서 코드를 작성하자니 오히려 코드가 꼬이거나 귀찮아서 글을 쓰는 게 조금 버겁기도 했습니다.
그래도 누군가에게 이 시리즈가 도움이 되었기를 바라며, 이렇게 마무리합니다.
읽어주셔서 감사합니다! 🙇