<Noweet />
컴포넌트에서 해당 글 유저라면 Update버튼이 노출되게 구현: 로그인 성공 시 자신과 타유저의 글을 열람(Read)할 수 있는 페이지
: 내 포스팅 : CRUD(1) : Create/Read/Update/Delete CREATE ! 에서 작성한 noweet을 출력해줄 페이지
: 수정(Update)버튼을 클릭하면 수정UI를 출력하여 글 수정 후 firebase에 저장해줄꺼임
: state
editing(수정폼 노출 여부 결정, 초기값 : false)
newNoweet(수정할 글 저장, 초기값 : 현재 글 내용)
: function
toggleEditing(editing값을 반대로 변경)
※true면 → false, false면 → true
onChange(수정폼에서 글 입력 시 newNoweet에 value값 저장)
onSubmit(수정 완료한 글을 firebase상에 업로드)
dbService.doc(경로).update({...}) : firebase 데이터 업데이트 명령어
editing으로 수정버튼을 클릭했는지 체크하고(버튼 클릭 시 toggleEditing
실행),
editing===true
이면 수정폼 UI 보여줌
수정완료하면 submit버튼의 onSubmit()
으로 firebase에 업로드
업로드 완료하면 또 toggleEditing
실행하여 editing을 false
로 변경한다.
※ toggleEditing
이 스위치 역할 ❗ (true=수정폼UI / false=글 Read UI)
text가 변경되어 저장되었다.
이 상황은 실시간으로 이루어지며,
createAt, createId를 확인해보면 변경전과 동일한 유저의 동일한 트윗임을 확인할 수 있다 !
editing, toggleEditing
과 같이 스위치를 만들자const toggleEditing = () => { setEditing((prev) => !prev) }
이 문법 유용할듯 👍🏻isOwner
와 같은 변수로 해당 유저의 글인지 확인하자