[front] 북마크 optimistic UI로 개선

북마크 custom hook 제작

const setBookmark = async (
userId: string,
artist: ArtistData,
isBookmark: boolean
) => {
const newBookmarks = bookmarks?.data?.filter(
  (b: ArtistData) => b !== artist
);
mutate(getUserBookmark(userId), {
  optimisticData: { data: newBookmarks },
  populateCache: false,
  revalidate: false,
  rollbackOnError: true,
});

if (isBookmark) {
  console.log(1);
  await deleteApi(`/artist/bookmark/${userId}/${artist._id}`);
} else {
  console.log(2);
  await postApi(`/artist/bookmark/${userId}/${artist._id}`, {
    body: { userId: userId, artistId: artist._id },
  });
}
};

사용자 북마크 조회하는 부분 mutate의 optimisticData 옵션 적용하여 optimistic UI 적용 기존 북마크 리스트에서 업데이트 하는 아티스트 카드만 필터링하여 사용자 입장에서 데이터 변경이 즉시 이루어지도록 함 적용전 1~2s -> 적용 후 0.01s (체감상 즉시)

MintaekCho / consert-app

[front] 북마크 optimistic UI로 개선 #47