From d0b0f24011626c28baefde8f15fd581ec3a78d4c Mon Sep 17 00:00:00 2001
From: Homin <coc1381@naver.com>
Date: Wed, 16 Oct 2024 15:36:17 +0900
Subject: [PATCH 1/2] =?UTF-8?q?[KAN-128]=20style:=20/mypage=20MyGatheringL?=
 =?UTF-8?q?ist,=20review/writable=20=EC=97=90=20=EC=95=A0=EB=8B=88?=
 =?UTF-8?q?=EB=A9=94=EC=9D=B4=EC=85=98=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mypage/_component/MyGatheringList.tsx     |  5 ++-
 .../(main)/mypage/review/writable/page.tsx    | 42 ++++++++++---------
 2 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/src/app/(main)/mypage/_component/MyGatheringList.tsx b/src/app/(main)/mypage/_component/MyGatheringList.tsx
index 4ad841e8..197e0776 100644
--- a/src/app/(main)/mypage/_component/MyGatheringList.tsx
+++ b/src/app/(main)/mypage/_component/MyGatheringList.tsx
@@ -4,6 +4,7 @@ import getMyGatherings from '@/app/api/gatherings/service/getMyGatherings';
 import Card from '@/app/components/Card/Card';
 import InfiniteScroll from '@/app/components/InfiniteScroll/InfiniteScroll';
 import ReviewModal from '@/app/components/Modal/ReviewModal';
+import MotionWrapper from '@/app/components/MotionWrapper/MotionWrapper';
 import useParticipation from '@/hooks/useParticipation';
 import { queries } from '@/queries';
 import { UserData } from '@/types/client.type';
@@ -30,7 +31,7 @@ const MyGatheringList = ({ initData, user }: MyGatheringListProps) => {
   };
 
   return (
-    <>
+    <MotionWrapper>
       <InfiniteScroll
         initData={initData}
         queryKey={queries.joined._def}
@@ -54,7 +55,7 @@ const MyGatheringList = ({ initData, user }: MyGatheringListProps) => {
       {isModalOpen && (
         <ReviewModal gatheringId={cardId} onClose={handleCloseModal} />
       )}
-    </>
+    </MotionWrapper>
   );
 };
 
diff --git a/src/app/(main)/mypage/review/writable/page.tsx b/src/app/(main)/mypage/review/writable/page.tsx
index 54db43eb..cbf65f2c 100644
--- a/src/app/(main)/mypage/review/writable/page.tsx
+++ b/src/app/(main)/mypage/review/writable/page.tsx
@@ -11,6 +11,7 @@ import ReviewFilterTab from '../../_component/ReviewFilterTab';
 import { queries } from '@/queries';
 import useScrollGradientEffect from '@/hooks/useScrollGradientEffect';
 import GradientOverlay from '@/app/components/GradientOverlay/GradientOverlay';
