23.06.07) 팀프로젝트 - 댓글창 구조 변경

🤓오늘 공부한 내용

 

📌추가로 구현한 기능 1 (댓글창 숨기기)

 

팀원분이 만드신 디테일 페이지에 댓글창 파일을 병합 한 후에

css를 수정하다가 처음부터 댓글창이 보이는것보다 댓글 버튼을 누르면

그 이후에 댓글입력할 수 있는 창이 보이도록 수정했다.

 

 <!-- 댓글입력창 Review 버튼으로 감싸기 -->
 <div class="comment_input_container">

먼저 html에서 기존 댓글창을 container 클래스로 감싸주고

 

<button class="writeReviewBtn">Review</button>

//댓글입력창 Review 버튼으로 감싸기
let count = true;
makeTemp().then(() => {
  const $writeReviewBtn = document.querySelector(".writeReviewBtn");
  const $commentInputContainer = document.querySelector(".comment_input_container");
  $writeReviewBtn.addEventListener("click", () => {
    // console.log(count);
    if (count) {
      $commentInputContainer.style.display = "block";
      return (count = !count);
    } else {
      $commentInputContainer.style.display = "none";
      return (count = !count);
    }
  });
});

js파일에서 기존에 댓글창 코드 밑에 버튼 클래스를 부여했다.

생성된 Review 버튼에 클릭이벤트를 부여해서 댓글 입력 창의 display 속성이 none(숨겨진 상태)인 경우
display 속성을 block으로 변경하여 댓글 입력 창을 보이게 해주고,
그렇지 않은 경우 (보이는 상태) display 속성을 "none"으로 변경하여 댓글 입력 창을 숨기기.

 

📌추가로 구현한 기능 2 (페이지 상단이동 버튼 추가)

내 개인 프로젝트 과제에서도 사용했던 기능으로 스크롤 다운되어 있을 때

상단으로 한번에 이동하는 버튼을 사용했었는데 이번 팀 프로젝트 페이지에 어울리는 

다른 화살표 이미지를 찾아 추가해줬다.

//페이지 상단이동
const topBtn = document.querySelector(".moveTopBtn");

topBtn.onclick = () => {
  // top:0 >> 맨위로  behavior:smooth >> 부드럽게 이동할수 있게 설정하는 속성
  window.scrollTo({ top: 0, behavior: "smooth" });
};

 

개인 과제때 $topBtn이렇게 변수를 선언해주었는데 과제 제출 후 튜터님께 피드백을 받았을 때

바닐라자바스크립트에서는 변수이름에 $를 사용하지 않는게 좋다고 하셔서 수정했다.