diff --git a/apps/what-today/src/components/reservations-status/ReservationCalendar.tsx b/apps/what-today/src/components/reservations-status/ReservationCalendar.tsx index 299d1948..21a266f7 100644 --- a/apps/what-today/src/components/reservations-status/ReservationCalendar.tsx +++ b/apps/what-today/src/components/reservations-status/ReservationCalendar.tsx @@ -81,7 +81,7 @@ export default function ReservationCalendar({ return (
{ handleDateSelect(date); diff --git a/apps/what-today/src/components/reservations-status/ReservationCalendarSkeleton.tsx b/apps/what-today/src/components/reservations-status/ReservationCalendarSkeleton.tsx new file mode 100644 index 00000000..46e0b12f --- /dev/null +++ b/apps/what-today/src/components/reservations-status/ReservationCalendarSkeleton.tsx @@ -0,0 +1,29 @@ +export default function ReservationCalendarSkeleton() { + return ( +
+
+
+
+
+
+
+
+
+
+ {Array.from({ length: 7 }).map((_, i) => ( +
+ ))} +
+
+ {Array.from({ length: 6 }).map((_, i) => ( +
+ {Array.from({ length: 7 }).map((_, i) => ( +
+ ))} +
+ ))} +
+
+
+ ); +} diff --git a/apps/what-today/src/components/reservations-status/ReservationSelectSkeleton.tsx b/apps/what-today/src/components/reservations-status/ReservationSelectSkeleton.tsx new file mode 100644 index 00000000..d8ae4b59 --- /dev/null +++ b/apps/what-today/src/components/reservations-status/ReservationSelectSkeleton.tsx @@ -0,0 +1,8 @@ +export default function ReservationSelectSkeleton() { + return ( +
+
+
+
+ ); +} diff --git a/apps/what-today/src/hooks/myActivity/useMyActivitiesQuery.ts b/apps/what-today/src/hooks/myActivity/useMyActivitiesQuery.ts index 0b3e4d74..d51556bb 100644 --- a/apps/what-today/src/hooks/myActivity/useMyActivitiesQuery.ts +++ b/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({ queryKey: ['myActivitiesInfinite', { size }], initialPageParam: undefined, queryFn: ({ pageParam }) => getMyActivities({ cursorId: pageParam as number, size }), getNextPageParam: (lastPage) => lastPage.cursorId ?? undefined, + enabled: Boolean(user), }); }; diff --git a/apps/what-today/src/pages/mypage/main/index.tsx b/apps/what-today/src/pages/mypage/main/index.tsx index 009108d5..5ebeeb9d 100644 --- a/apps/what-today/src/pages/mypage/main/index.tsx +++ b/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), }); // 이번 달 모집 중인 체험 diff --git a/apps/what-today/src/pages/mypage/manage-activities/index.tsx b/apps/what-today/src/pages/mypage/manage-activities/index.tsx index 6d180112..5c8fdd25 100644 --- a/apps/what-today/src/pages/mypage/manage-activities/index.tsx +++ b/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 =
로딩 중...
; + content = ( +
+ {Array.from({ length: 5 }).map((_, i) => ( + + ))} +
+ ); } else if (isError) { content =
데이터를 불러오는 중 오류가 발생했습니다.
; } else if (allActivities.length === 0) { @@ -102,7 +116,7 @@ export default function ManageActivitiesPage() {
-

체험을 삭제하시겠습니까?

+

체험을 삭제하시겠습니까?

아니요 diff --git a/apps/what-today/src/pages/mypage/reservations-status/index.tsx b/apps/what-today/src/pages/mypage/reservations-status/index.tsx index 5132502f..1a3ef0e3 100644 --- a/apps/what-today/src/pages/mypage/reservations-status/index.tsx +++ b/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 =
로딩 중...
; + scheduleContent = ( +
+ + +
+ ); } else if (activityList.length > 0) { scheduleContent = (
diff --git a/packages/design-system/src/components/ExperienceCard.tsx b/packages/design-system/src/components/ExperienceCard.tsx index db01a2ea..6ee6a98e 100644 --- a/packages/design-system/src/components/ExperienceCard.tsx +++ b/packages/design-system/src/components/ExperienceCard.tsx @@ -80,7 +80,7 @@ export default function ExperienceCard({ return (
diff --git a/packages/design-system/src/components/index.ts b/packages/design-system/src/components/index.ts index dfa7bbb0..94ff92b1 100644 --- a/packages/design-system/src/components/index.ts +++ b/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'; diff --git a/packages/design-system/src/components/skeleton/ExperienceCardSkeleton.tsx b/packages/design-system/src/components/skeleton/ExperienceCardSkeleton.tsx new file mode 100644 index 00000000..28ecc88a --- /dev/null +++ b/packages/design-system/src/components/skeleton/ExperienceCardSkeleton.tsx @@ -0,0 +1,18 @@ +export default function ExperienceCardSkeleton() { + return ( +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ); +} diff --git a/packages/design-system/src/components/skeleton/index.tsx b/packages/design-system/src/components/skeleton/index.tsx new file mode 100644 index 00000000..cb65c034 --- /dev/null +++ b/packages/design-system/src/components/skeleton/index.tsx @@ -0,0 +1 @@ +export { default as ExperienceCardSkeleton } from './ExperienceCardSkeleton';