perf: post detail 페이지 불필요한 api요청 줄이기

src/features/posts/components/post-detail/PostDetailItem/PostDetailHeader/PostDetailHeader.tsx

@@ -1,13 +1,12 @@
 import { useEffect, useRef, useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import MoreIcon from '@/common/components/icons/MoreIcon';
 import { Dropdown } from '@/common/components/ui';
 import { LoadingSpinner } from '@/common/components/ui/loading';
 import { Popup } from '@/common/components/ui/modal';
 import { ADMIN_EMAIL } from '@/common/constants/admin';
-import { POST_TYPE } from '@/common/constants/post-type';
 import { calculateAgeFromBirthDate } from '@/common/utils/date/calculateAge';
-import { useDeletePost, useGetPosts } from '@/features/posts/queries';
+import { useDeletePost } from '@/features/posts/queries';
 import { Post } from '@/features/posts/types/post';
 import { getRemainingTime } from '@/features/posts/utils/get-remaining-time';
 import { UserProfile } from '@/features/user/components/UserProfile';
@@ -25,10 +24,8 @@ interface PostDetailHeaderProps {
 
 export function PostDetailHeader({ post }: PostDetailHeaderProps) {
   const { user } = useUser();
-  const { posts } = useGetPosts({ userId: user?.id, type: POST_TYPE.MY });
   const [showMore, setShowMore] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
-  const params = useParams();
   const [deleteModalOpen, setDeleteModalOpen] = useState(false);
   const { mutate: deletePost, error, isSuccess, isLoading } = useDeletePost();
   const navigate = useNavigate();
@@ -87,16 +84,13 @@ export function PostDetailHeader({ post }: PostDetailHeaderProps) {
   useEffect(() => {
     if (isSuccess) {
       alert('게시물이 정상적으로 삭제되었습니다.');
-      if (params.route === POST_TYPE.MY && posts?.length === 1) {
-        navigate('/user');
-      }
     }
     if (error) {
       alert('오류가 발생하였습니다.');
     }
 
     setShowMore(false);
-  }, [error, isSuccess, navigate, params.route, posts?.length]);
+  }, [error, isSuccess]);
 
   return (
     <div className="flex items-center justify-between">

src/features/posts/components/post-detail/PostDetailList/PostDetailList.tsx

@@ -1,5 +1,5 @@
 import { Suspense } from 'react';
-import { useParams } from 'react-router-dom';
+import { Navigate, useParams } from 'react-router-dom';
 import PostDetailSkeleton from '@/common/components/ui/skeleton/PostDetailSkeleton';
 import { POST_TYPE } from '@/common/constants/post-type';
 import { useScrollRestoration } from '@/common/hooks/useScrollRestoration';
@@ -16,20 +16,29 @@ export function PostDetailList({ type }: PostDetailListProps) {
   const params = useParams();
   const initialPostId = params.id ? Number(params.id) : undefined;
   const { posts, ref } = useGetPosts({
-    initialPostId,
     userId: user?.id,
     type,
   });
   const scrollRef = useScrollRestoration<HTMLUListElement>('feed');
 
+  const firstIndex = posts?.findIndex((post) => post.id === initialPostId);
+  const postsFiltered = posts?.slice(firstIndex === -1 ? 0 : firstIndex);
+
+  if (type === POST_TYPE.MY && posts?.length === 0) {
+    return <Navigate to={'/user'} />;
+  }
+
   return (
     <ul
       className="hide-scrollbar flex-1 divide-y divide-background-dividerLine-300 overflow-y-scroll pt-[0.9rem]"
       style={{ scrollSnapType: 'y proximity', scrollSnapAlign: 'start' }}
       ref={scrollRef}
     >
-      {posts?.map((post, index) => (
-        <li key={post.id} ref={index === posts.length - 1 ? ref : undefined}>
+      {postsFiltered?.map((post, index) => (
+        <li
+          key={post.id}
+          ref={index === postsFiltered.length - 1 ? ref : undefined}
+        >
           <Suspense fallback={<PostDetailSkeleton />}>
             <PostDetailItem post={post} />
           </Suspense>

src/features/posts/queries/useGetPosts.tsx

@@ -51,6 +51,7 @@ export function useGetPosts({
       }),
     getNextPageParam: (lastPage) => lastPage.meta.nextId,
     suspense: true,
+    staleTime: 1000 * 60 * 5, // 5분
   });
   const { hasNextPage, fetchNextPage } = queryInfo;