diff --git a/src/lib/constants/about.ts b/src/lib/constants/about.ts new file mode 100644 index 00000000..a5a0da26 --- /dev/null +++ b/src/lib/constants/about.ts @@ -0,0 +1,7 @@ +import { RecordTitleType } from '@src/lib/types/about'; + +export const RECORD_TITLE: RecordTitleType = { + '활동 멤버': 'member', + 프로젝트: 'project', + 스터디: 'study', +}; diff --git a/src/lib/types/about.ts b/src/lib/types/about.ts index 55895ff2..a5b29771 100644 --- a/src/lib/types/about.ts +++ b/src/lib/types/about.ts @@ -59,3 +59,8 @@ export interface AboutAPI { getMemberInfo(part?: Part): Promise; getStudyInfo(generation?: number): Promise; } + +export type RecordTitle = '활동 멤버' | '프로젝트' | '스터디'; +export type RecordTitleType = { + [key in RecordTitle]: 'member' | 'project' | 'study'; +}; diff --git a/src/views/AboutPage/components/Cirriculum/Content/index.tsx b/src/views/AboutPage/components/Cirriculum/Content/index.tsx index 80225914..0c553097 100644 --- a/src/views/AboutPage/components/Cirriculum/Content/index.tsx +++ b/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 ( - + { const state = useFetchMember(currentPart); const errorContent = state._TAG === 'ERROR' && ; + const handleTabClick = (tab: ExtraTabType) => { + setCurrentPart(tab.value); + track('click_about_member_part', { part: tab.label }); + }; const tabBarContent = !(state._TAG === 'ERROR' && shouldNotShownWithError) && ( - + ); const cardContent = useMemo(() => { if (state._TAG === 'OK') diff --git a/src/views/AboutPage/components/Record/Item/index.tsx b/src/views/AboutPage/components/Record/Item/index.tsx index 97be7342..82ff5aa3 100644 --- a/src/views/AboutPage/components/Record/Item/index.tsx +++ b/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 ( - + { {extraTabs.map((tab) => ( 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) => ( onTabClick(tab.value)} + onClick={() => onTabClick(tab)} label={tab.label} selected={selectedTab === tab.value} /> diff --git a/src/views/ReviewPage/components/TabBar/index.tsx b/src/views/ReviewPage/components/TabBar/index.tsx index cede1460..301511cf 100644 --- a/src/views/ReviewPage/components/TabBar/index.tsx +++ b/src/views/ReviewPage/components/TabBar/index.tsx @@ -16,7 +16,7 @@ const TabBar = ({ onTabClick, selectedTab }: TabBarProps) => { key={tab.value} onClick={() => { onTabClick(tab.value); - track('click_review_part', { part: tab.value }); + track('click_review_part', { part: tab.label }); }} tab={tab} selected={selectedTab === tab.value} diff --git a/src/views/SopticlePage/components/Content/index.tsx b/src/views/SopticlePage/components/Content/index.tsx index 29dd24f8..fe543b48 100644 --- a/src/views/SopticlePage/components/Content/index.tsx +++ b/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(PartExtraType.ALL); + const handleTabClick = (tab: ExtraTabType) => { + setSelectedTab(tab.value); + track('click_sopticle_part', { part: tab.label }); + }; + return ( <> - + ); diff --git a/src/views/SopticlePage/components/Sopticles/Card/index.tsx b/src/views/SopticlePage/components/Sopticles/Card/index.tsx index 8a84cc38..a28a265f 100644 --- a/src/views/SopticlePage/components/Sopticles/Card/index.tsx +++ b/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,6 +23,7 @@ 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, @@ -29,7 +31,12 @@ const SopticleCard = ({ sopticle }: SopticleCardProps) => { }; return ( - + track('click_sopticle_detail', { sopticle_id: sopticle.id })} + > diff --git a/src/views/SopticlePage/components/TabBar/index.tsx b/src/views/SopticlePage/components/TabBar/index.tsx index 4272abb1..66318124 100644 --- a/src/views/SopticlePage/components/TabBar/index.tsx +++ b/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) => ( onTabClick(tab.value)} + onClick={() => onTabClick(tab)} tab={tab} selected={selectedTab === tab.value} />