Feat/156/review list

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

@@ -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/_queries/review/my-review-queries.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/app/(crew)/crew/detail/[id]/_components/crew-review-list.tsx

@@ -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)/my-page/_components/profile-card/container.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/review-tabs.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/layout.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/my-review/page.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/page.tsx

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

src/components/common/review-list/review-card-list.stories.tsx

@@ -1,75 +1,23 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { useInfiniteScroll } from '@/src/hooks/use-infinite-scroll';
-import { fetchMyReviewData } from '@/src/app/api/mock-api/review';
-import { ReviewInformResponse } from '@/src/types/review';
-import ClientProvider from '../../client-provider';
+import { MyReviewData } from '@/src/mock/review-data';
 import ReviewCardList from './review-card-list';
 
 const meta: Meta<typeof ReviewCardList> = {
   title: 'components/ReviewCardList',
   component: ReviewCardList,
   parameters: {
-    layout: 'centered',
+    layout: 'fullscreen',
     nextjs: {
       appDirectory: true,
     },
   },
   tags: ['autodocs'],
-  decorators: [
-    (Story) => (
-      <ClientProvider>
-        <Story />
-      </ClientProvider>
-    ),
-  ],
-} satisfies Meta<typeof ReviewCardList>;
+};
 
 export default meta;
-type Story = StoryObj<typeof ReviewCardList>;
-
-// function RenderCrewReviewCardList({ isMine = false, clickable = false }) {
-//   const { data, ref, isFetchingNextPage } = useInfiniteScroll<ReviewInformResponse>({
-//     queryKey: ['review'],
-//     queryFn: ({ pageParam = 0 }) => fetchCrewReviewData(pageParam, 3),
-//     getNextPageParam: (lastPage, allPages) =>
-//       lastPage.hasNextPage ? allPages.length + 1 : undefined,
-//   });
-//   return (
-//     <ReviewCardList
-//       data={data}
-//       ref={ref}
-//       isMine={isMine}
-//       clickable={clickable}
-//       isFetchingNextPage={isFetchingNextPage}
-//     />
-//   );
-// }
 
-function RenderMyReviewCardList({ isMine = true, clickable = false }) {
-  const { data, ref, isFetchingNextPage } = useInfiniteScroll<ReviewInformResponse>({
-    queryKey: ['review'],
-    queryFn: ({ pageParam = 0 }) => fetchMyReviewData(pageParam, 3),
-    getNextPageParam: (lastPage, allPages) =>
-      lastPage.hasNextPage ? allPages.length + 1 : undefined,
-  });
-
-  return (
-    <ReviewCardList
-      data={data}
-      ref={ref}
-      isMine={isMine}
-      clickable={clickable}
-      isFetchingNextPage={isFetchingNextPage}
-    />
-  );
-}
-
-// export const CrewReviewCardList: Story = {
-//   render: () => <RenderCrewReviewCardList />,
-//   args: {},
-// };
+type Story = StoryObj<typeof ReviewCardList>;
 
 export const MyReviewCardList: Story = {
-  render: () => <RenderMyReviewCardList clickable />,
-  args: {},
+  render: () => <ReviewCardList data={MyReviewData} refetch={() => {}} />,
 };

src/components/common/review-list/review-card-list.tsx

@@ -1,48 +1,47 @@
-import { forwardRef } from 'react';
 import { InfiniteData } from '@tanstack/react-query';
-import { ReviewInformResponse } from '@/src/types/review';
+import { MyReview } from '@/src/types/review';
 import ReviewCard from './review-card';
 
+// ReviewCardListProps 타입 정의
 interface ReviewCardListProps {
-  data: InfiniteData<ReviewInformResponse> | undefined;
-  isFetchingNextPage: boolean;
-  clickable?: boolean;
-  isMine?: boolean;
+  data: InfiniteData<{
+    content: MyReview[];
+    hasNext: boolean;
+  }>;
+  refetch: () => void;
 }
 
-function ReviewCardList(
-  { data, isFetchingNextPage, clickable = false, isMine = false }: ReviewCardListProps,
-  ref: React.Ref<HTMLDivElement>,
-) {
-  const reviewDataList = data?.pages.flatMap((page) => [...page.data]) ?? [];
+export default function ReviewCardList({ data, refetch }: ReviewCardListProps) {
+  const reviewDataList = data.pages.flatMap((page) => page.content || []);
 
-  if (!reviewDataList) return <p>Loading...</p>;
+  // 데이터가 없을 경우 처리
+  if (!reviewDataList.length) {
+    return (
+      <div className="flex justify-center py-10">
+        <p className="text-xl font-semibold">남긴 리뷰가 없습니다</p>
+        <p className="text-lg font-semibold">크루에 가입하고 약속을 잡아보세요!</p>
+      </div>
+    );
+  }
 
   return (
-    <>
-      <ul className={`mx-auto flex h-full w-full flex-col ${isMine ? 'gap-8' : ''}`}>
-        {reviewDataList.map((review, index) => (
-          <li key={`${review.rate - index}`} className="h-auto min-h-[112px]">
-            <ReviewCard
-              crewId={review.crewId}
-              comment={review.comment}
-              createdAt={review.createdAt}
-              rate={review.rate}
-              isMine={isMine}
-              clickable={clickable}
-              crewName={'crewName' in review ? review.crewName : undefined}
-              gatheringName={'gatheringName' in review ? review.gatheringName : undefined}
-              reviewer={'reviewer' in review ? review.reviewer : undefined}
-              gatheringLocation={
-                'gatheringLocation' in review ? review.gatheringLocation : undefined
-              }
-            />
-          </li>
-        ))}
-      </ul>
-      {isFetchingNextPage ? <p>loading...</p> : <div ref={ref} className="h-[1px]" />}
-    </>
+    <ul className="mx-auto flex h-full w-full flex-col gap-8">
+      {reviewDataList.map((review) => (
+        <li key={review.id} className="h-auto min-h-[112px]">
+          <ReviewCard
+            crewId={review.crewId}
+            id={review.id}
+            comment={review.comment}
+            createdAt={review.createdAt}
+            rate={review.rate}
+            clickable
+            isMine
+            crewName={review.crewName}
+            gatheringName={review.gatheringName}
+            refetch={refetch}
+          />
+        </li>
+      ))}
+    </ul>
   );
 }
-
-export default forwardRef(ReviewCardList);