📝 오늘 한 것

1. 복습 - COMMENT SECTION

📚 배운 것 (복습)

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

13. COMMENT SECTION

• [TIL] 211217
  • 실시간 댓글 구현 (javascript로 댓글 추가)
  • textarea 높이 자동 조절 (추가)
  • 댓글 작성란 클릭 시 주변 요소들 스타일 변경 (추가)
  • 취소 버튼 & 댓글 버튼 구현 (추가)
  • 댓글 총 개수 실시간 업데이트 (추가)

💡 실시간 댓글 구현 (javascript로 댓글 추가)

🔎 data attribute / JSON.parse()

처음에는 필요한 값 전부를 data 속성으로 만들어서 pug 파일에 길게 나열해 프론트엔드로 가져왔다.

div.comment-container__item(data-comment-owner-id=comment.owner._id, data-comment-owner-avatarurl=comment.owner.avatarUrl, data-comment-owner-name=comment.owner.name)

이건 아닌 거 같아서 data-comment-owner만 남겼다.

div.comment-container__item(data-comment-owner=comment.owner)

ownerNameLink.textContent = commentMixinItem.dataset.commentOwner.name;

그런데 이렇게 하니까 comment.js 파일에서 data 속성의 키 값을 가져올 수가 없었다.
값을 가져올 수 있도록 JSON.parse()를 이용해 JSON 문자열을 오브젝트로 바꿔주었다.

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

🔎 추후에 수정할 것

comment.pug에서 기본 이미지는 배포 후 수정할 것이다.
comment.js에서는 일단 github avatar만 고려했다. 로컬 폴더에 올린 프로필 이미지는 고려하지 않았다.(제대로 띄우려면 경로에 "/"를 추가해야 하지만 여기서는 굳이 경우를 나눠 만들지 않았다.) 이 또한 배포 후 수정할 것이다.

//- comment.pug
mixin comment(comment)
  div.comment-container__item(data-comment-owner=comment.owner)
    div.show-comment__profile-img
      a(href=`/users/${comment.owner._id}`)
        //- 배포 후 수정할 것 (기본 이미지 할당)
        if !comment.owner.avatarUrl
          div.profile-img 😎
        else if comment.owner.socialOnly
          div.profile-img(style=`background-image: url("${comment.owner.avatarUrl}");`)
        else
          div.profile-img(style=`background-image: url("/${comment.owner.avatarUrl}");`)
    div.show-comment__data
      a.show-comment__owner-name(href=`/users/${comment.owner._id}`) #{comment.owner.name}
      p.show-comment__text #{comment.text}

// comment.js
const addComment = (commentText) => {
  const itemDiv = document.createElement("div");
  itemDiv.classList.add("comment-container__item");
  // 프로필 이미지
  const profileImgDiv = document.createElement("div");
  profileImgDiv.classList.add("show-comment__profile-img");
  const profileImgLink = document.createElement("a");
  profileImgLink.setAttribute(
    "href",
    `/users/${JSON.parse(commentMixinItem.dataset.commentOwner)._id}`
  );
  const profileImg = document.createElement("div");
  profileImg.classList.add("profile-img");
  profileImg.style.backgroundImage = `url("${
    JSON.parse(commentMixinItem.dataset.commentOwner).avatarUrl
  }")`; // 일단은 Github Avatar만 고려함 (배포 후 수정할 것)
  // 이름 & 댓글 내용
  const dataDiv = document.createElement("div");
  dataDiv.classList.add("show-comment__data");
  const ownerNameLink = document.createElement("a");
  ownerNameLink.classList.add("show-comment__owner-name");
  ownerNameLink.setAttribute(
    "href",
    `/users/${JSON.parse(commentMixinItem.dataset.commentOwner)._id}`
  );
  const text = document.createElement("div");
  text.classList.add("show-comment__text");
  // 조합 및 배치
  profileImgLink.appendChild(profileImg);
  profileImgDiv.appendChild(profileImgLink);
  ownerNameLink.textContent = JSON.parse(
    commentMixinItem.dataset.commentOwner
  ).name;
  text.textContent = commentText;
  dataDiv.appendChild(ownerNameLink);
  dataDiv.appendChild(text);
  itemDiv.appendChild(profileImgDiv);
  itemDiv.appendChild(dataDiv);
  commentContainerShow.prepend(itemDiv);
};

💡 textarea 높이 자동 조절

element.scrollHeight 이용

// comment.js
const textarea = form.querySelector(".write-comment__textarea");

const textareaResize = (event) => {
  event.target.style.height = "1.5rem";
  event.target.style.height = event.target.scrollHeight + "px";
};

textarea.addEventListener("keyup", textareaResize);

이렇게 작성했는데 처음엔 이상하게도 keyup 이벤트가 일어날 때마다 textarea의 높이가 4px씩 증가했다. 원인은 아래 코드에 있었다.

.write-comment__textarea:focus {
  border-bottom: 2px solid $color-white;
  transition: all 200ms ease-in-out;
}

해당 코드를 삭제하고 comment.js에 다음 코드를 추가했다.

💡 댓글 작성란 클릭 시 주변 요소들 스타일 변경

// comment.js
const textarea = form.querySelector(".write-comment__textarea");
const submitBtn = document.querySelector(".submit-button");

const TEXTAREA_FOCUS_BG_COLOR = "rgb(168, 218, 220)"; // $color-light-blue
const TEXTAREA_BLUR_BG_COLOR = "rgba(241, 250, 238, 0.4)"; // $color-light-white
const TEXTAREA_FOCUS_COLOR = "rgb(29, 53, 87)"; // $bg
const TEXTAREA_BLUR_COLOR = "rgb(241, 250, 238)"; // $color-dark-white

