로티 사이트에서 적당한 파일을 골라서 json파일 프로젝트 폴더에 저장

1. 사용할 페이지에서 로딩중 일때 LoadingLottie 넣어주기

if (isLoading) {
    return <LoadingLottie text="내가 작성한 리뷰들을 불러오고 있어요!!" />;
  }

1. 로티에서 변경 가능 한 부분

• text - 용도에 맞게 작성
• className - 위치 조정 필요 시 변경
• text없이 lottie만 쓸 수 있음
• lottie크기 조정, width 나 height로 가능

// components/lottie/LoadingLottie.tsx
import React from "react";
import Lottie from "react-lottie-player";
import loadingLottie from "../../../public/lottie/loadingLottie.json";

type LoadingLottieProps = {
  text?: string;
  className?: string;
  width?: number;
  height?: number;
};

export default function LoadingLottie({
  text = "불러오는 중입니다...",
  className,
  width = 150,
  height = 150
}: LoadingLottieProps) {
  return (
    <div className={`flex flex-col items-center gap-5 pt-30 ${className}`}>
      <Lottie loop animationData={loadingLottie} play style={{ width, height }} />
      {text && <p className="font-Pretendard text-lg font-semibold text-gray-400">{text}</p>}
    </div>
  );
}