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

src/_apis/crew/crew.ts

@@ -3,7 +3,6 @@ import {
   CreateCrewRequestTypes,
   CreateCrewResponseTypes,
   EditCrewRequestTypes,
-  EditCrewResponseTypes,
 } from '@/src/types/create-crew';
 
 export async function createCrew(data: CreateCrewRequestTypes) {

src/app/(crew)/crew/create/_components/create-crew-form/index.tsx

@@ -3,7 +3,6 @@
 import { FormEvent, useEffect, useState } from 'react';
 import { Controller, useForm, useWatch } from 'react-hook-form';
 import useFormPersist from 'react-hook-form-persist';
-import { toast } from 'react-toastify';
 import { useRouter } from 'next/navigation';
 import { NumberInput } from '@mantine/core';
 import { getImageUrl } from '@/src/_apis/image/get-image-url';

src/app/(crew)/crew/detail/[id]/_components/create-gathering/create-gathering-form/index.tsx

@@ -1,8 +1,7 @@
 'use client';
 
-import { FormEvent, useEffect } from 'react';
+import { FormEvent } from 'react';
 import { Controller, useForm, useWatch } from 'react-hook-form';
-import { toast } from 'react-toastify';
 import { NumberInput } from '@mantine/core';
 import { getImageUrl } from '@/src/_apis/image/get-image-url';
 import Button from '@/src/components/common/input/button';

src/app/(crew)/crew/detail/[id]/_components/create-gathering/index.tsx

@@ -2,20 +2,18 @@
 
 import { useRouter } from 'next/navigation';
 import { useDisclosure } from '@mantine/hooks';
-import { useGetCrewDetailQuery } from '@/src/_queries/crew/crew-detail-queries';
 import { useGetGatheringListQuery } from '@/src/_queries/crew/gathering-list-queries';
 import { useAuth } from '@/src/hooks/use-auth';
 import CreateGatheringModalContainer from '@/src/app/(crew)/crew/detail/[id]/_components/create-gathering/create-gathering-modal/container';
 import Button from '@/src/components/common/input/button';
-import { CrewDetail } from '@/src/types/crew-card';
 import { CreateGatheringFormTypes } from '@/src/types/gathering-data';
 
 export default function CreateGathering({ crewId }: { crewId: number }) {
   const { isAuth } = useAuth();
   const router = useRouter();
   const [opened, { open, close }] = useDisclosure(false);
 
-  const { data: gatheringList, isLoading, error, refetch } = useGetGatheringListQuery(crewId);
+  const { data: gatheringList } = useGetGatheringListQuery(crewId);
 
   // totalGatheringCount 추출
   const totalGatheringCount = gatheringList?.length ?? 0;

src/app/(crew)/crew/detail/[id]/edit/page.tsx

@@ -10,7 +10,7 @@ import IcoCreateCrew from '@/public/assets/icons/ic-create-crew.svg';
 
 export default function EditCrewPage() {
   const { id } = useParams();
-  const { data, isLoading, error } = useGetCrewDetailQuery(Number(id));
+  const { data, isLoading } = useGetCrewDetailQuery(Number(id));
   const { isPending, mutate } = useEditCrewQuery(Number(id));
   if (data === undefined) return null;
 

src/app/(crew)/crew/detail/[id]/page.tsx

@@ -1,8 +1,6 @@
-import { getGatheringList } from '@/src/_apis/crew/crew-gathering-list-apis';
 import CreateGathering from './_components/create-gathering';
 import DetailCrew from './_components/detail-crew-container';
 import GatheringListSection from './_components/gathering-list-section';
-import CrewReviewSection from './_components/review-section';
 
 interface CrewDetailPageProps {
   params: { id: string };

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

@@ -1,6 +1,5 @@
 'use client';
 
-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';

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

@@ -1,6 +1,5 @@
 'use client';
 
-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';

src/app/(crew)/my-page/_components/profile-card/container.tsx

@@ -3,11 +3,7 @@
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { useRouter } from 'next/navigation';
-import {
-  fetchUpdatedUser,
-  resetUserProfileImage,
-  updateUserProfile,
-} from '@/src/_apis/auth/user-apis';
+import { resetUserProfileImage, updateUserProfile } 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';

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/app/(crew)/page.tsx

@@ -2,7 +2,7 @@
 
 import { useRef, useState } from 'react';
 import Image from 'next/image';
-import { Divider, Loader, Skeleton, TextInput } from '@mantine/core';
+import { Divider, 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';

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

@@ -1,6 +1,5 @@
 'use client';
 
-import { useState } from 'react';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import ProgressBar from '@/src/components/common/progress-bar/index';
@@ -26,21 +25,9 @@ export default function CrewCard({
   crewMembers,
   inWhere,
 }: CrewCardProps) {
-  const [prefetched, setPrefetched] = useState(new Set());
   const CREWPAGE = `/crew/detail/${id}`;
   const router = useRouter();
 
-  const handleCardClick = () => {
-    router.push(CREWPAGE);
-  };
-
-  const handleCardMouseUp = () => {
-    if (!prefetched.has(CREWPAGE)) {
-      router.prefetch(CREWPAGE);
-      setPrefetched(new Set(prefetched).add(CREWPAGE));
-    }
-  };
-
   return (
     <div
       role="presentation"

src/components/common/gathering-card/container.tsx

@@ -4,9 +4,8 @@ import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { useDisclosure } from '@mantine/hooks';
 import { useGetGatheringDetailQuery } from '@/src/_queries/gathering/gathering-detail-queries';
-import { ApiError } from '@/src/utils/api';
 import GatheringDetailModalContainer from '@/src/app/(crew)/crew/detail/[id]/_components/gathering-detail-modal/container';
-import { GatheringData, GatheringDetailType, GatheringType } from '@/src/types/gathering-data';
+import { GatheringType } from '@/src/types/gathering-data';
 import GatheringCardPresenter from './presenter';
 
 interface GatheringCardContainerProps extends GatheringType {

src/components/common/gathering-card/presenter.tsx

@@ -1,6 +1,5 @@
 import { MouseEvent } from 'react';
 import Image from 'next/image';
-import { Badge } from '@mantine/core';
 import { cn } from '@/src/utils/cn';
 import { formatDate } from '@/src/utils/format-date';
 import Button from '@/src/components/common/input/button';

src/components/common/gathering-card/scheduled-gathering-card/presenter.tsx

@@ -1,5 +1,4 @@
 import Image from 'next/image';
-import { Badge } from '@mantine/core';
 import { formatDate } from '@/src/utils/format-date';
 import { GatheringCardProps } from '@/src/types/gathering-data';
 import IcoPerson from '@/public/assets/icons/ic-gathering-person.svg';

src/components/common/header/header.stories.tsx

@@ -1,7 +1,5 @@
-import { useState } from 'react';
 import type { Meta, StoryFn } from '@storybook/react';
-import { QueryClient, QueryClientProvider, useQueryClient } from '@tanstack/react-query';
-import { useAuth } from '@/src/hooks/use-auth';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import Header from '@/src/components/common/header/container';
 
 const meta: Meta = {

src/components/common/input/file-input-wrap/file-sample/index.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react';
-import Image, { StaticImageData } from 'next/image';
+import Image from 'next/image';
 
 export interface FileSampleProps {
   isEdit?: boolean;

src/components/common/input/pop-over-calendar/index.tsx

@@ -12,10 +12,10 @@ export interface PopOverProps {
 
 export default function PopOverCalendar({ value, onChange }: PopOverProps) {
   const [opened, { open, close }] = useDisclosure();
-  const [inputTheme, setInputTheme] = useState(opened ? 'dark' : 'light');
   const [date, setDate] = useState<Date>(value);
   const isMobile = useMediaQuery(`(max-width: ${theme.breakpoints.md})`);
   const popOver = useRef<HTMLDivElement>(null);
+  const inputTheme = opened ? 'dark' : 'light';
 
   const handleClear = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();

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

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState } from 'react';
+import React from 'react';
 import { toast } from 'react-toastify';
 import { useRouter } from 'next/navigation';
 import { useDisclosure } from '@mantine/hooks';

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/gathering-list/liked-list-container.tsx

@@ -2,7 +2,6 @@
 
 import { useState } from 'react';
 import { toast } from 'react-toastify';
-import { Loader } from '@mantine/core';
 import { addLike, removeLike } from '@/src/_apis/liked/liked-apis';
 import { useGetLikedListQuery } from '@/src/_queries/liked/liked-queries';
 import { ApiError } from '@/src/utils/api';

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

@@ -18,7 +18,7 @@ export default function LikedListPresenter({
   onUnlike,
   page,
 }: LikedListPresenterProps) {
-  const { content, pageSize, totalPages } = gatheringData;
+  const { content, totalPages } = gatheringData;
 
   return (
     <div className="mx-auto max-w-[1200px]">

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

@@ -2,11 +2,11 @@
 
 import { useGetReviewableQuery } from '@/src/_queries/my-gathering/reviewable-gathering-list';
 import { useInfiniteScroll } from '@/src/hooks/use-infinite-scroll';
-import { ReviewableGatheringCardInformResponse } from '@/src/types/reviewable-gathering-card';
+import ReviewableGatheringSkeletonList from '@/src/components/common/skeleton/reviewable-gathering-skeleton-list';
 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 +17,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">
       {/* 데이터가 비었을 때 메시지 */}

src/mock/review-data.ts

@@ -1,6 +1,6 @@
 // image: 'https://i.pinimg.com/736x/5d/83/ce/5d83cec545201e5ca8f2477070e2eac9.jpg',
 // image: 'https://i.pinimg.com/564x/1c/3e/ff/1c3eff0cf58c3f87bc3310ff1528da20.jpg',
-import { CrewReview, MyReview } from '../types/review';
+import { CrewReview } from '../types/review';
 
 // NOTE: 크루 리뷰
 export const CrewReviewData: { data: CrewReview[] } = {

src/types/create-crew.d.ts

@@ -1,6 +1,3 @@
-import { StaticImageData } from 'next/image';
-import { interpolate } from 'framer-motion';
-
 // NOTE : imageURL 임시로 File로 지정
 export interface CreateCrewFormTypes {
   title: string;

src/types/gathering-data.d.ts

@@ -1,4 +1,3 @@
-import { StaticImageData } from 'next/image';
 import { UserType } from './user';
 
 export interface GatheringType {