오늘 한 일
멤버 카드 삭제 기능을 수정했다
멤버 카드 수정 기능을 추가했다
내 페이지를 배포하는 방법을 배웠다
멤버 삭제 기능
$('.deleteBtn').click(deleteCard)
async function deleteCard() {
const card = $(this).closest('.memberCard');
let docId = card.attr('id').split('_')[1];
const docRef = doc(db, "profiles", docId);
try {
await deleteDoc(docRef);
alert("삭제 완료!");
window.location.reload();
} catch (error) {
console.error(error);
}
}
기존에 모든 데이터를 비교해 문서를 찾는 방식에서 카드 id를 통해 문서를 찾는 방식으로 수정했다.
docs.forEach((doc) => {
let row = doc.data();
let image = row['image'];
let name = row['name'];
let mbti = row['mbti'];
let merit = row['merit'];
let cbst = row['cbst'];
let blog = row['blog'];
let git = row['git'];
let temp_html = `<div class="col memberCard" id="card_${doc.id}">
이를 위해 카드를 db에서 받아와서 생성할 때, 문서 id를 html에 기록하도록 했다.
-> 이러면 일반 사용자들이 db에 문서가 저장된 id를 알 수 있게 되어서 보안상에 문제가 있을 것 같다.
멤버 카드 수정 기능
async function updateCard(docRef) {
let name = $('#name').val();
// FIXME 파일로 입력받고 DB에 업로드 후 다운로드 받은 url 값 넣어야 함. 저장 테스트를 위해 주석 처리함.
//let image = $('#image').val();
let image = '';
let mbti = $('#mbti').val();
let merit = $('#merit').val();
let cbst = $('#cbst').val(); // Collaboration style 약자 cbst
let blog = $('#blog').val();
let git = $('#git').val();
let doc = {
'name': name,
'image': image,
'mbti': mbti,
'merit': merit,
'cbst': cbst,
'blog': blog,
'git': git
};
await setDoc(docRef, doc);
alert('수정 완료!');
window.location.reload();
}
기존의 멤버 카드 등록 코드에서 일부분만 수정해서 완성했다. (addDoc -> setDoc)
다만 updateCard함수에 필요한 docRef가 동적으로 바뀌기 때문에 매개변수로 docRef를 받도록 했다.
//버튼 클릭 이벤트
$('#cards').on('click', `button`, function () {
const btnId = $(this).attr('id');
const action = btnId.split('-')[0];
const cardId = btnId.split('-')[1];
if (action === 'commentBtn') { //방명록 쓰기
...
} else if (action === 'updateBtn') { //멤버 정보 수정
const _curCard = $(this).closest('.memberCard');
let docId = _curCard.attr('id').split('_')[1];
const docRef = doc(db, "profiles", docId);
let name = _curCard.find($('.cardName')).text();
let mbti = _curCard.find($('.cardMBTI')).text();
let merit = _curCard.find($('.cardMerit')).text();
let cbst = _curCard.find($('.cardCbst')).text();
let blog = _curCard.find($('.cardBlog')).text();
let git = _curCard.find($('.cardGit')).text();
$('#name').val(name);
$('#mbti').val(mbti);
$('#merit').val(merit);
$('#cbst').val(cbst);
$('#blog').val(blog);
$('#git').val(git);
$('#addbtn').text('수정하기');
$('#addbtn').off('click');
$('#addbtn').click(() => {
updateCard(docRef);
});
$('#postingbox').show();
} else if (action === 'removeBtn') { //멤버 카드 삭제
$('#postingbox').toggle();
} else if (action === 'deleteBtn') { //멤버 카드 삭제
alert('삭제 기능 구현 필요')
} else if (action === 'commentSaveBtn') { //방명록 저장
...
} else if (action == '') {
}
});
카드 수정 기능을 작업하려고 보니 팀원이 이런 코드를 작성해놓았다...
카드의 버튼을 클릭할때마다 버튼의 이름에 따라 다른 기능을 수행하도록 한 코드인데, 여기서 카드 수정하기 버튼을 누르면 기존의 카드 등록하기 버튼의 기능이 수정하는 기능으로 바뀌도록 만들어야했다.
버튼의 click이벤트 콜백 함수를 바꿔주면 되는 간단한 작업이었다.
하지만 이런거 만들거면 나한테도 미리 말을 좀 해줬으면 한다...
내 페이지 배포하기
그냥 깃허브에 프로젝트를 올리고 몇가지 설정만 하면 되는 간단한 작업이다.
내일은 페이지 소개 영상을 찍어야 하는데, 내 모니터가 21:9 비율의 wqhd 모니터라 16:9 영상을 녹화하기가 어렵다... 일단 팀원들한테 부탁을 해봐야겠다.