지금 만들고 있는 팀프로젝트 '가배도'에 북마크 기능을 추가하고 싶다.
딱봐도 북마크처럼 생긴 이미지를 클릭하면, 현재 페이지의 파라미터 값을 유저의 북마크 배열에 추가하고 싶다.
1. 컬렉션 필드 수정하기
회원가입 하면서 users 컬렉션에 새로운 user 문서를 생성할 때 bookmark 필드를 추가한다.
바로 요기. 회원가입 시 기존에는 이메일, 닉네임, 아바타 이미지 주소 필드만 생성되도록 되어있었는데, 북마크 기능을 위해 일단 비어 있는 배열로 bookmark 필드가 만들어지도록 해준다.
2. users 문서 쉽게 찾도록 하기
로그인할 때(그리고 회원가입 하고 나서 바로 홈으로 이동할 때) 로컬스토리지에 uid, 즉 users 컬렉션에 있는 user 문서의 고유 id를 저장해준다.
회원가입을 해서 새로 만들어지는 users 컬렉션의 문서가 자동으로 갖게 되는 고유 id값이다.
어쩌구저쩌구가 로컬스토리지에 잘 저장되어 있는 것을 확인할 수 있다.
3. 클릭 핸들러 만들기
여기가 진짜 댕오래걸렸다.... 챗지피티 선생님과의 오랜 씨름... 진짜 CRUD 중에서 Update가 제일 어려운 거구나 새삼 느낀다.
그냥 새로운 게시글을 추가하는 거는 걍 하면 되는데, 기존 내용을 불러와서 필요한 부분만 수정한다는 게 참 쉬운 일이 아니다.
1. 아까 로컬스토리지에 저장해놓은 uid를 활용해서 db의 users 컬렉션에서 uid 문서 1개만 골라낸다. (userDocRef)
2. 이 userDocRef로 문서를 불러온다.
3. 불러온 내용 중에서 나에게 필요한 데이터만 뽑아낸다. (userData)
4. 새로운 항목이 추가된 updatedBookmark
5. ...를 활용해서 newData를 만들어 updateDoc한다.
여기까지 했을 때 북마크 아이콘을 클릭하면 핸들러가 실행되고, '북마크 업데이트 성공' 로그가 찍힌다.
내가 의도했던대로 bookmark 필드의 배열에 요소가 제대로 추가된 것을 확인할 수 있다.
<추가할 내용>
1. 로그인한 사용자만 북마크 기능 이용할 수 있도록
2. 북마크 추가하고 나면 아이콘 모양 바뀌도록
3. 마이페이지에서 북마크한 게시글 모아볼 수 있도록
++. 이미 북마크에 추가한 게시글에서 아이콘을 누를 시 북마크가 취소되도록....ㄷㄷㄷ... 너무 어려울 것 같다...
