Hotfix/#259 lottie error

src/components/common/loading-animation.tsx

@@ -1,26 +1,27 @@
 'use client';
 
 import React from 'react';
-import Lottie from 'lottie-react';
+import dynamic from 'next/dynamic';
+import clsx from 'clsx';
 import Loading from '@/lottie/loading.json';
 import BlackLoading from '@/lottie/black-loading.json';
-import clsx from 'clsx';
+
+const Lottie = dynamic(() => import('lottie-react'), { ssr: false });
 
 type Props = {
   className?: string;
   option?: 'default' | 'black';
 };
 
-const LoadingAnimation = ({ className, option = 'default' }: Props) => {
-  return (
-    <div className='flex h-full w-full items-center justify-center'>
-      {option === 'black' ? (
-        <Lottie animationData={BlackLoading} loop={Infinity} autoplay={true} className={clsx('w-full', className)} />
-      ) : (
-        <Lottie animationData={Loading} loop={Infinity} autoplay={true} className={clsx('w-full', className)} />
-      )}
-    </div>
-  );
-};
+const LoadingAnimation = ({ className, option = 'default' }: Props) => (
+  <div className='flex h-full w-full items-center justify-center'>
+    <Lottie
+      animationData={option === 'black' ? BlackLoading : Loading}
+      loop
+      autoplay
+      className={clsx('w-full', className)}
+    />
+  </div>
+);
 
 export default LoadingAnimation;

src/components/common/lottie-animation.tsx

@@ -1,8 +1,10 @@
 'use client';
 
 import React, { forwardRef, useImperativeHandle, useRef, useEffect } from 'react';
-import Lottie, { LottieRefCurrentProps } from 'lottie-react';
+import { LottieRefCurrentProps } from 'lottie-react';
 import clsx from 'clsx';
+import dynamic from 'next/dynamic';
+const Lottie = dynamic(() => import('lottie-react'), { ssr: false });
 
 // 부모가 사용할 메서드 타입에 속도 제어 및 활성화 재생 추가
 export type LottieHandle = {