[feature] 사용자 지원서에 믹스패널 이벤트를 추가한다 #746
Conversation
- 지원하기 버튼, 지원서 제출 성공 및 실패 로깅
seongwon030
requested review from
Zepelown,
lepitaaar,
oesnuj and
suhyun113
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning
|
| Cohort / File(s) | Summary of changes |
|---|---|
이벤트 상수 추가frontend/src/constants/eventName.ts |
EVENT_NAME에 APPLICATION_FORM_SUBMITTED 프로퍼티 추가 |
폼 제출 트래킹 로직 추가frontend/src/pages/ApplicationFormPage/ApplicationFormPage.tsx |
useMixpanelTrack와 EVENT_NAME를 도입하고, 폼 제출 시(유효성 검사 이전에) APPLICATION_FORM_SUBMITTED 이벤트를 전송하도록 호출 추가. catch에서 error 변수를 명시적으로 수집하도록 변경(기존 흐름 불변). |
Sequence Diagram(s)
sequenceDiagram
autonumber
participant U as 사용자
participant P as ApplicationFormPage
participant M as Mixpanel
participant S as 서버(API)
U->>P: 폼 제출 시도
P->>M: track(EVENT_NAME.APPLICATION_FORM_SUBMITTED, { clubName })
alt Validation passes
P->>S: applyToClub(formData)
alt Success
S-->>P: 200 OK
P-->>U: 성공 처리(기존 흐름)
else Failure
S-->>P: Error
P-->>U: 에러 처리(기존 흐름)
end
else Validation fails
P-->>U: 유효성 검사 오류 표시
end
Estimated code review effort
🎯 2 (Simple) | ⏱️ ~10 minutes
Possibly related issues
- MOA-236: 사용자 지원서에 믹스패널 이벤트를 추가한다 — 본 PR 목표와 직접 일치 (폼 제출 이벤트 추가).
- [feature] MOA-236 사용자 지원서에 믹스패널 이벤트를 추가한다 #745: 동일한 페이지에 APPLICATION_FORM_SUBMITTED 이벤트 추가와 관련됨.
Possibly related PRs
- [feature] 동아리 지원서 페이지 방문, 체류시간 로깅한다 #683: 동일 파일(ApplicationFormPage)에서 분석 트래킹 관련 변경을 한 PR로, 분석 계측 관련 연관성 높음.
Suggested labels
✨ Feature, 💻 FE
Suggested reviewers
- Zepelown
- oesnuj
- lepitaaar
Pre-merge checks and finishing touches
❌ Failed checks (1 warning)
| Check name | Status | Explanation | Resolution |
|---|---|---|---|
| Linked Issues Check | PR은 MOA-236에서 요구한 믹스패널 이벤트 추가 목표를 부분적으로 충족합니다: APPLICATION_FORM_SUBMITTED 이벤트를 추가하고 제출 시점에 트래킹을 전송하도록 했습니다; 그러나 이슈에 명시된 "지원하기 버튼 클릭" 이벤트와 "지원서 제출 성공/실패"를 구분하여 기록하는 후속 성공/실패 이벤트(성공 시 API 응답 이후 트래킹, 실패 시 catch에서의 실패 트래킹)는 코드상에 구현되어 있지 않아 요구사항을 온전히 만족하지 않습니다. | 지원하기 버튼 클릭 이벤트를 별도로 추가하고 제출 흐름에서 검증 및 API 호출 성공 시 SUCCESS 이벤트를, 오류 발생 시 catch 블록에서 FAILURE 이벤트를 전송하도록 구현한 후 다시 검토해 주세요; 또한 전송되는 속성(clubName 등)이 이슈 요구사항과 일관되는지 확인해 주세요. |
✅ Passed checks (4 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Title Check | ✅ Passed | PR 제목 "[feature] 사용자 지원서에 믹스패널 이벤트를 추가한다"는 변경의 핵심인 "사용자 지원서 관련 믹스패널 이벤트 추가"를 명확히 요약하고 있어 간결하고 관련성이 높습니다. |
| Out of Scope Changes Check | ✅ Passed | 변경 내용은 constants 파일에 이벤트 상수를 추가하고 ApplicationFormPage에 트래킹 호출과 catch 문 수정을 한정하여 수행되어 있으며, 제공된 링크된 이슈의 범위(지원서 관련 믹스패널 이벤트 추가)와 관련성이 높아 명백한 범위 외 변경은 발견되지 않습니다. |
| Docstring Coverage | ✅ Passed | No functions found in the changes. Docstring coverage check skipped. |
✨ 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/#745-add-events-application-MOA-236
📜 Recent review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Jira integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
frontend/src/constants/eventName.ts(1 hunks)frontend/src/pages/ApplicationFormPage/ApplicationFormPage.tsx(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- frontend/src/pages/ApplicationFormPage/ApplicationFormPage.tsx
- frontend/src/constants/eventName.ts
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.
Comment @coderabbitai help to get the list of available commands and usage tips.
![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
🧹 Nitpick comments (3)
frontend/src/constants/eventName.ts (1)
19-21: 이벤트 명칭 시제/표현 통일 제안
SubmittedvsSubmit Success/Failed처럼 시제가 혼재해 대시보드에서 리스트업 시 다소 일관성이 떨어집니다. 문자열 값만 아래처럼 통일하면 가독성이 좋아집니다. (키는 유지)- APPLICATION_FORM_SUBMIT_SUCCESS: 'Application Form Submit Success' as const, - APPLICATION_FORM_SUBMIT_FAILED: 'Application Form Submit Failed' as const, + APPLICATION_FORM_SUBMIT_SUCCESS: 'Application Form Submission Succeeded' as const, + APPLICATION_FORM_SUBMIT_FAILED: 'Application Form Submission Failed' as const,frontend/src/pages/ApplicationFormPage/ApplicationFormPage.tsx (2)
92-95: "Submitted" 이벤트는 검증 통과 후(실제 전송 직전)로 이동 권장현재는 유효성 검증 전에 전송되어 의미가 “제출 버튼 클릭”에 가깝습니다. 데이터 해석 혼선을 줄이려면 검증 통과 직후/API 호출 직전에 보내는 게 맞습니다.
const handleSubmit = async () => { - trackEvent(EVENT_NAME.APPLICATION_FORM_SUBMITTED, { - clubName: clubDetail?.name, - }); - const invalidIds = validateAnswers(formData.questions, getAnswersById); if (invalidIds.length > 0) { setInvalidQuestionIds(invalidIds); handleScrollToInvalid(invalidIds); return; } try { + // 실제 제출 직전으로 이동 + trackEvent(EVENT_NAME.APPLICATION_FORM_SUBMITTED, { + clubId, + clubName: clubDetail.name, + }); await applyToClub(clubId, answers);참고: 검증 실패 드롭오프를 보고 싶다면 별도 이벤트(
APPLICATION_FORM_VALIDATION_FAILED)를 추가해invalidCount정도만 전송하는 방안을 고려해 주세요.
105-107: 식별자 속성 추가 제안: clubId 포함분석에서 안정적 조인을 위해
clubId를 함께 전송하는 편이 좋습니다.clubName은 변경 가능성이 있어 보조 지표로 유지하세요.- trackEvent(EVENT_NAME.APPLICATION_FORM_SUBMIT_SUCCESS, { - clubName: clubDetail?.name, - }); + trackEvent(EVENT_NAME.APPLICATION_FORM_SUBMIT_SUCCESS, { + clubId, + clubName: clubDetail.name, + });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Jira integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
frontend/src/constants/eventName.ts(1 hunks)frontend/src/pages/ApplicationFormPage/ApplicationFormPage.tsx(3 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/constants/eventName.tsfrontend/src/pages/ApplicationFormPage/ApplicationFormPage.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/ApplicationFormPage/ApplicationFormPage.tsx
🧬 Code graph analysis (1)
frontend/src/pages/ApplicationFormPage/ApplicationFormPage.tsx (1)
frontend/src/constants/eventName.ts (1)
EVENT_NAME(1-22)
🔇 Additional comments (2)
frontend/src/pages/ApplicationFormPage/ApplicationFormPage.tsx (2)
17-18: 믹스패널 트래킹 의존성 추가 OK불필요한 사이드이펙트나 순환참조 이슈 없어 보입니다.
25-25: trackEvent 훅 사용 OK별도 메모이제 필요 없어 보이며, 호출부에서만 사용되어 안전합니다.
oesnuj
left a comment
oesnuj
left a comment
There was a problem hiding this comment.
LGTM 👍
지원서 제출 이벤트도 챙겨주셔서 좋습니다.
데이터 많이 쌓아보죠
2 participants
#️⃣연관된 이슈
📝작업 내용
로깅목록
중점적으로 리뷰받고 싶은 부분(선택)
논의하고 싶은 부분(선택)
🫡 참고사항
Summary by CodeRabbit
New Features
Chores