From 3e56ff3ad0ce89eac92571c058cf84c58d7e02a7 Mon Sep 17 00:00:00 2001 From: solar3070 <> Date: Sat, 23 Sep 2023 18:21:26 +0900 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=EC=96=B4=EB=B0=94=EC=9B=83=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=ED=81=B4=EB=A6=AD=20=EC=9D=B4?= =?UTF-8?q?=EB=B2=A4=ED=8A=B8=20=ED=8A=B8=EB=9E=98=ED=82=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/lib/constants/about.ts | 7 +++++++ src/lib/types/about.ts | 5 +++++ .../AboutPage/components/Cirriculum/Content/index.tsx | 10 ++++++++-- .../AboutPage/components/Member/Content/index.tsx | 9 +++++++-- src/views/AboutPage/components/Record/Item/index.tsx | 11 +++++++++-- .../AboutPage/components/common/TabBar/index.tsx | 10 +++++----- 6 files changed, 41 insertions(+), 11 deletions(-) create mode 100644 src/lib/constants/about.ts 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} /> From 142810db10f2d344c0e8acdc2c0b5e4d63806de3 Mon Sep 17 00:00:00 2001 From: solar3070 <> Date: Sat, 23 Sep 2023 18:21:40 +0900 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=EC=86=9D=ED=8B=B0=ED=81=B4=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=ED=81=B4=EB=A6=AD=20=EC=9D=B4?= =?UTF-8?q?=EB=B2=A4=ED=8A=B8=20=ED=8A=B8=EB=9E=98=ED=82=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/SopticlePage/components/Content/index.tsx | 10 ++++++++-- .../SopticlePage/components/Sopticles/Card/index.tsx | 9 ++++++++- src/views/SopticlePage/components/TabBar/index.tsx | 4 ++-- 3 files changed, 18 insertions(+), 5 deletions(-) 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} /> From 225744b22b85abfffb6899ccb0c9734f5872a36b Mon Sep 17 00:00:00 2001 From: solar3070 <> Date: Thu, 28 Sep 2023 22:28:22 +0900 Subject: [PATCH 3/3] =?UTF-8?q?chore:=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20?= =?UTF-8?q?=ED=8C=8C=EB=9D=BC=EB=AF=B8=ED=84=B0=20=ED=8C=8C=ED=8A=B8?= =?UTF-8?q?=EB=AA=85=20=ED=95=9C=EA=B8=80=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/ReviewPage/components/TabBar/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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}