diff --git a/apps/web/app/admin/banners/page.tsx b/apps/web/app/admin/banners/page.tsx index 6eee4c54e..e1259f314 100644 --- a/apps/web/app/admin/banners/page.tsx +++ b/apps/web/app/admin/banners/page.tsx @@ -2,6 +2,7 @@ import { useState, useRef, useMemo, Suspense, useEffect, useLayoutEffect } from 'react'; import { useFilledSkeletonCount } from '@/lib/use-filled-skeleton-count'; +import { useInitialLoadPending } from '@/lib/use-initial-load-pending'; import Image from 'next/image'; import { useRouter } from 'next/navigation'; import { useAuth } from '@/contexts/AuthContext'; @@ -148,13 +149,12 @@ function BannerManagementPage({ embedded, onInitialContentReady }: BannerManagem // 배너 데이터 const { data: banners = [], isLoading: bannersLoading } = useAdBannersAdmin(); - const initialLoadPendingRef = useRef(true); - if (initialLoadPendingRef.current && !authLoading && !bannersLoading) initialLoadPendingRef.current = false; + const initialLoadPending = useInitialLoadPending(!authLoading && !bannersLoading); useLayoutEffect(() => { - if (!onInitialContentReady || authLoading || initialLoadPendingRef.current) return; + if (!onInitialContentReady || authLoading || initialLoadPending) return; onInitialContentReady(); - }, [authLoading, bannersLoading, onInitialContentReady]); - const bannerListSkeleton = useFilledSkeletonCount(88, 5); + }, [authLoading, bannersLoading, initialLoadPending, onInitialContentReady]); + const { ref: bannerListRef, count: bannerListCount } = useFilledSkeletonCount(88, 5); const createBanner = useCreateAdBanner(); const updateBanner = useUpdateAdBanner(); const deleteBanner = useDeleteAdBanner(); @@ -602,11 +602,11 @@ function BannerManagementPage({ embedded, onInitialContentReady }: BannerManagem -
+
{bannersLoading ? (
배너 목록 데이터를 불러오는 중입니다. - {Array.from({ length: bannerListSkeleton.count }).map((_, index) => )} + {Array.from({ length: bannerListCount }).map((_, index) => )}
) : sortedBanners.length === 0 ? ( diff --git a/apps/web/app/admin/evaluations/page.tsx b/apps/web/app/admin/evaluations/page.tsx index 317352262..f4061ba58 100644 --- a/apps/web/app/admin/evaluations/page.tsx +++ b/apps/web/app/admin/evaluations/page.tsx @@ -1,6 +1,7 @@ "use client"; import { useState, useEffect, useLayoutEffect, useMemo, useCallback, useRef, Suspense } from 'react'; +import { useInitialLoadPending } from '@/lib/use-initial-load-pending'; import { useFilledSkeletonCount } from '@/lib/use-filled-skeleton-count'; import { useRouter, useSearchParams } from 'next/navigation'; import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'; @@ -1430,7 +1431,7 @@ function AdminEvaluationStaticCardSkeleton({ count }: { count: number }) { } function AdminEvaluationRouteSkeleton() { const frameRef = useRef(null); - const mobileCards = useFilledSkeletonCount(104, 4, 48); + const { ref: mobileCardsRef, count: mobileCardsCount } = useFilledSkeletonCount(104, 4, 48); const [rowCount, setRowCount] = useState(6); useLayoutEffect(() => { const node = frameRef.current; @@ -1477,9 +1478,9 @@ function AdminEvaluationRouteSkeleton() {
-
+
- +