[미니 프로젝트] 방명록 데이터 Firebase에 등록하기!

미니프로젝트로 자기소개 페이지를 만들면서 방명록도 구현해 보았다.
DB는 firebase를 사용하였다.

HTML

<h3>방명록 작성</h3>
       <div id="guestbooklabel">
          <form name="f">
            <table id="t1">
              <tr>
                <td>
                  <div class="form-floating mb-3">
                    <input
                      type="text"
                      name="writer"
                      class="form-control"
                      id="writer"
                      style="width: 500px"
                      placeholder="작성자" />
                    <label for="floatingInput">작성자</label>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="form-floating mb-3">
                    <input type="password" name="pwd" class="form-control" id="pwd" placeholder="Password" />
                    <label for="floatingPassword">Password</label>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="form-floating mb-3">
                    <textarea
                      type="text"
                      name="content"
                      class="form-control"
                      placeholder="내용을 입력해 주세요."
                      id="content"
                      style="height: 100px"></textarea>
                    <label for="내용을 입력해 주세요.">내용을 입력해 주세요.</label>
                  </div>
                </td>
              </tr>

              <tr>
                <td><input id="savebtn" class="btn btn-primary mb-3" type="button" value="작성하기" /></td>
              </tr>
            </table>
          </form>
        </div>
        <h3>방명록</h3>
        <div id="list">
        </div>
      </div>

JavaScript

const commentObj = {
  commentId: "",
  commentName: "",
  commentPassword: "",
  commentContents: "",
  regDate: "",
};

const getDate = () => {
  let today = new Date();

  let year = String(today.getFullYear()); // 년도
  let month = String(today.getMonth() + 1).padStart(2, "0"); // 월
  let date = String(today.getDate()).padStart(2, "0"); // 날짜
  const hours = String(today.getHours()).padStart(2, "0");
  const minutes = String(today.getMinutes()).padStart(2, "0");
  const seconds = String(today.getSeconds()).padStart(2, "0");
  return `${year}.${month}.${date} ${hours}:${minutes}:${seconds}`;
};

const writer = document.querySelector("#writer");
const pwd = document.querySelector("#pwd");
const content = document.querySelector("#content");
const savebtn = document.querySelector("#savebtn");
const list = document.querySelector("#list");

savebtn.addEventListener("click", async function (event) {
  commentObj.commentId = Date.now();
  commentObj.commentName = writer.value;
  commentObj.commentPassword = pwd.value;
  commentObj.commentContents = content.value.replaceAll("\n", "<br>");
  commentObj.regDate = getDate();

  await setDoc(doc(commentRef, `${Date.now()}`), commentObj)
    .then(refDoc => {
      alert("등록완료");
      createCommentCard();
    })
    .catch(error => {
      console.error(error);
    });
});

/*방명록 불러오기*/
async function createCommentCard() {
  const dataList = await getDocs(query(commentRef, orderBy("regDate", "desc")));
  list.innerHTML = "";
  dataList.forEach(item => {
    const commentDiv = document.createElement("div");
    commentDiv.innerHTML = `
  작성자:<span id="w_1">${item.data().commentName}</span>
  <br/>
   내용:<span id="c_1">${item.data().commentContents}</span>
   <br/>
  `;
    list.appendChild(commentDiv);
  });
}

await createCommentCard();

firebase에 방명록 '작성자', '패스워드', '내용'을 저장한후

<div id="list"></div>

위의 HTML에 방명록 데이터 중 '작성자', '내용'이 등록 되도록 구현하였다.