Feat/153/detail page loading

src/app/(crew)/crew/detail/[id]/_components/detail-crew-container.tsx

@@ -3,13 +3,14 @@
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { useRouter } from 'next/navigation';
-import { Loader } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { cancelCrew, joinCrew, leaveCrew } from '@/src/_apis/crew/crew-detail-apis';
 import { useUser } from '@/src/_queries/auth/user-queries';
 import { useGetCrewDetailQuery } from '@/src/_queries/crew/crew-detail-queries';
 import { ApiError } from '@/src/utils/api';
+import Button from '@/src/components/common/input/button';
 import ConfirmCancelModal from '@/src/components/common/modal/confirm-cancel-modal';
+import CrewDetailSkeleton from '@/src/components/common/skeleton/crew-detail-skeleton';
 import { User } from '@/src/types/auth';
 import DetailCrewPresenter from './detail-crew-presenter';
 
@@ -38,12 +39,8 @@ export default function DetailCrew({ id }: DetailCrewContainerProps) {
 
   useEffect(() => {
     if (data) {
-      // confirmed 상태 계산
-      if (data.participantCount !== undefined && data.totalCount !== undefined) {
-        setIsConfirmed(data.participantCount === data.totalCount);
-      }
+      setIsConfirmed(data.participantCount === data.totalCount);
 
-      // Captain 및 멤버 여부 확인 (currentUserId 필요)
       if (currentUserId) {
         const captain = data.crewMembers.find((member) => member.captain);
         const memberExists = data.crewMembers.some((member) => member.id === currentUserId);
@@ -114,29 +111,35 @@ export default function DetailCrew({ id }: DetailCrewContainerProps) {
       });
   };
 
-  // TODO: 로딩, 에러처리 추후 개선
   if (isLoading) {
-    return <Loader />;
+    return <CrewDetailSkeleton />;
   }
 
-  // TODO: 추후 404페이지로 이동시키기
-  if (fetchError) {
+  const renderErrorState = (message: string, actionLabel: string, action: () => void) => (
+    <div className="flex h-screen flex-col items-center justify-center">
+      <p className="mb-4 text-gray-500">{message} 😞</p>
+      <Button className="btn-filled" onClick={action}>
+        {actionLabel}
+      </Button>
+    </div>
+  );
+
+  if (fetchError || !data) {
     if (fetchError instanceof ApiError) {
-      try {
-        const errorData = JSON.parse(fetchError.message);
-
-        if (errorData.status === 'NOT_FOUND') {
-          return <p>크루 정보를 찾을 수 없습니다</p>;
-        }
-      } catch (parseError) {
-        return <p>{`Error ${fetchError.message}`}</p>;
+      if (fetchError.status === 404) {
+        router.push('/404');
+        return null;
       }
+      toast.error(fetchError.message || '🚫 에러가 발생했습니다.');
+    } else if (fetchError) {
+      toast.error('🚫 데이터 통신에 실패했습니다.');
     }
-    return <p>데이터 통신에 실패했습니다.</p>;
-  }
 
-  if (!data) {
-    return <p>데이터를 불러올 수 없습니다.</p>;
+    const errorMessage = fetchError
+      ? '데이터를 불러오는 데 실패했습니다.'
+      : '데이터를 불러올 수 없습니다.';
+
+    return renderErrorState(errorMessage, '다시 시도', refetch);
   }
 
   return (

src/app/(crew)/crew/detail/[id]/_components/gathering-list-section.tsx

@@ -3,11 +3,11 @@
 import { useState } from 'react';
 import { toast } from 'react-toastify';
 import { useRouter } from 'next/navigation';
-import { Loader } from '@mantine/core';
 import { addLike, removeLike } from '@/src/_apis/liked/liked-apis';
 import { useGetGatheringListQuery } from '@/src/_queries/crew/gathering-list-queries';
 import { ApiError } from '@/src/utils/api';
 import ConfirmModal from '@/src/components/common/modal/confirm-modal';
+import GatheringSkeletonList from '@/src/components/common/skeleton/gathering-skeleton-list';
 import CrewGatheringList from '@/src/components/gathering-list/crew-gathering-list';
 
 interface GatheringListSectionProps {
@@ -24,7 +24,7 @@ export default function GatheringListSection({ id }: GatheringListSectionProps)
       await addLike(gatheringId);
     } catch (apiError) {
       if (apiError instanceof ApiError) {
-        toast.error(`찜하기에 실패했습니다: ${apiError.message}`);
+        toast.error(`찜하기에 실패했습니다`);
       }
     }
   };
@@ -34,7 +34,7 @@ export default function GatheringListSection({ id }: GatheringListSectionProps)
       await removeLike(gatheringId);
     } catch (apiError) {
       if (apiError instanceof ApiError) {
-        toast.error(`찜하기 해제에 실패했습니다: ${apiError.message}`);
+        toast.error(`찜하기 해제에 실패했습니다`);
       }
     }
   };
@@ -48,11 +48,10 @@ export default function GatheringListSection({ id }: GatheringListSectionProps)
     refetch();
   };
 
-  // TODO: 추후 에러, 로딩 수정
   if (isLoading)
     return (
       <div className="flex items-center justify-center">
-        <Loader />
+        <GatheringSkeletonList num={3} />
       </div>
     );
 
@@ -66,7 +65,10 @@ export default function GatheringListSection({ id }: GatheringListSectionProps)
   if (!gatheringList || gatheringList.length === 0)
     return (
       <div className="flex items-center justify-center">
-        <p>데이터가 없습니다.</p>
+        <div className="flex h-[380px] flex-col items-center justify-center">
+          <p className="text-xl font-semibold">아직 등록된 약속이 없습니다!</p>
+          <p className="mt-2 text-base font-medium text-blue-400">새로운 약속을 만들어보세요! 🙌</p>
+        </div>
       </div>
     );
 

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

@@ -0,0 +1,65 @@
+import { Skeleton } from '@mantine/core';
+
+export default function CrewDetailSkeleton() {
+  return (
+    <div className="mx-auto flex max-w-[1200px] flex-col gap-6">
+      {/* 상단 이미지와 정보 영역 */}
+      <div className="relative h-96 w-full overflow-hidden rounded-lg p-6 shadow-sm">
+        <Skeleton className="absolute inset-0 h-full w-full" />
+        <div className="absolute bottom-6 left-6 space-y-4">
+          <Skeleton className="h-8 w-48" />
+          <Skeleton className="h-6 w-64" />
+          <Skeleton className="h-10 w-32" />
+        </div>
+        <div className="absolute bottom-6 right-6 flex items-center space-x-2">
+          <Skeleton className="h-6 w-6 rounded-full" />
+          <Skeleton className="h-6 w-6 rounded-full" />
+        </div>
+      </div>
+
+      {/* 소개 및 참여 인원 영역 */}
+      <div className="flex flex-col gap-4 md:flex-row lg:flex-1">
+        {/* 크루장, 소개 영역 */}
+        <div className="md:basis-4/7 flex h-64 w-full flex-col space-y-4 rounded-lg p-4 shadow-sm">
+          <div className="flex items-center space-x-3">
+            <Skeleton className="h-14 w-14 rounded-full" />
+            <div className="flex flex-col space-y-1">
+              <Skeleton className="h-6 w-32" />
+              <Skeleton className="h-4 w-40" />
+            </div>
+          </div>
+          <div className="w-full border-t border-gray-200 pt-4">
+            <Skeleton className="mb-2 h-5 w-24" />
+            <Skeleton className="h-4 w-full" />
+            <Skeleton className="h-4 w-full" />
+          </div>
+        </div>
+
+        {/* 참여 인원 영역 */}
+        <div className="md:basis-3/7 flex h-64 w-full flex-col rounded-lg p-4 shadow-sm">
+          <div className="mb-2 flex items-center justify-between">
+            <div className="flex items-center">
+              <Skeleton className="h-6 w-6 rounded-full" />
+              <Skeleton className="mx-2 h-4 w-12" />
+              <Skeleton className="h-4 w-12" />
+            </div>
+            <Skeleton className="h-6 w-24" />
+          </div>
+          <Skeleton className="h-4 w-full" />
+          <div className="mt-4 h-40 space-y-4 overflow-y-auto">
+            <div className="grid grid-cols-2 gap-4">
+              <div className="flex items-center space-x-2">
+                <Skeleton className="h-10 w-10 rounded-full" />
+                <Skeleton className="h-4 w-20" />
+              </div>
+              <div className="flex items-center space-x-2">
+                <Skeleton className="h-10 w-10 rounded-full" />
+                <Skeleton className="h-4 w-20" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -7,7 +7,7 @@ interface GatheringSkeletonListProps {
 export default function GatheringSkeletonList({ num }: GatheringSkeletonListProps) {
   return (
     <div
-      className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"
+      className="grid w-full gap-4 md:grid-cols-2 lg:max-w-[1200px] lg:grid-cols-3"
       aria-label="콘텐츠 로딩 중"
     >
       {[...Array(num)].map((_, index) => (

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

@@ -2,14 +2,20 @@ 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 className="relative h-[380px] w-full overflow-hidden rounded-lg bg-white shadow-sm">
+      <div className="relative h-40 w-full">
+        <Skeleton className="h-full w-full rounded-t-lg" />
+      </div>
+      <div className="flex min-h-[220px] flex-col justify-between p-4">
+        <div>
+          <Skeleton className="mb-2 h-6 w-1/3" />
+          <Skeleton className="mb-4 h-6 w-2/3" />
+          <Skeleton className="h-4 w-1/2" />
+        </div>
+        <div className="mt-6">
+          <Skeleton className="h-4 w-1/3" />
+          <div className="mt-4 h-10" />
+        </div>
       </div>
     </div>
   );