처음 기획
- 로그인 시 좋아요 누른 시리즈 id 리스트를 받는다
- 좋아요 시리즈 id리스트를 전역상태에 저장한다
- 좋아요를 할 시 - 서버요청 + 전역상태의 좋아요 시리즈 id리스트에 새로운 id를 추가한다
- 좋아요 해제를 할 시 - 서버요청 + 전역상태의 좋아요 시리즈 id리스트에 해제할 id를 삭제한다
- 좋아요 ui를 렌더링 해야할 시 - 시리즈 각각의 id가 전역상태의 좋아요 시리즈 리스트에 포함되는지 여부로 스타일을 한다
- api로 받아온 seriesId를 Like컴포넌트의 props으로 넘긴다
- Like컴포넌트 내부에서 (전역 상태인) 좋아요 시리즈 id리스트를 불러와 seriesId props가 포함되는지 판단해서 스타일을 적용한다
최종 구현 방법
- 시리즈 정보 get시(상세,리스트)에 토큰이 보내진다면 그 사용자의 isLike를 상태를 같이 보내준다
- 좋아요 추가 삭제 api요청 전에 상태를 먼저 변경해준다(낙관적 업데이트)
- 좋아요의 카운트는 실시간으로 불러오기에 한계가 있다
- LikeToggle 컴포넌트에 likeCount를 받아와 상태에 저장 후 토글이 될 때 +,-1을 해주어 낙관적 업데이트를 해준다
- 로그인 안 되어있을 시 좋아요 버튼 보여지면 안되게 조건부 렌더링한다