[Feat/#106] 알림 화면 구현

[jjunh33]

#️⃣연관된 이슈

• Closes 알림 화면 구현 (알림 목록·결과 없음·알림 설정) #106

🎯 해결하려는 문제가 무엇인가요?

홈·행사·공지·열린피드백·빌릴게 헤더에 알림 아이콘이 있는데 눌러도 아무 일도 일어나지 않습니다. Figma 알림 섹션(node-id=3595-106243)의 알림 목록, 알림 없음, 알림 설정 화면을 구현합니다.

❓ 왜 해결해야 하나요?

알림 진입점이 이미 화면에 노출되어 있어서, 사용자가 대여·행사·공지·피드백·사물함 소식을 한곳에서 확인하고 받을 알림을 고를 수 있어야 합니다.

⭐ 어떻게 해결했나요?

• /notifications 알림 목록과 /notifications/settings 알림 설정 라우트를 추가했습니다. 둘 다 Bottom Nav 없이 흰 배경입니다.
• 알림 목록: 뒤로가기 · "알림" · 설정 아이콘 헤더 아래에 알림 6종(빌릴게 대여/반납, 공지, 열린피드백, 행사, 사물함)을 보여줍니다. 안 읽은 알림은 Atomic/Blue/99 배경이고, 항목을 누르면 읽음 처리됩니다. 알림이 0개면 알림 없음 화면을 보여주고, 데이터 로딩 중에는 스켈레톤을 보여줍니다.
• 알림 설정: 전체 알림 + 카테고리 4개(빌릴게·행사·게시판·사물함) 스위치(WDS Switch size="small")입니다. "전체 알림"은 따로 값을 두지 않고 카테고리가 모두 켜졌는지로 파생하며, 누르면 4개를 한꺼번에 맞춥니다.
• 홈·행사·공지·열린피드백·빌릴게 헤더의 알림 아이콘을 /notifications로 연결했습니다(viewTransition 슬라이드 전환).
• 데이터 로딩은 main의 구조(entities/notifications API + mockupApi + use()/Suspense)를 따릅니다.
• 용어 사전에 알림 ↔ notifications를 추가했고, wds-component-usage.md에 알림 화면 WDS 매핑을 기록했습니다. 안 읽음 배경은 index.css에 --color-notification-unread 토큰으로 추가했습니다.

커밋 구성: 문서 → 알림 목데이터·API → 알림 목록·설정 화면 → 헤더 알림 아이콘 연결

🧩 이 PR의 한계 & 트레이드오프

• 알림 목록은 목데이터 기반입니다. fetchNotifications()가 mockupApi로 Figma의 6건을 돌려줍니다. API 연동 시 이 함수 안쪽만 교체하면 됩니다. 시간 표시(1시간 전)는 이미 포맷된 문자열로 두었고, 실 API가 시각을 주면 화면에서 상대 시간으로 바꿔야 합니다.
• 읽음 처리와 알림 설정 값은 화면 state뿐입니다. 새로고침하면 목데이터 값·초기값(빌릴게만 켜짐)으로 돌아갑니다. 서버 저장과 연동은 API가 정해진 뒤 교체합니다.
• 용어 notifications는 제가 정했습니다. 백엔드 엔드포인트 네이밍과 맞춰야 하고, 다르면 라우트·폴더 이름을 바꿔야 합니다.
• 알림 항목을 눌렀을 때 관련 화면(빌릴게·행사 등)으로 이동하는 동작은 디자인에 없어서 넣지 않았습니다.
• 에러 상태는 구현하지 않았습니다. 목데이터라 실패하지 않고 Figma에도 프레임이 없습니다.
• 카테고리 아이콘 6종은 Figma의 알림 - … 24px 배지를 SVG로 받았습니다. download_assets 내보내기에 컴포넌트 세트 배경이 같이 섞여 있어서, 배지 그룹만 꺼내 24×24 SVG로 다시 감쌌습니다. 모양·색은 Figma 4배 내보내기와 나란히 놓고 비교해 같음을 확인했습니다.
• 알림 없음(NotificationsEmptyState)은 행사·검색 empty와 뼈대가 거의 같지만 공용 컴포넌트로 합치지는 않았습니다.

⛓️ 기존 기능에 미치는 영향

• 홈·행사·공지·열린피드백·빌릴게 목록 화면의 알림 아이콘에 onClick만 추가했습니다.
• index.css에 토큰 1개를 추가했고, 기존 화면의 스타일은 바뀌지 않습니다.
• /notifications, /notifications/settings 라우트 2개가 추가됩니다.

🔀 Edge Case & 실패 시나리오

• 알림이 0개면 탭 없이 알림 없음 화면만 보여줍니다(프레임 전체 높이 기준 가운데).
• 알림 없음의 문구 컨테이너는 폭을 고정하지 않았습니다. Figma의 203px로 고정하면 폰트 폭이 0.2px만 넓어져도 마지막 글자가 다음 줄로 넘어갑니다.
• 딥링크·WebView로 알림 화면에 바로 들어오면 뒤로갈 히스토리가 없어서 홈으로, 설정 화면은 알림 목록으로 보냅니다(replace).
• 같은 알림을 다시 눌러도 읽음 상태가 유지됩니다(이미 읽음).

📋 검토한 대안과 선택 이유

• 알림 항목에 WDS List/Card 사용: 카테고리 배지 + 라벨 + 시간 줄과 들여쓴 메시지 줄 구조가 달라 Stream 로컬 컴포넌트(NotificationsItem)로 만들었습니다. 텍스트는 Typography로 채웠습니다.
• 카테고리 아이콘에 IconMegaphone·IconTicket 사용: 배경 배지(#F7F7F8, radius 6)와 색이 종류마다 고정이라 배지 전체를 로컬 에셋으로 썼습니다.
• "전체 알림" 값을 별도 state로 관리: 카테고리와 어긋날 수 있어서 카테고리에서 파생하는 쪽을 택했습니다.
• 읽음 처리를 서버 호출로 구현: API가 없어서 화면 state로 두었습니다.

💬 리뷰 포인트

• [r] 용어 notifications가 백엔드 엔드포인트 네이밍과 맞는지 확인해 주세요.
• [c] "전체 알림"과 카테고리 스위치의 연동 규칙(전체를 끄면 카테고리도 모두 끄는지 등)이 의도와 맞는지 봐주세요.
• [c] 알림 항목 탭 시 읽음 처리만 하고 이동하지 않는 동작이 맞는지 확인해 주세요.
• [a] 이 환경에서는 Pretendard 폰트가 로드되지 않아 대체 폰트 기준으로 줄바꿈과 폭을 확인했습니다. 실기기에서 줄바꿈이 Figma와 같은지 한 번 봐주세요.

[coderabbitai]

Important

• 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

• Configuration used: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: dccf0315-ee6b-466a-9188-e43e4f73fcce

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

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