체험관리, 예약현황 페이지 스켈레톤 UI 구현

apps/what-today/src/components/reservations-status/ReservationCalendar.tsx

@@ -81,7 +81,7 @@ export default function ReservationCalendar({
   return (
     <div ref={calendarRef}>
       <Calendar.Root
-        className='gap-8 rounded-2xl border border-gray-50 pt-20 pb-10 md:gap-30'
+        className='gap-8 rounded-2xl pt-20 pb-10 md:gap-30 md:border md:border-gray-50'
         initialDate={currentMonth}
         onDateChange={(date) => {
           handleDateSelect(date);

apps/what-today/src/components/reservations-status/ReservationCalendarSkeleton.tsx

@@ -0,0 +1,29 @@
+export default function ReservationCalendarSkeleton() {
+  return (
+    <div className='flex h-906 animate-pulse flex-col gap-8 rounded-2xl pt-20 pb-10 md:gap-30 md:border md:border-gray-50'>
+      <div className='flex justify-center'>
+        <div className='my-6 flex h-32 w-200 gap-30'>
+          <div className='h-full w-12 rounded-xl bg-gray-100' />
+          <div className='h-full w-116 rounded-xl bg-gray-100' />
+          <div className='h-full w-12 rounded-xl bg-gray-100' />
+        </div>
+      </div>
+      <div className='w-full'>
+        <div className='grid grid-cols-7 justify-items-center border-b border-gray-100'>
+          {Array.from({ length: 7 }).map((_, i) => (
+            <div key={i} className='m-12 h-26 w-40 rounded-xl bg-gray-100' />
+          ))}
+        </div>
+        <div className='divide-y divide-solid divide-gray-50'>
+          {Array.from({ length: 6 }).map((_, i) => (
+            <div key={i} className='align-center grid h-104 grid-cols-7 justify-items-center md:h-124'>
+              {Array.from({ length: 7 }).map((_, i) => (
+                <div key={i} className='mt-6 size-28 rounded-full bg-gray-100' />
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

apps/what-today/src/components/reservations-status/ReservationSelectSkeleton.tsx

@@ -0,0 +1,8 @@
+export default function ReservationSelectSkeleton() {
+  return (
+    <div className='flex h-54 w-full animate-pulse items-center justify-center gap-20 rounded-xl border border-gray-50 px-20 py-15'>
+      <div className='h-24 w-full rounded-xl bg-gray-100' />
+      <div className='h-full w-12 rounded-xl bg-gray-100' />
+    </div>
+  );
+}

apps/what-today/src/hooks/myActivity/useMyActivitiesQuery.ts

@@ -2,12 +2,15 @@ import { useInfiniteQuery } from '@tanstack/react-query';
 
 import { getMyActivities } from '@/apis/myActivities';
 import type { myActivitiesResponse } from '@/schemas/myActivities';
+import { useWhatTodayStore } from '@/stores';
 
 export const useInfiniteMyActivitiesQuery = (size = 10) => {
+  const { user } = useWhatTodayStore();
   return useInfiniteQuery<myActivitiesResponse>({
     queryKey: ['myActivitiesInfinite', { size }],
     initialPageParam: undefined,
     queryFn: ({ pageParam }) => getMyActivities({ cursorId: pageParam as number, size }),
     getNextPageParam: (lastPage) => lastPage.cursorId ?? undefined,
+    enabled: Boolean(user),
   });
 };

apps/what-today/src/pages/mypage/main/index.tsx

@@ -60,6 +60,7 @@ export default function MyPage() {
         status: 'completed', // 완료된 체험만 받아오기
       }),
     staleTime: 1000 * 30,
+    enabled: Boolean(user),
   });
 
   // 완료한 체험 중 리뷰 미작성 갯수
@@ -75,6 +76,7 @@ export default function MyPage() {
         status: 'confirmed', // 확정된 체험만 받아오기
       }),
     staleTime: 1000 * 30,
+    enabled: Boolean(user),
   });
 
   // 이번 달 모집 중인 체험

apps/what-today/src/pages/mypage/manage-activities/index.tsx

@@ -1,4 +1,12 @@
-import { Button, ChevronIcon, ExperienceCard, Modal, NoResult, WarningLogo } from '@what-today/design-system';
+import {
+  Button,
+  ChevronIcon,
+  ExperienceCard,
+  ExperienceCardSkeleton,
+  Modal,
+  NoResult,
+  WarningLogo,
+} from '@what-today/design-system';
 import { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
@@ -45,7 +53,13 @@ export default function ManageActivitiesPage() {
 
   let content;
   if (isLoading) {
-    content = <div className='flex justify-center p-40 text-gray-400'>로딩 중...</div>;
+    content = (
+      <div className='flex flex-col gap-12'>
+        {Array.from({ length: 5 }).map((_, i) => (
+          <ExperienceCardSkeleton key={i} />
+        ))}
+      </div>
+    );
   } else if (isError) {
     content = <div className='flex justify-center p-40 text-red-500'>데이터를 불러오는 중 오류가 발생했습니다.</div>;
   } else if (allActivities.length === 0) {
@@ -102,7 +116,7 @@ export default function ManageActivitiesPage() {
         <Modal.Content className='flex max-w-300 flex-col items-center gap-6 text-center md:max-w-350 lg:max-w-400'>
           <div className='flex flex-col items-center gap-6 text-center'>
             <WarningLogo className='md:size-110 lg:size-150' size={88} />
-            <p className='subtitle-text'>체험을 삭제하시겠습니까?</p>
+            <p className='text-2lg font-bold'>체험을 삭제하시겠습니까?</p>
           </div>
           <Modal.Actions>
             <Modal.CancelButton>아니요</Modal.CancelButton>

apps/what-today/src/pages/mypage/reservations-status/index.tsx

@@ -4,6 +4,8 @@ import { type ReactNode, useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import ReservationCalendar from '@/components/reservations-status/ReservationCalendar';
+import ReservationCalendarSkeleton from '@/components/reservations-status/ReservationCalendarSkeleton';
+import ReservationSelectSkeleton from '@/components/reservations-status/ReservationSelectSkeleton';
 import { useInfiniteMyActivitiesQuery } from '@/hooks/myActivity/useMyActivitiesQuery';
 import { useMonthlyScheduleQuery } from '@/hooks/myReservation/useMonthlyScheduleQuery';
 
@@ -56,7 +58,12 @@ export default function ReservationsStatusPage() {
 
   let scheduleContent;
   if (isLoadingActivities || isLoadingCalendar) {
-    scheduleContent = <div className='flex justify-center p-40 text-gray-500'>로딩 중...</div>;
+    scheduleContent = (
+      <div className='flex flex-col md:gap-24 xl:gap-30'>
+        <ReservationSelectSkeleton />
+        <ReservationCalendarSkeleton />
+      </div>
+    );
   } else if (activityList.length > 0) {
     scheduleContent = (
       <div className='flex flex-col md:gap-24 xl:gap-30'>

packages/design-system/src/components/ExperienceCard.tsx

@@ -80,7 +80,7 @@ export default function ExperienceCard({
 
   return (
     <article
-      className='flex w-full cursor-pointer justify-between gap-22 rounded-3xl p-24 shadow-[0px_4px_24px_rgba(156,180,202,0.2)] xl:p-30'
+      className='flex w-full cursor-pointer justify-between gap-22 rounded-3xl border border-gray-50 p-24 xl:p-30'
       onClick={onNavigate}
     >
       <div className='flex flex-col gap-12 xl:gap-14'>

packages/design-system/src/components/index.ts

@@ -29,6 +29,7 @@ export { default as RadioGroup } from './RadioGroup/RadioGroup';
 export { default as ReservationCard } from './ReservationCard';
 export { default as ReservationInfoCard } from './ReservationInfoCard';
 export * from './select';
+export * from './skeleton';
 export { default as StarRating } from './StarRating';
 export { default as TimePicker } from './TimePicker';
 export { Toaster, useToast } from './Toast';

packages/design-system/src/components/skeleton/ExperienceCardSkeleton.tsx

@@ -0,0 +1,18 @@
+export default function ExperienceCardSkeleton() {
+  return (
+    <div className='flex h-182 w-full animate-pulse cursor-pointer justify-between gap-22 rounded-3xl border border-gray-50 p-24 xl:p-30'>
+      <div className='flex flex-1 flex-col gap-12 xl:gap-14'>
+        <div className='flex flex-col gap-6 xl:gap-8'>
+          <div className='h-30 w-full rounded-xl bg-gray-100' />
+          <div className='h-21 w-full rounded-xl bg-gray-100' />
+        </div>
+        <div className='h-24 w-full rounded-xl bg-gray-100' />
+        <div className='flex gap-8'>
+          <div className='h-29 w-68.5 rounded-xl bg-gray-100' />
+          <div className='h-29 w-68.5 rounded-xl bg-gray-100' />
+        </div>
+      </div>
+      <div className='size-82 rounded-xl bg-gray-100 md:size-132 xl:size-142' />
+    </div>
+  );
+}

packages/design-system/src/components/skeleton/index.tsx

@@ -0,0 +1 @@
+export { default as ExperienceCardSkeleton } from './ExperienceCardSkeleton';