Merge pull request #98 from urdego/feature/#92-apply-new-character

Feat/#92: 파비콘, 로딩 스피너 적용

app/metadata.ts

@@ -7,7 +7,7 @@ export const metadata: Metadata = {
   },
   description: 'Where am I? Urdego!',
   icons: {
-    icon: '/favicon-outline.svg',
+    icon: '/favicon.svg',
   },
 };
 

components/Common/LoadingSpinner/LoadingSpinner.tsx

@@ -1,9 +1,9 @@
 'use client';
 
 import React from 'react';
-import Image from 'next/image';
-import LoadingSpinnerGif from '@/styles/Icon/LoadingSpinner.gif';
-import { LoadingOverlay, SpinnerWrapper } from './LoadingSpinner.style';
+import { LoadingOverlay } from './LoadingSpinner.style';
+import LottieComponent from '@/components/Common/Lottie/LottieComponent';
+import animationData from '@styles/lottie/loading.json';
 
 interface LoadingSpinnerComponentProps {
   isLocationRegister?: boolean;
@@ -14,15 +14,7 @@ const LoadingSpinnerComponent: React.FC<LoadingSpinnerComponentProps> = ({
 }) => {
   return (
     <LoadingOverlay $isLocationRegister={isLocationRegister}>
-      <SpinnerWrapper>
-        <Image
-          src={LoadingSpinnerGif}
-          alt="로딩 중..."
-          width={185}
-          height={185}
-          loading="lazy"
-        />
-      </SpinnerWrapper>
+      <LottieComponent animationData={animationData} />
     </LoadingOverlay>
   );
 };

components/Common/Lottie/LottieComponent.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import Lottie from 'lottie-web';
+
+interface LottiComponentProps {
+  animationData: unknown;
+}
+const LottieComponent = ({ animationData }: LottiComponentProps) => {
+  const animationContainer = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (!animationContainer.current) return;
+
+    const animation = Lottie.loadAnimation({
+      container: animationContainer.current as HTMLDivElement,
+      renderer: 'svg',
+      loop: true,
+      autoplay: true,
+      animationData: animationData,
+    });
+
+    return () => {
+      animation.destroy();
+    };
+  }, [animationData]);
+
+  return <div ref={animationContainer} />;
+};
+
+export default LottieComponent;

package.json

@@ -21,6 +21,7 @@
     "dotenv": "^16.4.7",
     "exifr": "^7.1.3",
     "framer-motion": "^11.13.1",
+    "lottie-web": "^5.12.2",
     "next": "14.2.18",
     "next-auth": "^4.24.11",
     "react": "^18",