Feat/147/skeleton : 마이페이지 스켈레톤 추가

src/app/(crew)/my-page/my-review/page.tsx

@@ -5,6 +5,7 @@ import { Loader } from '@mantine/core';
 import { useGetMyReviewsQuery } from '@/src/_queries/review/my-review-queries';
 import { useInfiniteScroll } from '@/src/hooks/use-infinite-scroll';
 import ReviewCardList from '@/src/components/common/review-list/review-card-list';
+import MyReviewSkeletonList from '@/src/components/common/skeleton/my-review-skeleton-list';
 
 export default function MyReviewPage() {
   const size = 6;
@@ -15,8 +16,8 @@ export default function MyReviewPage() {
 
   if (isLoading) {
     return (
-      <div className="flex h-full items-center justify-center">
-        <Loader />
+      <div className="mt-8">
+        <MyReviewSkeletonList num={size} />
       </div>
     );
   }

src/components/common/skeleton/reviewable-gathering-skeleton-list/index.tsx

@@ -0,0 +1,18 @@
+import ReviewableGatheringSkeleton from '../reviewable-gathering-skeleton';
+
+interface ReviewableGatheringSkeletonListProps {
+  num: number;
+}
+
+export default function ReviewableGatheringSkeletonList({
+  num,
+}: ReviewableGatheringSkeletonListProps) {
+  return (
+    <div className="grid grid-cols-1 gap-12" aria-label="콘텐츠 로딩 중">
+      {[...Array(num)].map((_, index) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <ReviewableGatheringSkeleton key={index} />
+      ))}
+    </div>
+  );
+}

src/components/common/skeleton/reviewable-review-skeleton/index.tsx → src/components/common/skeleton/reviewable-gathering-skeleton/index.tsx

@@ -1,6 +1,6 @@
 import { Skeleton } from '@mantine/core';
 
-export default function ReviewableReviewSkeleton() {
+export default function ReviewableGatheringSkeleton() {
   return (
     <div className="flex gap-5">
       <Skeleton className="h-[166px] w-[230px] rounded-xl" />

src/components/my-page/reviewable-gatherings/reviewable-gathering-card-list.tsx

@@ -2,11 +2,12 @@
 
 import { useGetReviewableQuery } from '@/src/_queries/my-gathering/reviewable-gathering-list';
 import { useInfiniteScroll } from '@/src/hooks/use-infinite-scroll';
+import ReviewableGatheringSkeletonList from '@/src/components/common/skeleton/reviewable-gathering-skeleton-list';
 import { ReviewableGatheringCardInformResponse } from '@/src/types/reviewable-gathering-card';
 import ReviewableGatheringCard from './reviewable-gathering-card';
 
 export default function ReviewableGatheringCardList() {
-  const { data, ref, isFetchingNextPage } = useInfiniteScroll(
+  const { data, ref, isLoading, isFetchingNextPage } = useInfiniteScroll(
     useGetReviewableQuery({
       pageable: { page: 0, size: 6, sort: ['dateTime,desc'] },
     }),
@@ -17,6 +18,12 @@ export default function ReviewableGatheringCardList() {
     data.pages.length === 0 ||
     data.pages.every((page) => Array.isArray(page.content) && page.content.length === 0);
 
+  if (isLoading)
+    return (
+      <div className="py-6">
+        <ReviewableGatheringSkeletonList num={6} />
+      </div>
+    );
   return (
     <ul className="flex flex-col items-center gap-4">
       {/* 데이터가 비었을 때 메시지 */}