Fix: 스켈레톤이 끝나고 실제 데이터가 반영된 카드의 높이를 측정하도록 변경

co-kkiri/src/hooks/useComponentHeight.ts

@@ -1,18 +1,27 @@
 import { useState, useEffect, RefObject } from "react";
+import useSkeleton from "./useSkeleton";
 
 // T는 사용하는 곳에서 지정할 데이터 타입입니다.
-function useComponentHeight<T>(data: T, componentRef: RefObject<HTMLElement>, defaultValue: number = 0): number {
+function useComponentHeight<T>(
+  data: T,
+  componentRef: RefObject<HTMLElement>,
+  isLoading: boolean,
+  defaultValue: number = 0,
+): number {
   const [componentHeight, setComponentHeight] = useState<number>(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;
 }

co-kkiri/src/pages/Detail/index.tsx

@@ -33,15 +33,14 @@ export default function Detail() {
     queryKey: ["postDetail", postId],
     queryFn: () => getPostDetail(postId),
     retry: 0,
-    staleTime: 60 * 1000,
     enabled: viewCountIncreased,
   });
 
   if (error) {
     handleError(error);
   }
 
-  const cardHeight = useComponentHeight<PostDetailApiResponseDto | undefined>(data, cardRef, 407);
+  const cardHeight = useComponentHeight<PostDetailApiResponseDto | undefined>(data, cardRef, isLoading, 407);
 
   const postDetails = data?.postDetails || postDetailInitialData;
   const postApplyStatus = data?.postApplyStatus || "NOT_APPLIED";