From 6ee6cfa972b13e2133a0aadc75067011c925287e Mon Sep 17 00:00:00 2001
From: Kwon DaeGeun <dk31415@naver.com>
Date: Wed, 17 Jun 2026 17:21:03 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20lottie-web=20=EC=A7=81=EC=A0=91=20?=
 =?UTF-8?q?=EC=82=AC=EC=9A=A9=20=EB=B0=8F=20useEffect=20+=20ref=EB=A1=9C?=
 =?UTF-8?q?=20=EC=A0=9C=EC=96=B4=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/JoinComplete/JoinComplete.tsx | 25 ++++++++++++++++++-------
 1 file changed, 18 insertions(+), 7 deletions(-)

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<HTMLDivElement>(null);
 
   useEffect(() => {
     Analytics.safeTrack("Complete_View", { category: "Complete" });
@@ -29,7 +29,6 @@ const JoinComplete = () => {
           identifiedRef.current = true;
           return;
         }
-        // 스토어에 없으면 백엔드에서 가져와서 식별
         const profile = await httpClient.get<RequiredMemberInfo>("/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 (
     <Wrapper>
-      {/* Lottie 애니메이션 크기를 줄여 세로 공간을 확보합니다. */}
-      <Lottie
-        animationData={Rocket}
-        loop={true}
+      <div
+        ref={lottieContainerRef}
         style={{ width: 240, height: 240, margin: "0 auto" }}
       />
       <p className="mt-4 font-bold text-3xl">등록이 완료됐어요</p>