Merge pull request #158 from CodeitFESI4-Team1/Feat/156/ReviewList

Feat/156/review list

Author: HaeJungg

package-lock.json

@@ -0,0 +1,26 @@
+import { fetchApi } from '@/src/utils/api';
+import { ApiResponse, MyReviewResponse } from '@/src/types/review';
+
+export function getMyReviews(page: number, size: number): Promise<MyReviewResponse> {
+  // 최종 반환 타입
+  const url = `/api/review/memberReviews?page=${page}&size=${size}`;
+  return fetchApi<ApiResponse<MyReviewResponse>>(url, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  }).then((response) => {
+    return response.data;
+  });
+}
+
+// 리뷰 삭제 API
+export function deleteReview(reviewId: number): Promise<void> {
+  const url = `/api/review/${reviewId}`;
+  return fetchApi<void>(url, {
+    method: 'DELETE',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+}

src/_apis/review/my-review-apis.ts

@@ -0,0 +1,12 @@
+import { getMyReviews } from '@/src/_apis/review/my-review-apis';
+import { MyReviewResponse } from '@/src/types/review';
+
+export function useGetMyReviewsQuery({ size }: { size: number }) {
+  return {
+    queryKey: ['myReviews'],
+    queryFn: ({ pageParam = 0 }: { pageParam?: number }) => getMyReviews(pageParam, size),
+    getNextPageParam: (lastPage: MyReviewResponse, allPages: MyReviewResponse[]) => {
+      return lastPage.hasNext ? allPages.length : undefined;
+    },
+  };
+}

src/_queries/review/my-review-queries.ts

@@ -21,7 +21,7 @@ export default function CrewReviewList({
   return (
     <div className="flex flex-col justify-between p-6">
       <div className="mb-6 grid flex-grow gap-4">
-        {reviews.map((review) => (
+        {/* {reviews.map((review) => (
           <ReviewCard
             key={review.id}
             rate={review.rate}
@@ -30,7 +30,7 @@ export default function CrewReviewList({
             crewId={review.crewId}
             reviewer={review.reviewer}
           />
-        ))}
+        ))} */}
       </div>
       <div className="mt-6 flex justify-center">
         <Pagination

src/app/(crew)/crew/detail/[id]/_components/crew-review-list.tsx

@@ -50,7 +50,7 @@ export default function ProfileCard() {
       const file = (event.target as HTMLInputElement)?.files?.[0];
       if (file) {
         if (file.size > 5 * 1024 * 1024) {
-          alert('5MB 이하의 파일만 업로드 가능합니다.');
+          toast.error('5MB 이하의 파일만 업로드 가능합니다.');
           return;
         }
 

src/app/(crew)/my-page/_components/profile-card/container.tsx

@@ -3,14 +3,7 @@
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { Divider } from '@mantine/core';
-import { getReviewableGatherings } from '@/src/_apis/gathering/reviewable-gathering';
-import { useInfiniteScroll } from '@/src/hooks/use-infinite-scroll';
-import { fetchMyReviewData } from '@/src/app/api/mock-api/review';
-import ReviewCardList from '@/src/components/common/review-list/review-card-list';
 import Tabs from '@/src/components/common/tab';
-import ReviewableGatheringCardList from '@/src/components/my-page/reviewable-gatherings/reviewable-gathering-card-list';
-import { ReviewInformResponse } from '@/src/types/review';
-import { ReviewableGatheringCardInformResponse } from '@/src/types/reviewable-gathering-card';
 
 export default function ReviewTabs() {
   const myPageTabs = [

src/app/(crew)/my-page/_components/review-tabs.tsx

@@ -1,13 +1,14 @@
 import ProfileCardContainer from '@/src/app/(crew)/my-page/_components/profile-card/container';
 import ReviewTabs from './_components/review-tabs';
 
-export default function MyPage() {
+export default function MyPage({ children }: { children: React.ReactNode }) {
   return (
     <div className="container mx-auto my-0 min-h-screen max-w-pc bg-gray-50 px-3 py-11 md:px-8 lg:px-11">
       <div className="lg:gap-4.5 flex flex-col gap-3 md:gap-4">
         <ProfileCardContainer />
       </div>
       <ReviewTabs />
+      <div>{children}</div>
       <div />
     </div>
   );

src/app/(crew)/my-page/layout.tsx

@@ -1,3 +1,40 @@
+'use client';
+
+import { toast } from 'react-toastify';
+import { Loader } from '@mantine/core';
+import { useGetMyReviewsQuery } from '@/src/_queries/review/my-review-queries';
+import { useInfiniteScroll } from '@/src/hooks/use-infinite-scroll';
+import ReviewCardList from '@/src/components/common/review-list/review-card-list';
+
 export default function MyReviewPage() {
-  return <div>my review list component</div>;
+  const size = 6;
+
+  const { data, isLoading, error, ref, isFetchingNextPage, refetch } = useInfiniteScroll(
+    useGetMyReviewsQuery({ size }),
+  );
+
+  if (isLoading) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <Loader />
+      </div>
+    );
+  }
+
+  if (error) {
+    toast.error('리뷰를 불러오는 중 문제가 발생했습니다.');
+    return null;
+  }
+
+  return (
+    <div className="mt-8">
+      <ReviewCardList data={data ?? { pages: [], pageParams: [] }} refetch={refetch} />
+      {isFetchingNextPage && (
+        <div className="mt-4 flex items-center justify-center">
+          <Loader />
+        </div>
+      )}
+      <div ref={ref} className="h-[1px]" />
+    </div>
+  );
 }

src/app/(crew)/my-page/my-review/page.tsx

@@ -4,4 +4,5 @@ import { redirect } from 'next/navigation';
 
 export default function MyPage() {
   redirect('/my-page/reviewable');
+  return null;
 }