const handleTextareaValueInput = () => {
  if (textarea.value) {
    submitBtn.style.backgroundColor = TEXTAREA_FOCUS_BG_COLOR;
    submitBtn.style.color = TEXTAREA_FOCUS_COLOR;
  } else {
    submitBtn.style.backgroundColor = TEXTAREA_BLUR_BG_COLOR;
    submitBtn.style.color = TEXTAREA_BLUR_COLOR;
  }
};

const handleTextareaFocus = () => {
  textarea.style.borderBottom = `2px solid ${TEXTAREA_FOCUS_BG_COLOR}`;
};

const handleTextareaBlur = () => {
  textarea.style.borderBottom = `1px solid ${TEXTAREA_BLUR_BG_COLOR}`;
};

textarea.addEventListener("input", handleTextareaValueInput);
textarea.addEventListener("focus", handleTextareaFocus);
textarea.addEventListener("blur", handleTextareaBlur);

💡 취소 버튼 & 댓글 버튼 구현

유튜브 댓글 작성란 참고해서 비슷하게 구현하고자 했다.
기본적으로 버튼은 보이지 않지만 textarea가 focus 되면 버튼이 보이면서 textarea의 스타일이 바뀐다.
textarea 키보드 입력 여부에 따라 '댓글 버튼'의 스타일이 바뀐다.
댓글 버튼을 누르면 댓글 작성란에 있던 글은 사라지고 모든 것은 기본 스타일로 바뀌며 버튼들이 삭제된다.
취소 버튼을 누르면 댓글 작성란에 있던 글은 사라지고 모든 것은 기본 스타일로 바뀌며 버튼들이 삭제된다.
다시 textarea가 focus 되면 버튼들이 다시 추가되고 textarea의 스타일이 바뀐다.

// comment.js
let buttonsDiv = document.querySelector(".write-comment__buttons");
let submitBtn = document.querySelector(".submit-button");
let cancelBtn = document.querySelector(".cancel-button");

const TEXTAREA_FOCUS_BG_COLOR = "rgb(168, 218, 220)";
const TEXTAREA_BLUR_BG_COLOR = "rgba(241, 250, 238, 0.4)";
const TEXTAREA_FOCUS_COLOR = "rgb(29, 53, 87)";
const TEXTAREA_BLUR_COLOR = "rgb(241, 250, 238)";

const handleSubmitBtn = async (event) => {
  // 중략
  if (status === 201) {
    addComment(text);
    handleCancelBtnClick(); // 추가
  }
};

const handleTextareaValueInput = () => {
  if (textarea.value) {
    submitBtn.style.backgroundColor = TEXTAREA_FOCUS_BG_COLOR;
    submitBtn.style.color = TEXTAREA_FOCUS_COLOR;
  } else {
    submitBtn.style.backgroundColor = TEXTAREA_BLUR_BG_COLOR;
    submitBtn.style.color = TEXTAREA_BLUR_COLOR;
  }
};

const handleCancelBtnClick = () => {
  textarea.value = "";
  buttonsDiv.remove();
};

const handleTextareaFocus = () => {
  textarea.style.borderBottom = `2px solid ${TEXTAREA_FOCUS_BG_COLOR}`;
  if (buttonsDiv) {
    form.appendChild(buttonsDiv);
    handleTextareaValueInput(); // 버그 수정
  } else {
    buttonsDiv = document.createElement("div");
    buttonsDiv.classList.add("write-comment__buttons");
    cancelBtn = document.createElement("button");
    cancelBtn.classList.add("cancel-button");
    cancelBtn.textContent = "취소";
    submitBtn = document.createElement("button");
    submitBtn.classList.add("submit-button");
    submitBtn.textContent = "댓글";
    buttonsDiv.appendChild(cancelBtn);
    buttonsDiv.appendChild(submitBtn);
    form.appendChild(buttonsDiv);
  }
  textarea.addEventListener("input", handleTextareaValueInput);
  cancelBtn.addEventListener("click", handleCancelBtnClick);
};

const handleTextareaBlur = () => {
  textarea.style.borderBottom = `1px solid ${TEXTAREA_BLUR_BG_COLOR}`;
};

form.addEventListener("submit", handleSubmitBtn);
textarea.addEventListener("keyup", textareaResize);
textarea.addEventListener("focus", handleTextareaFocus);
textarea.addEventListener("blur", handleTextareaBlur);

※ 버그 수정

textarea에 글을 쓰다가 form을 제출하지 않고 '취소 버튼'을 눌러 모든 글이 지워진 후 다시 textarea가 focus 되면 textarea에 글이 없어도 '댓글 버튼'까지 스타일이 적용되어 있었다.

→ handleTextareaFocus 함수에서 buttonsDiv가 없을 때 앞서 만들었던 buttonsDiv를 form에 추가한 후 handleTextareaValueInput 함수에 의해 value 값의 존재 유무에 따라 '댓글 버튼' 스타일이 적용되도록 수정했다.

💡 댓글 총 개수 실시간 업데이트

//- watch.pug
block content
  div.video-container(data-video=video)

// comment.js
const commentContainer = document.querySelector(".comment-container");
const commentContainerCount = commentContainer.querySelector(".comment-container__count");

const addComment = (commentText) => {
  // 중략
  commentContainerCount.textContent = `댓글 ${
    JSON.parse(videoContainer.dataset.video).comments.length + 1 // 플러스 1 해줘야 함
  }개`;
};

📝 내일 할 것

1. 복습 계속하기 - 댓글 삭제 버튼 추가 / 배포
2. textarea에서 입력한 줄 바꿈 ENTER가 실제 추가된 댓글란에선 띄어쓰기로 표시되는 문제 해결