[SP1] 앰플리튜드 이벤트 트래킹 - 어바웃, 솝티클

src/lib/constants/about.ts

@@ -0,0 +1,7 @@
+import { RecordTitleType } from '@src/lib/types/about';
+
+export const RECORD_TITLE: RecordTitleType = {
+  '활동 멤버': 'member',
+  프로젝트: 'project',
+  스터디: 'study',
+};

src/lib/types/about.ts

@@ -59,3 +59,8 @@ export interface AboutAPI {
   getMemberInfo(part?: Part): Promise<GetMembersInfoResponse>;
   getStudyInfo(generation?: number): Promise<GetStudyInfoResponse>;
 }
+
+export type RecordTitle = '활동 멤버' | '프로젝트' | '스터디';
+export type RecordTitleType = {
+  [key in RecordTitle]: 'member' | 'project' | 'study';
+};

src/views/AboutPage/components/Cirriculum/Content/index.tsx

@@ -1,7 +1,8 @@
+import { track } from '@amplitude/analytics-browser';
 import Image from 'next/image';
 import { useState } from 'react';
 import Flex from '@src/components/common/Flex';
-import { Part } from '@src/lib/types/universal';
+import { TabType, Part } from '@src/lib/types/universal';
 import { parsePartToKorean } from '@src/lib/utils/parsePartToKorean';
 import TabBar from '../../common/TabBar';
 import * as St from './style';
