From 76f5456686f1805a46c0b5fb90c1d39c6fd0591e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A1=B0=EC=98=88=EC=9D=80?= <yeeunee73@gmail.com>
Date: Tue, 19 Nov 2024 17:52:56 +0900
Subject: [PATCH 1/2] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor:=20my-review?=
 =?UTF-8?q?=EC=9D=98=20=ED=83=AD=20=EB=8F=99=EC=9E=91=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../my-page/_components/review-section.tsx    | 81 -------------------
 .../my-page/_components/review-tabs.tsx       | 59 ++++++++++++++
 src/app/(crew)/my-page/layout.tsx             | 14 ++++
 src/app/(crew)/my-page/my-review/page.tsx     |  3 +
 src/app/(crew)/my-page/page.tsx               | 15 +---
 src/app/(crew)/my-page/reviewable/page.tsx    |  3 +
 6 files changed, 83 insertions(+), 92 deletions(-)
 delete mode 100644 src/app/(crew)/my-page/_components/review-section.tsx
 create mode 100644 src/app/(crew)/my-page/_components/review-tabs.tsx
 create mode 100644 src/app/(crew)/my-page/layout.tsx
 create mode 100644 src/app/(crew)/my-page/my-review/page.tsx
 create mode 100644 src/app/(crew)/my-page/reviewable/page.tsx

diff --git a/src/app/(crew)/my-page/_components/review-section.tsx b/src/app/(crew)/my-page/_components/review-section.tsx
deleted file mode 100644
index b9365ba0..00000000
--- a/src/app/(crew)/my-page/_components/review-section.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { Divider } from '@mantine/core';
-import { useInfiniteScroll } from '@/src/hooks/use-infinite-scroll';
-import { fetchWritableGatheringData } from '@/src/app/(crew)/api/mock-api/writable-gathering';
-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 WritableGatheringCardList from '@/src/components/common/writable-gathering-card/writable-gathering-card-list';
-import { ReviewInformResponse } from '@/src/types/review';
-import { WritableGatheringCardInformResponse } from '@/src/types/writable-gathering-card';
-
-export default function ReviewSection() {
-  const myPageTabs = [
-    { label: '작성 가능한 리뷰', id: 'available-review' },
-    { label: '작성한 리뷰', id: 'my-review' },
-  ];
-  const [currentTab, setCurrentTab] = useState(myPageTabs[0].id);
-
-  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<WritableGatheringCardInformResponse>({
-    queryKey: ['crew'],
-    queryFn: ({ pageParam = 0 }) => fetchWritableGatheringData(pageParam, 3),
-    getNextPageParam: (lastPage, allPages) =>
-      lastPage.hasNextPage ? allPages.length + 1 : undefined,
-  });
-
-  const renderTabContent = () => {
-    switch (currentTab) {
-      case 'my-review':
-        return (
-          <ReviewCardList
-            data={reviewData}
-            ref={reviewRef}
-            isFetchingNextPage={isFetchingReviewNextPage}
-            isMine
-            clickable
-          />
-        );
-      default:
-        return (
-          <WritableGatheringCardList
-            data={gatheringData}
-            isFetchingNextPage={isFetchingGatheringNextPage}
-            ref={gatheringRef}
-          />
-        );
-    }
-  };
-
-  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={(id) => setCurrentTab(id)}
-        />
-      </div>
-      <div className="pt-12">{renderTabContent()}</div>
-    </div>
-  );
-}
diff --git a/src/app/(crew)/my-page/_components/review-tabs.tsx b/src/app/(crew)/my-page/_components/review-tabs.tsx
new file mode 100644
index 00000000..6caecbf3
--- /dev/null
+++ b/src/app/(crew)/my-page/_components/review-tabs.tsx
@@ -0,0 +1,59 @@
+'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) {
+      router.push(selectedTab.route);
+    }
+  };
+
+  /*  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>
+  );
+}
diff --git a/src/app/(crew)/my-page/layout.tsx b/src/app/(crew)/my-page/layout.tsx
new file mode 100644
index 00000000..6cd148f5
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/app/(crew)/my-page/my-review/page.tsx b/src/app/(crew)/my-page/my-review/page.tsx
new file mode 100644
index 00000000..19b61e14
--- /dev/null
+++ b/src/app/(crew)/my-page/my-review/page.tsx
@@ -0,0 +1,3 @@
+export default function MyReviewPage() {
+  return <div>my review list component</div>;
+}
diff --git a/src/app/(crew)/my-page/page.tsx b/src/app/(crew)/my-page/page.tsx
index aec59289..57e2baa1 100644
--- a/src/app/(crew)/my-page/page.tsx
+++ b/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');
 }
diff --git a/src/app/(crew)/my-page/reviewable/page.tsx b/src/app/(crew)/my-page/reviewable/page.tsx
new file mode 100644
index 00000000..46859f91
--- /dev/null
+++ b/src/app/(crew)/my-page/reviewable/page.tsx
@@ -0,0 +1,3 @@
+export default function ReviewableGatheringsPage() {
+  return <div>reviewable gathering list component</div>;
+}

From 2937998c1a4943881bccc8c6575579b3ed28c1d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A1=B0=EC=98=88=EC=9D=80?= <yeeunee73@gmail.com>
Date: Wed, 20 Nov 2024 11:07:20 +0900
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=90=9B=20Fix:=20=EB=9D=BC=EC=9A=B0?=
 =?UTF-8?q?=ED=8C=85=20=EC=97=90=EB=9F=AC=20=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(crew)/my-page/_components/review-tabs.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/app/(crew)/my-page/_components/review-tabs.tsx b/src/app/(crew)/my-page/_components/review-tabs.tsx
index 6caecbf3..0fcbb3f8 100644
--- a/src/app/(crew)/my-page/_components/review-tabs.tsx
+++ b/src/app/(crew)/my-page/_components/review-tabs.tsx
@@ -17,7 +17,11 @@ export default function ReviewTabs() {
 
     const selectedTab = myPageTabs.find((tab) => tab.id === id);
     if (selectedTab?.route) {
-      router.push(selectedTab.route);
+      try {
+        router.push(selectedTab.route);
+      } catch (error) {
+        throw error;
+      }
     }
   };