[#385] feat(notification): SSE 실시간 알림 시스템 및 헤더 Popover UI 구현

next.config.ts

@@ -1,29 +1,22 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
   reactCompiler: true,
   images: {
     remotePatterns: [
-      {
-        protocol: "https",
-        hostname: "images.unsplash.com",
-      },
-      {
-        protocol: "http",
-        hostname: "k.kakaocdn.net",
-      },
+      { protocol: "http", hostname: "k.kakaocdn.net" },
+      { protocol: "http", hostname: "img1.kakaocdn.net" },
       { protocol: "https", hostname: "picsum.photos" },
+      { protocol: "https", hostname: "images.unsplash.com" },
       { protocol: "https", hostname: "static.toss.im" },
       { protocol: "https", hostname: "windfall-bucket.s3.ap-northeast-2.amazonaws.com" },
       { protocol: "https", hostname: "wind-fall.store" },
-      { protocol: "http", hostname: "img1.kakaocdn.net" },
-      { protocol: "http", hostname: "phinf.pstatic.net", },
-      { protocol: "http", hostname: "ssl.pstatic.net", },
-      { protocol: "http", hostname: "lh3.googleusercontent.com", },
-      { protocol: "https", hostname: "phinf.pstatic.net", },
-      { protocol: "https", hostname: "ssl.pstatic.net", },
-      { protocol: "https", hostname: "lh3.googleusercontent.com", },
+      { protocol: "http", hostname: "phinf.pstatic.net" },
+      { protocol: "https", hostname: "phinf.pstatic.net" },
+      { protocol: "http", hostname: "ssl.pstatic.net" },
+      { protocol: "https", hostname: "ssl.pstatic.net" },
+      { protocol: "http", hostname: "lh3.googleusercontent.com" },
+      { protocol: "https", hostname: "lh3.googleusercontent.com" },
     ],
   },
   async rewrites() {

src/app/layout.tsx

@@ -6,6 +6,7 @@ import { Inter } from "next/font/google";
 
 import { ThemeProvider } from "next-themes";
 
+import { NotificationSseProvider } from "@/features/notification/ui/notification-sse-provider";
 import { QueryProvider } from "@/shared/api/query-provider";
 import { ServerTimeStoreProvider } from "@/shared/lib/providers/server-time-store-provider";
 import "@/shared/styles/globals.css";
@@ -39,6 +40,7 @@ export default function RootLayout({
         >
           <ServerTimeStoreProvider>
             <QueryProvider>
+              <NotificationSseProvider />
               <div className="flex min-h-full flex-col">
                 <Header />
                 <main className="flex-1 select-none">{children}</main>

src/features/notification/api/use-notifications.ts

@@ -0,0 +1,94 @@
+"use client";
+
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import { httpClient } from "@/shared/api/client";
+import type { SliceResponseType } from "@/shared/api/types/response";
+import { API_ENDPOINTS } from "@/shared/config/endpoints";
+import { showToast } from "@/shared/lib/utils/toast/show-toast";
+
+import type { NotificationItem } from "../model/types";
+
+const DEFAULT_PAGE = 0;
+const DEFAULT_SIZE = 15;
+
+export const notificationKeys = {
+  all: ["notifications"] as const,
+  list: (page: number, size: number) => [...notificationKeys.all, "list", page, size] as const,
+};
+
+const fetchNotifications = async (
+  page: number,
+  size: number
+): Promise<SliceResponseType<NotificationItem>> => {
+  const response = await httpClient<SliceResponseType<NotificationItem>>(
+    API_ENDPOINTS.notifications,
+    {
+      method: "GET",
+      queryParams: { page, size },
+    }
+  );
+
+  if (!response.data) {
+    return {
+      slice: [],
+      hasNext: false,
+      page,
+      size,
+      timeStamp: "",
+    };
+  }
+
+  return response.data;
+};
+
+export function useNotifications({ page = DEFAULT_PAGE, size = DEFAULT_SIZE } = {}) {
+  return useQuery({
+    queryKey: notificationKeys.list(page, size),
+    queryFn: () => fetchNotifications(page, size),
+  });
+}
+
+const readNotification = async (notificationId: number) => {
+  const response = await httpClient<null>(API_ENDPOINTS.notificationsRead(notificationId), {
+    method: "PATCH",
+  });
+
+  return response.data;
+};
+
+const readAllNotifications = async () => {
+  const response = await httpClient<null>(API_ENDPOINTS.notificationsReadAll, {
+    method: "PATCH",
+  });
+
+  return response.data;
+};
+
+export function useReadNotification() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: readNotification,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: notificationKeys.all });
+    },
+    onError: () => {
+      showToast.error("알림 읽음 처리에 실패했습니다. 다시 시도해주세요.");
+    },
+  });
+}
+
+export function useReadAllNotifications() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: readAllNotifications,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: notificationKeys.all });
+    },
+    onError: () => {
+      showToast.error("알림 전체 읽음 처리에 실패했습니다. 다시 시도해주세요.");
+    },
+  });
+}

