[feat] Web Push 및 서비스 내 알림 센터 구현

[jyuuuuu0]

❓ 개요

Web Push(디바이스 푸시)와 서비스 내 알림 센터를 구현했습니다. 서비스 워커 기반 시스템 알림으로 브라우저가 닫혀 있어도 알림을 받을 수 있고, 공용 Navbar/Sidebar에 알림 벨을 연결해 admin·client 양쪽에서 인앱 알림을 확인할 수 있습니다.

#️⃣ 연관된 이슈

#136

📝 작업 내용

Web Push (디바이스 푸시)

• packages/lib/src/push/ — VAPID 공개키 조회(GET /api/push/vapid-key), 구독(POST /api/push/subscribe), 구독 해제(DELETE /api/push/unsubscribe) API 추가
• usePushSubscription 훅 추가 — 권한 요청 → PushSubscription 생성 → 서버 등록까지의 흐름을 담당
• apps/client/public/sw.js, apps/admin/public/sw.js — 서비스 워커 추가. push 이벤트에서 시스템 알림을 노출하고, notificationclick 시 새 창을 열지 않고 이미 열려 있는 탭을 재사용합니다. Next.js는 public/만 정적 서빙하므로 두 앱에 동일 파일을 각각 배치했습니다.
• VAPID 공개키를 백엔드가 내려주므로 추가 환경변수는 필요하지 않습니다.

서비스 내 알림 센터

• packages/lib/src/notification/ — 알림 목록(Spring Slice 응답 기반 useInfiniteQuery), 미읽음 개수, 단건 읽음 처리, 모두 읽기 API·훅 추가
• packages/ui/src/widgets/Notification/ — 미읽음 배지가 붙은 벨 아이콘, 드롭다운 패널(목록 / 읽음 상태 / 더 보기 / 디바이스 푸시 토글 / 모두 읽기) 추가
• 공용 Navbar(모바일 상단 우측)와 Sidebar(데스크톱 로고 옆)에 연결해 admin·client에 동시 적용
• 목록은 최근 7일치만 노출하며, 모두 읽기는 기간과 무관하게 전체 미읽음을 해제합니다.

📄 리뷰 요청사항

검증 완료 사항

• npm run lint 통과 (에러 0건)
• tsc --noEmit — client·admin 양쪽 통과
• turbo build — client·admin 양쪽 통과
• apps/client/src/widgets/project-detail/ui/ProjectEditForm.tsx의 no-img-element 경고 1건은 이번 작업 이전부터 존재하던 것으로, 이번 PR에서 건드리지 않았습니다.

중점 리뷰 요청

• 서비스 워커 파일을 두 앱에 중복 배치한 방식이 적절한지 (Next.js public/ 정적 서빙 제약)
• usePushSubscription의 권한 요청 → 구독 → 서버 등록 흐름과 실패/거부 시 처리
• packages/ui의 알림 위젯이 admin·client 양쪽 레이아웃에서 무리 없이 동작하는지

⚠️ 알려진 한계 (반드시 확인 부탁드립니다)

1. 알림 클릭 시 이동 불가 — GetNotificationResponse에 이동 대상 경로 필드가 없어 알림을 클릭해도 아직 이동할 수 없습니다. 프론트엔드는 optional url 필드를 이미 읽고 있어, 서버가 내려주는 즉시 동작합니다. 백엔드에 필드 추가 요청은 전달된 상태입니다.
2. 모두 읽기가 벌크 API가 아님 — 일괄 읽음 처리 API가 없어, 모두 읽기는 알림 페이지를 순회하며 항목마다 PATCH /api/notifications/{id}/read를 호출합니다(10건씩 청크 처리). PATCH /api/notifications/read-all이 생기면 교체해야 합니다.
3. 미해결 버그 — GET /api/notifications/unread-count가 기간 기준으로 스코프되어 있지 않아, 배지 카운트와 7일치 목록이 서로 어긋날 수 있습니다. 전부 읽은 뒤에도 배지가 10에 머무는 사례가 보고되었으며 아직 원인을 규명하지 못했습니다. 해결된 것이 아니라 조사 중인 상태임을 명확히 밝힙니다.

📸 스크린샷/영상(선택)

없음 (추후 첨부 예정)

🤖 Generated with Claude Code

https://claude.ai/code/session_01M9UcbVvBoDaof95dpqk7L2

[vercel]

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

Project	Deployment	Actions	Updated
gif-web-client	Ready	Preview	Sep 7, 2026 11:35pm UTC