[Fix] 알림페이지 디자인 반영 / 버그 일부 수정

src/api/core/index.ts

@@ -56,6 +56,7 @@ baseAPI.interceptors.response.use(
         await API.authService.refresh();
         return baseAPI(originalRequest);
       } catch (refreshError) {
+        await API.authService.logout();
         if (isServer) {
           const { redirect } = await import('next/navigation');
           redirect('/login');

src/app/notification/page.tsx

@@ -2,26 +2,33 @@
 
 import { EmptyState } from '@/components/layout/empty-state';
 import { NotificationCard, NotificationHeader } from '@/components/pages/notification';
+import { useIntersectionObserver } from '@/hooks/use-intersection-observer';
 import { useGetNotificationsInfinite } from '@/hooks/use-notification/use-notification-get-list';
 
 export default function NotificationPage() {
-  const { data: list, fetchNextPage } = useGetNotificationsInfinite({ size: 1 });
+  const {
+    data: list,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  } = useGetNotificationsInfinite({ size: 20 });
+
+  const fetchObserverRef = useIntersectionObserver({
+    onIntersect: () => {
+      if (hasNextPage && !isFetchingNextPage) {
+        fetchNextPage();
+      }
+    },
+  });
 
   if (!list) return;
 
   return (
     <section>
       <NotificationHeader />
-      <div className='flex h-10 flex-row items-center justify-end gap-2'>
-        <p className='text-mono-white bg-mint-500 flex-center size-4 rounded-full'>v</p>
-        <p className='text-mono-black text-text-sm mr-3 text-right'>모두 읽음 처리</p>
-      </div>
-
       {list.length > 0 && list.map((item) => <NotificationCard key={item.id} item={item} />)}
+      {hasNextPage && <div ref={fetchObserverRef}>다음</div>}
       {list.length === 0 && <EmptyState>아직 받은 알림이 없어요.</EmptyState>}
-      <button className='text-black' onClick={() => fetchNextPage()}>
-        다음
-      </button>
     </section>
   );
 }

src/components/layout/header/index.tsx

@@ -23,15 +23,19 @@ export const Header = () => {
                 receivedNewNotification && 'animate-ring text-mint-500',
               )}
             />
-            <span
-              className={cn(
-                'bg-mint-300 absolute top-1 right-1.75 aspect-square size-3.5 rounded-full',
-                receivedNewNotification && 'animate-ping',
-              )}
-            />
-            <span className='bg-mint-500 text-mono-white text-text-2xs-semibold flex-center absolute top-1 right-1.75 aspect-square size-3.5 rounded-full'>
-              {unReadCount}
-            </span>
+            {unReadCount > 0 && (
+              <>
+                <span
+                  className={cn(
+                    'bg-mint-300 absolute top-1 right-1.75 aspect-square size-3.5 rounded-full',
+                    receivedNewNotification && 'animate-ping',
+                  )}
+                />
+                <span className='bg-mint-500 text-mono-white text-text-2xs-semibold flex-center absolute top-1 right-1.75 aspect-square size-3.5 rounded-full'>
+                  {unReadCount}
+                </span>
+              </>
+            )}
           </Link>
         </div>
       </nav>

src/components/pages/notification/notification-card/index.tsx

@@ -31,7 +31,7 @@ export const NotificationCard = ({ item }: Props) => {
     <article
       className={cn(
         'bg-mono-white flex cursor-pointer flex-row gap-3 px-5 py-6',
-        !item.readAt && 'bg-mint-100',
+        !item.readAt && 'bg-mint-50',
       )}
       onClick={handleNotificationClick}
     >

src/components/pages/notification/notification-header/index.tsx

@@ -2,14 +2,29 @@
 import { useRouter } from 'next/navigation';
 
 import { Icon } from '@/components/icon';
+import { useUpdateNotificationReadAll } from '@/hooks/use-notification';
+import { cn } from '@/lib/utils';
+import { useNotification } from '@/providers';
 
 export const NotificationHeader = () => {
   const router = useRouter();
 
+  const { unReadCount } = useNotification();
+  const { mutateAsync } = useUpdateNotificationReadAll();
+
   const handleHistoryBackClick = () => {
     router.back();
   };
 
+  const handleReadAllClick = () => {
+    if (unReadCount === 0) return;
+    try {
+      mutateAsync();
+    } catch {
+      alert('요청 처리에 실패했습니다.');
+    }
+  };
+
   return (
     <nav className='bg-mono-white flex-center sticky top-14 z-10 h-12 border-b-1 border-gray-200'>
       <button
@@ -20,6 +35,17 @@ export const NotificationHeader = () => {
         <Icon id='chevron-left-2' className='text-gray-500' />
       </button>
       <h2 className='text-text-md-bold text-gray-800'>알림</h2>
+      <button
+        className={cn(
+          'text-text-sm-semibold absolute right-5',
+          unReadCount > 0 && 'text-mint-500',
+          unReadCount === 0 && 'text-gray-500',
+        )}
+        disabled={unReadCount === 0}
+        onClick={handleReadAllClick}
+      >
+        모두 읽음
+      </button>
     </nav>
   );
 };

src/hooks/use-notification/use-notification-connect-sse/index.ts

@@ -52,6 +52,7 @@ export const useConnectSSE = () => {
         console.log('SSE 수신 성공:', data);
         setReceivedNewNotification(true);
         queryClient.invalidateQueries({ queryKey: notificationKeys.unReadCount() });
+        queryClient.invalidateQueries({ queryKey: notificationKeys.list() });
         // TODO: 알림 타입별 처리 추가 예정
       } catch (error) {
         console.error('SSE 데이터 파싱 실패:', error);
@@ -62,6 +63,7 @@ export const useConnectSSE = () => {
     es.onerror = (_error) => {
       console.log('SSE 오류 발생:');
       // todo: 재 연결 로직 추가 필요
+      accessToken.value = null;
     };
 
     // SSE Cleanup
@@ -70,7 +72,7 @@ export const useConnectSSE = () => {
       es.close();
       eventSourceRef.current = null;
     };
-  }, [accessToken.value, queryClient]);
+  }, [accessToken, queryClient]);
 
   return { receivedNewNotification };
 };

