HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🧚
[1기]최종 프로젝트 데브코스
/
📜
[팀13] 사각사각 ✏️
/
🍪
티키타카
/
좋아요 기능 구현 시도

좋아요 기능 구현 시도

 

처음 기획

  1. 로그인 시 좋아요 누른 시리즈 id 리스트를 받는다
  1. 좋아요 시리즈 id리스트를 전역상태에 저장한다
  1. 좋아요를 할 시 - 서버요청 + 전역상태의 좋아요 시리즈 id리스트에 새로운 id를 추가한다
  1. 좋아요 해제를 할 시 - 서버요청 + 전역상태의 좋아요 시리즈 id리스트에 해제할 id를 삭제한다
  1. 좋아요 ui를 렌더링 해야할 시 - 시리즈 각각의 id가 전역상태의 좋아요 시리즈 리스트에 포함되는지 여부로 스타일을 한다
      • api로 받아온 seriesId를 Like컴포넌트의 props으로 넘긴다
      • Like컴포넌트 내부에서 (전역 상태인) 좋아요 시리즈 id리스트를 불러와 seriesId props가 포함되는지 판단해서 스타일을 적용한다
 

최종 구현 방법

  • 시리즈 정보 get시(상세,리스트)에 토큰이 보내진다면 그 사용자의 isLike를 상태를 같이 보내준다
  • 좋아요 추가 삭제 api요청 전에 상태를 먼저 변경해준다(낙관적 업데이트)
  • 좋아요의 카운트는 실시간으로 불러오기에 한계가 있다
    • LikeToggle 컴포넌트에 likeCount를 받아와 상태에 저장 후 토글이 될 때 +,-1을 해주어 낙관적 업데이트를 해준다
  • 로그인 안 되어있을 시 좋아요 버튼 보여지면 안되게 조건부 렌더링한다