[Refactor] Amplitude tracking 로직 컴포넌트로 분리

[eonseok-jeon]

Related Issue : Closes #460

---

🧑‍🎤 Summary

event tracking 로직이 기존에는 handler 함수 안에 포함되어 있어서 이를 분리해줬어요

이때 track이 필요한 곳이 <Button> 뿐 아니라 일반 <button>과 <Link>, <a> 등 여러 군데에서 사용되고 있어서 Button에 props로 넘겨주는 것 대신 Track 컴포넌트를 새로 만드는 방법을 택했습니다.

일단 Button 컴포넌트에는 필수적으로 필요해서 각각에 감싸주기 보다 공통 Button component에 한 번 싸주었습니다

// Button.tsx

const Button = ({ eventName, ...props ) {
  const Tag = isLink ? Link : 'button';

  return (
    <AmplitudeEventTrack eventName={eventName}>
      <Tag>
        {/* ... */}
      </Tag>
    </AmplitudeEventTrack>
  );
};

<Button eventName="click-gnb-logout">
  {/* ... */}
</Button>

그 외는 아래와 같이 해주었어요

<AmplitudeEventTrack eventName="click-gnb-logout">
  <a>...</a>
</AmplitudeEventTrack>

tracking 하는데 있어서 살짝의 로직이 필요한 곳들은 그냥 track을 이용해줬습니다

[height]

Link Height tasks by mentioning a task ID in the pull request title or commit messages, or description and comments with the keyword link (e.g. "Link T-123").

💡Tip: You can also use "Close T-X" to automatically close a task when the pull request is merged.

[cloudflare-workers-and-pages]

Deploying sopt-recruiting-frontend-test with    Cloudflare Pages

Latest commit:	54c1a51
Status:	✅  Deploy successful!
Preview URL:	https://3dcba84e.sopt-recruiting-frontend-test.pages.dev
Branch Preview URL:	https://refactor--460-amplitude-comp.sopt-recruiting-frontend-test.pages.dev

View logs