diff --git a/co-kkiri/src/hooks/useComponentHeight.ts b/co-kkiri/src/hooks/useComponentHeight.ts index a5dded0e..369ea454 100644 --- a/co-kkiri/src/hooks/useComponentHeight.ts +++ b/co-kkiri/src/hooks/useComponentHeight.ts @@ -1,18 +1,27 @@ import { useState, useEffect, RefObject } from "react"; +import useSkeleton from "./useSkeleton"; // T는 사용하는 곳에서 지정할 데이터 타입입니다. -function useComponentHeight(data: T, componentRef: RefObject, defaultValue: number = 0): number { +function useComponentHeight( + data: T, + componentRef: RefObject, + isLoading: boolean, + defaultValue: number = 0, +): number { const [componentHeight, setComponentHeight] = useState(defaultValue); + const isVisibleSkeleton = useSkeleton(isLoading); + // 스켈레톤이 끝나고 실제 데이터가 반영된 컴포넌트의 높이 반영 useEffect(() => { - const checkComponentHeight = () => { - if (data && componentRef.current) { - setComponentHeight(componentRef.current.offsetHeight); - } - }; - - checkComponentHeight(); - }, [data, componentRef]); + if (!isVisibleSkeleton) { + const checkComponentHeight = () => { + if (data && componentRef.current) { + setComponentHeight(componentRef.current.offsetHeight); + } + }; + checkComponentHeight(); + } + }, [data, componentRef, isVisibleSkeleton]); return componentHeight; } diff --git a/co-kkiri/src/pages/Detail/index.tsx b/co-kkiri/src/pages/Detail/index.tsx index 6edf40eb..a5a62c92 100644 --- a/co-kkiri/src/pages/Detail/index.tsx +++ b/co-kkiri/src/pages/Detail/index.tsx @@ -33,7 +33,6 @@ export default function Detail() { queryKey: ["postDetail", postId], queryFn: () => getPostDetail(postId), retry: 0, - staleTime: 60 * 1000, enabled: viewCountIncreased, }); @@ -41,7 +40,7 @@ export default function Detail() { handleError(error); } - const cardHeight = useComponentHeight(data, cardRef, 407); + const cardHeight = useComponentHeight(data, cardRef, isLoading, 407); const postDetails = data?.postDetails || postDetailInitialData; const postApplyStatus = data?.postApplyStatus || "NOT_APPLIED";