Merge pull request #223 from DevKor-github/fix/#221/notificaiton-apo

[fix] notification 바뀐 api 대응

Author: jw0202058

src/features/notification/apis/useGetNotification.ts

@@ -1,22 +1,57 @@
 import client from '@/common/utils/client';
 import { QUERY_KEYS } from '@/libs/queryKeys';
-import { useQuery } from '@tanstack/react-query';
+import { useInfiniteQuery } from '@tanstack/react-query';
 import type { NotificationInterface } from '../types';
 
+export interface GetNotificationRequest {
+  pageSize: number;
+  cursorId?: string | null;
+  cursorCreatedAt?: string | null;
+}
+
 export interface NotificationResponse {
   message: string;
-  data: NotificationInterface[];
+  data: {
+    notifications: NotificationInterface[];
+    pageInfo: {
+      hasNext: boolean;
+      cursorCreatedAt: string | null;
+      cursorId: string | null;
+    };
+  };
+  version: string;
+}
+
+interface PageParam {
+  cursorid?: string | null;
+  cursorCreatedAt?: string | null;
 }
 
-const getNotification = async () => {
-  const res = await client.get<NotificationResponse>('api/v1/notification');
+const getNotification = async (params: GetNotificationRequest) => {
+  const res = await client.get<NotificationResponse>('api/v1/notification', {
+    params,
+  });
+
   return res.data.data;
 };
 
-export const useGetNotification = () => {
-  return useQuery({
-    queryKey: [QUERY_KEYS.NOTIFICATION_LIST],
-    queryFn: getNotification,
+export const useGetNotification = (params: GetNotificationRequest) => {
+  const initialPageParam: PageParam = {};
+
+  return useInfiniteQuery({
+    queryKey: [QUERY_KEYS.APPOINTMENT_LIST, params],
+    queryFn: ({ pageParam }) => getNotification({ ...params, ...pageParam }),
+    getNextPageParam: lastPage =>
+      lastPage.pageInfo.hasNext
+        ? {
+            cursorId: lastPage.pageInfo.cursorId,
+            cursorCreatedAt: lastPage.pageInfo.cursorCreatedAt,
+          }
+        : undefined,
+    initialPageParam,
+    select: data => data.pages.flatMap(page => page.notifications),
     staleTime: 0,
   });
 };
+
+export default useGetNotification;

src/features/notification/components/NotificationItemCard/index.tsx

@@ -12,12 +12,13 @@ interface Props {
 }
 
 const NotificationItemCard = ({ data }: Props) => {
-  const isRental = data.item.transactionTypes.includes('RENTAL');
-  const isSale = data.item.transactionTypes.includes('SALE');
-  const isDirect = data.item.tradeMethods.includes('DIRECT');
-  const type = data.type;
+  const isRental = data.itemInfo.transactionTypes.includes('RENTAL');
+  const isSale = data.itemInfo.transactionTypes.includes('SALE');
+  const isDirect = data.itemInfo.tradeMethods.includes('DIRECT');
+  const type = data.notificationInfo.type;
   const isRemind = type === 'APPOINTMENT_RENTAL_REMIND' || type === 'APPOINTMENT_RETURN_REMIND';
-  const remindDate = type === 'APPOINTMENT_RENTAL_REMIND' ? data.rentalDate : data.returnDate;
+  const remindDate =
+    type === 'APPOINTMENT_RENTAL_REMIND' ? data.appointmentInfo.rentalDate : data.appointmentInfo.returnDate;
 
   const label = (() => {
     if (type === 'APPOINTMENT_CANCEL') return '나의 Pick이 취소됐어요.';
@@ -55,37 +56,37 @@ const NotificationItemCard = ({ data }: Props) => {
           </div>
         )}
       </div>
-      <Link className={s.Container} to={`/pick-detail/${data.appointmentId}`}>
-        <img className={s.Image} src={getImageUrl(data.item.thumbnail)} aria-hidden />
+      <Link className={s.Container} to={`/pick-detail/${data.appointmentInfo.id}`}>
+        <img className={s.Image} src={getImageUrl(data.itemInfo.thumbnail)} aria-hidden />
         <div className={s.Info}>
           <div className={s.Header}>
-            <h2 className={s.Title}>{data.item.title}</h2>
+            <h2 className={s.Title}>{data.itemInfo.title}</h2>
             <div className={s.Price}>
-              {isRental && <PriceToken price={data.item.rentalFee} deposit={data.item.deposit} />}
-              {isSale && <PriceToken price={data.item.salePrice} />}
+              {isRental && <PriceToken price={data.itemInfo.rentalFee} deposit={data.itemInfo.deposit} />}
+              {isSale && <PriceToken price={data.itemInfo.salePrice} />}
             </div>
           </div>
           <div className={s.Footer}>
             <div className={s.Tokens}>
               <ItemTokenList
                 showCount={3}
                 itemInfo={{
-                  productTypes: data.item.productTypes,
-                  quality: data.item.quality,
-                  size: data.item.size,
-                  color: data.item.color,
-                  tradeMethods: data.item.tradeMethods,
+                  productTypes: data.itemInfo.productTypes,
+                  quality: data.itemInfo.quality,
+                  size: data.itemInfo.size,
+                  color: data.itemInfo.color,
+                  tradeMethods: data.itemInfo.tradeMethods,
                 }}
               />
             </div>
             <div className={s.Interactions}>
               <div className={s.InteractionItem}>
                 <span className="mgc_heart_fill" />
-                <p>{data.item.likeCount}</p>
+                <p>{data.itemInfo.likeCount}</p>
               </div>
               <div className={s.InteractionItem}>
                 <span className="mgc_chat_2_fill" />
-                <p>{data.item.chatRoomCount}</p>
+                <p>{data.itemInfo.chatRoomCount}</p>
               </div>
             </div>
           </div>

src/features/notification/components/NotificationList/index.tsx

@@ -2,15 +2,15 @@ import type { NotificationInterface } from '../../types';
 import NotificationItemCard from '../NotificationItemCard';
 
 interface Props {
-  notifications: NotificationInterface[];
+  notification: NotificationInterface;
 }
 
-const NotificationList = ({ notifications }: Props) => {
+const NotificationList = ({ notification }: Props) => {
   return (
     <>
-      {notifications.map(item => (
-        <NotificationItemCard data={item} />
-      ))}
+      {/* {notifications.map(item => ( */}
+      <NotificationItemCard data={notification} />
+      {/* ))} */}
     </>
   );
 };

src/features/notification/types.ts

@@ -12,7 +12,7 @@ export const NOTIFICATION_TYPE_ARRAY = [
 ] as const;
 export type NotificationType = (typeof NOTIFICATION_TYPE_ARRAY)[number];
 
-export interface ItemNotificationInterface {
+export interface ItemInfoInterface {
   itemId: number;
   productTypes: ProductType[];
   transactionTypes: TransactionType[];
@@ -28,14 +28,23 @@ export interface ItemNotificationInterface {
   likeCount: number;
   chatRoomCount: number;
   repostDate: string;
+  isDeleted: boolean;
 }
 
-export interface NotificationInterface {
-  notificationId: number;
-  item: ItemNotificationInterface;
-  appointmentId: number;
-  rentalDate: string;
-  returnDate: string;
+export interface notificationInfoInterface {
+  id: number;
   type: NotificationType;
   createdAt: string;
 }
+
+export interface appointmentInfoInterface {
+  id: number;
+  rentalDate: string;
+  returnDate: string;
+}
+
+export interface NotificationInterface {
+  notificationInfo: notificationInfoInterface;
+  appointmentInfo: appointmentInfoInterface;
+  itemInfo: ItemInfoInterface;
+}

src/pages/NotificationPage/index.tsx

@@ -7,15 +7,26 @@ import NotFoundPage from '../NotFoundPage';
 import Btn from '@/common/components/Button';
 import NoResult from '@/common/components/NoResult';
 import NotificationList from '@/features/notification/components/NotificationList';
+import { CHAT_PAGING_SIZE } from '@/libs/constants';
+import Pagination from '@/common/components/Pagination';
 
 const NotigicationPage = () => {
   const navigate = useNavigate();
-  const { data: notifications, isLoading } = useGetNotification();
+  const {
+    data: notifications = [],
+    isSuccess,
+    hasNextPage,
+    isFetchingNextPage,
+    fetchNextPage,
+    isLoading,
+  } = useGetNotification({
+    pageSize: CHAT_PAGING_SIZE,
+  });
 
   if (isLoading) return null;
   if (!notifications) return <NotFoundPage />;
 
-  const isEmpty = notifications.length === 0;
+  const isEmpty = (isSuccess && notifications.length) === 0;
 
   return (
     <SafeArea>
@@ -30,7 +41,13 @@ const NotigicationPage = () => {
               </Btn>
             </div>
           ) : (
-            <NotificationList notifications={notifications} />
+            <Pagination
+              fetchNextPage={fetchNextPage}
+              items={notifications}
+              render={item => <NotificationList key={item.appointmentInfo.id} notification={item} />}
+              hasNextPage={hasNextPage}
+              isFetchingNextPage={isFetchingNextPage}
+            />
           )}
         </div>
       </div>