[feat] GA 연동

[jstar000]

📌 Summary

해당 PR에 대한 작업 내용을 요약하여 작성해주세요.

• close [feat] GA 연동 #186

관련 있는 Issue를 태그해주세요. (e.g. > - #1)

📄 Tasks

해당 PR에 수행한 작업을 작성해주세요.

• GA4 기본 세팅 및 페이지뷰 자동 추적 구현
• 핵심 사용자 이벤트 10개 추적 코드 추가
  • 카카오 로그인, 회원가입 완료, 검진결과 제출/수정, OCR 완료, 검진 분석 진입, 상세 리포트 조회, 병원 검색, 로그아웃, 회원탈퇴
• main.tsx에서 GA 초기화, router-provider.tsx에서 SPA 페이지뷰 자동 추적

🔍 To Reviewer

리뷰어에게 요청하는 내용을 작성해주세요.

• .env에 GA Measurement ID가 없으면 GA 코드가 자동 비활성화되므로 개발환경에 영향 없음

📸 Screenshot

작업한 내용에 대한 스크린샷을 첨부해주세요.

Summary by CodeRabbit

릴리스 노트

• Chores
  • 분석 인프라를 통합하여 사용자 상호작용 및 페이지 방문 추적 기능을 추가했습니다.
  • 로그인, 가입, 체크업, 건강 리포트, 병원 검색 등 주요 사용자 활동에 대한 추적을 활성화했습니다.

[github-actions]

빌드 결과

빌드 성공 🎉

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: d8c28e97-5bbb-4692-ba41-24279f211bdf

📥 Commits

Reviewing files that changed from the base of the PR and between d66a1be and 8b53111.

📒 Files selected for processing (16)

• src/app/providers/router-provider.tsx
• src/main.tsx
• src/pages/checkup-result-edit/apis/mutations/use-health-report-update-mutation.ts
• src/pages/checkup-result/apis/mutations/use-health-report-mutation.ts
• src/pages/checkup-result/ui/ocr-section.tsx
• src/pages/health-analysis/health-analysis.tsx
• src/pages/health-report-detail/ui/health-report-detail.tsx
• src/pages/hospital-search/ui/hospital-search.tsx
• src/pages/login/ui/login.tsx
• src/pages/my-page/apis/mutations/use-logout.ts
• src/pages/my-page/apis/mutations/use-withdrawal.ts
• src/pages/signup/ui/tos.tsx
• src/shared/libs/analytics/events.ts
• src/shared/libs/analytics/gtag.ts
• src/shared/libs/analytics/index.ts
• src/shared/libs/analytics/types.ts

---

📝 Walkthrough

Walkthrough

Google Analytics 4 통합을 추가했습니다. GA 초기화 모듈, 이벤트 추적 함수들을 구현하고, 로그인, 회원가입, 체크업, 분석 페이지 등 주요 사용자 액션 시점에 추적 이벤트를 호출하도록 수정했습니다.

Changes

Cohort / File(s)	Summary
Analytics 기초 모듈 src/shared/libs/analytics/gtag.ts, src/shared/libs/analytics/types.ts, src/shared/libs/analytics/events.ts, src/shared/libs/analytics/index.ts	GA4 초기화(initGA), 페이지뷰 추적(trackPageView), 이벤트 추적(trackEvent) 함수 구현 및 공개 인터페이스 정의. 측정 ID 환경변수 기반 조건부 초기화 포함.
앱 초기화 단계 src/main.tsx, src/app/providers/router-provider.tsx	initGA() 부트스트랩 호출 및 라우터 구독을 통해 페이지뷰 자동 추적 설정.
페이지 뷰 추적 src/pages/health-analysis/health-analysis.tsx, src/pages/hospital-search/ui/hospital-search.tsx, src/pages/health-report-detail/ui/health-report-detail.tsx	각 페이지 마운트 또는 라우트 파라미터 변경 시 trackHealthAnalysisView(), trackHospitalSearchView(), trackHealthReportView(type) 호출.
사용자 액션 추적 src/pages/login/ui/login.tsx, src/pages/signup/ui/tos.tsx, src/pages/checkup-result/ui/ocr-section.tsx	로그인, 회원가입, OCR 업로드 완료 시점에 각각 trackKakaoLoginClick(), trackSignupComplete(), trackOcrUploadComplete() 호출.
API 뮤테이션 추적 src/pages/checkup-result/apis/mutations/use-health-report-mutation.ts, src/pages/checkup-result-edit/apis/mutations/use-health-report-update-mutation.ts, src/pages/my-page/apis/mutations/use-logout.ts, src/pages/my-page/apis/mutations/use-withdrawal.ts	체크업 제출/수정, 로그아웃, 회원탈퇴 성공 시 onSuccess 핸들러에서 추적 이벤트 발생.

Sequence Diagram

sequenceDiagram
    participant App as 앱 시작
    participant Analytics as GA 모듈
    participant GTM as Google Analytics<br/>(측정 ID)
    participant Router as 라우터
    participant UI as 페이지/UI

    App->>Analytics: initGA() 호출
    Analytics->>GTM: script 주입 & gtag 함수 설정
    GTM-->>Analytics: dataLayer 준비 완료
    Analytics->>GTM: config + send_page_view:false 전송

    Router->>Analytics: 페이지 변경 감지
    Router->>Analytics: trackPageView(pathname) 호출
    Analytics->>GTM: config(page_path) 전송

    UI->>UI: 사용자 액션 발생
    UI->>Analytics: trackKakaoLoginClick() 등 호출
    Analytics->>GTM: event 전송 (eventName, params)

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

여러 파일에 분산된 변경이지만 대부분 동일한 패턴의 추적 함수 호출이며, GA 기초 모듈의 구현 로직(script injection, gtag 함수 정의, 환경변수 조건 처리)을 중심으로 검토 필요합니다.

Possibly related PRs

• [feat] 검진 결과 수정 페이지 구현 #159: checkup-result-edit 뮤테이션 및 OCR 섹션 수정과 겹침
• [feat] 검진분석결과 항목별 상세 히스토리 조회 api 연동 #117: health-report-detail 페이지의 useParams 및 라우트 파라미터 처리 관련
• [feat] 인증/인가 로직 구축 #87: 로그인 버튼 onClick 핸들러 수정과 직접 연관

Suggested reviewers

• eojindesu
• mimizae
• wonpark1

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/#186/ga-tracking

---

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

_{Comment @coderabbitai help to get the list of available commands and usage tips.}