✨ Feat: 나의 약속 로딩 스켈레톤 추가

Author: yulrang

src/app/(crew)/my-gathering/hosted/page.tsx

@@ -6,13 +6,14 @@ import { useGetHostedGatheringListQuery } from '@/src/_queries/my-gathering/host
 import { formatDateToRequest } from '@/src/utils/format-date';
 import GatheringListWithDate from '@/src/app/(crew)/my-gathering/_component/gathering-list-with-date';
 import PopOverCalendar from '@/src/components/common/input/pop-over-calendar';
+import MyGatheringSkeletonList from '@/src/components/common/skeleton/my-gathering-skeleton-list';
 import { GatheringCardProps } from '@/src/types/gathering-data';
 
 export default function MyGatheringHostedPage() {
   const [selectedDate, setSelectedDate] = useState(new Date());
   const [hostedGatheringList, setHostedGatheringList] = useState<GatheringCardProps[]>();
 
-  const { data, refetch } = useQuery(
+  const { data, isLoading, refetch } = useQuery(
     useGetHostedGatheringListQuery(formatDateToRequest(selectedDate)),
   );
 
@@ -29,6 +30,7 @@ export default function MyGatheringHostedPage() {
       <div className="py-4 md:py-6">
         <PopOverCalendar value={selectedDate} onChange={(d) => setSelectedDate(d)} />
       </div>
+      {isLoading && <MyGatheringSkeletonList num={6} />}
       {hostedGatheringList && <GatheringListWithDate gatheringList={hostedGatheringList} />}
     </div>
   );

src/app/(crew)/my-gathering/joined/page.tsx

@@ -6,13 +6,14 @@ import { useGetJoinedGatheringListQuery } from '@/src/_queries/my-gathering/join
 import { formatDateToRequest } from '@/src/utils/format-date';
 import GatheringListWithDate from '@/src/app/(crew)/my-gathering/_component/gathering-list-with-date';
 import PopOverCalendar from '@/src/components/common/input/pop-over-calendar';
+import MyGatheringSkeletonList from '@/src/components/common/skeleton/my-gathering-skeleton-list';
 import { GatheringCardProps } from '@/src/types/gathering-data';
 
 export default function MyGatheringJoinedPage() {
   const [selectedDate, setSelectedDate] = useState(new Date());
   const [joinedGatheringList, setJoinedGatheringList] = useState<GatheringCardProps[]>();
 
-  const { data, refetch } = useQuery(
+  const { data, isLoading, refetch } = useQuery(
     useGetJoinedGatheringListQuery(formatDateToRequest(selectedDate)),
   );
 
@@ -29,6 +30,7 @@ export default function MyGatheringJoinedPage() {
       <div className="py-4 md:py-6">
         <PopOverCalendar value={selectedDate} onChange={(d) => setSelectedDate(d)} />
       </div>
+      {isLoading && <MyGatheringSkeletonList num={6} />}
       {joinedGatheringList && <GatheringListWithDate gatheringList={joinedGatheringList} />}
     </div>
   );

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

@@ -0,0 +1,30 @@
+import { Skeleton } from '@mantine/core';
+import MyGatheringSkeleton from '../my-gathering-skeleton';
+
+interface MyGatheringSkeletonListProps {
+  num: number;
+}
+
+export default function MyGatheringSkeletonList({ num }: MyGatheringSkeletonListProps) {
+  return (
+    <div>
+      {[...Array(num)].map((_, index) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <div key={index} className="md:flex">
+          <div className="w-1/6">
+            <div className="flex flex-col gap-2">
+              <Skeleton className="h-4 w-36" />
+              <Skeleton className="h-4 w-20" />
+            </div>
+          </div>
+          <div className="relative -mb-3.5 w-0.5 bg-gray-200">
+            <div className="md:corner-dot" />
+          </div>
+          <div className="flex-1 pb-6 md:pl-8">
+            <MyGatheringSkeleton />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}