[Feat] 알림 페이지 제작

[Chiman2937]

📝 변경 사항

• 알림 페이지 제작
  • src/app/notification/page.tsx
  • src/components/pages/notification/notification-card/index.tsx
• date format 유틸 함수 제작
  • src/lib/format-time-ago.ts
• Next API를 활용한 SSE 환경 구축(테스트용)
  • src/app/api/notifications/stream/route.ts
  • useNotification hook 제작

---

🔗 관련 이슈

Closes #47

---

🧪 테스트 방법

• 수동 테스트 검증(로컬 환경)
• 유닛 테스트 검증
• 통합 테스트 검증

---

📸 스크린샷 (선택)

---

📋 체크리스트

• 관련 문서를 업데이트했습니다 (필요한 경우)
• 테스트를 추가/수정했습니다 (필요한 경우)
• Breaking change가 있다면 명시했습니다

---

💬 추가 코멘트

---

CodeRabbit Review는 자동으로 실행되지 않습니다.

Review를 실행하려면 comment에 아래와 같이 작성해주세요

@coderabbitai review

---

[github-actions]

🎨 Storybook Report

ℹ️ Story 변경사항이 감지되지 않았습니다

이 PR에는 Story 변경이 없어서 빌드를 스킵했습니다.

Status	Storybook	Build Log	Updated (UTC)
⏭️ Skipped	-	-	2025-12-09 02:02:15

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch chiyoung-feat/notification

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

📊 Coverage Report

Status	Build Log	Updated (UTC)
✅ Ready	View Build	2025-12-09 02:02:38

📉 #117을 main에 병합하면 coverage가 1.82% 감소합니다.

Coverage 요약

@@             Coverage Diff             @@
##             main     #117       +/-   ##
===========================================
- Coverage   31.34%   29.52%    -1.82%     
===========================================
  Files         105      113        +8     
  Lines        4252     4515      +263     
  Branches      201      209        +8     
===========================================
  Hits         1333     1333         0     
+ Misses       2919     3182      +263     

영향받은 파일

✅ 이 PR로 영향받은 파일이 없습니다

수정된 모든 파일이 현재 coverage를 유지했습니다.

[github-actions]

🚀 PR Preview Report

✨ Build가 성공적으로 완료되었습니다.

Preview에서 변경사항을 확인하세요.

Status	Preview	Build Log	Updated (UTC)
✅ Ready	Visit Preview	View Logs	2025-12-09 02:03:52

[wooktori]

SSE 돌아가는 방식이 이런 흐름이군요!
머리로는 이해했지만 작성은 못하겠는 그런..

[Chiman2937]

어차피 해당 구문은 백엔드분들이 담당하실 내용이니까, 가볍게 넘기셔도 될 것 같아요!

클라이언트에서 서버에 접속할 때 사용하는 구문이 좀 더 중요하겠네요 :)

  useEffect(() => {
    const eventSource = new EventSource('/api/notifications/stream');

    eventSource.onmessage = (event) => {
      const data: Notification = JSON.parse(event.data);
      setMessages((prev) => [...prev, data]);
    };

    eventSource.onerror = (err) => {
      console.error('SSE 에러', err);
      eventSource.close();
    };

    return () => {
      eventSource.close();
    };
  }, []);

[wooktori]

고생하셨습니다!