[feature] 믹스패널 track 2차 추가 및 기타 작업 #283
Conversation
Walkthrough이 PR은 믹스패널 추적 기능에 추가 정보를 포함하도록 변경되었습니다. SearchBox에서는 검색 실행 시 기존 keyword 외에 현재 페이지 경로(page)를 함께 전달하며, usePhotoNavigation와 InfoTabs에서는 각각 사진 내비게이션 및 탭 클릭 이벤트에 대해 추적 호출이 추가되었습니다. 또한, mixpanel.track 호출 시 사용자 고유 식별자인 distinct_id가 포함되어 추적 데이터의 정밀도를 높였습니다. 추가로, import 경로 수정과 styled component 추가를 통해 코드 구조와 UI 스타일이 개선되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant 사용자 as 사용자
participant SB as SearchBox 컴포넌트
participant Tracker as useMixpanelTrack
participant MP as Mixpanel SDK
사용자->>SB: 검색 실행 (키워드 입력)
SB->>Tracker: trackEvent({ keyword, page })
Tracker->>MP: mixpanel.track("검색 실행", { keyword, page, distinct_id })
sequenceDiagram
participant 사용자 as 사용자
participant PN as usePhotoNavigation
participant Tracker as useMixpanelTrack
participant MP as Mixpanel SDK
사용자->>PN: 다음/이전 사진 클릭
PN->>Tracker: trackEvent({ action: "next" or "prev", index })
Tracker->>MP: mixpanel.track("사진 내비게이션", { action, index, distinct_id })
sequenceDiagram
participant 사용자 as 사용자
participant IT as InfoTabs 컴포넌트
participant Tracker as useMixpanelTrack
participant MP as Mixpanel SDK
사용자->>IT: 탭 클릭
IT->>Tracker: trackEvent({ event: "Tab Clicked", tabName, tabIndex })
Tracker->>MP: mixpanel.track("Tab Clicked", { tabName, tabIndex, distinct_id })
Assessment against linked issues
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (7)
🔇 Additional comments (11)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for moadong ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
There was a problem hiding this comment.
Pull Request Overview
This PR reorganizes hook directory structures, updates UI styles for activity photos, and introduces additional Mixpanel tracking events throughout the ClubDetailPage.
- Moved hooks (useAutoScroll, usePhotoNavigation) to more specific directories
- Updated activity photo title styling using a new styled component
- Added distinct_id and tracking events for Mixpanel in various navigation and search interactions
Reviewed Changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/pages/ClubDetailPage/components/PhotoList/PhotoList.tsx | Updated import for usePhotoNavigation and replaced the h3 title with a styled component |
| frontend/src/pages/ClubDetailPage/components/PhotoList/PhotoList.styles.ts | Introduced the PhotoListTitle styled component for consistent styling |
| frontend/src/pages/ClubDetailPage/components/InfoTabs/InfoTabs.tsx | Integrated Mixpanel tracking for tab clicks |
| frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx | Updated useAutoScroll import path |
| frontend/src/hooks/useMixpanelTrack.ts | Added distinct_id to tracking events |
| frontend/src/hooks/PhotoList/usePhotoNavigation.ts | Added Mixpanel tracking for photo navigation actions |
| frontend/src/components/common/SearchBox/SearchBox.tsx | Updated search tracking event to include page pathname |
oesnuj
left a comment
oesnuj
left a comment
There was a problem hiding this comment.
믹스패널 추가 수고하셨습니다!
이제 활동 사진 쪽 이벤트도 수집하네요
2 participants
#️⃣연관된 이슈
📝작업 내용
1. hooks 폴더분리 83d3373
hooks/useAutoScroll->hooks/InfoTabs/useAutoScrollhooks/usePhotoNavigation->hooks/PhotoList/usePhotoNavigation2. 활동사진 스타일 통일 5a76c20
3. distinct_id 추가 f175638
distinct_id추가하면 로그인없이도 사용자 개인을 추적해준다고 합니다.4. track 추가
중점적으로 리뷰받고 싶은 부분(선택)
논의하고 싶은 부분(선택)
🫡 참고사항
Summary by CodeRabbit