[KAN-128] style: /created, /review/written 에 애니메이션 추가

INtiful · Oct 16, 2024 · 3f86eb7 · 3f86eb7
1 parent d0b0f24
commit 3f86eb7
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 37 deletions.
diff --git 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
@@ -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>
   );