feat: Lottie 애니메이션 지원을 위한 DotLottie 라이브러리 추가 및 홈 페이지에 애니메이션 적용

Author: minsgy

package.json

@@ -18,6 +18,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.27.15",
     "@hotjar/browser": "1.0.9",
+    "@lottiefiles/dotlottie-react": "^0.15.0",
     "@number-flow/react": "^0.5.10",
     "@radix-ui/themes": "3.2.1",
     "@tanstack/react-query": "^5.84.1",

pnpm-lock.yaml

@@ -1,20 +1,42 @@
+import { type DotLottie, DotLottieReact } from "@lottiefiles/dotlottie-react";
 import { Flex } from "@radix-ui/themes";
 import { createFileRoute } from "@tanstack/react-router";
+import { useEffect, useState } from "react";
+import assetLottie from "@/assets/lottie/home-logo.lottie";
 
 export const Route = createFileRoute("/")({
   component: Home,
 });
 
 const KAKAO_LOGIN_URL = `https://dev-api.holdy.kr/login/kakao?redirect_uri=${window.location.origin}/oauth2/redirect`;
 
+const intermission = 1500;
 function Home() {
+  const [dotLottie, setDotLottie] = useState<DotLottie | null>(null);
+
+  useEffect(() => {
+    const onComplete = () => {
+      setTimeout(() => {
+        dotLottie?.play();
+      }, intermission);
+    };
+
+    dotLottie?.addEventListener("complete", onComplete);
+
+    return () => {
+      dotLottie?.removeEventListener("complete", onComplete);
+    };
+  }, [dotLottie]);
+
   return (
     <Flex direction="column" gap="5" className="h-full px-10 py-4">
       <Flex direction="column" align="center" gap="4px" className="mt-[160px]">
-        <img
-          src="/images/logo.png"
-          alt="홀디 로고"
-          className="w-[198px] h-[198px] rounded-full bg-neutral-300"
+        <DotLottieReact
+          dotLottieRefCallback={setDotLottie}
+          src={assetLottie}
+          autoplay
+          loop={false}
+          className="w-[198px] h-[198px]"
         />
         <h2 className="t-p-22-sb pt-6">홀디에 오신 걸 환영해요 :)</h2>
         <p className="t-p-14-m">내 페이스에 맞춰 하나씩 올라가 볼까요?</p>

src/assets/lottie/home-logo.lottie

@@ -1,3 +1,8 @@
 /// <reference types="vite/client" />
 
 declare const __MSW_ENABLED__: boolean;
+
+declare module "*.lottie" {
+  const content: string;
+  export default content;
+}

src/routes/index.tsx

@@ -15,6 +15,7 @@ const dirname =
 
 // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
 export default defineConfig({
+  assetsInclude: ["**/*.lottie"],
   plugins: [
     react(), 
     tanstackRouter({