Feat/ga4 for prd

[Dev-lemongrab]

Motivation

GA4 이벤트 트래킹이 부분적으로만 구현되어 있어, 사용자 행동 분석에 필요한 핵심 지표를 수집하지 못하고 있었습니다. 또한 SPA 환경에서 페이지 전환 시 페이지뷰가 자동으로 트래킹되지 않는 문제가 있었습니다.

Modification

1. SPA 페이지뷰 트래킹 추가

• usePageViewTracking 커스텀 훅 생성
• DefaultLayout, SubLayout에 훅 적용
• 모든 라우트 전환 시 자동으로 페이지뷰 이벤트 전송

2. GA4 커스텀 이벤트 추가

• poll_result_viewed: 마감 게시물 결과 페이지 조회 시
• onboarding_viewed: 온보딩 화면 진입 시
• poll_voted: 투표 참여 시 (재투표/취소 무관)

3. GA4 측정 ID 변경

• 운영 환경용 스트림 ID로 변경 (G-E7XGKV9GNF)

---

Result

• GA4에서 SPA 페이지뷰 트래킹 가능
• 마감 게시물 결과 확인 비율 분석 가능
• 온보딩 화면 진입 횟수 측정 가능
• 투표 참여율 분석 가능
• GA4 DebugView에서 실시간 이벤트 확인 가능

[github-actions]

🤖 AI Code Review (OpenAI)

• src/hooks/usePageViewTracking.ts + useEffect 의존성 배열 + ReactGA.send 호출 시 location 객체 전체가 아닌 location.pathname과 location.search를 분리해서 의존성 배열에 넣는 것이 더 명확하고 불필요한 재호출을 줄일 수 있음.
  → useEffect(() => {...}, [location.pathname, location.search]) 로 변경 권장.

• src/components/poll-detail/Button/PollButton.tsx + ReactGA.event 호출 위치 + onSuccess 콜백 내에서 ReactGA 이벤트를 호출하는 것은 적절하나, mutate 함수 호출 시 에러 처리(onError)에도 이벤트 로깅이 있으면 추후 문제 분석에 도움됨.
  → onError 콜백에 실패 이벤트 로깅 추가 고려.

• src/pages/OnBoarding/OnBoardingPage.tsx + ReactGA 이벤트 중복 호출 가능성 + showSplash 상태가 false가 된 직후 이벤트를 보내는데, 만약 컴포넌트가 여러 번 리렌더링되면 이벤트가 중복 발생할 수 있음.
  → useEffect 내부에 이벤트 중복 방지를 위한 플래그 또는 조건 추가 고려.

• src/pages/PollDetail/PollResultPage.tsx + ReactGA 이벤트 의존성 + post, result, postId가 모두 truthy일 때 이벤트를 보내는데, postId는 useParams에서 string | undefined일 수 있으므로 undefined 체크가 필요함.
  → postId가 확실히 존재하는지 확인 후 이벤트 호출 권장.

• index.html + Google Analytics ID 하드코딩 + GA ID가 하드코딩되어 있어 환경별로 다르게 관리하기 어려움.
  → 환경변수 또는 별도 설정 파일로 관리하는 것이 유지보수에 유리.

• src/components/common/Layout/DefaultLayout.tsx, SubLayout.tsx + 커스텀 훅 호출 위치 + usePageViewTracking 훅을 레이아웃 컴포넌트 최상단에 호출한 것은 적절하나, 훅 내부에서 location 변화를 감지하므로 라우팅 구조 변경 시 의도치 않은 중복 호출 가능성 있음.
  → 페이지별로 별도 훅 호출 또는 라우터 최상단에서 한 번만 호출하는 방안 검토.

• nit: src/components/poll-detail/Button/PollButton.tsx + 불필요한 주석 제거 + 주석 // voteMode 종료는 코드 자체가 명확하므로 제거해도 무방함.

• nit: src/pages/OnBoarding/OnBoardingPage.tsx + useEffect 의존성 배열 + 첫 useEffect에 빈 배열([]) 대신 명시적으로 의존성 추가 고려 (예: navigate)하여 의도 명확히 할 수 있음.

• nit: index.html + script 태그 async 속성 위치 통일 + async 속성 위치가 들쭉날쭉하므로 일관성 있게 정리하면 가독성 향상.

자동 생성된 리뷰입니다. 참고용으로만 사용해주세요.