src/hooks/use-notification/use-notification-get-list/index.ts

@@ -6,7 +6,7 @@ import { GetNotificationListQueryParams } from '@/types/service/notification';
 
 export const useGetNotificationsInfinite = (params?: GetNotificationListQueryParams) => {
   return useInfiniteQuery({
-    queryKey: notificationKeys.list(params),
+    queryKey: notificationKeys.list(),
     queryFn: ({ pageParam }) => API.notificationService.getList({ ...params, cursor: pageParam }),
     initialPageParam: params?.cursor,
     getNextPageParam: (lastPage) => lastPage.nextCursor,

src/lib/formatDateTime.ts

@@ -10,6 +10,8 @@ export const formatTimeAgo = (isoString: string) => {
   const dateInput = new Date(isoString.endsWith('Z') ? isoString : `${isoString}Z`);
   const dateNow = new Date();
 
+  if (dateInput.getTime() >= dateNow.getTime()) return '0초 전';
+
   const diffPerSec = Math.floor((dateNow.getTime() - dateInput.getTime()) / 1000);
   if (diffPerSec < 60) return `${diffPerSec}초 전`;
 

src/lib/query-key/query-key-notification/index.ts

@@ -1,11 +1,5 @@
-import { GetNotificationListQueryParams } from '@/types/service/notification';
-
 export const notificationKeys = {
   all: ['notifications'] as const,
-  list: (params?: GetNotificationListQueryParams) => [
-    'notifications',
-    'list',
-    ...(params ? [params] : []),
-  ],
+  list: () => ['notifications', 'list'],
   unReadCount: () => [...notificationKeys.all, 'unread-count'],
 };

src/styles/base.css

@@ -5,3 +5,7 @@
 button {
   cursor: pointer;
 }
+
+button:disabled {
+  cursor: not-allowed;
+}