✨ Feat : 사용자 알림 조회 api 연결

prgrms-web-devcourse-final-project · Dec 8, 2024 · 7a64f49 · 7a64f49
2 parents f51822e + ced4b9a
commit 7a64f49
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 86 deletions.
diff --git a/src/apis/member.ts b/src/apis/member.ts
@@ -8,8 +8,8 @@ export const getUserData = async (): Promise<Member> => {
 };
 
 // 유저 알림
-export const getUserAlarm = async (): Promise<Alarm> => {
-  const response = await authInstance.get('/api/v1/notification/member');
+export const getUserAlarm = async (): Promise<Alarm[]> => {
+  const response = await authInstance.get('/api/v1/subReservation/memberlist');
   return response.data;
 };
 

diff --git a/src/pages/UserNotiPage/components/UserNotiCard.tsx b/src/pages/UserNotiPage/components/UserNotiCard.tsx
@@ -1,20 +1,26 @@
 import { getDateFunction } from '@utils/formatTime';
-import ShowWithinSevenDays from '@components/ShowWithinSevenDays';
-import type { UserNotification } from './UserNotiList';
+import { Alarm } from '@typings/types';
 
 interface UserNotiProps {
-  item: UserNotification;
-  showLabel: boolean;
+  item: Alarm;
 }
 
-const UserNotiCard = ({ item, showLabel }: UserNotiProps) => {
-  const { type, message, reservationInfo, createdAt, price } = item;
+const UserNotiCard = ({ item }: UserNotiProps) => {
+  const {
+    notificationType,
+    content,
+    createdAt,
+    price,
+    imageUrl,
+    workplaceName,
+    studyRoomName,
+  } = item;
 
   return (
     <>
       <div className='mx-auto flex w-[100%] flex-col gap-3 text-sm active:bg-[#e9e9e9]'>
         <div className='mx-auto w-custom px-1.5 py-[13px]'>
-          {type === 'upcoming' ? (
+          {notificationType === 'upcoming' ? (
             <p className='font-medium'>다가오는 일정</p>
           ) : (
             <p className='font-medium'>예약 완료</p>
@@ -25,28 +31,27 @@ const UserNotiCard = ({ item, showLabel }: UserNotiProps) => {
             <div className='flex justify-between'>
               {!price ? (
                 <div className='flex w-[260px] flex-col'>
-                  <p className='w-[100%]'>{message}</p>
-                  <p className='w-[100%]'>{reservationInfo}</p>
+                  <p className='w-[100%]'>{content}</p>
+                  <p className='w-[100%]'>{studyRoomName}</p>
                 </div>
               ) : (
                 <div className='flex w-[260px] flex-col'>
-                  <p className='w-[100%]'>{`${reservationInfo} ${message}`}</p>
+                  <p className='w-[100%]'>{`${workplaceName} / ${studyRoomName} ${content}`}</p>
                   <p className='w-[100%]'>
                     {price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')} 원
                   </p>
                 </div>
               )}
 
               <img
-                src='https://modo-phinf.pstatic.net/20180304_61/1520159998510ED9Yt_JPEG/mosaSDaCsR.jpeg'
+                src={imageUrl}
                 alt='스터디룸 사진'
                 className='h-10 w-10 object-cover'
               />
             </div>
           </div>
         </div>
       </div>
-      {showLabel ? <ShowWithinSevenDays label='7일 이내' /> : null}
     </>
   );
 };

diff --git a/src/pages/UserNotiPage/components/UserNotiList.tsx b/src/pages/UserNotiPage/components/UserNotiList.tsx
@@ -1,88 +1,22 @@
-import { useEffect, useState } from 'react';
-import { getWithinSevenDays } from '@utils/formatTime';
 import UserNotiCard from './UserNotiCard';
-
-export interface UserNotification {
-  id: number;
-  type: string;
-  message: string;
-  reservationInfo: string;
-  price?: number;
-  createdAt: string;
-}
-
-const allNotification: UserNotification[] = [
-  {
-    id: 1,
-    type: 'upcoming',
-    message: '방문 24시간 전입니다.',
-    reservationInfo: '스터디랩 / ROOM A',
-    createdAt: '2024-11-02T00:00:00',
-  },
-  {
-    id: 2,
-    type: 'upcoming',
-    message: '방문 24시간 전입니다.',
-    reservationInfo: '스터디랩 / ROOM A',
-    createdAt: '2024-11-01T00:00:00',
-  },
-  {
-    id: 3,
-    type: 'completeReservation',
-    message: '예약이 완료되었습니다.',
-    reservationInfo: '스터디랩 / ROOM A',
-    price: 8000,
-    createdAt: '2024-10-11T14:00:00',
-  },
-  {
-    id: 4,
-    type: 'completeReservation',
-    message: '예약이 완료되었습니다.',
-    reservationInfo: '스터디랩 / ROOM A',
-    price: 8000,
-    createdAt: '2024-11-20T16:00:00',
-  },
-  {
-    id: 5,
-    type: 'completeReservation',
-    message: '예약이 완료되었습니다.',
-    reservationInfo: '스터디랩 / ROOM A',
-    price: 8000,
-    createdAt: '2024-11-10T13:00:00',
-  },
-];
+import useGetUserAlarm from '../hooks/useGetUserAlarm';
 
 const UserNotiList = () => {
-  const [isLabel, setIsLabel] = useState<string | null>(null);
-  const sortedNotification = allNotification.sort((b, a) => {
+  const { data: userAlarmList } = useGetUserAlarm();
+
+  const sortedNotification = userAlarmList?.sort((b, a) => {
     return +new Date(a.createdAt) - +new Date(b.createdAt);
   });
 
-  useEffect(() => {
-    if (sortedNotification) {
-      const reverseSortedList = [...sortedNotification].reverse();
-      const putLabel = reverseSortedList.find(
-        (item) => getWithinSevenDays(item.createdAt) === '7일 이내',
-      );
-
-      if (putLabel) {
-        setIsLabel(putLabel.createdAt);
-      } else {
-        setIsLabel(null);
-      }
-    }
-  }, [sortedNotification]);
-
   return (
     <>
       {sortedNotification && sortedNotification.length > 0 ? (
         <div className='mt-4 flex w-[375px] flex-col justify-center gap-[13px]'>
           {sortedNotification.map((item) => {
             return (
               <UserNotiCard
-                key={item.id}
+                key={item.memberalrimId}
                 item={item}
-                showLabel={item.createdAt === isLabel}
               />
             );
           })}

diff --git a/src/pages/UserNotiPage/hooks/useGetUserAlarm.ts b/src/pages/UserNotiPage/hooks/useGetUserAlarm.ts
@@ -0,0 +1,11 @@
+import { getUserAlarm } from '@apis/member';
+import { useQuery } from '@tanstack/react-query';
+
+const useGetUserAlarm = () => {
+  return useQuery({
+    queryKey: ['userAlarm'],
+    queryFn: getUserAlarm,
+  });
+};
+
+export default useGetUserAlarm;
diff --git a/src/typings/types.ts b/src/typings/types.ts
@@ -65,7 +65,17 @@ export interface Member {
 }
 
 // 사용자 알림
-export interface Alarm {}
+export interface Alarm {
+  memberalrimId: number;
+  content: string;
+  createdAt: string;
+  workplaceId: number;
+  notificationType: string;
+  price: number;
+  workplaceName: string;
+  studyRoomName: string;
+  imageUrl: string;
+}
 
 // 실시간 알림
 export interface SseAlarm {