[Feat] 모임상세 SSR layout에서 preFetch 적용

src/api/service/group-service/index.ts

@@ -70,6 +70,6 @@ export const groupServiceRemote = () => ({
   },
 
   getGroupDetails: (payload: GetGroupDetailsPayload) => {
-    return api.post<GetGroupDetailsResponse>(`/groups/${payload}`);
+    return api.get<GetGroupDetailsResponse>(`/groups/${payload.groupId}`);
   },
 });

src/app/meetup/[groupId]/layout.tsx

@@ -0,0 +1,27 @@
+import { dehydrate, HydrationBoundary } from '@tanstack/react-query';
+import { QueryClient } from '@tanstack/react-query';
+
+import { API } from '@/api';
+import { groupKeys } from '@/lib/query-key/query-key-group';
+
+interface Props {
+  children: React.ReactNode;
+  params: Promise<{ groupId: string }>;
+}
+
+const MeetupDetailLayout = async ({ children, params }: Props) => {
+  const { groupId } = await params;
+
+  const queryClient = new QueryClient();
+
+  await queryClient.prefetchQuery({
+    queryKey: groupKeys.detail(groupId),
+    queryFn: async () => API.groupService.getGroupDetails({ groupId }),
+  });
+
+  const dehydratedState = dehydrate(queryClient);
+
+  return <HydrationBoundary state={dehydratedState}>{children}</HydrationBoundary>;
+};
+
+export default MeetupDetailLayout;

src/app/meetup/[id]/page.tsx → src/app/meetup/[groupId]/page.tsx

@@ -1,14 +1,30 @@
+'use client';
+
+import { use } from 'react';
+
 import {
   MeetupBannerImages,
   MeetupButtons,
   MeetupDescriptions,
   MeetupMembers,
 } from '@/components/pages/meetup';
+import { useGetGroupDetails } from '@/hooks/use-group/use-group-get-details';
+
+interface Props {
+  params: Promise<{ groupId: string }>;
+}
+
+const MeetupDetailPage = ({ params }: Props) => {
+  const { groupId } = use(params);
+  const { data } = useGetGroupDetails({ groupId });
+
+  if (!data) return null;
+
+  console.log(data);
 
-const MeetupDetailPage = () => {
   return (
     <div>
-      <MeetupBannerImages images={DUMMY_MEETUP_DATA.bannerImages} />
+      <MeetupBannerImages images={data.images} />
       <MeetupDescriptions description={DUMMY_MEETUP_DATA.description} />
       <MeetupMembers members={DUMMY_MEETUP_DATA.members} />
       <MeetupButtons

src/components/pages/meetup/meetup-banner-images/index.tsx

@@ -10,20 +10,33 @@ import Image from 'next/image';
 import { Pagination } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
 
+import { GetGroupDetailsResponse } from '@/types/service/group';
+
 interface Props {
-  images: string[];
+  images: GetGroupDetailsResponse['images'];
 }
 
 export const MeetupBannerImages = ({ images }: Props) => {
+  const hasImages = images.length;
+
+  const defaultImageUrl =
+    'https://images.unsplash.com/photo-1705599359461-f99dc9e80efa?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D';
+
   return (
-    <section>
-      <Swiper className='h-60' loop modules={[Pagination]} pagination>
-        {images.map((src) => (
-          <SwiperSlide key={src} className='relative'>
-            <Image alt='image' fill objectFit='cover' src={src} />
-          </SwiperSlide>
-        ))}
-      </Swiper>
+    <section className='select-none'>
+      {hasImages ? (
+        <Swiper className='h-60' loop modules={[Pagination]} pagination>
+          {images.map(({ imageId440x240, imageUrl440x240 }) => (
+            <SwiperSlide key={imageId440x240} className='relative'>
+              <Image alt='image' draggable={false} fill objectFit='cover' src={imageUrl440x240} />
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      ) : (
+        <div className='relative h-60'>
+          <Image alt='image' draggable={false} fill objectFit='cover' src={defaultImageUrl} />
+        </div>
+      )}
     </section>
   );
 };

src/components/pages/meetup/meetup-descriptions/index.tsx

@@ -1,4 +1,4 @@
-import type { DUMMY_MEETUP_DATA } from '@/app/meetup/[id]/page';
+import type { DUMMY_MEETUP_DATA } from '@/app/meetup/[groupId]/page';
 import {
   DescriptionContent,
   DescriptionProfile,

src/components/pages/meetup/meetup-members/index.tsx

@@ -7,7 +7,7 @@ import { useState } from 'react';
 
 import clsx from 'clsx';
 
-import type { DUMMY_MEETUP_DATA } from '@/app/meetup/[id]/page';
+import type { DUMMY_MEETUP_DATA } from '@/app/meetup/[groupId]/page';
 import { Icon } from '@/components/icon';
 import { Button } from '@/components/ui';
 

src/hooks/use-group/use-group-create/index.ts

@@ -8,6 +8,7 @@ export const useCreateGroup = () => {
     mutationFn: (payload: CreateGroupPayload) => API.groupService.createGroup(payload),
     onSuccess: () => {
       // 상세 페이지 이동할거라 목록 캐시를 갱신할 이유가 없음 (GPT 피셜)
+      console.log('모임 생성 성공.');
     },
     onError: () => {
       console.log('모임 생성 실패.');

src/hooks/use-group/use-group-get-details/index.ts

@@ -1,11 +1,12 @@
 import { useQuery } from '@tanstack/react-query';
 
 import { API } from '@/api';
+import { groupKeys } from '@/lib/query-key/query-key-group';
 import { GetGroupDetailsPayload } from '@/types/service/group';
 
 export const useGetGroupDetails = (payload: GetGroupDetailsPayload) => {
   const query = useQuery({
-    queryKey: ['somekey'],
+    queryKey: groupKeys.detail(payload.groupId),
     queryFn: () => API.groupService.getGroupDetails(payload),
   });
   return query;

src/lib/query-key/query-key-group/index.ts

@@ -6,4 +6,5 @@ export const groupKeys = {
   myLists: () => [...groupKeys.all, 'me'] as const,
   myList: (filters: { type: 'current' | 'myPost' | 'past'; cursor?: number; size: number }) =>
     [...groupKeys.myLists(), filters] as const,
+  detail: (groupId: string) => [...groupKeys.all, groupId] as const,
 };

src/types/service/group.ts

@@ -125,7 +125,7 @@ export interface CreateGroupResponse {
 }
 
 export interface GetGroupDetailsPayload {
-  groupId: number;
+  groupId: string;
 }
 
 export interface GetGroupDetailsResponse {