Feature/53-feed-like-front

[yanggwangseong]

• Closes #53

✨ 구현 기능 명세

• 자신의 좋아요 추가
• 피드 좋아요 총 갯수 추가

🎁 주목할 점

😭 어려웠던 점

• 역시나 lottie-react에서 어려움을 겪었다.

const [isLottie, setIsLottie] = useState<boolean>(false);

<Lottie
        className={styles.lottie_container}
        animationData={heartAnimation}
        loop={false}
        lottieRef={lottieRef}
        onComplete={handleLottieComplete}
    />

// 내가 찾은거 lottie가 Complete완료가 되면 호출되는 함수
const handleLottieComplete = () => {
if (lottieRef.current) {
    lottieRef.current.stop();
    if (lottieRef.current?.animationContainerRef.current) {
        lottieRef.current.animationContainerRef.current.style.visibility =
            'hidden';
    }
    setIsLottie(false);
    //lottieRef.current.animationContainerRef.current?.style.visibility = 'hidden'
    //lottieRef.current.animationContainerRef.current?.remove();
  }
};

useEffect(() => {
if (lottieRef.current) {
    lottieRef.current.stop();
    if (lottieRef.current?.animationContainerRef.current) {
        lottieRef.current.animationContainerRef.current.style.visibility =
            'hidden';
    }
    if (isLottie) {
        lottieRef.current.play();
        if (lottieRef.current?.animationContainerRef.current) {
            lottieRef.current.animationContainerRef.current.style.visibility =
                'visible';
        }
    }
}
}, [isLottie]);

const { mutate: feedLikeSync } = useMutation(
        ['feed-like'],
        (data: { feedId: string; page: number }) =>
            FeedService.updateLike(data.feedId),
        {
            onMutate: variable => {
                //Loading.hourglass();
            },
            onSuccess(data, variable) {
                const pageValue = variable.page;
                if (data === true) {
                    setIsLottie(true);
                    Notify.success('좋아요를 누르셨습니다');
                }
                if (data === false) {
                    Notify.warning('좋아요를 취소하셨습니다');
                }

                refetch({ refetchPage: (page, index) => index === pageValue - 1 });

                //Loading.remove();
                //if (data) Report.success('성공', `좋아요를 성공 하였습니다`, '확인');
                //Report.success('성공', `좋아요를 취소 하였습니다`, '확인');
            },
            onError(error) {
                if (axios.isAxiosError(error)) {
                    Report.warning(
                        '실패',
                        `${error.response?.data.message}`,
                        '확인',
                        () => Loading.remove(),
                    );
                }
            },
        },
    );

1. 변경 된 점은 원래는 lottie animation을 먼저 start하고 이후에 update쿼리 서비스를 날리려고 했으나, 그렇게 하게 되면 동작 자체를 안한다.
2. 그래서 like update service axios를 먼저 실행 시킨 후 useEffect와 isLottie 상태값에 따라 애니메이션을 보여주는것으로 변경 하였다.

   🌄 스크린샷