Feat/refactor/i created prefetch/DEVING-66

src/app/(user-page)/my-meeting/_features/CardRightSection.tsx

@@ -7,9 +7,12 @@
   useExpelMutation,
   useMemberStatusMutation,
 } from '@/hooks/mutations/useMyMeetingMutation';
+import { myMeetingKeys } from '@/hooks/queries/useMyMeetingQueries';
 import { useBannerQueries } from '@/hooks/queries/useMyPageQueries';
+import { useQueryClient } from '@tanstack/react-query';
 import Image from 'next/image';
 import { useState } from 'react';
+import { getMyMeetingMemberProfile } from 'service/api/mymeeting';
 import type { Member } from 'types/myMeeting';
 
 import ModalProfile from './ModalProfile';
@@ -82,10 +85,27 @@
     setIsUserProfileModalOpen(true);
   };
 
+  const queryClient = useQueryClient();
+
+  const handlePrefetchProfile = async (member: Member) => {
+    const queryKey = myMeetingKeys.memberProfile(meetingId, member.userId);
+
+    // 캐시에 데이터가 있는지 확인
+    const cachedData = queryClient.getQueryData(queryKey);
+
+    if (!cachedData) {
+      await queryClient.prefetchQuery({
+        queryKey,
+        queryFn: () =>
+          getMyMeetingMemberProfile({ meetingId, userId: member.userId }),
+      });
+    }
+  };
+
   // 프로필 보기 할 유저
   const [selectedUser, setSelectedUser] = useState<Member | null>(null);
 
   const { data: currentUser, isLoading, error } = useBannerQueries();
   if (isLoading || !currentUser) {
     return;
   }
@@ -124,6 +144,7 @@
                     variant={'outline'}
                     className="h-[40px] w-[93px]"
                     onClick={(e) => handleOpenProfileModal(e, member)}
+                    onMouseEnter={() => handlePrefetchProfile(member)}
                   >
                     프로필보기
                   </Button>
@@ -180,6 +201,7 @@
           setIsUserProfileModalOpen={setIsUserProfileModalOpen}
           setIsUserListModalOpen={setIsUserListModalOpen}
           currentUser={currentUser}
+          handlePrefetchProfile={handlePrefetchProfile}
         />
       </Modal>
     </div>

src/app/(user-page)/my-meeting/_features/ModalUserList.tsx

@@ -1,8 +1,8 @@
 import { Tag } from '@/components/ui/Tag';
 import { useBannerQueries } from '@/hooks/queries/useMyPageQueries';
 import Image from 'next/image';
 import React from 'react';
 import { Dispatch, SetStateAction, useState } from 'react';
 import type { IBanner, Member } from 'types/myMeeting';
 
 import { Button } from '../../../../components/ui/Button';
@@ -14,13 +14,15 @@
   setSelectedUser,
   currentUser,
   className,
+  handlePrefetchProfile,
 }: {
   memberList: Member[];
   setSelectedUser: Dispatch<React.SetStateAction<Member | null>>;
   setIsUserProfileModalOpen: Dispatch<SetStateAction<boolean>>;
   setIsUserListModalOpen: Dispatch<SetStateAction<boolean>>;
   currentUser: IBanner;
   className?: string;
+  handlePrefetchProfile: (member: Member) => Promise<void>;
 }) => {
   const handleProfileClick = (user: Member) => {
     setSelectedUser(user);
@@ -55,6 +57,7 @@
                     onClick={() => handleProfileClick(user)}
                     variant="outline"
                     size="sm"
+                    onMouseEnter={() => handlePrefetchProfile(user)}
                   >
                     프로필 보기
                   </Button>

src/app/(user-page)/my-meeting/my/page.tsx

@@ -1,22 +1,56 @@
 import NotYet from '@/components/common/NotYet';
+import { myMeetingKeys } from '@/hooks/queries/useMyMeetingQueries';
+import { QUERY_KEYS } from '@/hooks/queries/useMyPageQueries';
+import {
+  HydrationBoundary,
+  QueryClient,
+  dehydrate,
+} from '@tanstack/react-query';
+import { getMyMeetingManage } from 'service/api/mymeeting';
+import { getBanner } from 'service/api/mypageProfile';
+import { Paginated } from 'types/meeting';
+import { IMyMeetingManage } from 'types/myMeeting';
 
 import Created from '../_features/Created';
 // import Joined from '../../components/Joined';
 import Tab from '../_features/Tab';
 
-export default function Page({
+export default async function Page({
   searchParams,
 }: {
   searchParams: { type: string };
 }) {
   const type = searchParams?.type;
 
+  const queryClient = new QueryClient();
+
+  // 배너
+  await queryClient.prefetchQuery({
+    queryKey: QUERY_KEYS.banner(),
+    queryFn: () => getBanner(),
+  });
+
+  if (type === 'created') {
+    // 내가 만든 모임 리스트 prefetch
+    await queryClient.prefetchInfiniteQuery({
+      queryKey: myMeetingKeys.manage(),
+      queryFn: ({ pageParam }) => getMyMeetingManage(pageParam),
+      getNextPageParam: (lastPage: Paginated<IMyMeetingManage>) =>
+        lastPage.nextCursor ?? false,
+      initialPageParam: 0,
+    });
+  } else {
+    // 참여 중인 모임 prefetch
+  }
+
   return (
     <div>
       <div className="mt-6 flex flex-col gap-[24px]">
         <Tab type={type} />
       </div>
-      {type === 'created' ? <Created /> : <NotYet />}
+      <HydrationBoundary state={dehydrate(queryClient)}>
+        {type === 'created' ? <Created /> : <NotYet />}
+      </HydrationBoundary>
     </div>
   );
 }

src/hooks/queries/useMyMeetingQueries.ts

@@ -3,6 +3,8 @@ import {
   getMyMeetingManage,
   getMyMeetingMemberProfile,
 } from 'service/api/mymeeting';
+import { Paginated } from 'types/meeting';
+import { IMyMeetingManage } from 'types/myMeeting';
 
 export const myMeetingKeys = {
   all: ['mymeeting'] as const,
@@ -19,7 +21,7 @@ export const useInfiniteMyMeetingManageQueries = () => {
     queryKey: myMeetingKeys.manage(),
     queryFn: ({ pageParam }) => getMyMeetingManage(pageParam),
     initialPageParam: 0,
-    getNextPageParam: (lastPage, pages) => {
+    getNextPageParam: (lastPage: Paginated<IMyMeetingManage>, pages) => {
       console.log('[mutation] lastPage: ', lastPage);
       return lastPage.nextCursor ?? null;
     },