+import MotionWrapper from '@/app/components/MotionWrapper/MotionWrapper';
 
 const WritableReviewsPage = () => {
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
@@ -51,26 +52,27 @@ const WritableReviewsPage = () => {
         {/* cards */}
         {writableReviews?.length ? (
           writableReviews.map((data, index) => (
-            <div
-              key={data.id}
-              ref={
-                index === 0
-                  ? firstReviewRef
-                  : index === writableReviews.length - 1
-                    ? lastReviewRef
-                    : null
-              }
-            >
-              <Card data={data}>
-                <Card.Chips />
-                <Card.Info />
-                <Card.Button
-                  handleButtonClick={() =>
-                    data.isCompleted && handleOpenModal(data.id)
-                  }
-                />
-              </Card>
-            </div>
+            <MotionWrapper key={data.id}>
+              <div
+                ref={
+                  index === 0
+                    ? firstReviewRef
+                    : index === writableReviews.length - 1
+                      ? lastReviewRef
+                      : null
+                }
+              >
+                <Card data={data}>
+                  <Card.Chips />
+                  <Card.Info />
+                  <Card.Button
+                    handleButtonClick={() =>
+                      data.isCompleted && handleOpenModal(data.id)
+                    }
+                  />
+                </Card>
+              </div>
+            </MotionWrapper>
           ))
         ) : (
           <EmptyReviewPage />

From 3f86eb7387c62d5756b98797b04be8ec23d402b8 Mon Sep 17 00:00:00 2001
From: Homin <coc1381@naver.com>
Date: Wed, 16 Oct 2024 15:39:49 +0900
Subject: [PATCH 2/2] =?UTF-8?q?[KAN-128]=20style:=20/created,=20/review/wr?=
 =?UTF-8?q?itten=20=EC=97=90=20=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4?=
 =?UTF-8?q?=EC=85=98=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../created/_component/GatheringList.tsx      | 34 +++++++-------
 .../review/written/_component/ReviewsList.tsx | 44 ++++++++++---------
 2 files changed, 41 insertions(+), 37 deletions(-)

diff --git a/src/app/(main)/mypage/created/_component/GatheringList.tsx b/src/app/(main)/mypage/created/_component/GatheringList.tsx
index 7eb4ea23..e7236557 100644
--- a/src/app/(main)/mypage/created/_component/GatheringList.tsx
+++ b/src/app/(main)/mypage/created/_component/GatheringList.tsx
@@ -5,6 +5,7 @@ import Card from '@/app/components/Card/Card';
 import GradientOverlay from '@/app/components/GradientOverlay/GradientOverlay';
 import useScrollGradientEffect from '@/hooks/useScrollGradientEffect';
 import { GatheringType } from '@/types/data.type';
+import MotionWrapper from '@/app/components/MotionWrapper/MotionWrapper';
 
 interface GatheringListProps {
   dataList: GatheringType[];
@@ -35,22 +36,23 @@ const GatheringList = ({ dataList }: GatheringListProps) => {
       <GradientOverlay position='bottom' isVisible={bottomGradientVisible} />
 
       {updateDataList().map((data, index) => (
-        <div
-          key={data.id}
-          ref={
-            index === 0
-              ? firstGatheringRef
-              : index === updateDataList().length - 1
-                ? lastGatheringRef
-                : null
-          }
-        >
-          <Link href={`/gatherings/${data.id}`}>
-            <Card handleSaveDiscard={handleSaveDiscard} data={data}>
-              <Card.Info />
-            </Card>
-          </Link>
-        </div>
+        <MotionWrapper key={data.id}>
+          <div
+            ref={
+              index === 0
+                ? firstGatheringRef
+                : index === updateDataList().length - 1
+                  ? lastGatheringRef
+                  : null
+            }
+          >
+            <Link href={`/gatherings/${data.id}`}>
+              <Card handleSaveDiscard={handleSaveDiscard} data={data}>
+                <Card.Info />
+              </Card>
+            </Link>
+          </div>
+        </MotionWrapper>
       ))}
     </div>
   );
diff --git a/src/app/(main)/mypage/review/written/_component/ReviewsList.tsx b/src/app/(main)/mypage/review/written/_component/ReviewsList.tsx
index 2faaabf2..cd4f05c6 100644
--- a/src/app/(main)/mypage/review/written/_component/ReviewsList.tsx
+++ b/src/app/(main)/mypage/review/written/_component/ReviewsList.tsx
@@ -5,6 +5,7 @@ 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';
+import MotionWrapper from '@/app/components/MotionWrapper/MotionWrapper';
 
 const ReviewsList = ({ writtenReviews }: { writtenReviews: ReviewsType[] }) => {
   const {
@@ -20,27 +21,28 @@ const ReviewsList = ({ writtenReviews }: { writtenReviews: ReviewsType[] }) => {
       <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>
+        <MotionWrapper key={review.id}>
+          <div
+            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>
+        </MotionWrapper>
       ))}
     </div>
   );