fix(FE-356): lottie-web 직접 사용 및 useEffect + ref로 제어하도록 수정

[KwonDeaGeun]

Summary by CodeRabbit

릴리스 노트

• 개선 사항
  • 애니메이션 로딩 및 렌더링 메커니즘을 최적화하여 페이지 성능을 개선했습니다.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 78224a21-ce03-40ba-ae58-e491cc20c80f

📥 Commits

Reviewing files that changed from the base of the PR and between 2803756 and 6ee6cfa.

📒 Files selected for processing (1)

• src/pages/JoinComplete/JoinComplete.tsx

Cache: Disabled due to data retention organization setting

Knowledge base: Disabled due to data retention organization setting

---

Walkthrough

JoinComplete 페이지에서 Lottie 애니메이션 구현 방식을 lottie-react의 <Lottie /> 컴포넌트에서 lottie-web의 loadAnimation 기반 방식으로 전환. lottieContainerRef를 추가하고 useEffect에서 마운트/언마운트 시 애니메이션 로드 및 정리를 처리.

Changes

Lottie 애니메이션 구현 방식 전환

Layer / File(s)	Summary
import 교체 및 loadAnimation 기반 애니메이션 구현 src/pages/JoinComplete/JoinComplete.tsx	lottie-react import를 lottie-web으로 교체하고, lottieContainerRef(HTMLDivElement ref)를 추가. useEffect에서 마운트 시 lottie.loadAnimation으로 Rocket 애니메이션을 컨테이너에 로드하고, 언마운트 시 animation.destroy()로 정리. JSX에서 기존 <Lottie /> 컴포넌트를 ref 연결 <div>로 대체하며, 인접 주석도 삭제.

Possibly related PRs

• dkuaegis/aegis-join#116: JoinComplete에 Rocket Lottie를 최초 적용/구성한 PR로, 이번 변경과 동일 파일의 Lottie 구현 방식에 직접 맞물림.
• dkuaegis/aegis-join#148: JoinComplete 페이지의 Lottie UI 크기 및 스타일 관련 수정을 포함하여 동일 파일의 렌더링 영역과 겹침.
• dkuaegis/aegis-join#188: vite.config.ts에서 lottie-web alias를 조정한 PR로, 이번 lottie-web 직접 사용 전환과 번들 해석 경로가 직접 맞물림.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}