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)/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)/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/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/button/floating-btn.tsx

@@ -10,7 +10,7 @@ export default function FloatingButton({ onClick }: FloatingButtonProps) {
     <button
       type="button"
       onClick={onClick}
-      className="sm:h-18 sm:w-18 fixed bottom-16 right-24 flex h-24 w-24 flex-col items-center justify-center rounded-full bg-blue-500 shadow-sm transition-transform hover:scale-105 hover:bg-blue-400 hover:shadow-md active:scale-105 sm:bottom-10 sm:right-16 md:h-24 md:w-24"
+      className="sm:h-18 fixed bottom-16 right-24 flex h-24 w-24 flex-col items-center justify-center rounded-full bg-blue-500 shadow-sm transition-transform hover:scale-105 hover:bg-blue-400 hover:shadow-md active:scale-105 sm:bottom-10 sm:right-16 sm:w-18 md:h-24 md:w-24"
     >
       <Image src={Logo} alt="crew logo" width={70} height={32} className="mt-2" />
       <span className="typo-lg-bold text-white">참가</span>

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/skeleton/crew-skeleton-list/index.tsx

@@ -11,7 +11,7 @@ export default function CrewSkeletonList({ num, column }: CrewSkeletonListProps)
     <div className={`grid grid-cols-1 gap-x-4 gap-y-6 ${columnStyle}`} aria-label="콘텐츠 로딩 중">
       {[...Array(num)].map((_, index) => (
         // eslint-disable-next-line react/no-array-index-key
-        <CrewSkeleton key={index} />
+        <CrewSkeleton key={`CrewSkeleton-${index}`} />
       ))}
     </div>
   );

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

@@ -12,7 +12,7 @@ export default function GatheringSkeletonList({ num }: GatheringSkeletonListProp
     >
       {[...Array(num)].map((_, index) => (
         // eslint-disable-next-line react/no-array-index-key
-        <GatheringSkeleton key={index} />
+        <GatheringSkeleton key={`GatheringSkeleton-${index}`} />
       ))}
     </div>
   );

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

@@ -2,20 +2,17 @@ import { Skeleton } from '@mantine/core';
 
 export default function GatheringSkeleton() {
   return (
-    <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 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" />
+        <div className="mb-14 mt-4 flex items-end justify-between">
+          <Skeleton className="h-4 w-24" />
+          <Skeleton circle className="h-8 w-8" />
         </div>
+        <Skeleton className="absolute bottom-4 left-4 right-4 h-10 w-auto rounded-xl" />
       </div>
     </div>
   );

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

@@ -10,11 +10,11 @@ export default function MyGatheringSkeletonList({ num }: MyGatheringSkeletonList
     <div>
       {[...Array(num)].map((_, index) => (
         // eslint-disable-next-line react/no-array-index-key
-        <div key={index} className="md:flex">
+        <div key={`MyGatheringSkeleton-${index}`} className="py-4 md:flex md:py-0">
           <div className="w-1/6">
             <div className="flex flex-col gap-2">
-              <Skeleton className="h-4 w-36" />
-              <Skeleton className="h-4 w-20" />
+              <Skeleton className="hidden h-4 w-20 md:block" />
+              <Skeleton className="hidden h-4 w-10 md:block" />
             </div>
           </div>
           <div className="relative -mb-3.5 w-0.5 bg-gray-200">

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

@@ -2,15 +2,19 @@ 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" />
+    <div className="flex flex-col gap-4">
+      <Skeleton className="h-6 w-40" />
+      <div className="flex w-full flex-col md:flex-row">
+        <Skeleton className="h-40 w-full flex-shrink-0 flex-grow-0 rounded-t-lg md:h-44 md:w-1/3 md:rounded-l-lg md:rounded-r-none" />
+        <div className="relative flex w-full flex-col gap-2 p-4 md:gap-4">
+          <Skeleton className="h-4 w-48" />
+          <Skeleton className="h-6 w-32" />
           <Skeleton className="h-4 w-24" />
+          <div className="flex items-end justify-between">
+            <Skeleton className="h-4 w-24" />
+            <Skeleton className="h-10 w-40 rounded-xl md:w-1/2" />
+          </div>
         </div>
-        <Skeleton className="absolute bottom-0 h-4 w-24" />
       </div>
     </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={`ReviewableGatheringSkeleton-${index}`} />
+      ))}
+    </div>
+  );
+}

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

@@ -1,14 +1,14 @@
 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" />
+      <Skeleton className="relative h-28 w-28 flex-shrink-0 flex-grow-0 rounded-[12px] md:h-[166px] md:w-[294px]" />
       <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" />
+        <Skeleton className="absolute bottom-0 right-0 h-9 w-18 rounded-xl md:h-10 md:w-28" />
       </div>
     </div>
   );

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';
@@ -41,7 +40,7 @@ export default function LikedList() {
 
   if (isLoading)
     return (
-      <div className="mx-auto max-w-[1200px] px-4">
+      <div className="mx-auto max-w-[1200px]">
         <GatheringSkeletonList num={6} />
       </div>
     );

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 {

tailwind.config.ts

@@ -36,6 +36,7 @@ const config: Config = {
       width: {
         7.5: '30px',
         12.5: '50px',
+        18: '72px',
         27.5: '110px',
         29.5: '118px',
         30: '120px',