[SP1] 리쿠르팅, 후원페이지 amplitude tracking code 심기

src/views/RecruitPage/components/ActivityReview/ActivityReview.tsx

@@ -1,3 +1,4 @@
+import { track } from '@amplitude/analytics-browser';
 import Link from 'next/link';
 import { ReactComponent as ArrowLeft } from '@src/assets/icons/arrow_left_28x28.svg';
 import { ReactComponent as ArrowRight } from '@src/assets/icons/arrow_right_28x28.svg';
@@ -44,15 +45,24 @@ export function ActivityReview() {
         </ArrowWrapper>
         <Content ref={scrollableRef}>
           {reviews.data.map((review) => (
-            <Link key={review.id} href={review.link}>
+            <Link
+              key={review.id}
+              href={review.link}
+              onClick={() => track('click_recruit_review_detail')}
+            >
               <CardWrapper role="presentation">
                 <CardTitle>{review.title}</CardTitle>
                 <DescWrapper>
                   <Desc>
                     {parsePartToKorean(review.part)}파트 {review.semester}기{'\n'}
                     <DescName>{review.reviewer}</DescName>
                   </Desc>
-                  <Arrow src={arrowRightWhite} alt={`${review.title} 활동후기 더보기 버튼`} width={30} height={30} />
+                  <Arrow
+                    src={arrowRightWhite}
+                    alt={`${review.title} 활동후기 더보기 버튼`}
+                    width={30}
+                    height={30}
+                  />
                 </DescWrapper>
               </CardWrapper>
             </Link>
@@ -62,7 +72,7 @@ export function ActivityReview() {
           <ArrowRight stroke={isRightScrollable ? 'white' : 'grey'} />
         </ArrowWrapper>
       </ContentWrapper>
-      <Link href="/review">
+      <Link href="/review" onClick={() => track('click_recruit_review_more')}>
         <MoreLinkWrapper>활동후기 더보기</MoreLinkWrapper>
       </Link>
     </ContainerWrapper>

src/views/RecruitPage/components/ChapterInfo/index.tsx

@@ -16,7 +16,12 @@ const ChapterInfo = () => {
         <SectionTitleTranslate>Positions</SectionTitleTranslate>
         <SectionTitle>{'SOPT는 33기는 총 6개의 파트로\n이루어져 있어요.'}</SectionTitle>
       </SectionTitleWrapper>
-      <TabBar type="without-all" onTabClick={setSelectedTab} selectedTab={selectedTab} />
+      <TabBar
+        type="without-all"
+        onTabClick={setSelectedTab}
+        selectedTab={selectedTab}
+        amplitudeTrackingName={'click_recruit_description_part'}
+      />
       <Flex dir="column" gap="15px">
         <BlueChip>{parsePartToKorean(selectedTab)} 파트가 배우는 것</BlueChip>
         <InfoWrapper>{infoMap[selectedTab].info}</InfoWrapper>

src/views/RecruitPage/components/FAQ/index.tsx

@@ -24,7 +24,12 @@ const FaqInfo = () => {
           <SectionTitle>자주 묻는 질문</SectionTitle>
         </SectionTitleWrapper>
       </Wrapper>
-      <TabBar type="with-all" onTabClick={setSelectedTab} selectedTab={selectedTab} />
+      <TabBar
+        type="with-all"
+        onTabClick={setSelectedTab}
+        selectedTab={selectedTab}
+        amplitudeTrackingName={'click_recruit_faq_part'}
+      />
       <FaqWrapper>
         {faqMap[selectedTab].map((info, index) => (
           <div key={index} onClick={() => toggleBox(index)}>

src/views/RecruitPage/components/NotificationSection/index.tsx

@@ -1,3 +1,4 @@
+import { track } from '@amplitude/analytics-browser';
 import styled from '@emotion/styled';
 import { useRef, useState } from 'react';
 import axios from 'axios';
@@ -42,8 +43,17 @@ const NotificationSection = () => {
           onRegister();
         }}
       >
-        <Input type="email" placeholder="메일을 입력해주세요" ref={emailInputRef} />
-        <SubmitButton type="submit" value="알림 신청하기" />
+        <Input
+          type="email"
+          placeholder="메일을 입력해주세요"
+          ref={emailInputRef}
+          onClick={() => track('click_recruit_notification_input')}
+        />
+        <SubmitButton
+          type="submit"
+          value="알림 신청하기"
+          onClick={() => track('click_recruit_notification_apply')}
+        />
       </FormWrapper>
       <ConfirmText visible={isRegistered}>신청 완료되었습니다!</ConfirmText>
     </Wrapper>

src/views/RecruitPage/components/common/Tabs/index.tsx

@@ -1,3 +1,4 @@
+import { track } from '@amplitude/analytics-browser';
 import { ExtraPart, ExtraTabType, Part, PartExtraType, TabType } from '@src/lib/types/universal';
 import * as S from './style';
 
@@ -6,8 +7,14 @@ type TabBarProps =
       type: 'with-all';
       selectedTab: ExtraPart;
       onTabClick(targetTab: ExtraPart): void;
+      amplitudeTrackingName: string;
     }
-  | { type: 'without-all'; selectedTab: Part; onTabClick(targetTab: Part): void };
+  | {
+      type: 'without-all';
+      selectedTab: Part;
+      onTabClick(targetTab: Part): void;
+      amplitudeTrackingName: string;
+    };
 
 const allTabs: ExtraTabType[] = [
   {
@@ -67,14 +74,17 @@ const tabs: TabType[] = [
   },
 ];
 
-const TabBar = ({ type, onTabClick, selectedTab }: TabBarProps) => {
+const TabBar = ({ type, onTabClick, selectedTab, amplitudeTrackingName }: TabBarProps) => {
   if (type === 'with-all')
     return (
       <S.TabBar>
         {allTabs.map((tab) => (
           <Tab
             key={tab.value}
-            onClick={() => onTabClick(tab.value)}
+            onClick={() => {
+              onTabClick(tab.value);
+              track(amplitudeTrackingName, { part: tab.label });
+            }}
             tab={tab}
             selected={selectedTab === tab.value}
           />
@@ -86,7 +96,10 @@ const TabBar = ({ type, onTabClick, selectedTab }: TabBarProps) => {
       {tabs.map((tab) => (
         <Tab
           key={tab.value}
-          onClick={() => onTabClick(tab.value)}
+          onClick={() => {
+            onTabClick(tab.value);
+            track(amplitudeTrackingName, { part: tab.label });
+          }}
           tab={tab}
           selected={selectedTab === tab.value}
         />

src/views/SponsorPage/components/CorporateJob/FieldTabs/index.tsx

@@ -1,3 +1,4 @@
+import { track } from '@amplitude/analytics-browser';
 import { JobField } from '@src/lib/types/job';
 import { fieldTabs } from '..';
 import { St } from './style';
@@ -11,7 +12,14 @@ const FieldTabs = ({ currentTabType, changeTab }: FieldTabsProps) => {
   return (
     <St.Ul>
       {fieldTabs.map(({ type, text }) => (
-        <St.Li key={type} onClick={() => changeTab(type)} isactive={type === currentTabType}>
+        <St.Li
+          key={type}
+          onClick={() => {
+            changeTab(type);
+            track('click_sponsor_recruit_part', { part: text });
+          }}
+          isactive={type === currentTabType}
+        >
           {text}
         </St.Li>
       ))}

src/views/SponsorPage/components/CorporateJob/JobPostings/index.tsx

@@ -1,3 +1,4 @@
+import { track } from '@amplitude/analytics-browser';
 import { useQuery } from 'react-query';
 import JobPostingCard from '@src/components/corporate/JobPostingCard';
 import { api } from '@src/lib/api';
@@ -15,7 +16,13 @@ const JobPostings = ({ field }: JopPostingsProps) => {
     <St.Root>
       <St.JobPostingsContainer>
         {data?.map(({ id, url, imgSrc, type, title, corporation, career, location }) => (
-          <a key={id} href={url} target="_blank" rel="noreferrer">
+          <a
+            key={id}
+            href={url}
+            target="_blank"
+            rel="noreferrer"
+            onClick={() => track('click_sponsor_recruit')}
+          >
             <JobPostingCard
               imgSrc={imgSrc}
               type={type}

src/views/SponsorPage/components/CorporateLinkedActivities/index.tsx

@@ -1,3 +1,4 @@
+import { track } from '@amplitude/analytics-browser';
 import Image from 'next/image';
 import { ReactComponent as ArrowLeft } from '@src/assets/icons/arrow_left_28x28.svg';
 import { ReactComponent as ArrowRight } from '@src/assets/icons/arrow_right_28x28.svg';
@@ -23,7 +24,10 @@ const CorporateLinkedActivities = () => {
       <div className={styles.contentWrapper}>
         <div
           className={styles.arrowWrapper}
-          onClick={() => onClickLeftButton(scrollableRef.current)}
+          onClick={() => {
+            onClickLeftButton(scrollableRef.current);
+            track('click_sponsor_activity_next');
+          }}
         >
           <ArrowLeft stroke={isLeftScrollable ? 'white' : 'grey'} />
         </div>
@@ -44,7 +48,10 @@ const CorporateLinkedActivities = () => {
         </div>
         <div
           className={styles.arrowWrapper}
-          onClick={() => onClickRightButton(scrollableRef.current)}
+          onClick={() => {
+            onClickRightButton(scrollableRef.current);
+            track('click_sponsor_activity_next');
+          }}
         >
           <ArrowRight stroke={isRightScrollable ? 'white' : 'grey'} />
         </div>

src/views/SponsorPage/components/CorporatePartner/index.tsx

@@ -1,3 +1,4 @@
+import { track } from '@amplitude/analytics-browser';
 import Image from 'next/image';
 import { ReactComponent as ArrowLeft } from '@src/assets/icons/arrow_left_28x28.svg';
 import { ReactComponent as ArrowRight } from '@src/assets/icons/arrow_right_28x28.svg';
@@ -20,7 +21,10 @@ const CoporatePartner = () => {
       <div className={styles.contentWrapper}>
         <div
           className={styles.arrowWrapper}
-          onClick={() => onClickLeftButton(scrollableRef.current)}
+          onClick={() => {
+            onClickLeftButton(scrollableRef.current);
+            track('cclick_sponsor_logo_next');
+          }}
         >
           <ArrowLeft stroke={isLeftScrollable ? 'white' : 'grey'} />
         </div>
@@ -43,7 +47,10 @@ const CoporatePartner = () => {
         </div>
         <div
           className={styles.arrowWrapper}
-          onClick={() => onClickRightButton(scrollableRef.current)}
+          onClick={() => {
+            onClickRightButton(scrollableRef.current);
+            track('cclick_sponsor_logo_next');
+          }}
         >
           <ArrowRight stroke={isRightScrollable ? 'white' : 'grey'} />
         </div>