[FEAT-FE] lottie-react 'requestanimationframe' handler took

[yanggwangseong]

💡 이슈 제목

lottie-react 'requestanimationframe' handler took. animation을 무한정 호출하면서 발생하는 오류

✨ 이슈 설명

• [x] lottie-react 무한정 로딩을 해결하기 위한 수정

• 아주 간단하게 useState에 따라 좋아요 애니메이션을 show/hidden 이런 간단한 애니메이션을 만들려고 했는데, useState에 따라서 animation을 보여주게 되면 해당 에러가 발생한다.
• 해결하기 위해서 useState와 해당 lottie파일을 가지고 여러가지 방법을 사용 해보았지만, 실패했고 상태값에 따라 호출하면 무한정 로딩에 걸림.
• 최종적인 삽질을 통해서 해결방법으로 HTMLElement를 이용하여 visibility style 속성을 이용하여 해결 하였다.

import Lottie, { LottieRefCurrentProps } from 'lottie-react';

...

const lottieRef = useRef<LottieRefCurrentProps>(null);

const handleLike = () => {
        if (lottieRef.current) {
            lottieRef.current.play();
            if (lottieRef.current?.animationContainerRef.current) {
                lottieRef.current.animationContainerRef.current.style.visibility =
                    'visible';
            }
        }

};
useEffect(() => {
    if (lottieRef.current?.animationContainerRef.current) {
        lottieRef.current.animationContainerRef.current.style.visibility =
                'hidden';
    }
});

const handleLottieComplete = () => {
        if (lottieRef.current) {
            lottieRef.current.stop();
            if (lottieRef.current?.animationContainerRef.current) {
                lottieRef.current.animationContainerRef.current.style.visibility =
                    'hidden';
            }

        }
};

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

• 난 포기를 모르는 개발자인듯, 이걸 방법을 꾸역꾸역 찾아서 사용하네.

🎯 이슈 생성 후 확인 내용

• [x] 이슈 제목 확인
• [x] Assignees 설정
• [x] Labels 설정
• [x] Projects 설정