♻️ Refactor: my-review의 탭 동작 수정

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

@@ -0,0 +1,63 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { Divider } from '@mantine/core';
+import Tabs from '@/src/components/common/tab';
+
+export default function ReviewTabs() {
+  const myPageTabs = [
+    { label: '작성 가능한 리뷰', id: 'available-review', route: '/my-page/reviewable' },
+    { label: '작성한 리뷰', id: 'my-review', route: '/my-page/my-review' },
+  ];
+  const [currentTab, setCurrentTab] = useState(myPageTabs[0].id);
+  const router = useRouter();
+  const handleTabClick = (id: string) => {
+    setCurrentTab(id);
+
+    const selectedTab = myPageTabs.find((tab) => tab.id === id);
+    if (selectedTab?.route) {
+      try {
+        router.push(selectedTab.route);
+      } catch (error) {
+        throw error;
+      }
+    }
+  };
+
+  /*  const {
+    data: reviewData,
+    ref: reviewRef,
+    isFetchingNextPage: isFetchingReviewNextPage,
+  } = useInfiniteScroll<ReviewInformResponse>({
+    queryKey: ['review'],
+    queryFn: ({ pageParam = 0 }) => fetchMyReviewData(pageParam, 3),
+    getNextPageParam: (lastPage, allPages) =>
+      lastPage.hasNextPage ? allPages.length + 1 : undefined,
+  });
+
+  const {
+    data: gatheringData,
+    ref: gatheringRef,
+    isFetchingNextPage: isFetchingGatheringNextPage,
+  } = useInfiniteScroll<ReviewableGatheringCardInformResponse>({
+    queryKey: ['crew'],
+    queryFn: ({ pageParam = 0 }) => getReviewableGatherings(pageParam),
+    getNextPageParam: (lastPage, allPages) => (lastPage.hasNext ? allPages.length + 1 : undefined),
+  });
+*/
+  return (
+    <div className="mt-12 flex flex-col">
+      <h3 className="text-2xl font-semibold text-gray-900">나의 리뷰 모아보기</h3>
+      <Divider mt={16} mb={24} size={2} />
+      <div className="flex justify-start">
+        <Tabs
+          variant="review"
+          tabs={myPageTabs}
+          activeTab={currentTab}
+          onTabClick={handleTabClick}
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,14 @@
+import ProfileCardContainer from '@/src/app/(crew)/my-page/_components/profile-card/container';
+import ReviewTabs from './_components/review-tabs';
+
+export default function MyPage() {
+  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 />
+    </div>
+  );
+}

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

@@ -0,0 +1,3 @@
+export default function MyReviewPage() {
+  return <div>my review list component</div>;
+}

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

@@ -1,14 +1,7 @@
-import ProfileCardContainer from '@/src/app/(crew)/my-page/_components/profile-card/container';
-import ReviewSection from '@/src/app/(crew)/my-page/_components/review-section';
+'use client';
+
+import { redirect } from 'next/navigation';
 
 export default function MyPage() {
-  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>
-      <ReviewSection />
-      <div />
-    </div>
-  );
+  redirect('/my-page/reviewable');
 }

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

@@ -0,0 +1,3 @@
+export default function ReviewableGatheringsPage() {
+  return <div>reviewable gathering list component</div>;
+}