[next/react] 로티(lottie) 적용하기

1. 원하는 로티 파일 찾아서 다운받기

https://lottiefiles.com/featured-free-animations

Featured Free Lottie Animations - Curated Motion Designs

특정 요소 download 버튼 누르면 로그인 절차를 걸치고, 내 대시보드에 넣어준다. 우측 의 lottie json 에 mouse hover 하면 다운로드 버튼 나옴

 

2. 다운받은 파일을 프로젝트 내의 폴더로 옮기기

 

3. lottie player 설치

npm i react-lottie-player

 

 

4. Lottie rendering

공식 문서 : https://lottiereact.com/components/Lottie#props

 

 

사용법

<Lottie loop animationData={파일 object 넣기} play />

 

코드 예시

'use client';

import loading from '@/public/lottie/loading.json';

import Lottie from 'react-lottie-player';

function Loading() {

  return (

    <>

      <div className='absolute top-0 bottom-0 left-0 right-0 w-screen h-screen bg-black opacity-30' />

      <p className='w-full py-20 flex items-center justify-center'>

        <Lottie loop animationData={loading} play />

      </p>

    </>

  );

}

export default Loading;