[feat] 주행거리 인터랙션 추가 ( resolve #43)

[lybell-art]

#️⃣ 연관 이슈

• [feat] 주행거리 인터랙션 구현 #43
• [feat] 인터랙션-고속충전 #20

📝 작업 내용

주행거리 인터랙션을 추가했습니다.

• 인터랙션이 일어나는 부분은 동일해서 하단 텍스트 영역을 제외한 나머지에 반응형 디자인을 적용하진 않았습니다.
• 마우스 down시 펄스 애니메이션이 동작합니다.

인터랙션 컴포넌트간 공통된 부분인 설명 부분은 별도의 컴포넌트로 뺐습니다.

• 이제 해당 부분의 스타일을 수정할 때 모든 인터랙션 컴포넌트를 일일이 수정하지 않아도 됩니다.

고속충전 인터랙션에서 reset 함수가 잘못 동작하는 오류를 수정했습니다.

• 기존에는 reset 함수를 호출한 뒤, 다시 드래그를 수행하면 마지막에 수행된 각도부터 드래그되었습니다.

[lybell-art]

테스트 방법

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

import { useRef } from "react";
import Demo from "./interactions/distanceDriven";
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로 따로 묶어줘야 합니다.