Fix(client): FCM 로직 수정

[jllee000]

📌 Related Issues

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

⭐ PR Point (To Reviewer)

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

📄 Tasks

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

📷 Screenshot

Summary by CodeRabbit

• 신기능
  • 푸시 알림이 페이로드의 이미지(notification.image)를 우선 사용해 더 풍부한 비주얼로 표시되며, 없을 경우 기존 기본 이미지로 자동 대체됩니다.
  • 각 알림에 고유 태그(타임스탬프)를 부여해 새 알림이 이전 알림을 대체하지 않고 별도로 표시됩니다.
  • 전반적으로 알림의 가시성과 구분성이 향상되었습니다.

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

[coderabbitai]

Walkthrough

서비스 워커의 FCM 백그라운드 메시지 처리에서 알림 옵션을 수정하여 payload.notification.image를 아이콘/이미지로 우선 사용하고, 없을 경우 기존 '/FCM-IMG.png'로 폴백합니다. 또한 알림 옵션에 현재 타임스탬프 기반 tag를 추가했습니다. 기타 제어 흐름 변화는 없습니다.

Changes

Cohort / File(s)	Change Summary
Service Worker Notifications apps/client/public/firebase-messaging-sw.js	알림 옵션 업데이트: icon/image를 payload.notification.image에서 유도하고, 폴백 이미지로 /FCM-IMG.png 유지. 고유 식별을 위해 tag를 현재 타임스탬프로 설정. 주변 로직은 유지.

Sequence Diagram(s)

sequenceDiagram
    autonumber
    participant FCM as FCM
    participant SW as Service Worker (firebase-messaging-sw.js)
    participant NS as Notification API

    FCM->>SW: onBackgroundMessage(payload)
    rect rgba(200,220,255,0.25)
    note right of SW: 알림 옵션 구성
    SW->>SW: image := payload.notification.image || '/FCM-IMG.png'
    SW->>SW: icon := image
    SW->>SW: tag := Date.now().toString()
    end
    SW->>NS: showNotification(title, { body, icon, image, tag })
    NS-->>SW: Notification shown

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• Fix(client): FCM 로직 수정 #184: 동일 파일에서 notification tag 필드를 조정하는 변경과 직접적으로 연관.
• Fix(client): Fcm 로직 수정 #181: 동일 파일에서 notification 옵션(데이터/requireInteraction/renotify)과 클릭 핸들러를 추가.
• Fix(client): FCM 로직 수정 #183: 동일한 notification tag 필드를 다루는 변경과 코드 수준에서 연관.

Suggested labels

fix

Suggested reviewers

• @constantly-dev
• @jjangminii

Poem

달빛 같은 아이콘 번쩍, 이미지가 톡!
페이로드에 있으면 쓰고, 없으면 폴백 쏙—
태그는 똑딱, 시계처럼 유니크해요.
푸시가 오면 깡총! 알림이 보여요.
(\/)

( ••)✨

/>🍃 알림은 바람처럼 정확히!

Pre-merge checks and finishing touches

❌ Failed checks (4 warnings)

Check name	Status	Explanation	Resolution
Title Check	⚠️ Warning	제목 "Fix/#161/fcm setting edit"은 FCM 알림 설정 변경과 부분적으로 연관되지만 이슈 번호와 슬래시를 포함해 간결하거나 구체적이지 않습니다.	제목을 "백그라운드 메시지 알림 아이콘 및 태그 로직 수정"처럼 간결하고 명확하게 변경하세요.
Linked Issues Check	⚠️ Warning	변경된 코드는 FCM 서비스 워커에서 알림 설정을 수정하는 내용으로 이슈 #25의 Progress 컴포넌트 구현 요구사항과 전혀 일치하지 않습니다.	올바른 이슈를 연결하거나 해당 PR의 코드 변경에 맞는 링크된 이슈를 수정하여 요구사항을 일치시켜야 합니다.
Out of Scope Changes Check	⚠️ Warning	PR에 포함된 FCM 알림 아이콘 및 태그 필드 추가 변경은 링크된 Progress 컴포넌트 구현 과제와 무관한 범위 외 수정입니다.	링크된 이슈 범위에 맞지 않는 변경을 제거하거나 이슈 요구사항에 맞는 코드만 포함하도록 PR을 수정하세요.
Description Check	⚠️ Warning	PR 설명이 템플릿만 남아 있고 관련 이슈, 작업 내용, 리뷰어 안내, 스크린샷 등 필수 섹션이 모두 비어 있어 내용이 전혀 없습니다.	템플릿의 각 섹션을 실제 관련 이슈와 작업 내역 등으로 채워 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

---

📜 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 e48a05b and 39ccf49.

📒 Files selected for processing (1)

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

🔇 Additional comments (2)

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

42-43: 외부 이미지 URL 사용 시 보안 및 UX 검토 필요

• 보안: payload.notification?.image에 대한 URL 유효성·도메인 화이트리스트 검사 등 검증 로직 추가
• UX: icon(앱 로고/배지)과 image(콘텐츠 미리보기)에 동일 이미지를 쓰는 의도가 맞는지 확인, 필요 시 icon은 고정 앱 아이콘으로 설정 권장

권장:

-  icon: payload.notification?.image || '/FCM-IMG.png',
+  icon: '/FCM-IMG.png',  // 고정 앱 아이콘 사용

---

46-46: Notification tag가 고유하게 설정되어 알림이 모두 누적됩니다
apps/client/public/firebase-messaging-sw.js:46 – tag: Date.now().toString() 사용 시 모든 알림이 고유 태그를 가져 대체되지 않고 누적됩니다.
• 이 동작이 의도된 것인지 확인
• 알림 유형별 고정 태그(e.g. 'bookmark-notification') 사용 또는 tag 제거 검토

---

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