[feature] sns링크버튼에 믹스패널 이벤트를 추가한다#614
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Warning
|
| Cohort / File(s) | Change Summary |
|---|---|
SNS 링크 믹스패널 이벤트 트래킹 추가 및 클럽 이름 전달frontend/src/pages/ClubDetailPage/components/SnsLinkIcons/SnsLinkIcons.tsx |
useMixpanelTrack 훅 도입, trackEvent 함수로 SNS 아이콘 클릭 시 'sns링크 버튼 클릭' 이벤트 전송, clubName 옵셔널 prop 추가 |
SnsLinkIcons에 클럽 이름 전달 추가frontend/src/pages/ClubDetailPage/components/InfoBox/InfoBox.tsx |
SnsLinkIcons 컴포넌트 호출 시 clubName prop으로 클럽 이름 전달 추가 |
공유하기 버튼 클릭 이벤트 트래킹 수정frontend/src/pages/ClubDetailPage/components/ShareButton/ShareButton.tsx |
공유하기 클릭 이벤트명 문자열에서 고정 이벤트명 "공유하기 버튼 클릭"으로 변경, 클럽 이름을 이벤트 속성으로 분리하여 전달하도록 수정 |
Sequence Diagram(s)
sequenceDiagram
participant User
participant SnsLinkIcons
participant useMixpanelTrack
participant Mixpanel
User->>SnsLinkIcons: SNS 아이콘 클릭
SnsLinkIcons->>useMixpanelTrack: trackEvent('sns링크 버튼 클릭', { platform, clubName })
useMixpanelTrack->>Mixpanel: 이벤트 전송
Estimated code review effort
🎯 2 (Simple) | ⏱️ ~7 minutes
Assessment against linked issues
| Objective | Addressed | Explanation |
|---|---|---|
| SNS 링크 버튼에 믹스패널 이벤트 추가 (MOA-127) | ✅ | |
| Platform 구분해서 이벤트 추적 (MOA-127) | ✅ |
Assessment against linked issues: Out-of-scope changes
(해당 사항 없음)
Possibly related issues
- [feature] MOA-127 sns링크 버튼에 믹스패널 이벤트를 추가한다 #613: SNS 링크 버튼 클릭 시 Mixpanel 이벤트 트래킹 구현 목표와 본 PR의 변경사항이 직접적으로 일치합니다.
Possibly related PRs
- [feature] 상세페이지 동아리 SNS 링크 노출 기능 추가 #409:
SnsLinkIcons컴포넌트 및InfoBox에서의 사용 관련, 이벤트 트래킹 기능 추가로 직접적인 연관성이 있습니다. - [fix] 동아리 SNS 링크 관련 전체 기능 재활성화 #504:
SnsLinkIcons컴포넌트 렌더링 및 입력 기능 재활성화 관련 PR로, 본 PR과는 기능적 중복 없이 사용법 변경에 연관됩니다.
Suggested labels
✨ Feature, 💻 FE
Note
⚡️ Unit Test Generation is now available in beta!
Learn more here, or try it out under "Finishing Touches" below.
📜 Recent review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
frontend/src/pages/ClubDetailPage/components/InfoBox/InfoBox.tsx(1 hunks)frontend/src/pages/ClubDetailPage/components/ShareButton/ShareButton.tsx(1 hunks)frontend/src/pages/ClubDetailPage/components/SnsLinkIcons/SnsLinkIcons.tsx(2 hunks)
✅ Files skipped from review due to trivial changes (2)
- frontend/src/pages/ClubDetailPage/components/ShareButton/ShareButton.tsx
- frontend/src/pages/ClubDetailPage/components/InfoBox/InfoBox.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- frontend/src/pages/ClubDetailPage/components/SnsLinkIcons/SnsLinkIcons.tsx
✨ Finishing Touches
- 📝 Generate Docstrings
🧪 Generate unit tests
- Create PR with unit tests
- Post copyable unit tests in a comment
- Commit unit tests in branch
feature/#613-sns-link-track-event-MOA-127
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.
🪧 Tips
Chat
There are 3 ways to chat with CodeRabbit:
- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
I pushed a fix in commit <commit_id>, please review it.Explain this complex logic.Open a follow-up GitHub issue for this discussion.
- Files and specific lines of code (under the "Files changed" tab): Tag
@coderabbitaiin a new review comment at the desired location with your query. Examples:@coderabbitai explain this code block.@coderabbitai modularize this function.
- PR comments: Tag
@coderabbitaiin a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.@coderabbitai read src/utils.ts and explain its main purpose.@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.@coderabbitai help me debug CodeRabbit configuration file.
Support
Need help? Create a ticket on our support page for assistance with any issues or questions.
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)
@coderabbitai pauseto pause the reviews on a PR.@coderabbitai resumeto resume the paused reviews.@coderabbitai reviewto trigger an incremental review. This is useful when automatic reviews are disabled for the repository.@coderabbitai full reviewto do a full review from scratch and review all the files again.@coderabbitai summaryto regenerate the summary of the PR.@coderabbitai generate docstringsto generate docstrings for this PR.@coderabbitai generate sequence diagramto generate a sequence diagram of the changes in this PR.@coderabbitai generate unit teststo generate unit tests for this PR.@coderabbitai resolveresolve all the CodeRabbit review comments.@coderabbitai configurationto show the current CodeRabbit configuration for the repository.@coderabbitai helpto get help.
Other keywords and placeholders
- Add
@coderabbitai ignoreanywhere in the PR description to prevent this PR from being reviewed. - Add
@coderabbitai summaryto generate the high-level summary at a specific location in the PR description. - Add
@coderabbitaianywhere in the PR title to generate the title automatically.
Documentation and Community
- Visit our Documentation for detailed information on how to use CodeRabbit.
- Join our Discord Community to get help, request features, and share feedback.
- Follow us on X/Twitter for updates and announcements.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
frontend/src/pages/ClubDetailPage/components/SnsLinkIcons/SnsLinkIcons.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
frontend/**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (frontend/.cursorrules)
frontend/**/*.{ts,tsx}: Replace magic numbers with named constants for clarity.
Replace complex or nested ternary operators with if/else statements or IIFEs for readability.
Assign complex boolean conditions to named variables.
Use consistent return types for similar functions and hooks.
Avoid hidden side effects; functions should only perform actions implied by their signature (Single Responsibility Principle).
Use unique, descriptive names for custom wrappers and functions to avoid ambiguity.
Define constants near related logic or ensure names link them clearly.
Files:
frontend/src/pages/ClubDetailPage/components/SnsLinkIcons/SnsLinkIcons.tsx
frontend/**/*.tsx
📄 CodeRabbit Inference Engine (frontend/.cursorrules)
frontend/**/*.tsx: Abstract complex logic/interactions into dedicated components or higher-order components (HOCs).
Separate significantly different conditional UI/logic into distinct components.
Colocate simple, localized logic or use inline definitions to reduce context switching.
Choose field-level or form-level cohesion based on form requirements.
Break down broad state management into smaller, focused hooks or contexts.
Use component composition instead of props drilling.
Files:
frontend/src/pages/ClubDetailPage/components/SnsLinkIcons/SnsLinkIcons.tsx
🧠 Learnings (7)
📚 Learning: applies to frontend/**/*.tsx : break down broad state management into smaller, focused hooks or cont...
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Break down broad state management into smaller, focused hooks or contexts.
Applied to files:
frontend/src/pages/ClubDetailPage/components/SnsLinkIcons/SnsLinkIcons.tsx
📚 Learning: applies to frontend/**/*.{ts,tsx} : use consistent return types for similar functions and hooks....
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.{ts,tsx} : Use consistent return types for similar functions and hooks.
Applied to files:
frontend/src/pages/ClubDetailPage/components/SnsLinkIcons/SnsLinkIcons.tsx
📚 Learning: applies to frontend/**/*.tsx : colocate simple, localized logic or use inline definitions to reduce ...
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Colocate simple, localized logic or use inline definitions to reduce context switching.
Applied to files:
frontend/src/pages/ClubDetailPage/components/SnsLinkIcons/SnsLinkIcons.tsx
📚 Learning: applies to frontend/**/*.tsx : use component composition instead of props drilling....
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Use component composition instead of props drilling.
Applied to files:
frontend/src/pages/ClubDetailPage/components/SnsLinkIcons/SnsLinkIcons.tsx
📚 Learning: adminpage.tsx에서 현재 하드코딩된 클럽 id('67d2e3b9b15c136c6acbf20b')는 로그인 기능 구현 후 동적으로 가져오는 방식으로 수정될 예정입니다....
Learnt from: seongwon030
PR: Moadong/moadong#195
File: frontend/src/pages/AdminPage/AdminPage.tsx:7-7
Timestamp: 2025-03-19T05:18:07.818Z
Learning: AdminPage.tsx에서 현재 하드코딩된 클럽 ID('67d2e3b9b15c136c6acbf20b')는 로그인 기능 구현 후 동적으로 가져오는 방식으로 수정될 예정입니다.
Applied to files:
frontend/src/pages/ClubDetailPage/components/SnsLinkIcons/SnsLinkIcons.tsx
📚 Learning: applies to frontend/**/*.tsx : separate significantly different conditional ui/logic into distinct c...
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Separate significantly different conditional UI/logic into distinct components.
Applied to files:
frontend/src/pages/ClubDetailPage/components/SnsLinkIcons/SnsLinkIcons.tsx
📚 Learning: applies to frontend/**/*.tsx : abstract complex logic/interactions into dedicated components or high...
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Abstract complex logic/interactions into dedicated components or higher-order components (HOCs).
Applied to files:
frontend/src/pages/ClubDetailPage/components/SnsLinkIcons/SnsLinkIcons.tsx
🔇 Additional comments (2)
frontend/src/pages/ClubDetailPage/components/SnsLinkIcons/SnsLinkIcons.tsx (2)
5-5: 훅 임포트가 올바르게 추가되었습니다.Mixpanel 이벤트 트래킹을 위한 커스텀 훅이 적절히 임포트되었습니다.
12-12: 훅 사용법이 올바릅니다.
useMixpanelTrack훅을 사용하여trackEvent함수를 가져오는 구현이 적절합니다.
frontend/src/pages/ClubDetailPage/components/SnsLinkIcons/SnsLinkIcons.tsx
Outdated
Show resolved
Hide resolved
oesnuj
left a comment
oesnuj
left a comment
There was a problem hiding this comment.
믹스패널 SNS 클릭 추적 좋습니다~
추후 인스타, 유튜브 등 세부적으로 추적해도 좋을 것 같네용
수고하셨습니다 👍
현재 |
- SnsIcon의 onClick을 SnsLink로 이동하여 이벤트 전파 문제 해결 - 링크 클릭과 이벤트 추적이 독립적으로 동작하도록 개선
- SNS 링크 클릭 시 동아리 이름과 플랫폼 정보 추적
3 participants
#️⃣연관된 이슈
📝작업 내용
이벤트 화면
중점적으로 리뷰받고 싶은 부분(선택)
논의하고 싶은 부분(선택)
🫡 참고사항
Summary by CodeRabbit