내가 구현하고 싶은 기능은
사용자의 이메일과 로그인 상태의 정보를 가져와서
로그인 상태일때에만 댓글의 CRUD가 가능하고,
내가 클릭한 특정 영화의 detail페이지에서 남긴 댓글을
해당 영화의 detial페이지에서만 CRUD가 가능하도록 하고 싶었다.
아래에 구현한 코드와 설명을 적어보겠다.
필요한 것
1. 사용자 이메일, 로그인 상태, movieID가 필요
2. 리뷰에 저장할 내용: 사용자 이메일, 댓글 내용, 시간, movieID 필요
필요한 함수
1. 로그인 상태 및 사용자의 가입 이메일 불러오기
2. 댓글 로드하는 함수
3. 댓글 버튼에 대한 이벤트 리스너 등록 함수
4. 수정 버튼에 대한 함수
5. 삭제 버튼에 대한 함수
이렇게 필요한것으로 보인다.
사용자 이메일 불러오기 및 로그인 상태 관리
해당 기능을 구현하기 위해 사용한 onAuthStateChanged 에 대해 설명하자면
Firebase Authentication에서 사용자의 인증 상태가 변경될 때마다 호출되는 함수이다.
이 함수는 인증 상태를 감지하고,
사용자가 로그인했는지 또는 로그아웃 했는지를 확인할 수 있게 해준다.
이런식으로 활용하여 써보았다.
댓글을 로드하는 함수
firestoreDB에 movieID를 필터링하여 commentsQuery에 할당하고
querySnapshot에 필터링된 댓글을 할당
commentLIst에 댓글 목로을 담을 요소를 선택하고
querySnapshot을 반복하면서 문서 데이터를 가져와서 movieID로 필터링된 댓글을 추가해준다.
댓글 버튼에 대한 이벤트 리스너 등록 함수
수정과 삭제 버튼 클릭 시
[수정할 때 사용 ]
commentID 에 클릭된 버튼이 포함된 가장 가까운 li요소를 찾아 해당 li요소의 data-id속성에서 댓글 ID를 할당
currentContent 도 마찬가지로 클릭된 버튼이 포함된 가장 가까운 li요소를 찾고 comment_text_wrap클래스를 가진 요소를 찾아서 텍스트 내용을 할당
댓글 수정 함수 호출
[삭제할 때 사용]
위와 비슷하므로 생략
여기까지 정리하고
내일은 페이지 로드 시 사용자의 로그인 유무와 내가 클릭한 영화에 대해서만
CRUD가 가능하도록 구현한 댓글기능 부분의 velog를 작성해보겠다.
