From 346d340eb692c0fab415097a457470e82c904b8e Mon Sep 17 00:00:00 2001
From: chaeney <chaekey@gmail.com>
Date: Tue, 15 Oct 2024 15:23:24 +0900
Subject: [PATCH] =?UTF-8?q?[KAN-124]=20refactor=20:=20=EB=A7=88=EC=9D=B4?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80/=EC=9E=91=EC=84=B1=ED=95=9C=20?=
 =?UTF-8?q?=EB=A6=AC=EB=B7=B0=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=84=EB=A6=AC=20=EB=B0=8F=20?=
 =?UTF-8?q?=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EA=B7=B8=EB=9D=BC=EB=8D=B0?=
 =?UTF-8?q?=EC=9D=B4=EC=85=98=20=ED=9A=A8=EA=B3=BC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../written/_component/WrittenReviews.tsx     | 53 +++++++++++++++++++
 src/app/(main)/mypage/review/written/page.tsx | 18 +------
 2 files changed, 55 insertions(+), 16 deletions(-)
 create mode 100644 src/app/(main)/mypage/review/written/_component/WrittenReviews.tsx

diff --git a/src/app/(main)/mypage/review/written/_component/WrittenReviews.tsx b/src/app/(main)/mypage/review/written/_component/WrittenReviews.tsx
new file mode 100644
index 00000000..c0baf309
--- /dev/null
+++ b/src/app/(main)/mypage/review/written/_component/WrittenReviews.tsx
@@ -0,0 +1,53 @@
+'use client';
+
+import Link from 'next/link';
+import GradientOverlay from '@/app/components/GradientOverlay/GradientOverlay';
+import Review from '@/app/components/Review/Review';
+import useScrollGradientEffect from '@/hooks/useScrollGradientEffect';
+import { ReviewsType } from '@/types/data.type';
+
+const WrittenReviews = ({
+  writtenReviews,
+}: {
+  writtenReviews: ReviewsType[];
+}) => {
+  const {
+    topGradientVisible,
+    bottomGradientVisible,
+    firstItemRef: firstReviewRef,
+    lastItemRef: lastReviewRef,
+  } = useScrollGradientEffect();
+
+  return (
+    <div className='my-24 flex flex-col gap-24'>
+      <GradientOverlay position='top' isVisible={topGradientVisible} />
+      <GradientOverlay position='bottom' isVisible={bottomGradientVisible} />
+
+      {writtenReviews.map((review, index) => (
+        <div
+          key={review.id}
+          ref={
+            index === 0
+              ? firstReviewRef
+              : index === writtenReviews.length - 1
+                ? lastReviewRef
+                : null
+          }
+        >
+          <Link href={`/gatherings/${review.Gathering.id}`}>
+            <Review
+              key={review.id}
+              rating={review.score}
+              image_source={review.Gathering.image}
+              description={review.comment}
+              user_name={review.User.name}
+              date={review.createdAt}
+            />
+          </Link>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default WrittenReviews;
diff --git a/src/app/(main)/mypage/review/written/page.tsx b/src/app/(main)/mypage/review/written/page.tsx
index 414cd09d..ca49d6ef 100644
--- a/src/app/(main)/mypage/review/written/page.tsx
+++ b/src/app/(main)/mypage/review/written/page.tsx
@@ -1,10 +1,9 @@
 import { getUserData } from '@/app/api/actions/mypage/getUserData';
 import getReviewList from '@/app/api/actions/reviews/getReviewList';
-import Review from '@/app/components/Review/Review';
-import Link from 'next/link';
 import { redirect } from 'next/navigation';
 import EmptyReviewPage from '../../_component/EmptyReviewPage';
 import ReviewFilterTab from '../../_component/ReviewFilterTab';
+import WrittenReviews from './_component/WrittenReviews';
 
 const WrittenReviewsPage = async () => {
   const user = await getUserData();
@@ -26,20 +25,7 @@ const WrittenReviewsPage = async () => {
 
       {/* cards */}
       {writtenReviews?.length ? (
-        <div className='my-24 flex flex-col gap-24'>
-          {writtenReviews.map((review) => (
-            <Link href={`/gatherings/${review.Gathering.id}`} key={review.id}>
-              <Review
-                key={review.id}
-                rating={review.score}
-                image_source={review.Gathering.image}
-                description={review.comment}
-                user_name={review.User.name}
-                date={review.createdAt}
-              />
-            </Link>
-          ))}
-        </div>
+        <WrittenReviews writtenReviews={writtenReviews} />
       ) : (
         <EmptyReviewPage />
       )}