Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughFirebase 메시징 구성과 서비스 워커 흐름을 조정했다. 퍼블릭에 firebase-config를 추가하고, 서비스 워커를 CDN importScripts 기반으로 전환해 FCM 백그라운드 알림을 처리한다. 서비스 워커 등록 경로를 절대경로로 수정하고, vercel 리라이트에 Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User as Browser
participant App as Web App
participant SW as Service Worker (firebase-messaging-sw.js)
participant FCM as Firebase Cloud Messaging
User->>App: 방문
App->>App: registerServiceWorker('/firebase-messaging-sw.js')
App->>SW: 등록 요청
activate SW
SW->>SW: importScripts(CDN firebase-app-compat, firebase-messaging-compat)
SW->>SW: firebase.initializeApp(firebaseConfig)
SW->>SW: firebase.messaging()
FCM-->>SW: Push (background)
SW->>SW: onBackgroundMessage(payload)
SW->>User: showNotification(title/body)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Suggested reviewersPoem
Pre-merge checks and finishing touches❌ Failed checks (3 warnings)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests
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 |
|
✅ Storybook chromatic 배포 확인: |
![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
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
apps/client/src/pages/onBoarding/components/funnel/MainCard.tsx (2)
13-15: firebase-config import 경로가 잘못되어 모듈을 찾을 수 없습니다.현재 파일 위치에서
'../../../../firebase-config'는apps/client/src/firebase-config를 가리키지만, 이번 PR에서 추가된 파일은apps/client/public/firebase-config.js에 있습니다. 이 경로로는 번들러가 모듈을 찾지 못해 빌드가 깨집니다.src하위로 파일을 옮기거나, tsconfig/vite alias를 정의해 올바른 경로로 불러오도록 조정해주세요.
64-65: React 재렌더마다initializeApp이 반복 호출됩니다.함수형 컴포넌트 본문에서
initializeApp을 실행하면 상태 업데이트 등으로 재렌더링될 때마다 호출되어[DEFAULT] already exists예외가 터집니다. 모듈 스코프로 올리거나getApps()를 이용해 이미 초기화됐는지 확인한 뒤 호출하도록 변경해야 합니다.-import { initializeApp } from 'firebase/app'; +import { initializeApp, getApp, getApps } from 'firebase/app'; ... -const app = initializeApp(firebaseConfig); +const app = getApps().length ? getApp() : initializeApp(firebaseConfig);
🧹 Nitpick comments (5)
apps/client/src/pages/onBoarding/utils/registerServiceWorker.ts (1)
1-11: SSR/브라우저 지원 가드 추가 및 경고 UI 정리 제안브라우저 비지원/SSR 환경에서의 예외를 피하고, 실패 시
alert대신 로깅/관측으로 대체하는 편이 UX에 안전합니다.export const registerServiceWorker = () => { - navigator.serviceWorker - .register('/firebase-messaging-sw.js') + if (typeof window === 'undefined' || !('serviceWorker' in navigator)) return; + + navigator.serviceWorker + .register('/firebase-messaging-sw.js') .then(function (registration) { - console.log(`Service Worker 등록 성공:, ${registration}`); + console.log('Service Worker 등록 성공:', registration); }) .catch(function (error) { - console.log('Service Worker 등록 실패:', error); - alert(`Service Worker 등록 실패:, ${error}`); + console.error('Service Worker 등록 실패:', error); + // TODO: 필요 시 토스트/로깅(Sentry 등)으로 전환 }); };apps/client/public/firebase-messaging-sw.js (4)
25-27: activate 시 즉시 클라이언트 제어
skipWaiting()만으로는 활성화 이후 열린 탭을 즉시 제어하지 못합니다.clients.claim()을 함께 호출하세요.self.addEventListener('activate', function () { - console.log('실행중..'); + self.clients.claim(); + console.log('SW 활성화 완료'); });
33-41: 알림 클릭 동작 처리 및 payload data 전달알림 클릭 시 앱 포커스/탭 재사용을 처리하면 UX가 좋아집니다. 또한
payload.data를notification.data로 넘겨 두면 라우팅 등에 활용할 수 있습니다.messaging.onBackgroundMessage((payload) => { console.log('Received background message ', payload); const notificationTitle = payload.notification?.title ?? '알림이 도착했어요!'; const notificationOptions = { - body: payload.notification?.body, + body: payload.notification?.body, + data: payload.data, // 클릭 시 사용할 데이터 전달 }; self.registration.showNotification(notificationTitle, notificationOptions); }); +// 알림 클릭 시 기존 탭 포커스 또는 새 창 열기 +self.addEventListener('notificationclick', (event) => { + const url = event?.notification?.data?.url || '/'; + event.notification.close(); + event.waitUntil( + self.clients.matchAll({ type: 'window', includeUncontrolled: true }).then((clientsArr) => { + for (const client of clientsArr) { + if ('focus' in client) { + client.navigate && client.navigate(url); + return client.focus(); + } + } + return self.clients.openWindow ? self.clients.openWindow(url) : undefined; + }) + ); +});
14-19: Service Worker용 Firebase Messaging compat CDN 버전 업데이트 권장앱에서 사용 중인 Firebase SDK 버전(예:
10.13.2)에 맞춰firebase-app-compat.js와firebase-messaging-compat.jsimportScripts를 최신 패치로 조정하세요.
예시:// firebase-messaging-sw.js importScripts('https://www.gstatic.com/firebasejs/10.13.2/firebase-app-compat.js'); importScripts('https://www.gstatic.com/firebasejs/10.13.2/firebase-messaging-compat.js');공식 문서에 따르면 번들링 없이 Service Worker에서 Firebase Messaging을 사용할 때 compat CDN 번들을 권장하며, 버전 숫자는 앱에 설정된 SDK 버전으로 교체해야 합니다.
4-12: Firebase config 중복 제거 및 storageBucket 값 확인 권장
public/firebase-config.js에 이미 동일한 설정이 있으므로, 서비스 워커(firebase-messaging-sw.js)에서도importScripts('/firebase-config.js')로 불러와 중복을 제거하세요.storageBucket은 프로젝트 콘솔에 표시된 정확한 버킷 이름을 사용해야 합니다. 2024-10-30 이후 생성된 기본 버킷은PROJECT_ID.firebasestorage.app형식이므로, 현재 설정된pinback-c55de.firebasestorage.app이 콘솔과 일치하는지 확인해주세요.-const firebaseConfig = { - apiKey: 'AIzaSyD3KM0IQ4Ro3Dd2fyAY8fnhE1bQ_NesrBc', - authDomain: 'pinback-c55de.firebaseapp.com', - projectId: 'pinback-c55de', - storageBucket: 'pinback-c55de.firebasestorage.app', - messagingSenderId: '370851215931', - appId: '1:370851215931:web:08382b5e57808d29dcba1e', - measurementId: 'G-847ZNSCC3J', -}; +// firebaseConfig는 /firebase-config.js에서 주입 +// 서비스 워커 환경에서도 importScripts로 로드 가능 +importScripts('/firebase-config.js');
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
apps/client/public/firebase-config.js(1 hunks)apps/client/public/firebase-messaging-sw.js(2 hunks)apps/client/src/pages/onBoarding/components/funnel/MainCard.tsx(3 hunks)apps/client/src/pages/onBoarding/utils/registerServiceWorker.ts(1 hunks)apps/client/vercel.json(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (3)
apps/client/public/firebase-messaging-sw.js (1)
apps/client/public/firebase-config.js (1)
firebaseConfig(1-9)
apps/client/public/firebase-config.js (1)
apps/client/public/firebase-messaging-sw.js (1)
firebaseConfig(4-12)
apps/client/src/pages/onBoarding/components/funnel/MainCard.tsx (2)
apps/client/src/constants/alarms.ts (1)
AlarmsType(11-15)apps/client/src/pages/onBoarding/utils/formatRemindTime.ts (1)
normalizeTime(1-26)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: storybook
🔇 Additional comments (1)
apps/client/src/pages/onBoarding/utils/registerServiceWorker.ts (1)
3-3: 절대 경로 등록 및 파일 위치 확인 완료
apps/client/public/firebase-messaging-sw.js파일이 존재하므로/firebase-messaging-sw.js로 올바르게 제공됩니다. 프리뷰/프로덕션 환경에서 실제 제공 여부만 최종 확인해 주세요.
| const firebaseConfig = { | ||
| apiKey: 'AIzaSyD3KM0IQ4Ro3Dd2fyAY8fnhE1bQ_NesrBc', | ||
| authDomain: 'pinback-c55de.firebaseapp.com', | ||
| projectId: 'pinback-c55de', | ||
| storageBucket: 'pinback-c55de.firebasestorage.app', | ||
| messagingSenderId: '370851215931', | ||
| appId: '1:370851215931:web:08382b5e57808d29dcba1e', | ||
| measurementId: 'G-847ZNSCC3J', | ||
| }; |
There was a problem hiding this comment.
firebaseConfig를 export하지 않으면 빌드가 실패합니다.
이 파일은 오직 상수만 선언하고 내보내지 않아서 MainCard.tsx에서 import { firebaseConfig } 구문이 즉시 컴파일 에러(has no exported member)로 이어집니다. 최소한 명시적으로 export하도록 수정해야 합니다.
-const firebaseConfig = {
+export const firebaseConfig = {
apiKey: 'AIzaSyD3KM0IQ4Ro3Dd2fyAY8fnhE1bQ_NesrBc',
authDomain: 'pinback-c55de.firebaseapp.com',
projectId: 'pinback-c55de',
storageBucket: 'pinback-c55de.firebasestorage.app',
messagingSenderId: '370851215931',
appId: '1:370851215931:web:08382b5e57808d29dcba1e',
measurementId: 'G-847ZNSCC3J',
};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const firebaseConfig = { | |
| apiKey: 'AIzaSyD3KM0IQ4Ro3Dd2fyAY8fnhE1bQ_NesrBc', | |
| authDomain: 'pinback-c55de.firebaseapp.com', | |
| projectId: 'pinback-c55de', | |
| storageBucket: 'pinback-c55de.firebasestorage.app', | |
| messagingSenderId: '370851215931', | |
| appId: '1:370851215931:web:08382b5e57808d29dcba1e', | |
| measurementId: 'G-847ZNSCC3J', | |
| }; | |
| // apps/client/public/firebase-config.js | |
| export const firebaseConfig = { | |
| apiKey: 'AIzaSyD3KM0IQ4Ro3Dd2fyAY8fnhE1bQ_NesrBc', | |
| authDomain: 'pinback-c55de.firebaseapp.com', | |
| projectId: 'pinback-c55de', | |
| storageBucket: 'pinback-c55de.firebasestorage.app', | |
| messagingSenderId: '370851215931', | |
| appId: '1:370851215931:web:08382b5e57808d29dcba1e', | |
| measurementId: 'G-847ZNSCC3J', | |
| }; |
🤖 Prompt for AI Agents
In apps/client/public/firebase-config.js lines 1 to 9, the file only declares
the firebaseConfig constant but does not export it, causing import errors where
firebaseConfig is imported; modify the file to export the constant (e.g., add an
export statement or export the declaration) so that other modules can import {
firebaseConfig } without compile errors.
1 participant
📌 Related Issues
📄 Tasks
⭐ PR Point (To Reviewer)
📷 Screenshot
Summary by CodeRabbit