src/features/notification/model/notification-mapper.ts

@@ -0,0 +1,59 @@
+import {
+  BadgeCheck,
+  Bell,
+  CheckCircle,
+  Clock,
+  CreditCard,
+  MessageCircle,
+  Star,
+  TrendingDown,
+  TriangleAlert,
+  XCircle,
+} from "lucide-react";
+
+import { ROUTES } from "@/shared/config/routes";
+
+import type { NotificationTarget, NotificationType } from "./types";
+import type { LucideIcon } from "lucide-react";
+
+export function getNotificationIcon(type: NotificationType): LucideIcon {
+  switch (type) {
+    case "CHAT_MESSAGE":
+      return MessageCircle;
+    case "AUCTION_START_WISHLIST":
+      return Clock;
+    case "AUCTION_FAILED_SELLER":
+    case "AUCTION_FAILED_SUBSCRIBER":
+      return XCircle;
+    case "STOP_LOSS_TRIGGERED":
+      return TriangleAlert;
+    case "PRICE_DROP":
+      return TrendingDown;
+    case "SALE_SUCCESS_SELLER":
+    case "SALE_SUCCESS_SUBSCRIBER":
+      return BadgeCheck;
+    case "PAYMENT_SUCCESS_BUYER":
+      return CreditCard;
+    case "PURCHASE_CONFIRMED_SELLER":
+      return CheckCircle;
+    case "REVIEW_REGISTERED":
+      return Star;
+    default:
+      return Bell;
+  }
+}
+
+export function getNotificationTargetHref(target: NotificationTarget, targetId: number): string {
+  switch (target) {
+    case "chatRoom":
+      return "/dm";
+    case "auction":
+      return ROUTES.auctionDetail(targetId);
+    case "payment":
+      return `/payments/${targetId}`;
+    case "review":
+      return ROUTES.userReview(targetId);
+    default:
+      return ROUTES.main;
+  }
+}

src/features/notification/model/types.ts

@@ -0,0 +1,57 @@
+/**
+ *
+ * 채팅
+ * CHAT_MESSAGE
+ *
+ * 경매 시작
+ * AUCTION_START_WISHLIST
+ *
+ * 경매 유찰
+ * AUCTION_FAILED_SELLER
+ * AUCTION_FAILED_SUBSCRIBER
+ *
+ * 경매 낙찰
+ * SALE_SUCCESS_SELLER
+ * SALE_SUCCESS_SUBSCRIBER
+ *
+ * 가격 변동
+ * STOP_LOSS_TRIGGERED
+ * PRICE_DROP
+ *
+ * 결제 성공
+ * PAYMENT_SUCCESS_BUYER
+ *
+ * 구매 확정
+ * PURCHASE_CONFIRMED_SELLER
+ *
+ * 리뷰
+ * REVIEW_REGISTERED
+ *
+ */
+
+export type NotificationType =
+  | "CHAT_MESSAGE"
+  | "AUCTION_START_WISHLIST"
+  | "AUCTION_FAILED_SELLER"
+  | "AUCTION_FAILED_SUBSCRIBER"
+  | "SALE_SUCCESS_SELLER"
+  | "SALE_SUCCESS_SUBSCRIBER"
+  | "STOP_LOSS_TRIGGERED"
+  | "PRICE_DROP"
+  | "PAYMENT_SUCCESS_BUYER"
+  | "PURCHASE_CONFIRMED_SELLER"
+  | "REVIEW_REGISTERED"
+  | (string & {});
+
+export type NotificationTarget = "chatRoom" | "auction" | "payment" | "review" | (string & {});
+
+export interface NotificationItem {
+  notificationId: number;
+  type: NotificationType;
+  title: string;
+  message: string;
+  readStatus: boolean;
+  target: NotificationTarget;
+  targetId: number;
+  notificationAt: string;
+}