📝 오늘 한 것

1. 복습 - COMMENT SECTION

📚 배운 것 (복습)

전체 코드는 github에 올림(wetube_v2)

13. COMMENT SECTION

• [TIL] 211218
  • 버그 수정 (추가)
  • 댓글 삭제 기능 추가

※ 버그 수정

• textarea에 입력한 줄바꿈이 실제 댓글란에서 띄어쓰기로 표시되는 문제가 있었다

→ 작성한 댓글 내용을 받는 p 태그에 white-space: pre-wrap 속성을 주었다.

.show-comment__text {
  margin-top: 0.7rem;
  line-height: 1.5rem;
  white-space: pre-wrap;
}

• 처음 로그인한 계정을 로그아웃하고 다른 계정으로 로그인한 후 댓글을 작성하면 실시간으로 뜨는 댓글이 이전 로그인 계정 정보로 뜨는 문제가 있었다.

→ 실시간으로 댓글을 띄우는 프론트엔드 코드로 전해줄 data 속성의 값을 comment.owner에서 loggedInUser 값으로 바꿨다.

mixin comment(comment)
  div.comment-container__item(data-logged-in-user=loggedInUser)

ownerNameLink.textContent = JSON.parse(commentMixinItem.dataset.loggedInUser).name;

• textarea에서 댓글 작성을 취소하거나 댓글을 제출했을 때 textarea의 높이가 기본 높이로 자동으로 안 돌아오는 문제가 있었다.

→ 취소 버튼 클릭 시 textarea의 높이가 자동으로 기본 높이가 되도록 수정했다. 댓글을 제출하고 201 상태 코드를 보냈을 때도 아래 함수가 실행된다.

const handleCancelBtnClick = () => {
  textarea.value = "";
  buttonsDiv.remove();
  textarea.style.height = "1.5rem"; // 추가
};

• 작성된 댓글이 하나도 없을 때 댓글을 작성하려고 하면 에러가 떴다. data 속성을 댓글이 작성되어야만 만들어지는 mixin item에 부여했기 때문에 해당 요소를 읽어올 수 없어 에러가 발생한 것이었다.

→ commentMixinItem 대신 commentContainerShow에 data 속성을 추가했다.

  ownerNameLink.textContent = JSON.parse(
    commentContainerShow.dataset.loggedInUser
  ).name;

• data 속성을 video에서 videoContainer로 바꾼 후 조회수를 업데이트하는 fetch를 수정해주지 않아서 에러가 발생했다.

→ ${video.dataset.videoId} 를 ${JSON.parse(videoContainer.dataset.video)._id} 로 수정했다.

const handleVideoEnded = async () => {
  video.currentTime = 0;
  playBtn.innerHTML = "<i class='fas fa-play'></i>";
  await fetch(
    `/api/videos/${JSON.parse(videoContainer.dataset.video)._id}/views`,
    {
      method: "POST",
    }
  );
};

• 동영상의 createdAt이 원하는 대로 보이지 않아 수정했다.

span.video-data-container__createdAt #{video.createdAt.getFullYear()}. #{String(video.createdAt.getMonth() + 1).padStart(2, "0")}. #{String(video.createdAt.getDate()).padStart(2, "0")}.

• 댓글을 추가하고 삭제할 때 댓글 개수를 실시간으로 표시하는 코드에 문제가 있었다. 댓글을 2번 이상 연속으로 추가하거나 삭제하면 실시간 업데이트가 되지 않았다.

→ commentCount 변수를 따로 만들어 업데이트하는 방식으로 코드를 수정했다.

let commentCount = JSON.parse(videoContainer.dataset.video).comments.length;

const addComment = (commentText, commentId) => {
  // 중략
  commentCount++;
  commentContainerCount.textContent = `댓글 ${commentCount}개`;
};

const handleCommentContainerShowClick = async (event) => {
  // 중략
  commentCount--;
  commentContainerCount.textContent = `댓글 ${commentCount}개`;
};

💡 댓글 삭제 기능 추가

const addComment = (commentText, commentId) => {
  // 중략
};

const handleCancelBtnClick = () => {
  textarea.value = "";
  textarea.style.height = "1.5rem";
  buttonsDiv.remove();
};

const handleSubmit = async (event) => {
  event.preventDefault();
  const text = textarea.value;
  if (text === "") {
    return;
  }
  const videoId = JSON.parse(videoContainer.dataset.video)._id;
  const response = await fetch(`/api/videos/${videoId}/comments`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ text }),
  });
  if (response.status === 201) {
    const { newCommentId } = await response.json();
    addComment(text, newCommentId);
    handleCancelBtnClick();
  }
};

const handleCommentContainerShowClick = async (event) => {
  const commentId = event.target.dataset.commentId;
  const className = event.target.className;
  if (
    commentId &&
    (className === "fas fa-trash" || "show-comment__delete-button")
  ) {
    const response = await fetch(`/api/comments/${commentId}`, {
      method: "DELETE",
    });
    if (response.status === 200) {
      const toBeDeleted = commentContainerShow.querySelector(
        `.comment-container__item[data-comment-id="${commentId}"]`
      );
      toBeDeleted.remove();
      commentCount--;
      commentContainerCount.textContent = `댓글 ${commentCount}개`;
    }
  }
};

form.addEventListener("submit", handleSubmit);
commentContainerShow.addEventListener("click", handleCommentContainerShowClick);

✨ 내일 할 것

1. 복습 계속하기 - DEPLOYMENT