diff --git a/frontend/src/components/common/SearchBox/SearchBox.tsx b/frontend/src/components/common/SearchBox/SearchBox.tsx index 121322ac0..c1f29e2d1 100644 --- a/frontend/src/components/common/SearchBox/SearchBox.tsx +++ b/frontend/src/components/common/SearchBox/SearchBox.tsx @@ -18,8 +18,10 @@ const SearchBox = () => { return; } - trackEvent('Search Executed', { keyword }); - console.log(`검색 실행: ${keyword}`); + trackEvent('Search Executed', { + keyword, + page: window.location.pathname, + }); setKeyword(keyword); }; diff --git a/frontend/src/hooks/useAutoScroll.ts b/frontend/src/hooks/InfoTabs/useAutoScroll.ts similarity index 100% rename from frontend/src/hooks/useAutoScroll.ts rename to frontend/src/hooks/InfoTabs/useAutoScroll.ts diff --git a/frontend/src/hooks/usePhotoNavigation.ts b/frontend/src/hooks/PhotoList/usePhotoNavigation.ts similarity index 84% rename from frontend/src/hooks/usePhotoNavigation.ts rename to frontend/src/hooks/PhotoList/usePhotoNavigation.ts index 52fe17723..ff261ad8f 100644 --- a/frontend/src/hooks/usePhotoNavigation.ts +++ b/frontend/src/hooks/PhotoList/usePhotoNavigation.ts @@ -1,4 +1,5 @@ import { useCallback, useEffect } from 'react'; +import useMixpanelTrack from '../useMixpanelTrack'; const usePhotoNavigation = ({ currentIndex, @@ -16,6 +17,8 @@ const usePhotoNavigation = ({ translateX: number; setTranslateX: React.Dispatch>; }) => { + const trackEvent = useMixpanelTrack(); + const calculateTranslateX = useCallback( (index: number) => { return index === photosLength - 1 @@ -33,11 +36,15 @@ const usePhotoNavigation = ({ const nextIndex = currentIndex + 1; if (nextIndex >= photosLength) return; setCurrentIndex(nextIndex); + + trackEvent('Photo Navigation', { action: 'next', index: nextIndex }); }; const handlePrev = () => { if (currentIndex <= 0) return; setCurrentIndex(currentIndex - 1); + + trackEvent('Photo Navigation', { action: 'prev', index: currentIndex - 1 }); }; const isLastCard = currentIndex === photosLength - 1; diff --git a/frontend/src/hooks/useMixpanelTrack.ts b/frontend/src/hooks/useMixpanelTrack.ts index 80d426ac8..f870fefac 100644 --- a/frontend/src/hooks/useMixpanelTrack.ts +++ b/frontend/src/hooks/useMixpanelTrack.ts @@ -6,6 +6,7 @@ const useMixpanelTrack = () => { (eventName: string, properties: Record = {}) => { mixpanel.track(eventName, { ...properties, + distinct_id: mixpanel.get_distinct_id(), timestamp: Date.now(), url: window.location.href, }); diff --git a/frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx b/frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx index 26b4f1e9c..7fc5935fd 100644 --- a/frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx +++ b/frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx @@ -12,7 +12,7 @@ import PhotoList from '@/pages/ClubDetailPage/components/PhotoList/PhotoList'; import Footer from '@/components/common/Footer/Footer'; import ClubDetailFooter from '@/pages/ClubDetailPage/components/ClubDetailFooter/ClubDetailFooter'; import useTrackPageView from '@/hooks/useTrackPageView'; -import useAutoScroll from '@/hooks/useAutoScroll'; +import useAutoScroll from '@/hooks/InfoTabs/useAutoScroll'; import { useGetClubDetail } from '@/hooks/queries/club/useGetClubDetail'; const ClubDetailPage = () => { diff --git a/frontend/src/pages/ClubDetailPage/components/InfoTabs/InfoTabs.tsx b/frontend/src/pages/ClubDetailPage/components/InfoTabs/InfoTabs.tsx index 4ae7a71df..4ce41b2cf 100644 --- a/frontend/src/pages/ClubDetailPage/components/InfoTabs/InfoTabs.tsx +++ b/frontend/src/pages/ClubDetailPage/components/InfoTabs/InfoTabs.tsx @@ -1,14 +1,21 @@ import React, { useState } from 'react'; import * as Styled from './InfoTabs.styles'; +import useMixpanelTrack from '@/hooks/useMixpanelTrack'; const tabLabels = ['모집정보', '동아리정보', '소개글', '활동사진']; const InfoTabs = ({ onTabClick }: { onTabClick: (index: number) => void }) => { const [activeTab, setActiveTab] = useState(0); + const trackEvent = useMixpanelTrack(); const handleTabClick = (index: number) => { setActiveTab(index); onTabClick(index); + + trackEvent('Tab Clicked', { + tabName: tabLabels[index], + tabIndex: index, + }); }; return ( diff --git a/frontend/src/pages/ClubDetailPage/components/PhotoList/PhotoList.styles.ts b/frontend/src/pages/ClubDetailPage/components/PhotoList/PhotoList.styles.ts index dcc44cd81..68318527d 100644 --- a/frontend/src/pages/ClubDetailPage/components/PhotoList/PhotoList.styles.ts +++ b/frontend/src/pages/ClubDetailPage/components/PhotoList/PhotoList.styles.ts @@ -1,5 +1,10 @@ import styled from 'styled-components'; +export const PhotoListTitle = styled.p` + font-size: 20px; + font-weight: 500; +`; + export const PhotoListContainer = styled.div` display: flex; flex-direction: column; diff --git a/frontend/src/pages/ClubDetailPage/components/PhotoList/PhotoList.tsx b/frontend/src/pages/ClubDetailPage/components/PhotoList/PhotoList.tsx index 06f60ca13..1e8236875 100644 --- a/frontend/src/pages/ClubDetailPage/components/PhotoList/PhotoList.tsx +++ b/frontend/src/pages/ClubDetailPage/components/PhotoList/PhotoList.tsx @@ -1,7 +1,7 @@ import React, { useState, useRef, useEffect, useMemo } from 'react'; import * as Styled from './PhotoList.styles'; import convertGoogleDriveUrl from '@/utils/convertGoogleDriveUrl'; -import usePhotoNavigation from '@/hooks/usePhotoNavigation'; +import usePhotoNavigation from '@/hooks/PhotoList/usePhotoNavigation'; import LazyImage from '@/components/common/LazyImage/LazyImage'; import { INFOTABS_SCROLL_INDEX } from '@/constants/scrollSections'; @@ -81,7 +81,7 @@ const PhotoList = ({ feeds: photos, sectionRefs }: PhotoListProps) => { ref={(el) => { sectionRefs.current[INFOTABS_SCROLL_INDEX.PHOTO_LIST_TAB] = el; }}> -

활동 사진

+ 활동 사진