Firebase CRUD 구현 2

UPDATE 구현

1. 수정버튼과 수정할 카드를 연결한다.

<div class="profilebtn">
	<button type="button" class="btn btn-secondary updateboxOpenClose">수정</button>
	<button type="button" class="btn btn-secondary info_close_button">닫기</button>
</div>

$(".updateboxOpenClose").click(async function () {
	$("#updatebox").toggle();
})

 

updateboxOpenClose를 누르면 수정화면이 나오도록 만들었다.

 

2. 파일 덮어쓰기

$(".changebtn").click(async function () {
	let url = $('#url').val();
	let name = $('#name').val();
	let addr = $('#addr').val();
	let advantage = $('#advantage').val();
	let Mbti = $('#Mbti').val();
	let introduce = $('#introduce').val();
	let workstyle = $('#workstyle').val();
	let condition = $('#condition').val();
	let work = $('#work').val();

	const docRef = doc(db, "introduceTeamMembers", updateDocId);
	await updateDoc(docRef, {
		url: url,
		name: name,
		addr: addr,
		advantage: advantage,
		Mbti: Mbti,
		introduce: introduce,
		workstyle: workstyle,
		condition: condition,
		work: work
	});
	alert("수정 완료");
	window.location.reload();
});

#url, #name과 같이 카드에 직접 값을 받아와서 updateDoc를 실행하였다.

이미 카드를 생성할 때 썼던 이름과 겹치면 안되기 때문에 기존의 카드 생성시 참조이름을 'url_create'와 같이 끝에 _create를 붙이는 것으로 바꾸었다.

 

<div class="form-floating mb-3">
	<input type="email" class="form-control" id="addr_create" placeholder="name@example.com">
	<label for="floatingInput">블로그주소</label>
</div>
 <div class="form-floating mb-3">
 	<input type="email" class="form-control" id="advantage_create" placeholder="name@example.com">
  	<label for="floatingInput">장점</label>
</div>
...