@@ -13,9 +14,14 @@ type CirriculumContentProps = {
 const CirriculumContent = ({ cirriculums }: CirriculumContentProps) => {
   const [currentPart, setCurrentPart] = useState(Part.PLAN);
 
+  const handleTabClick = (tab: TabType) => {
+    setCurrentPart(tab.value);
+    track('click_about_part', { part: tab.label });
+  };
+
   return (
     <Flex dir="column" gap={{ mobile: 18, tablet: 24, desktop: 48 }}>
-      <TabBar onTabClick={setCurrentPart} selectedTab={currentPart} includesExtra={false} />
+      <TabBar onTabClick={handleTabClick} selectedTab={currentPart} includesExtra={false} />
       <St.ImageWrapper>
         <Image
           src={cirriculums[currentPart]}

src/views/AboutPage/components/Member/Content/index.tsx

@@ -1,7 +1,8 @@
+import { track } from '@amplitude/analytics-browser';
 import { useMemo, useState } from 'react';
 import DataErrorBanner from '@src/components/DataErrorBanner';
 import Flex from '@src/components/common/Flex';
-import { ExtraPart } from '@src/lib/types/universal';
+import { ExtraPart, ExtraTabType } from '@src/lib/types/universal';
 import { PartExtraType } from '@src/lib/types/universal';
 import { emptyMembers } from '@src/views/AboutPage/constant/emptyMembers';
 import useFetchMember from '@src/views/AboutPage/hooks/useFetchMemeber';
@@ -18,8 +19,12 @@ const MemberContent = () => {
   const state = useFetchMember(currentPart);
 
   const errorContent = state._TAG === 'ERROR' && <DataErrorBanner />;
+  const handleTabClick = (tab: ExtraTabType) => {
+    setCurrentPart(tab.value);
+    track('click_about_member_part', { part: tab.label });
+  };
   const tabBarContent = !(state._TAG === 'ERROR' && shouldNotShownWithError) && (
-    <TabBar onTabClick={setCurrentPart} selectedTab={currentPart} includesExtra={true} />
+    <TabBar onTabClick={handleTabClick} selectedTab={currentPart} includesExtra={true} />
   );
   const cardContent = useMemo(() => {
     if (state._TAG === 'OK')

src/views/AboutPage/components/Record/Item/index.tsx

@@ -1,17 +1,24 @@
+import { track } from '@amplitude/analytics-browser';
 import Flex from '@src/components/common/Flex';
 import NumberRoller from '@src/components/common/NumberRoller';
+import { RECORD_TITLE } from '@src/lib/constants/about';
+import { RecordTitle } from '@src/lib/types/about';
 import * as St from './style';
 
 type RecordItemProps = {
   href: string;
-  title: string;
+  title: RecordTitle;
   countNumber?: number;
   countString?: string;
 };
 
 const RecordItem = (props: RecordItemProps) => {
+  const trackRecordClick = () => {
+    track(`click_about_${RECORD_TITLE[props.title]}`);
+  };
+
   return (
-    <St.LinkWrapper href={props.href}>
+    <St.LinkWrapper href={props.href} onClick={trackRecordClick}>
       <Flex
         dir="column"
         gap={{ mobile: 4, tablet: 8, desktop: 8 }}

src/views/AboutPage/components/common/TabBar/index.tsx

@@ -1,16 +1,16 @@
 import { extraTabs, tabs } from '@src/lib/constants/tabs';
-import { ExtraPart, Part } from '@src/lib/types/universal';
+import { ExtraPart, ExtraTabType, Part, TabType } from '@src/lib/types/universal';
 import * as St from './style';
 
 type TabBarPropsIncludedExtra = {
   includesExtra: true;
   selectedTab: ExtraPart;
-  onTabClick(targetTab: ExtraPart): void;
+  onTabClick(tab: ExtraTabType): void;
 };
 type TabBarPropsNoExtra = {
   includesExtra: false;
   selectedTab: Part;
-  onTabClick(targetTab: Part): void;
+  onTabClick(tab: TabType): void;
 };
 type TabBarProps = TabBarPropsIncludedExtra | TabBarPropsNoExtra;
 
@@ -21,7 +21,7 @@ const TabBar = ({ includesExtra, onTabClick, selectedTab }: TabBarProps) => {
         {extraTabs.map((tab) => (
           <Tab
             key={tab.value}
-            onClick={() => onTabClick(tab.value)}
+            onClick={() => onTabClick(tab)}
             label={tab.label}
             selected={selectedTab === tab.value}
           />
@@ -34,7 +34,7 @@ const TabBar = ({ includesExtra, onTabClick, selectedTab }: TabBarProps) => {
       {tabs.map((tab) => (
         <Tab
           key={tab.value}
-          onClick={() => onTabClick(tab.value)}
+          onClick={() => onTabClick(tab)}
           label={tab.label}
           selected={selectedTab === tab.value}
         />

src/views/SopticlePage/components/Content/index.tsx

@@ -1,14 +1,20 @@
+import { track } from '@amplitude/analytics-browser';
 import { useState } from 'react';
-import { ExtraPart, PartExtraType } from '@src/lib/types/universal';
+import { ExtraPart, ExtraTabType, PartExtraType } from '@src/lib/types/universal';
 import Sopticles from '../Sopticles';
 import TabBar from '../TabBar';
 
 const Content = () => {
   const [selectedTab, setSelectedTab] = useState<ExtraPart>(PartExtraType.ALL);
 
+  const handleTabClick = (tab: ExtraTabType) => {
+    setSelectedTab(tab.value);
+    track('click_sopticle_part', { part: tab.label });
+  };
+
   return (
     <>
-      <TabBar onTabClick={setSelectedTab} selectedTab={selectedTab} />
+      <TabBar onTabClick={handleTabClick} selectedTab={selectedTab} />
       <Sopticles selectedTab={selectedTab} />
     </>
   );

src/views/SopticlePage/components/Sopticles/Card/index.tsx

@@ -1,3 +1,4 @@
+import { track } from '@amplitude/analytics-browser';
 import { useState } from 'react';
 import { ReactComponent as IconHeartFilled } from '@src/assets/icons/ic_heartfilled.svg';
 import { ReactComponent as IconHeartUnfilled } from '@src/assets/icons/ic_heartunfilled.svg';
@@ -22,14 +23,20 @@ const SopticleCard = ({ sopticle }: SopticleCardProps) => {
     e.preventDefault();
     const response = await api.sopticleAPI.postSopticleLike(sopticle.id, liked ?? true);
     setLiked(response.currentLike);
+    track('click_sopticle_like', { sopticle_id: sopticle.id, is_like: response.currentLike });
     if (response.likeChanged)
       setLikesCount((prevLikesCount) =>
         response.currentLike ? prevLikesCount + 1 : prevLikesCount - 1,
       );
   };
 
   return (
-    <S.Card href={sopticle.link} target="_blank" passHref>
+    <S.Card
+      href={sopticle.link}
+      target="_blank"
+      passHref
+      onClick={() => track('click_sopticle_detail', { sopticle_id: sopticle.id })}
+    >
       <S.ThumbnailWrapper>
         <S.Thumbnail src={sopticle.thumbnail} alt={sopticle.title} fill />
         <S.ChipWrapper>

src/views/SopticlePage/components/TabBar/index.tsx

@@ -4,7 +4,7 @@ import * as S from './style';
 
 type TabBarProps = {
   selectedTab: ExtraPart;
-  onTabClick(targetTab: ExtraPart): void;
+  onTabClick(tab: ExtraTabType): void;
 };
 
 const TabBar = ({ onTabClick, selectedTab }: TabBarProps) => {
@@ -13,7 +13,7 @@ const TabBar = ({ onTabClick, selectedTab }: TabBarProps) => {
       {extraTabs.map((tab) => (
         <Tab
           key={tab.value}
-          onClick={() => onTabClick(tab.value)}
+          onClick={() => onTabClick(tab)}
           tab={tab}
           selected={selectedTab === tab.value}
         />