Firebase 배우기 33 – 댓글 기능 (댓글 쓰기, 댓글 읽기, 삭제, 수정) 구현하기

document.getElementById('submitComment').addEventListener('click', function(event) {
        event.preventDefault(); // 버튼의 기본 동작을 막습니다.
var newComment = document.getElementById('newComment').value;
var author = 'anonymous';
var createdAt = firebase.firestore.Timestamp.now();
// 댓글 내용이 비어있는지 확인합니다.
if (newComment.trim() === '') {
          console.log("Comment content is empty. Please write a comment.");
return; // 댓글 내용이 비어있으면 함수를 종료합니다.
}
// prompt로 비밀번호를 입력받습니다.
var editpwd = prompt("댓글 삭제/수정을 위한 비밀번호를 입력하세요:");
// counterDB 컬렉션의 msgcounter 문서의 messageNumber 필드 값을 읽어옵니다.
        db.collection('counterDB').doc('msgcounter').get().then((doc) => {
if (doc.exists) {
var messageNumber = doc.data().messageNumber;
                messageNumber++;
                db.collection('counterDB').doc('msgcounter').update({
messageNumber: messageNumber
                }).then(() => {
                  console.log("Message number successfully updated!");
}).catch((error) => {
                  console.error("Error updating message number: ", error);
});

                db.collection('comment').add({
author: author,
content: newComment,
revision: 0,
상품연관번호: id,
editpwd: editpwd,
messageNumber: messageNumber,
createdAt: createdAt
                }).then(() => {
                  console.log("Comment successfully written!");
                  document.getElementById('newComment').value = ''; // 댓글 입력 필드를 비웁니다.
readComments(); // 댓글을 다시 읽어와 표시합니다.
}).catch((error) => {
                  console.error("Error writing comment: ", error);
});
} else {
                console.log("댓글 Counter DB값을 찾을수 없습니다!");
}
}).catch((error) => {
          console.error("Error reading document: ", error);
});
}); 

function readComments() {
// 새로운 코드: "comment" 컬렉션에서 데이터를 가져옵니다.
var commentsTable = document.getElementById('comments'); // 댓글을 표시할 테이블 요소를 가져옵니다.

  db.collection('comment')
.where('상품연관번호', '==', id) // '상품연관번호' 필드가 'id'와 같은 문서만 가져옵니다.
.orderBy('createdAt', 'desc') // 'createdAt' 필드를 기준으로 내림차순으로 정렬합니다
.get()
.then((querySnapshot) => {
// 기존에 표시된 댓글을 모두 삭제합니다.
while (commentsTable.rows.length > 1) {
                  commentsTable.deleteRow(1);
}

      querySnapshot.forEach((doc) => {
var data = doc.data();
// 필요한 필드를 가져옵니다.
var content = data.content;
var author = data.author;
var createdAt = data.createdAt;
// Firestore timestamp를 JavaScript Date 객체로 변환합니다.
var date = new Date(doc.data().createdAt.toDate());
// 원하는 형식으로 날짜를 변환합니다.
var datePart = date.toLocaleDateString('ko-KR', { year: '2-digit', month: '2-digit', day: '2-digit' });
// 원하는 형식으로 시간을 변환합니다. hour12 옵션을 false로 설정하여 24시간 형식으로 표시합니다.
var timePart = date.toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit', hour12: false });
// 변환된 날짜와 시간을 합칩니다.
var formattedDate = datePart + '<br>' + timePart;
// 테이블 로우를 생성합니다.
var row = commentsTable.insertRow();
var authorCell = row.insertCell();
var contentCell = row.insertCell();
var createdAtCell = row.insertCell();
var editCell = row.insertCell(); // 수정 버튼을 위한 셀을 추가합니다.
var deleteCell = row.insertCell(); // 삭제 버튼을 위한 셀을 추가합니다.
// 셀의 너비를 설정합니다.
        editCell.style.width = "15px";
        deleteCell.style.width = "15px";

        authorCell.textContent = author;
        contentCell.textContent = content;
        createdAtCell.innerHTML = formattedDate; // 수정된 부분
        createdAtCell.style.textAlign = "center"; // 추가된 부분
// "E" 버튼을 생성하고, 클릭 이벤트 핸들러를 연결합니다.
var editButton = document.createElement("button");
        editButton.textContent = "E";
        editButton.style.border = "2px solid #4CAF50"; // 녹색 외곽선을 추가합니다.
        editButton.addEventListener('click', function() {
// 사용자에게 비밀번호를 입력하라는 메시지를 표시합니다.
var password = prompt("댓글 작성시 입력한 비밀번호는..?");
if (password == data.editpwd) {
// 비밀번호가 일치하면, 사용자에게 수정할 댓글을 입력하라는 메시지를 표시합니다.
var newContent = prompt("수정할 댓글을 입력하세요:");
              db.collection('comment').doc(doc.id).update({
content: newContent, // 입력내용으로 'content'업데이트
revision: firebase.firestore.FieldValue.increment(1),
createdAt: firebase.firestore.Timestamp.now()
}).then(() => {
                    console.log("Comment successfully updated!");
                    contentCell.textContent = newContent;
var updateDate = new Date();
var updateDatePart = updateDate.toLocaleDateString('ko-KR', { year: '2-digit', month: '2-digit', day: '2-digit' });
var updateTimePart = updateDate.toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit', hour12: false });
var formattedUpdateDate = updateDatePart + '<br>' + updateTimePart;
                    createdAtCell.innerHTML = formattedUpdateDate;
}).catch((error) => {
                    console.error("Error updating comment: ", error);
});
} else {
alert("비밀번호가 일치하지 않습니다. 댓글이 수정되지 않았습니다.");
}
});
            editCell.appendChild(editButton);
// "D" 버튼을 생성하고, 클릭 이벤트 핸들러를 연결합니다.
var deleteButton = document.createElement("button");
        deleteButton.textContent = "D";
        deleteButton.style.border = "2px solid #f44336";  
        deleteButton.addEventListener('click', function() {
var password = prompt("댓글 작성시 입력한 비밀번호는..?");
if (password == data.editpwd) {
              db.collection('comment').doc(doc.id).delete().then(() => {
                console.log("Comment successfully deleted!");
                commentsTable.deleteRow(row.rowIndex);
}).catch((error) => {
                console.error("Error removing comment: ", error);
});
} else {
alert("Incorrect password. The comment was not deleted.");
}
});
          deleteCell.appendChild(deleteButton);
});
}).catch((error) => {
        console.error("Error reading comments: ", error);
});
}