feat:게시물 좋아요 및 게시물 신고, 게시판 페이지네이션 구현

구현내용

좋아요 기능 : 사용자를 고려하여 Zustand또는 useState를 통한 좋아요 개수와 좋아요 여부를 관리하려 했지만 찾아본 결과 react-query를 통해 옵티미스틱 업데이트를 이용해 구현하는 것이 서버 비용과 사용자 측면에서도 서버통신없이 좋아요 개수가 바로 적용되는 등의 장점이 있어 react-query로 구현했습니다.
framer-motion를 이용하여 각 페이지 이동 시 부드러운 애니메이션을 구현했습니다.
게시글 신고 시 알람창을 통해 신고 사유 선택 후 서버에 제출합니다.(alert관련기능은 모두 sweetalert2로 바꿀 예정)
페이지네이션 : 게시판 한 페이지에 6개까지 게시글을 등록하고 페이지를 넘길 수 있도록 구현했습니다.

구현코드

좋아요기능

export const useLikeApi = (post) => {
  //게시물 좋아요 개수
  const { data: likesCnt, refetch: likeCnt } = useQuery({
    queryKey: ["likesCnt", post.id],
    queryFn: async () => {
      const response = await api.get(`/posts/${post.id}`);
      //console.log("좋아요", response.data.likeCnt);
      return response.data.likeCnt;
    },
  });

  //게시글 좋아요 여부 확인
  const { data: isLiked, refetch: likeStatus } = useQuery({
    queryKey: ["likeStatus", post.id],
    queryFn: async () => {
      const response = await api.get(`/posts/${post.id}/likes/check`);
      //좋아요 되어 있으면 true
      //console.log(response);
      return response.data;
    },
    //refetchInterval: 1000, //1초마다 한 번씩 수동 통신
  });

  //Mutation
  //좋아요 토글
  const toggleLikehandler = useMutation({
    mutationFn: async () => {
      //좋아요가 되어있으면 -> 좋아요 취소
      if (isLiked) {
        await api.delete(`/posts/${post.id}/likes`);
      }
      //좋아요가 안되어있으면 -> 좋아요
      else {
        await api.post(`/posts/${post.id}/likes`);
      }
    },
    //mutation 함수 실행 전 실행.
    onMutate: async () =>
      //쿼리에서 값 불러오기
      {
        //충돌 방지
        await queryClient.cancelQueries(["likesCnt", post.id]);
        await queryClient.cancelQueries(["likeStatus", post.id]);
        //현재 좋아요 개수와 상태가져오기
        const prevLikeCnt = queryClient.getQueriesData(["likesCnt", post.id]);
        const prevLikeStatus = queryClient.getQueriesData([
          "likeStatus",
          post.id,
        ]);
        //서버 응답 기다리지 않고 업뎃
        queryClient.setQueryData(["likeStatus", post.id], !isLiked);
        queryClient.setQueryData(["likesCnt", post.id], (old) => {
          {
            return isLiked ? old - 1 : old + 1;
          }
        });
        return { prevLikeCnt, prevLikeStatus };
      },
    //에러시
    onError: (err, variables, context) => {
      queryClient.setQueryData(["likesCnt", post.id], context.prevLikeCnt);
      queryClient.setQueryData(["likeStatus", post.id], context.prevLikeStatus);
    },
    //mutation 성공시
    onSettled: () => {
      queryClient.invalidateQueries(["likeStatus", post.id]);
      queryClient.invalidateQueries(["likeCnt", post.id]);
    },
  });

  const toggleLikes = () => {
    toggleLikehandler.mutate();
  };

  return {
    likeCnt: likesCnt,
    isLiked,
    toggleLikes,
    isLoading: toggleLikehandler.isLikeLoading,
  };
};

페이지네이션

export default function Pagination({ total, limit, page, setPage }) {
  //페이지 올림
  const numPages = Math.ceil(total / limit);

  return (
    <>
      <nav>
        <LeftButton onClick={() => setPage(page - 1)} disabled={page == 1}>
          &lt;
        </LeftButton>
        {Array(numPages)
          .fill()
          .map((v, i) => (
            <Button
              key={i + 1}
              onClick={() => setPage(i + 1)}
              aria-current={page === i + 1 ? "page" : null}
            >
              {i + 1}
            </Button>
          ))}
        <RightButton
          onClick={() => setPage(page + 1)}
          disabled={page === numPages}
        >
          &gt;
        </RightButton>
      </nav>
    </>
  );
}