Merge pull request #200 from INtiful/style/homin/KAN-128-mypage-anima…

…tion style: /mypage 에 motion animation 추가
INtiful · Oct 17, 2024 · bd5d698 · bd5d698
2 parents 602b397 + 3f86eb7
commit bd5d698
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 59 deletions.
diff --git 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/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/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 />

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>
   );