Feat(client, extension): firebase message & service worker 설정

[constantly-dev]

📌 Related Issues

관련된 Issue를 태그해주세요. (e.g. - close #25)

• close [Feat] firebase messaging 기능 구현 #100

📄 Tasks

⭐ PR Point (To Reviewer)

📷 Screenshot

Summary by CodeRabbit

• 신규 기능
  • 푸시 알림 지원 추가: 알림 권한 승인 후 서비스 워커가 등록되어 FCM 푸시를 수신하고 시스템 알림으로 표시합니다.
  • 온보딩 단계 확장: 온보딩이 6단계(0–5)로 늘어나며 Mac 사용자 대상 최종 단계가 추가되었습니다.
• 개선
  • 가입 완료 흐름 조정: 최종 확정 단계가 이동되어 완료 후 홈으로의 리다이렉트가 명확해졌습니다.
  • 안내 강화: 서비스 워커 등록 성공/실패 시 사용자에게 알림으로 결과를 알려줍니다.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
pinback-client-client	Ready	Preview	Comment	Sep 14, 2025 5:01am

[coderabbitai]

Walkthrough

FCM용 서비스 워커 스크립트가 추가되고(on push 처리 포함), 온보딩 MainCard에서 서비스 워커 등록 호출이 통합되었습니다. 온보딩 단계가 0–5로 확장되었고, 회원가입 POST 호출이 payload + options 형태로 변경되었습니다.

Changes

Cohort / File(s)	Change summary
Service Worker (FCM) apps/client/public/firebase-messaging-sw.js	설치/활성화/푸시 이벤트 리스너 추가. install에서 self.skipWaiting() 호출, activate 시 로그, push에서 JSON 파싱 후 showNotification으로 알림 표시하고 e.waitUntil로 대기.
Onboarding Flow Integration apps/client/src/pages/onBoarding/components/funnel/MainCard.tsx	registerServiceWorker 유틸 import 및 requestFCMToken() 내 호출 추가. 온보딩 단계가 0–5로 확장되어 최종 처리(회원가입/리다이렉트)가 5단계로 이동. postSignData 호출이 (payload, options) 2인자 형태로 변경. 소폭 포매팅 수정.
SW Registration Utility apps/client/src/pages/onBoarding/utils/registerServiceWorker.ts	export const registerServiceWorker = () => { ... } 신규 추가. firebase-messaging-sw.js 등록, 성공/실패 로그 및 alert 처리.

Sequence Diagram(s)

sequenceDiagram
  actor User as 사용자
  participant MC as MainCard (온보딩)
  participant Reg as registerServiceWorker()
  participant SW as 브라우저 Service Worker
  participant BE as API (회원가입)

  User->>MC: 온보딩 진행
  MC->>MC: 알림 권한 요청 / FCM 토큰 요청
  MC->>Reg: registerServiceWorker()
  Reg->>SW: firebase-messaging-sw.js 등록
  SW-->>Reg: 등록 결과
  Note over MC,SW: 온보딩 단계 확장 (0–5), 최종 처리 5단계로 이동

  MC->>BE: step==5 시 회원가입 POST(payload, options)
  BE-->>MC: onSuccess
  MC->>User: "/"로 리다이렉트

Loading

sequenceDiagram
  participant Push as Push Service
  participant SW as firebase-messaging-sw.js
  participant UI as 브라우저 UI

  Push-->>SW: push 이벤트 (JSON payload)
  SW->>SW: payload 파싱(title, body)
  SW->>UI: showNotification(title, body)
  UI-->>SW: 표시 완료

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• [Api] 카테고리 삭제 #90 — FCM 서비스 워커 및 등록 로직을 추가/변경한 PR과 직접적으로 겹칩니다.
• Feat(client): FCM 연동 및 fcm 토큰 전달 #89 — 온보딩 MainCard의 FCM/서비스워커 관련 통합 변경과 연관됩니다.
• Feat(client&extension): 온보딩<->익스텐션 데이터 통신 작업 #99 — MainCard의 가입 플로우 및 FCM 토큰 처리 변경 사항과 관련됩니다.

Suggested labels

🛠️ Feature, feat

Suggested reviewers

• jllee000
• karnelll

Poem

깡총깡총, 워커가 출발했네—푸시 소식 실어 와요!
토큰 반짝, 단계 하나 더 밟고, 🔔 찡!
알림 뜨면 당근 한 입에 뿌듯해라. 🥕

Pre-merge checks and finishing touches

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Out of Scope Changes Check	⚠️ Warning	메시징 관련 변경 이외에 MainCard.tsx의 온보딩 단계 확장(새로운 step 추가 및 흐름 변경), postSignData 호출 시그니처 변경(인자 구조 변경), 그리고 registerServiceWorker에서 성공/실패 시 alert를 띄우는 동작 등은 메시징 기능 범위를 벗어나 UX·API 변경을 포함하고 있습니다. 이러한 항목들은 다른 모듈이나 사용자 흐름에 영향을 줄 수 있으므로 별도 검토·승인 또는 PR 분리가 필요합니다. #25 관련 변경은 없으므로 해당 이슈와는 무관합니다.	온보딩 흐름 및 API 시그니처 변경은 메시징 도입과 직접 관련된 최소 변경으로 축소하거나 별도 PR로 분리하고 registerServiceWorker의 alert는 제거하거나 로그로 대체해 주세요. 또한 연관 호출부 업데이트, 영향 범위 및 검증(단위/통합 테스트 또는 수동 검증 절차)을 PR에 명시해 주세요.
Linked Issues Check	❓ Inconclusive	PR은 #100(파이어베이스 메시징)을 위해 서비스 워커(firebase-messaging-sw.js) 추가, 서비스워커 등록 유틸(registerServiceWorker) 도입, 온보딩에서 서비스워커 등록 호출 및 sign-up 페이로드에 fcmToken 포함 등 메시징 관련 핵심 구성요소를 도입해 부분적인 구현을 수행했습니다. 다만 제공된 요약만으로는 Firebase 앱/메시징 초기화 코드와 클라이언트에서 FCM 토큰을 실제로 생성(getToken)·관리하는 부분, 그리고 백엔드로의 토큰 전송·저장 및 푸시 전송 경로가 이 PR에 완전하게 구현되어 있는지 확인할 수 없습니다. 또한 #25(Progress 컴포넌트)는 이 PR 범위에 포함되어 있지 않습니다. 따라서 연결된 이슈들의 완전한 충족 여부는 불확실합니다.	Firebase 초기화(messaging 인스턴스)와 FCM 토큰 취득(getToken) 코드 위치, 백엔드로의 토큰 전송/저장 흐름 및 푸시 수신 시나리오(페이로드 형식·서비스워커 동작) 검증 결과를 PR에 명시해 주세요. 또한 #25는 본 PR과 무관하므로 링크에서 제거하거나 별도 PR로 분리해 주세요.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title Check	✅ Passed	제목 "Feat(client, extension): firebase message & service worker 설정"은 PR의 핵심 변경사항(파이어베이스 메시징 및 서비스 워커 추가/설정)을 명확하고 간결하게 요약해 스캔 시 주요 목적을 쉽게 파악할 수 있습니다. 불필요한 파일 목록이나 이모지 등 잡음이 없고 적절한 분류(Feat, client, extension)를 사용하고 있습니다. 따라서 제목 체크 기준을 충족합니다.
Description Check	✅ Passed	PR 설명은 템플릿의 필수 항목인 Related Issues에 "close #100"을 명시해 기본 요구를 충족했으나 Tasks, PR Point, Screenshot 섹션이 비어 있어 구현 요약, 검증 방법 및 리뷰어가 확인해야 할 포인트가 누락되어 있습니다. 변경된 주요 파일과 의도(서비스 워커 등록, 온보딩 흐름 수정, fcmToken 처리 등)에 대한 간단한 설명이 추가되면 리뷰가 훨씬 수월해집니다. 전체적으로 필수 항목은 갖추고 있으므로 통과로 판단합니다.
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 feat/#100/firebase-message

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7e0075c and 32b25c5.

📒 Files selected for processing (3)

• apps/client/public/firebase-messaging-sw.js (1 hunks)
• apps/client/src/pages/onBoarding/components/funnel/MainCard.tsx (5 hunks)
• apps/client/src/pages/onBoarding/utils/registerServiceWorker.ts (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (3)

• apps/client/public/firebase-messaging-sw.js
• apps/client/src/pages/onBoarding/utils/registerServiceWorker.ts
• apps/client/src/pages/onBoarding/components/funnel/MainCard.tsx

---

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.}

[github-actions]

✅ Storybook chromatic 배포 확인:
🐿️ storybook