Fix(clien): FCM 로직 수정

[jllee000]

📌 Related Issues

• close [Fix] FCM 커스텀 및 연동 수정 #161

⭐ PR Point (To Reviewer)

[참고] 서버쪽이랑 FCM 알람 오류 실시간 확인 중이라!! 커밋 중복되게 계속 수정 중입니다 ㅠㅠ

📄 Tasks

1. 푸시알람 클릭 시에 핀백으로 랜딩 로직
2. url 반환

📷 Screenshot

Summary by CodeRabbit

• 신규 기능
  • 푸시 알림에 이미지 표시를 지원합니다. 지원되는 기기에서 썸네일/배너가 함께 노출되어 콘텐츠 가독성과 주목도가 향상됩니다.
• 버그 수정
  • 알림 클릭 및 백그라운드 메시지 처리 시 사용하는 링크 도메인을 정정했습니다. www 하위 도메인 대신 기본 도메인으로 통일해 연결 일관성과 성공률을 개선하고, 불필요한 리디렉션 가능성을 줄였습니다.

[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	Oct 3, 2025 3:21am
pinback-client-landing	Ready	Preview	Comment	Oct 3, 2025 3:21am

[coderabbitai]

Walkthrough

FCM 서비스 워커에서 백그라운드 알림 처리 로직을 수정했습니다. 알림 옵션에 image 필드를 추가했고, 알림 클릭 및 폴백 URL을 https://www.pinback.today에서 https://pinback.today로 변경했습니다.

Changes

Cohort / File(s)	Change Summary
Firebase Messaging SW apps/client/public/firebase-messaging-sw.js	알림 옵션에 image 추가; 백그라운드 메시지 처리 및 notificationclick 시 사용되는 URL을 https://pinback.today로 변경(기존 https://www.pinback.today).

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant FCM as FCM
  participant SW as Service Worker (firebase-messaging-sw.js)
  participant Notif as Notification
  participant Client as Browser

  Note over FCM,SW: Background push message
  FCM->>SW: push(payload: title, body, icon, image, url?)
  SW->>SW: build notificationOptions (incl. image)
  SW->>Notif: showNotification(title, options)

  Note over Notif,SW: User clicks notification
  Notif->>SW: notificationclick
  alt payload.url exists
    SW->>Client: openWindow(payload.url)
  else fallback
    SW->>Client: openWindow(https://pinback.today)
  end

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

• Fix(client): Fcm 로직 수정 #181 — 동일 파일에서 notification 옵션/클릭 처리 추가(데이터 url·interaction 플래그 및 www 도메인 사용).
• Fix(client): FCM 로직 수정 #184 — 동일 서비스 워커에서 notificationOptions 정리(renotify/tag 제거) 변경.
• Fix(client): FCM 푸시 랜딩 기능 추가 #179 — notificationclick 핸들러 및 데이터 URL 처리 도입과 충돌 가능 영역.

Suggested labels

fix

Suggested reviewers

• @constantly-dev
• @jjangminii

Poem

토끼는 툭, URL을 다듬었네
www는 빼고 깔끔히 달렸네
알림엔 이미지도 살포시 첨가
딸깍 하면 핀백으로 폴짝 점프라!
비 오는 날에도 푸시는 반짝 🌧️✨

Pre-merge checks and finishing touches

❌ Failed checks (4 warnings)

Check name	Status	Explanation	Resolution
Title Check	⚠️ Warning	PR 제목이 이슈 번호와 슬래시를 포함한 모호한 영어 구문으로만 구성되어 주요 변경 사항을 명확히 요약하지 못하고 있습니다.	제목을 "Add notification image and update FCM service worker URLs"와 같이 변경하여 구현된 기능(알림 이미지 추가 및 서비스 워커에서 사용된 URL 업데이트)을 간결하게 요약하도록 제안합니다.
Linked Issues Check	⚠️ Warning	PR에서 수정된 firebase-messaging-sw.js는 FCM 알림 동작 변경을 다루지만 연결된 025번 이슈는 디자인 시스템의 Progress 컴포넌트 구현을 요구하고 있어 목표와 전혀 일치하지 않습니다.	올바른 이슈를 연결하거나 025번 이슈의 요구사항에 부합하는 Progress 컴포넌트 구현을 포함하도록 변경해야 합니다.
Out of Scope Changes Check	⚠️ Warning	PR 변경 사항이 링크된 이슈의 범위(Progress 컴포넌트)와 무관한 FCM 서비스 워커 스크립트 수정만 포함되어 있어 범위를 벗어난 작업이 발생했습니다.	FCM 관련 변경은 별도의 PR로 분리하거나 링크된 이슈의 요구사항에 맞는 코드를 포함하여 범위를 조정해야 합니다.
Description Check	⚠️ Warning	PR 설명에 템플릿 섹션만 존재하며 관련 이슈 번호, 작업 내역, 리뷰 포인트, 스크린샷 등 필수 정보가 모두 누락되어 있어 실제 변경 사항을 파악할 수 없습니다.	관련 이슈 번호를 정확히 기입하고 변경된 기능 요약, 구체적인 작업 내역, 리뷰어를 위한 포인트를 포함하여 설명을 완성해야 합니다.

✅ Passed checks (1 passed)

Check name	Status	Explanation
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 fix/#161/fcm-setting-edit

---

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

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

apps/client/public/firebase-messaging-sw.js (1)

37-37: URL 일관성 문제를 수정해 주세요.

Line 37과 Line 54의 폴백 URL이 일치하지 않습니다:

• Line 37: https://www.pinback.today (www 포함)
• Line 54: https://pinback.today (www 없음)

이러한 불일치는 다음 문제를 유발할 수 있습니다:

• 알림 처리 위치에 따라 다른 도메인으로 리다이렉션
• 세션/쿠키 관리 문제 (www와 non-www가 다르게 처리될 경우)
• 사용자 경험 혼란

두 위치 모두 동일한 URL을 사용하도록 수정해 주세요:

-  const url = payload.data?.url || 'https://www.pinback.today';
+  const url = payload.data?.url || 'https://pinback.today';

Also applies to: 54-54

🧹 Nitpick comments (2)

apps/client/public/firebase-messaging-sw.js (2)

27-27: 프로덕션 환경에서 console.log를 제거하는 것을 권장합니다.

서비스 워커에 디버깅용 console.log 문이 포함되어 있습니다. 프로덕션 환경에서는 불필요한 로깅을 제거하여 성능을 최적화하고 민감한 정보 노출을 방지하는 것이 좋습니다.

 self.addEventListener('activate', () => {
   clients.claim();
-  console.log('실행중..');
 });

 messaging.onBackgroundMessage((payload) => {
-  console.log('Received background message ', payload);

Also applies to: 35-35

---

14-19: Firebase SDK 최신 안정 버전(9.23.0)으로 업그레이드 권장
현재 9.22.2를 사용 중이며, 버그 수정 및 개선 사항이 포함된 9.23.0(2023-06-21 릴리스)으로 업데이트를 고려하세요. 알려진 보안 취약점은 없습니다.

📜 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 3da8362 and 16d89d7.

📒 Files selected for processing (1)

• apps/client/public/firebase-messaging-sw.js (2 hunks)

⏰ 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/public/firebase-messaging-sw.js (1)

43-43: icon과 image에 동일한 /FCM-IMG.png 사용 여부 확인
icon(작은 아이콘)과 image(알림 본문용 큰 이미지)는 용도가 다릅니다. 두 속성에 같은 파일을 사용하는 것이 의도된 동작인지 확인하고, 필요하다면 용도에 맞게 별도 에셋을 사용하세요.