📂 작업 내용

closes #10

• Lottie 애니메이션 재생 라이브러리 'dotlottie-react' 로 통일
• .lottie 파일들 동적 import 로 변경
• setTimeout 삭제
• 사용 안하는 파일들 삭제

💡 자세한 설명

• Lottie 애니메이션 재생 라이브러리 'dotlottie-react' 로 통일
  • react-lottie-player 라이브러리 삭제
  • 애니메이션 파일 .lottie로 통일
• .lottie 파일들 동적 import 로 변경
  • 최상단에 정적으로 import 하고 있던 애니메이션 파일들을 필요한 시점에 로딩하는 동적 import로 변경
  • 모달이 열릴 때, 페이지가 넘어갈 때, 모달이 닫힐 때 등 애니메이션 컨트롤이 필요한 시점에 .play(), .stop() 메소드 사용
  • 애니메이션 첫 재생 때 blob으로 변환하여 메모리 캐시.
• setTimeout 삭제
  • setTimeout으로 애니메이션 멈추던 로직을 삭제하고 DotLottieReact 객체의 dotLottieRefCallback 속성으로 재생 컨트롤
• 터치패드 페이지 넘김 스크롤 거리 단축 (100 > 50)
• 사용 안하는 파일들 삭제
  • game-win.lottie 삭제
  • canvas 폴더의 test용이었던 파일들 사용

📗 참고 자료 & 구현 결과 (선택)

• HelpLollingModal 번들 사이즈 : 375.59 KB → 15.33

• 애니메이션 재사용 시 요청 파일 크기와 시간 : 1.5 ~ 1.9 KB / 3~8ms → 0byte / 1 ~ 7ms

• 개발자도구 타임라인 최장 작업 시간 : 107.32ms → 6.05ms

• 자세한 내용 : 관련 기술 로그

📢 리뷰 요구 사항 (선택)

🚩 후속 작업 (선택)

✅ 셀프 체크리스트

• PR 제목을 형식에 맞게 작성했나요?
• 브랜치 전략에 맞는 브랜치에 PR을 올리고 있나요? (main이 아닙니다.)
• 이슈는 close 했나요?
• Reviewers, Labels를 등록했나요?
• 작업 도중 문서 수정이 필요한 경우 잘 수정했나요?
• 테스트는 잘 통과했나요?
• 불필요한 코드는 제거했나요?