From 060859f0ee180d5860bfde3d3d8b4d924e7c2ce0 Mon Sep 17 00:00:00 2001
From: f0ever0 <thddndud0830@gmail.com>
Date: Sat, 23 Sep 2023 21:41:21 +0900
Subject: [PATCH 1/3] =?UTF-8?q?feat=20:=20=ED=9B=84=EC=9B=90=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=ED=8A=B8=EB=9E=98=ED=82=B9=20=EC=BD=94?=
 =?UTF-8?q?=EB=93=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/CorporateJob/FieldTabs/index.tsx       | 10 +++++++++-
 .../components/CorporateJob/JobPostings/index.tsx     |  9 ++++++++-
 .../components/CorporateLinkedActivities/index.tsx    | 11 +++++++++--
 .../SponsorPage/components/CorporatePartner/index.tsx | 11 +++++++++--
 4 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/src/views/SponsorPage/components/CorporateJob/FieldTabs/index.tsx b/src/views/SponsorPage/components/CorporateJob/FieldTabs/index.tsx
index ebc97116..6573409e 100644
--- a/src/views/SponsorPage/components/CorporateJob/FieldTabs/index.tsx
+++ b/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: type });
+          }}
+          isactive={type === currentTabType}
+        >
           {text}
         </St.Li>
       ))}
diff --git a/src/views/SponsorPage/components/CorporateJob/JobPostings/index.tsx b/src/views/SponsorPage/components/CorporateJob/JobPostings/index.tsx
index c915f57b..28b884b8 100644
--- a/src/views/SponsorPage/components/CorporateJob/JobPostings/index.tsx
+++ b/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}
diff --git a/src/views/SponsorPage/components/CorporateLinkedActivities/index.tsx b/src/views/SponsorPage/components/CorporateLinkedActivities/index.tsx
index c5a918df..7bfbc495 100644
--- a/src/views/SponsorPage/components/CorporateLinkedActivities/index.tsx
+++ b/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>
diff --git a/src/views/SponsorPage/components/CorporatePartner/index.tsx b/src/views/SponsorPage/components/CorporatePartner/index.tsx
index 76d41cde..be6a2532 100644
--- a/src/views/SponsorPage/components/CorporatePartner/index.tsx
+++ b/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>

From ddd5b28a9b81d0af6c34c186eec10913065c36b6 Mon Sep 17 00:00:00 2001
From: f0ever0 <thddndud0830@gmail.com>
Date: Sun, 24 Sep 2023 13:52:03 +0900
Subject: [PATCH 2/3] =?UTF-8?q?feat=20:=20=EB=A6=AC=EC=BF=A0=EB=A5=B4?=
 =?UTF-8?q?=ED=8C=85=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=ED=8A=B8=EB=9E=98?=
 =?UTF-8?q?=ED=82=B9=20=EC=BD=94=EB=93=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ActivityReview/ActivityReview.tsx         | 16 +++++++++++---
 .../components/ChapterInfo/index.tsx          |  7 ++++++-
 .../RecruitPage/components/FAQ/index.tsx      |  7 ++++++-
 .../components/NotificationSection/index.tsx  | 14 +++++++++++--
 .../components/common/Tabs/index.tsx          | 21 +++++++++++++++----
 5 files changed, 54 insertions(+), 11 deletions(-)

diff --git a/src/views/RecruitPage/components/ActivityReview/ActivityReview.tsx b/src/views/RecruitPage/components/ActivityReview/ActivityReview.tsx
index a57886bc..2af9e214 100644
--- a/src/views/RecruitPage/components/ActivityReview/ActivityReview.tsx
+++ b/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,7 +45,11 @@ 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>
@@ -52,7 +57,12 @@ export function ActivityReview() {
                     {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>
diff --git a/src/views/RecruitPage/components/ChapterInfo/index.tsx b/src/views/RecruitPage/components/ChapterInfo/index.tsx
index 94f7a1ee..9015395b 100644
--- a/src/views/RecruitPage/components/ChapterInfo/index.tsx
+++ b/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>
diff --git a/src/views/RecruitPage/components/FAQ/index.tsx b/src/views/RecruitPage/components/FAQ/index.tsx
index 0f1e899f..5a0618b1 100644
--- a/src/views/RecruitPage/components/FAQ/index.tsx
+++ b/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)}>
diff --git a/src/views/RecruitPage/components/NotificationSection/index.tsx b/src/views/RecruitPage/components/NotificationSection/index.tsx
index 85c7bda3..e3ee9370 100644
--- a/src/views/RecruitPage/components/NotificationSection/index.tsx
+++ b/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>
diff --git a/src/views/RecruitPage/components/common/Tabs/index.tsx b/src/views/RecruitPage/components/common/Tabs/index.tsx
index 857a60c8..99050f1e 100644
--- a/src/views/RecruitPage/components/common/Tabs/index.tsx
+++ b/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.value });
+            }}
             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.value });
+          }}
           tab={tab}
           selected={selectedTab === tab.value}
         />

From f8669677cbf5a32764b8a4041c43d4e33d26f274 Mon Sep 17 00:00:00 2001
From: f0ever0 <thddndud0830@gmail.com>
Date: Thu, 28 Sep 2023 22:28:28 +0900
Subject: [PATCH 3/3] =?UTF-8?q?refactor=20:=20=ED=94=84=EB=A1=9C=ED=8D=BC?=
 =?UTF-8?q?=ED=8B=B0=20=EA=B0=92=20=ED=95=9C=EA=B8=80=EB=A1=9C=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/RecruitPage/components/common/Tabs/index.tsx        | 4 ++--
 .../SponsorPage/components/CorporateJob/FieldTabs/index.tsx   | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/views/RecruitPage/components/common/Tabs/index.tsx b/src/views/RecruitPage/components/common/Tabs/index.tsx
index 99050f1e..2c2d2916 100644
--- a/src/views/RecruitPage/components/common/Tabs/index.tsx
+++ b/src/views/RecruitPage/components/common/Tabs/index.tsx
@@ -83,7 +83,7 @@ const TabBar = ({ type, onTabClick, selectedTab, amplitudeTrackingName }: TabBar
             key={tab.value}
             onClick={() => {
               onTabClick(tab.value);
-              track(amplitudeTrackingName, { part: tab.value });
+              track(amplitudeTrackingName, { part: tab.label });
             }}
             tab={tab}
             selected={selectedTab === tab.value}
@@ -98,7 +98,7 @@ const TabBar = ({ type, onTabClick, selectedTab, amplitudeTrackingName }: TabBar
           key={tab.value}
           onClick={() => {
             onTabClick(tab.value);
-            track(amplitudeTrackingName, { part: tab.value });
+            track(amplitudeTrackingName, { part: tab.label });
           }}
           tab={tab}
           selected={selectedTab === tab.value}
diff --git a/src/views/SponsorPage/components/CorporateJob/FieldTabs/index.tsx b/src/views/SponsorPage/components/CorporateJob/FieldTabs/index.tsx
index 6573409e..a885db11 100644
--- a/src/views/SponsorPage/components/CorporateJob/FieldTabs/index.tsx
+++ b/src/views/SponsorPage/components/CorporateJob/FieldTabs/index.tsx
@@ -16,7 +16,7 @@ const FieldTabs = ({ currentTabType, changeTab }: FieldTabsProps) => {
           key={type}
           onClick={() => {
             changeTab(type);
-            track('click_sponsor_recruit_part', { part: type });
+            track('click_sponsor_recruit_part', { part: text });
           }}
           isactive={type === currentTabType}
         >