[feat] 보조금 인터랙션 추가 ( resolve #23 )

[lybell-art]

#️⃣ 연관 이슈

• [feat] 인터랙션-보조금 #23

📝 작업 내용

보조금 인터랙션을 추가했습니다.

• 동전을 클릭하면 동전이 360도로 회전하면서 카운트를 1 증가시키고, 로티 애니메이션이 재생됩니다.
• 동전을 스팸할 때에도 잘 동작합니다.

로티 애니메이션을 재생시키는 react-lottie-player 를 종속성에 추가했습니다.

• npm install을 입력해서 종속성을 추가하세요.

참조 문서

https://github.com/airbnb/lottie-web

[darkdulgi]

good

[lybell-art]

테스트 방법

App.jsx에 다음과 같이 작성하세요.

import { useRef } from "react";
import Demo from "./interactions/subsidy";
function App() {
  const ref = useRef(null);
  return (
    <div className="w-full h-dvh bg-black relative">
      <Demo $ref={ref} />
      <div className="absolute top-0 left-0 text-white">리셋</div>
    </div>

해당 인터랙션 컴포넌트가 상위 컴포넌트의 width, height값을 따르고 있기 때문에 div로 따로 묶어줘야 합니다.