Feat: 스켈레톤 컴포넌트 추가

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

@@ -4,6 +4,7 @@ import { Loader } from '@mantine/core';
 import { useGetMyCrewHostedQuery } from '@/src/_queries/crew/my-crew-hosted-list-query';
 import { useInfiniteScroll } from '@/src/hooks/use-infinite-scroll';
 import CrewCardList from '@/src/components/common/crew-list/crew-card-list';
+import CrewSkeletonList from '@/src/components/common/skeleton/crew-skeleton-list';
 
 export default function MyCrewHostedPage() {
   const { data, isLoading, error, ref, isFetchingNextPage } = useInfiniteScroll(
@@ -15,9 +16,7 @@ export default function MyCrewHostedPage() {
     <div>
       <CrewCardList inWhere="my-crew" data={data ?? { pages: [], pageParams: [] }} />
       {isLoading || isFetchingNextPage ? (
-        <div className="flex justify-center py-10">
-          <Loader size="sm" />
-        </div>
+        <CrewSkeletonList num={6} column={1} />
       ) : (
         <div ref={ref} className="h-[1px]" />
       )}

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

@@ -4,6 +4,7 @@ import { Loader } from '@mantine/core';
 import { useGetMyCrewJoinedQuery } from '@/src/_queries/crew/my-crew-joined-list-query';
 import { useInfiniteScroll } from '@/src/hooks/use-infinite-scroll';
 import CrewCardList from '@/src/components/common/crew-list/crew-card-list';
+import CrewSkeletonList from '@/src/components/common/skeleton/crew-skeleton-list';
 
 export default function MyCrewJoinedPage() {
   const { data, isLoading, error, ref, isFetchingNextPage } = useInfiniteScroll(
@@ -15,9 +16,7 @@ export default function MyCrewJoinedPage() {
     <div>
       <CrewCardList inWhere="my-crew" data={data ?? { pages: [], pageParams: [] }} />
       {isLoading || isFetchingNextPage ? (
-        <div className="flex justify-center py-10">
-          <Loader size="sm" />
-        </div>
+        <CrewSkeletonList num={6} column={1} />
       ) : (
         <div ref={ref} className="h-[1px]" />
       )}

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/app/(crew)/my-page/_components/profile-card/container.tsx

@@ -10,6 +10,7 @@ import {
 } from '@/src/_apis/auth/user-apis';
 import { useUser } from '@/src/_queries/auth/user-queries';
 import { useAuth } from '@/src/hooks/use-auth';
+import ProfileSkeleton from '@/src/components/common/skeleton/profile-skeleton';
 import ProfileCardPresenter from './presenter';
 
 export default function ProfileCard() {
@@ -38,7 +39,7 @@ export default function ProfileCard() {
     }
   }, [user]);
 
-  if (userLoading || !isAuthChecked) return <div>로딩 중...</div>;
+  if (userLoading || !isAuthChecked) return <ProfileSkeleton />;
   if (!user) return null;
 
   const handleEdit = () => {

src/app/(crew)/page.tsx

@@ -2,7 +2,7 @@
 
 import { useRef, useState } from 'react';
 import Image from 'next/image';
-import { Divider, Loader, TextInput } from '@mantine/core';
+import { Divider, Loader, Skeleton, TextInput } from '@mantine/core';
 import { useGetCrewListQuery } from '@/src/_queries/crew/crew-list-queries';
 import regionData from '@/src/data/region.json';
 import { useInfiniteScroll } from '@/src/hooks/use-infinite-scroll';
@@ -11,6 +11,7 @@ import HeroCrew from '@/src/app/(crew)/_components/hero/hero-crew';
 import CrewCardList from '@/src/components/common/crew-list/crew-card-list';
 import Button from '@/src/components/common/input/button';
 import DropDown from '@/src/components/common/input/drop-down';
+import CrewSkeletonList from '@/src/components/common/skeleton/crew-skeleton-list';
 import IcoSearch from '@/public/assets/icons/ic-search.svg';
 
 export default function HomePage() {
@@ -133,9 +134,7 @@ export default function HomePage() {
       <div className="mt-8 px-3 md:px-8 lg:px-11.5">
         {data && <CrewCardList data={data} />}
         {isLoading || isFetchingNextPage ? (
-          <div className="flex justify-center py-10">
-            <Loader size="sm" />
-          </div>
+          <CrewSkeletonList num={6} column={2} />
         ) : (
           <div ref={ref} className="h-[1px]" />
         )}

src/components/common/crew-list/crew-card.tsx

@@ -45,7 +45,7 @@ export default function CrewCard({
     <div
       role="presentation"
       onClick={() => router.push(CREWPAGE)}
-      className="relative mx-auto flex h-[430px] w-full animate-fade cursor-pointer flex-col overflow-hidden rounded-[14px] bg-white shadow-bg md:h-[203px] md:flex-row"
+      className="hover:shadow-card relative mx-auto flex h-[430px] w-full animate-fade cursor-pointer flex-col overflow-hidden rounded-[14px] bg-white transition-shadow md:h-[203px] md:flex-row"
     >
       {/* 썸네일 */}
       <div className="relative h-[203px] w-full flex-shrink-0 md:w-[230px]">

src/components/common/skeleton/crew-skeleton-list/index.tsx

@@ -0,0 +1,18 @@
+import CrewSkeleton from '../crew-skeleton';
+
+interface CrewSkeletonListProps {
+  num: number;
+  column?: number;
+}
+
+export default function CrewSkeletonList({ num, column }: CrewSkeletonListProps) {
+  const columnStyle = column === 2 ? 'lg:grid-cols-2' : 'lg:grid-cols-1';
+  return (
+    <div className={`grid grid-cols-1 gap-2 ${columnStyle}`} aria-label="콘텐츠 로딩 중">
+      {[...Array(num)].map((_, index) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <CrewSkeleton key={index} />
+      ))}
+    </div>
+  );
+}

src/components/common/skeleton/crew-skeleton/index.tsx

@@ -0,0 +1,15 @@
+import { Skeleton } from '@mantine/core';
+
+export default function CrewSkeleton() {
+  return (
+    <div className="flex overflow-hidden rounded-xl">
+      <Skeleton className="h-[203px] w-[230px]" />
+      <div className="relative flex flex-1 flex-col gap-2 p-6">
+        <Skeleton className="h-4 w-20" />
+        <Skeleton className="h-4 w-32" />
+        <Skeleton className="h-4 w-40" />
+        <Skeleton className="absolute bottom-6 left-6 right-6 h-2 w-auto" />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,19 @@
+import GatheringSkeleton from '../gathering-skeleton';
+
+interface GatheringSkeletonListProps {
+  num: number;
+}
+
+export default function GatheringSkeletonList({ num }: GatheringSkeletonListProps) {
+  return (
+    <div
+      className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"
+      aria-label="콘텐츠 로딩 중"
+    >
+      {[...Array(num)].map((_, index) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <GatheringSkeleton key={index} />
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,16 @@
+import { Skeleton } from '@mantine/core';
+
+export default function GatheringSkeleton() {
+  return (
+    <div className="flex flex-col overflow-hidden rounded-xl">
+      <Skeleton className="h-[160px] w-full" />
+      <div className="relative flex min-h-[184px] flex-col gap-2 p-4">
+        <Skeleton className="h-4 w-40" />
+        <Skeleton className="h-4 w-32" />
+        <Skeleton className="h-4 w-24" />
+        <Skeleton circle className="absolute right-4 top-4 h-8 w-8" />
+        <Skeleton className="absolute bottom-4 left-4 right-4 h-10 w-auto" />
+      </div>
+    </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>
+  );
+}

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

@@ -0,0 +1,17 @@
+import { Skeleton } from '@mantine/core';
+
+export default function MyGatheringSkeleton() {
+  return (
+    <div className="flex gap-6 p-6">
+      <Skeleton className="h-28 w-28 rounded-xl md:h-32 md:w-32" />
+      <div className="relative flex flex-col gap-3">
+        <Skeleton className="h-4 w-40" />
+        <div className="flex gap-2">
+          <Skeleton className="h-4 w-32" />
+          <Skeleton className="h-4 w-24" />
+        </div>
+        <Skeleton className="absolute bottom-0 h-4 w-24" />
+      </div>
+    </div>
+  );
+}

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

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

src/components/common/skeleton/my-review-skeleton/index.tsx

@@ -0,0 +1,16 @@
+import { Skeleton } from '@mantine/core';
+
+export default function MyReviewSkeleton() {
+  return (
+    <div className="flex flex-col">
+      <Skeleton className="h-6 w-32" />
+      <div className="relative flex flex-col gap-2 p-6">
+        <Skeleton className="mb-4 h-4 w-40" />
+        <Skeleton className="h-6 w-32" />
+        <Skeleton className="h-4 w-60" />
+        <Skeleton className="absolute bottom-6 h-4 w-20" />
+        <Skeleton className="absolute bottom-6 right-6 h-9 w-30" />
+      </div>
+    </div>
+  );
+}

src/components/common/skeleton/profile-skeleton/index.tsx

@@ -0,0 +1,13 @@
+import { Skeleton } from '@mantine/core';
+
+export default function ProfileSkeleton() {
+  return (
+    <div className="flex items-center gap-6.5" aria-label="콘텐츠 로딩 중">
+      <Skeleton circle className="h-28 w-28" />
+      <div className="flex flex-col gap-3">
+        <Skeleton className="h-6 w-40" />
+        <Skeleton className="h-4 w-36" />
+      </div>
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,15 @@
+import { Skeleton } from '@mantine/core';
+
+export default function ReviewableReviewSkeleton() {
+  return (
+    <div className="flex gap-5">
+      <Skeleton className="h-[166px] w-[230px] rounded-xl" />
+      <div className="relative flex flex-1 flex-col gap-4">
+        <Skeleton className="h-4 w-40" />
+        <Skeleton className="h-4 w-20" />
+        <Skeleton className="absolute bottom-0 h-4 w-28" />
+        <Skeleton className="absolute bottom-0 right-0 h-10 w-28 rounded-xl" />
+      </div>
+    </div>
+  );
+}

src/components/gathering-list/liked-list-container.tsx

@@ -5,6 +5,7 @@ import { toast } from 'react-toastify';
 import { addLike, removeLike } from '@/src/_apis/liked/liked-apis';
 import { useGetLikedListQuery } from '@/src/_queries/liked/liked-queries';
 import { ApiError } from '@/src/utils/api';
+import GatheringSkeletonList from '../common/skeleton/gathering-skeleton-list';
 import LikedListPresenter from './liked-list-presenter';
 
 export default function LikedList() {
@@ -37,7 +38,12 @@ export default function LikedList() {
     setPage(newPage);
   };
 
-  if (isLoading) return <div>로딩중...</div>;
+  if (isLoading)
+    return (
+      <div className="mx-auto max-w-[1200px] px-4">
+        <GatheringSkeletonList num={6} />
+      </div>
+    );
 
   // 에러 처리: error 또는 gatheringData가 undefined일 경우
   if (error || gatheringData === undefined) {

tailwind.config.ts

@@ -121,6 +121,7 @@ const config: Config = {
       boxShadow: {
         xl: '0 4px 4px 0 rgba(0,0,0,0.25)',
         bg: '0 4px 30px 1px rgba(0,122,255,0.04)',
+        card: '0 4px 15px 1px rgba(0,122,255,0.1)',
         xs: '0px 2px 4px 0px rgba(0, 0, 0, 0.02)',
       },
       keyframes: {