diff --git a/src/pages/JoinComplete/JoinComplete.tsx b/src/pages/JoinComplete/JoinComplete.tsx index 0439cea..afddd53 100644 --- a/src/pages/JoinComplete/JoinComplete.tsx +++ b/src/pages/JoinComplete/JoinComplete.tsx @@ -1,4 +1,5 @@ import { useEffect, useRef } from "react"; +import lottie from "lottie-web"; import { httpClient } from "@/api/api"; import Rocket from "@/assets/lottie/Rocket.json"; import { Analytics } from "@/service/analytics"; @@ -6,8 +7,6 @@ import { usePersonalInfoStore } from "@/stores/personalInfoStore"; import KakaoChatroom from "./JoinComplete.KakaoChatroom"; import CompleteNotice from "./JoinComplete.Notice"; -import Lottie from "lottie-react"; - interface RequiredMemberInfo { studentId: string; name: string; @@ -16,6 +15,7 @@ interface RequiredMemberInfo { const JoinComplete = () => { const studentId = usePersonalInfoStore((s) => s.personalInfoData?.studentId); const identifiedRef = useRef(false); + const lottieContainerRef = useRef(null); useEffect(() => { Analytics.safeTrack("Complete_View", { category: "Complete" }); @@ -29,7 +29,6 @@ const JoinComplete = () => { identifiedRef.current = true; return; } - // 스토어에 없으면 백엔드에서 가져와서 식별 const profile = await httpClient.get("/members"); if (profile.studentId) { Analytics.identifyStudent(String(profile.studentId), profile.name); @@ -45,12 +44,24 @@ const JoinComplete = () => { void identify(); }, [studentId]); + useEffect(() => { + if (!lottieContainerRef.current) return; + const animation = lottie.loadAnimation({ + container: lottieContainerRef.current, + renderer: "svg", + loop: true, + autoplay: true, + animationData: Rocket, + }); + return () => { + animation.destroy(); + }; + }, []); + return ( - {/* Lottie 애니메이션 크기를 줄여 세로 공간을 확보합니다. */} -

등록이 완료됐어요