[feature] 동아리명은 믹스패널에 arguments로 전달

[seongwon030]

#️⃣연관된 이슈

ex) #397

📝작업 내용

동아리명이 전달되지 않는 문제

• useTrackPageView에 clubName 전달
• arguments로 전달

// clubDetailPage
  useTrackPageView(`ClubDetailPage visited`, clubDetail?.name);

// useTrackPageView
 mixpanel.track(`${pageName} Duration`, {
        url: window.location.href,
        duration: duration,
        duration_seconds: Math.round(duration / 1000),
        clubName,
      });

이벤트 속성 결과

언마운트 시에도 체류시간 계산

return () => {
      trackPageDuration();
      window.removeEventListener('beforeunload', trackPageDuration);
      document.removeEventListener('visibilitychange', trackPageDuration);
    };

• 사용자가 다른 페이지로 이동하는 경우를 고려하여, 클린업 시에 유지시간을 계산하도록 했습니다.

중점적으로 리뷰받고 싶은 부분(선택)

리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요

ex) 메서드 XXX의 이름을 더 잘 짓고 싶은데 혹시 좋은 명칭이 있을까요?

논의하고 싶은 부분(선택)

논의하고 싶은 부분이 있다면 작성해주세요.

🫡 참고사항

Summary by CodeRabbit

• 신규 기능

  • 페이지 방문 추적 시 클럽 이름 정보를 추가로 기록합니다.
  • 페이지 방문 시간 측정이 더욱 정확해졌습니다.

• 버그 수정

  • 페이지 종료 시 방문 시간 기록이 누락되는 문제를 개선했습니다.

[netlify]

✅ Deploy Preview for moadong ready!

Name	Link
🔨 Latest commit	c9a5873
🔍 Latest deploy log	https://app.netlify.com/sites/moadong/deploys/68214d1e7edce000081b68ad
😎 Deploy Preview	https://deploy-preview-398--moadong.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 33 Accessibility: 87 Best Practices: 92 SEO: 92 PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[coderabbitai]

Walkthrough

useTrackPageView 훅이 동아리명(clubName)을 인자로 받아 믹스패널 이벤트에 별도 argument로 전달하도록 수정되었습니다. 또한 페이지 방문 시간 추적이 더 견고하게 개선되었으며, ClubDetailPage에서 해당 훅의 호출 방식이 변경되어 동아리명이 별도 인자로 전달됩니다.

Changes

파일/경로	변경 요약
frontend/src/hooks/useTrackPageView.ts	clubName을 인자로 추가, 방문 시간 추적 로직 개선, 믹스패널 이벤트에 동아리명 argument로 전달
frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx	useTrackPageView 호출 시 동아리명을 별도 인자로 전달하도록 변경

Sequence Diagram(s)

sequenceDiagram
    participant ClubDetailPage
    participant useTrackPageView
    participant Mixpanel

    ClubDetailPage->>useTrackPageView: useTrackPageView("ClubDetailPage visited", clubName)
    useTrackPageView->>Mixpanel: track("ClubDetailPage visited", { clubName })
    Note over useTrackPageView: 페이지 언마운트/숨김 시
    useTrackPageView->>Mixpanel: track("ClubDetailPage duration", { clubName, duration })

Loading

Assessment against linked issues

Objective	Addressed	Explanation
동아리명을 믹스패널에 arguments로 전달 (FE-112)	✅

Tip

⚡️ Faster reviews with caching

• CodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure Review - Disable Cache at either the organization or repository level. If you prefer to disable all data retention across your organization, simply turn off the Data Retention setting under your Organization Settings.

Enjoy the performance boost—your workflow just got faster.

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 74b7c32 and c9a5873.

📒 Files selected for processing (2)

• frontend/src/hooks/useTrackPageView.ts (1 hunks)
• frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx (1 hunks)

🔇 Additional comments (6)

frontend/src/hooks/useTrackPageView.ts (5)

5-9: 훅 시그니처와 상태 관리가 개선되었습니다.

훅이 optional 매개변수 clubName을 받도록 변경되었고, useRef를 사용하여 페이지 방문 시간과 이벤트 추적 상태를 관리하는 방식이 잘 구현되었습니다. 특히 isTracked 플래그를 통해 중복 이벤트를 방지하는 로직이 효과적입니다.

---

15-16: 이벤트 속성에 동아리명 추가 완료.

Mixpanel 이벤트에 clubName 속성을 추가하여 PR 목표에 맞게 동아리명을 인자로 전달하도록 변경되었습니다.

---

19-28: 이벤트 중복 방지 및 지속 시간 측정 로직이 개선되었습니다.

중복 이벤트 방지를 위한 isTracked 체크와 함께 페이지 지속 시간을 정확하게 계산하고, 이를 초 단위로 변환하는 로직이 추가되었습니다. 또한 clubName을 이벤트 속성에 포함시켜 동아리별 분석이 가능하도록 했습니다.

---

37-41: 컴포넌트 언마운트 시 정확한 추적 처리가 구현되었습니다.

컴포넌트가 언마운트될 때 trackPageDuration 함수를 호출하여 페이지 체류 시간을 정확히 측정하고, 이벤트 리스너를 제거하는 정리 로직이 잘 구현되었습니다. 이는 사용자가 페이지를 떠날 때도 데이터를 정확히 추적할 수 있게 합니다.

---

42-42: 의존성 배열이 적절히 업데이트되었습니다.

clubName이 의존성 배열에 추가되어 동아리명이 변경될 때 효과가 올바르게 다시 실행되도록 설정되었습니다.

frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx (1)

33-33: 페이지 추적 훅 호출 방식이 적절히 변경되었습니다.

이제 useTrackPageView 훅에 페이지명과 동아리명을 별도의 인자로 전달하여 믹스패널에서 보다 구조화된 데이터 분석이 가능해졌습니다. clubDetail?.name을 사용하여 데이터가 로드되지 않았을 때도 안전하게 처리됩니다.

✨ Finishing Touches

• 📝 Generate Docstrings

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 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.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in 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 generate unit testing code.
  • @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 pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

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.

[oesnuj]

믹스패널 수집 로직이 안정적으로 구성된 것 같아요
수고하셨습니다~