[feature] 믹스패널 track 2차 추가 및 기타 작업

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);
   };

frontend/src/hooks/usePhotoNavigation.ts → 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<React.SetStateAction<number>>;
 }) => {
+  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;

frontend/src/hooks/useMixpanelTrack.ts

@@ -6,6 +6,7 @@ const useMixpanelTrack = () => {
     (eventName: string, properties: Record<string, any> = {}) => {
       mixpanel.track(eventName, {
         ...properties,
+        distinct_id: mixpanel.get_distinct_id(),
         timestamp: Date.now(),
         url: window.location.href,
       });

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 = () => {

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 (

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;

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;
       }}>
-      <h3>활동 사진</h3>
+      <Styled.PhotoListTitle>활동 사진</Styled.PhotoListTitle>
       <Styled.PhotoListWrapper>
         <Styled.PhotoList
           ref={containerRef}