[#210] Feat: 알림 페이지 구현 (#214)

Author: ienrum

src/apis/notification.ts

@@ -0,0 +1,31 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { api } from '@/src/apis/core';
+
+export interface Notification {
+  type: 'POST' | 'FOLLOW';
+  followerId?: number;
+  followerName?: string;
+  writerId?: number;
+  writerName?: string;
+  postId?: number;
+  timestamp: number;
+}
+
+const getNotifications = () => {
+  return api.get<Notification[]>({
+    url: '/notifications',
+  });
+};
+
+const INTERVAL_MS = 5000;
+
+export const useGetNotificationsAPI = () => {
+  const { data } = useQuery({
+    queryKey: ['notifications'],
+    queryFn: getNotifications,
+    refetchInterval: INTERVAL_MS,
+  });
+
+  return data?.body;
+};

src/app/notification/_components/NotificationItem.tsx

@@ -3,63 +3,41 @@ import Link from 'next/link';
 
 import timeOffset from '@/src/utils/timeOffset';
 
-type NotificationType = 'post' | 'comment' | 'follow';
-
-interface Notification {
-  userId: number;
-  user: string;
-  type: NotificationType;
-  createdAt: string;
-  userImage: string | null;
-  isNew: boolean;
-}
-
 interface NotificationItemProps {
-  notifications: Notification[];
+  user: string;
+  userImage: string;
+  timestamp: number;
+  userId: number;
+  content: string;
 }
 
-const getNotificationMessage = (type: NotificationType) => {
-  const notificationString = {
-    post: ' 님이 새로운 투표를 게시했습니다.',
-    comment: ' 님이 댓글을 남겼습니다.',
-    follow: ' 님이 회원님을 팔로우하기 시작했습니다.',
-  };
-
-  return notificationString[type];
-};
-
-const NotificationItem = ({ notifications }: NotificationItemProps) => {
+const NotificationItem = ({
+  user,
+  userImage,
+  timestamp,
+  userId,
+  content,
+}: NotificationItemProps) => {
   return (
-    <ul>
-      {notifications.map(
-        ({ user, userImage, createdAt, type, userId }, index) => {
-          return (
-            <li key={index} className='p-4 pt-3'>
-              <section className='flex items-center gap-2'>
-                <Link href={`/users/${userId}`}>
-                  <Image
-                    src={userImage ? userImage : '/picky/user-square.svg'}
-                    alt='유저아바타'
-                    width={36}
-                    height={36}
-                  />
-                </Link>
-
-                <div>
-                  <Link href={`/users/${userId}`}>
-                    <span>{user}</span>
-                  </Link>
-                  <span>{getNotificationMessage(type)}</span>
-                  <p className='font-text-4-rg text-gray-accent4'>
-                    {timeOffset(createdAt)}
-                  </p>
-                </div>
-              </section>
-            </li>
-          );
-        },
-      )}
-    </ul>
+    <Link
+      href={`/users/${userId}`}
+      className='flex items-center gap-2 p-4 pt-3 hover:bg-gray-accent1'
+    >
+      <Image
+        src={userImage ? userImage : '/picky/user-square.svg'}
+        alt='유저아바타'
+        width={36}
+        height={36}
+      />
+
+      <div>
+        <span className='font-title-1-md'>{user}</span>
+        <span className='font-title-1-md'>{content}</span>
+        <p className='font-text-4-rg text-gray-accent4'>
+          {timeOffset(new Date(timestamp - 1000))}
+        </p>
+      </div>
+    </Link>
   );
 };
 

src/app/notification/layout.tsx

@@ -2,15 +2,25 @@
 
 import { PropsWithChildren } from 'react';
 
-import TopBar from '@/src/components/Topbar';
+import { useRouter } from 'next/navigation';
+
+import { useGetUserStatusAPI } from '@/src/apis/myInfo';
+import GNB from '@/src/components/GNB';
 
 const NotificationLayout = ({ children }: PropsWithChildren) => {
+  const router = useRouter();
+  const { login: isLogin } = useGetUserStatusAPI();
+
+  if (!isLogin) {
+    router.push('/signin');
+    return null;
+  }
+
   return (
     <>
-      <TopBar.Container>
-        <TopBar.BackButton />
-      </TopBar.Container>
+      <span className='font-h2-sm mb-1 p-4'>알림</span>
       {children}
+      <GNB />
     </>
   );
 };

src/app/notification/page.tsx

@@ -1,7 +1,52 @@
 'use client';
 
-import DevelopingPage from '@/src/components/DevelopingPage';
+import { useGetNotificationsAPI } from '@/src/apis/notification';
+import NotificationItem from '@/src/app/notification/_components/NotificationItem';
+import EmptyPage from '@/src/components/EmptyPage';
 
-const Notification = () => <DevelopingPage />;
+const notificationMessageByType = {
+  POST: ' 님이 게시글을 작성하였습니다.',
+  FOLLOW: ' 님이 회원님을 팔로우하기 시작했습니다.',
+};
+
+const Notification = () => {
+  const data = useGetNotificationsAPI();
+  if (!data) return null;
+
+  return (
+    <div className='flex h-full grow flex-col overflow-y-auto'>
+      {data.length === 0 && (
+        <EmptyPage text='알림이 없습니다.' enableButton={false} />
+      )}
+      {data.map(
+        (
+          { writerId, writerName, followerId, followerName, timestamp, type },
+          index,
+        ) => (
+          <li key={`${index}-${type}`} className='list-none'>
+            {type === 'POST' && (
+              <NotificationItem
+                user={writerName!}
+                userImage='/picky/user-square.svg'
+                timestamp={timestamp}
+                userId={writerId!}
+                content={notificationMessageByType.POST}
+              />
+            )}
+            {type === 'FOLLOW' && (
+              <NotificationItem
+                user={followerName!}
+                userImage='/picky/user-square.svg'
+                timestamp={timestamp}
+                userId={followerId!}
+                content={notificationMessageByType.FOLLOW}
+              />
+            )}
+          </li>
+        ),
+      )}
+    </div>
+  );
+};
 
 export default Notification;

src/components/EmptyPage/index.tsx

@@ -6,22 +6,26 @@ interface EmptyPageProps {
   href?: string;
   text: string;
   buttonContent?: string;
+  enableButton?: boolean;
 }
 
 const EmptyPage = ({
   href = '/',
   text,
   buttonContent = '투표 글 작성하기',
+  enableButton = true,
 }: EmptyPageProps) => (
   <div className='flex h-full grow flex-col items-center justify-center gap-3'>
     <Icon id='warning' aria-label='투표 글 없음' size={64} />
     <span className='font-h3-bold mb-[28px] text-gray-accent3'>{text}</span>
-    <Link
-      href={href}
-      className='text-h3-sm mt-[28px] flex items-center justify-center rounded-[30px] bg-primary px-6 py-3'
-    >
-      {buttonContent}
-    </Link>
+    {enableButton && (
+      <Link
+        href={href}
+        className='text-h3-sm mt-[28px] flex items-center justify-center rounded-[30px] bg-primary px-6 py-3'
+      >
+        {buttonContent}
+      </Link>
+    )}
   </div>
 );