[KAN-124] refactor : 마이페이지/작성한 리뷰 페이지 컴포넌트 분리 및 스크롤 그라데이션 효과 추가

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;

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 />
       )}