TIL 11.25

pull origin main 메인을 당겨
push origin [branch] 브랜치 푸쉬해
가슴깊이 새겨.... 다신 실수하지말자

crud 성공하자 3

댓글 수정, 완료버튼을 생성하고 각각 이벤트를 부여해서 함수가 실행되도록 했다.
이때 댓글 하나에 각각 함수를 가진 CRUD 총 4가지 기능을 부여했으므로
이 함수에 쓰일 데이터 값에도 각각 id를 별도로 지정해놔야 에러가 안난다!

CRUD 구현때문에 자바스크립트 파일이 길어지고 복잡해졌는데, 변수를 찾아 헤매기 시작하면 시간이 끝도 없이 길어질 수 있으므로 잘 파악해야 한다.
다 지나고 나니 웹 화면을 캡쳐해서 각 부분의 클래스명, 아이디값을 잘 적어놓는 것이 베스트일 것 같다. 괜찮을지 다음 프로젝트때 꼭 해봐야겠다.

내가 배운 적 없어서 몰랐던 기능들...

1. 댓글창 열리는 곳 html에 있어야할 댓글들과 버튼들을 자바스크립트파일에서 추가

const commentList = document.querySelector(".comment-list");
  commentList.innerHTML = "";
  commentObjList.forEach(commentObj => {
    // console.log("comment", commentObj.id);
    const isOwner = user.uid === commentObj["creatorId"];
    const tempHtml = `
    <div class="comment-user">
      <img class="comment-profile-img" src="${commentObj.profileUrl ?? "/img/profile-img.png"}" alt="profile-img" />
      <div class="comment-user-name">${commentObj.nickname}</div>
    </div>
    <div id="preContent-${commentObj.id}" class="comment-description">${commentObj.contents}</div>
    <div class="modifyComment">
      <input
        id="modifiedComment-${commentObj.id}"
        class="modifycomment-description"
        type="text"
        style="display: none"
        placeholder="${commentObj.contents}"
      />
    </div>
    <div class="comment-create-date">${commentObj.createdAt}</div>
    <div class="comment-buttons"></div>
    <button onclick="modifyComment(event)" id=${commentObj.id} name=${commentObj.id} class="${
      isOwner ? "comment-modify-btn" : "noDisplay"
    }">수정
    <button
      id="comment-modify-done-btn-${commentObj.id}"
      name="${commentObj.id}"
      style="display: none"
      onclick="updateComment(event)"
    >
      완료<button>
        <button onclick="deleteComment(event)" id=${commentObj.commentID} name=${commentObj.id} class="${
      isOwner ? "comment-delete-btn" : "noDisplay"
    }">삭제
      </button>
    </button>`;

2. 수정버튼 눌렀을 때, 완료 버튼을 눌렀을 때 함수를 각각 만들어야 한다.

// 수정버튼 클릭
export const modifyComment = (event) => {
  // console.log(event.currentTarget.id);

  event.preventDefault();
  const id = event.currentTarget.id;
  // console.log("modivyComment", id);
  const udBtns = document.querySelectorAll(".comment-modify-btn"); //수정, 삭제 버튼
  const doneBtn = document.getElementById(`comment-modify-done-btn-${id}`); //완료버튼
  // console.log(doneBtn);
  // const content = document.getElementById("content"); //기존 내용 class="content">${commentObj.contents}
  const modifying = document.getElementById(`modifiedComment-${id}`); //수정 내용
  const preContent = document.getElementById(`preContent-${id}`);
  preContent.classList.add("noDisplay");

  event.target.style.display = "none"; //수정,삭제 버튼 안보이게
  doneBtn.style.display = "flex";
  modifying.setAttribute("value", modifying.placeholder);
  preContent.style.display = "none"; //기존 댓글 안보이게
  modifying.style.display = "flex";
  modifying.focus();
  //제목 input 내부에 미리 이전 데이터 넣어놓기 textarea는 미리설정이 되는데 input은 안돼서 여기서 설정함
  // console.log(modifying[1].children[0].placeholder);
};

//수정완료 버튼
export const updateComment = async (event) => {
  event.preventDefault();
  const id = event.currentTarget.name;
  // console.log(id);
  const modifiedComment = document.getElementById(
    `modifiedComment-${id}`
  ).value; //textarea 삽입, 수정 내용
  const postId = event.target.id; //firebase "post"컬렉션의 문서 id --> 필요없음
  // console.log(modifiedComment);

  const commentRef = doc(dbService, "comment", id);
  // console.log(commentRef);
  try {
    await updateDoc(commentRef, {
      contents: modifiedComment,
    });
    const path = window.location.hash.replace("#", "/");
    viewPost(path).then(() => {
      viewComments(path);
    });
  } catch (error) {
    alert(error);
  }
};