[#434] [모임 상세] 독서모임 상세 페이지 api 연결 (#441)

* style: TopNavigation 스타일 수정

* feat: BookGroupInfo api 연결

* style(TopNaviation): CenterItem px 수정

* fix: BookGroupInfo 스토리 제거

* style(BookInfoCard): 제목 text-overflow 설정

* feat: CommentList api 연결

* fix: build 오류 수정

* refactor: group, user type 정리

* refactor: useBookGroupQuery default export

* refactor: MemeberCapacity 시맨틱한 태그로 수정

- span -> p

src/apis/user.tsx

@@ -1,10 +1,10 @@
 import { APIJob, APIJobGroup } from '@/types/job';
-import { APIUser } from '@/types/user';
+import { APIUser, APIUserProfile } from '@/types/user';
 import { publicApi } from './core/axios';
 
 const userAPI = {
   getUserProfile: ({ userId }: { userId: APIUser['userId'] }) =>
-    publicApi.get<APIUser>(`/service-api/users/${userId}/profile`),
+    publicApi.get<APIUserProfile>(`/service-api/users/${userId}/profile`),
 
   getMyProfile: () => publicApi.get<APIUser>('/service-api/users/me'),
 

src/app/group/[groupId]/page.tsx

@@ -1,19 +1,52 @@
 'use client';
 
-import { Flex } from '@chakra-ui/react';
+import TopNavigation from '@/ui/Base/TopNavigation';
+import BookGroupInfo from '@/v1/bookGroup/detail/BookGroupInfo';
+import { IconArrowLeft, IconHamburger, IconPost } from '@public/icons';
 
-import GroupDetail from '@/ui/Group/GroupDetail';
+import { useBookGroupTitle } from '@/queries/group/useBookGroupQuery';
+import CommentList from '@/v1/bookGroup/detail/CommentList';
 
-const GroupDetailPage = ({
+const DetailBookGroupPage = ({
   params: { groupId },
 }: {
   params: { groupId: number };
 }) => {
   return (
-    <Flex direction="column" justify="center">
-      <GroupDetail bookGroupId={Number(groupId)} />
-    </Flex>
+    <>
+      <BookGroupNavigation groupId={groupId} />
+      <div className="flex flex-col gap-[2rem]">
+        <BookGroupInfo groupId={groupId} />
+        <div className="flex flex-col gap-[1rem]">
+          <Heading text="게시글" />
+          <CommentList groupId={groupId} />
+        </div>
+      </div>
+    </>
   );
 };
 
-export default GroupDetailPage;
+export default DetailBookGroupPage;
+
+const BookGroupNavigation = ({ groupId }: { groupId: number }) => {
+  const { data: title } = useBookGroupTitle(groupId);
+
+  return (
+    <TopNavigation>
+      <TopNavigation.LeftItem>
+        <IconArrowLeft />
+      </TopNavigation.LeftItem>
+      <TopNavigation.CenterItem textAlign="left">
+        {title}
+      </TopNavigation.CenterItem>
+      <TopNavigation.RightItem>
+        <IconPost />
+        <IconHamburger />
+      </TopNavigation.RightItem>
+    </TopNavigation>
+  );
+};
+
+const Heading = ({ text }: { text: string }) => (
+  <p className=" text-xl font-bold">{text}</p>
+);

src/hooks/useQueryWithSuspense.ts

@@ -7,7 +7,7 @@ import {
   UseQueryResult,
 } from '@tanstack/react-query';
 
-export type useQueryOptionWithOutSuspense<
+export type UseQueryOptionWithoutSuspense<
   TQueryFnData = unknown,
   TError = unknown,
   TData = TQueryFnData,
@@ -22,7 +22,7 @@ const useQueryWithSuspense = <
 >(
   queryKey: TQueryKey,
   queryFunction?: QueryFunction<TQueryFnData, TQueryKey>,
-  queryOptions?: useQueryOptionWithOutSuspense<
+  queryOptions?: UseQueryOptionWithoutSuspense<
     TQueryFnData,
     TError,
     TData,

src/queries/group/key.ts

@@ -0,0 +1,12 @@
+import { APIGroupDetail } from '@/types/group';
+
+const bookGroupKeys = {
+  all: ['bookGroup'] as const,
+  details: () => [...bookGroupKeys.all, 'detail'] as const,
+  detail: (id: APIGroupDetail['bookGroupId']) =>
+    [...bookGroupKeys.details(), id] as const,
+  comments: (id: APIGroupDetail['bookGroupId']) =>
+    [...bookGroupKeys.details(), id, 'comments'] as const,
+};
+
+export default bookGroupKeys;

src/queries/group/useBookGroupCommentsQuery.ts

@@ -0,0 +1,40 @@
+import { useQuery } from '@tanstack/react-query';
+import { QueryOptions } from '@/types/query';
+import {
+  APIGroupCommentPagination,
+  APIGroupDetail,
+  BookGroupComment,
+} from '@/types/group';
+
+import GroupAPI from '@/apis/group';
+import bookGroupKeys from './key';
+
+const transformComments = ({ bookGroupComments }: APIGroupCommentPagination) =>
+  bookGroupComments.map<BookGroupComment>(comment => ({
+    id: comment.commentId,
+    writer: {
+      id: comment.userId,
+      profileImageSrc: comment.userProfileImage,
+      name: comment.nickname,
+    },
+    createdAt: comment.createdAt,
+    content: comment.contents,
+  }));
+
+const useBookGroupCommentsQuery = <TData = APIGroupCommentPagination>(
+  groupId: APIGroupDetail['bookGroupId'],
+  select?: QueryOptions<APIGroupCommentPagination, TData>['select']
+) =>
+  useQuery({
+    queryKey: bookGroupKeys.comments(groupId),
+    queryFn: () =>
+      GroupAPI.getGroupComments({ bookGroupId: groupId }).then(
+        ({ data }) => data
+      ),
+    select,
+  });
+
+export default useBookGroupCommentsQuery;
+
+export const useBookGroupComments = (groupId: APIGroupDetail['bookGroupId']) =>
+  useBookGroupCommentsQuery(groupId, transformComments);

src/queries/group/useBookGroupQuery.ts

@@ -0,0 +1,40 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { APIGroupDetail, BookGroupDetail } from '@/types/group';
+import { QueryOptions } from '@/types/query';
+
+import GroupAPI from '@/apis/group';
+import bookGroupKeys from './key';
+
+const transformBookGroupDetail = (data: APIGroupDetail) =>
+  ({
+    title: data.title,
+    description: data.introduce,
+    bookId: data.book.id,
+    owner: { isMe: data.isOwner, id: data.owner.id },
+    date: { start: data.startDate, end: data.endDate },
+    memberCount: { current: data.currentMemberCount, max: data.maxMemberCount },
+    isPublic: data.isPublic,
+    isMember: data.isGroupMember,
+  } as BookGroupDetail);
+
+export const useBookGroupQuery = <TData = APIGroupDetail>(
+  groupId: APIGroupDetail['bookGroupId'],
+  select: QueryOptions<APIGroupDetail, TData>['select']
+) =>
+  useQuery({
+    queryKey: bookGroupKeys.detail(groupId),
+    queryFn: () =>
+      GroupAPI.getGroupDetailInfo({ bookGroupId: groupId }).then(
+        ({ data }) => data
+      ),
+    select,
+  });
+
+export default useBookGroupQuery;
+
+export const useBookGroup = (groupId: APIGroupDetail['bookGroupId']) =>
+  useBookGroupQuery(groupId, transformBookGroupDetail);
+
+export const useBookGroupTitle = (groupId: APIGroupDetail['bookGroupId']) =>
+  useBookGroupQuery(groupId, data => data.title);

src/queries/user/key.ts

@@ -0,0 +1,10 @@
+import { APIUser } from '@/types/user';
+
+const userKeys = {
+  all: ['user'] as const,
+  details: () => [...userKeys.all, 'detail'] as const,
+  detail: (id: APIUser['userId']) => [...userKeys.details(), id] as const,
+  me: () => [...userKeys.details(), 'me'] as const,
+};
+
+export default userKeys;

src/queries/user/useMyProfileQuery.ts

@@ -1,12 +1,13 @@
 import userAPI from '@/apis/user';
 import type { APIUser } from '@/types/user';
 import useQueryWithSuspense, {
-  useQueryOptionWithOutSuspense,
+  UseQueryOptionWithoutSuspense,
 } from '@/hooks/useQueryWithSuspense';
+import userKeys from './key';
 
-const useMyProfileQuery = (options?: useQueryOptionWithOutSuspense<APIUser>) =>
+const useMyProfileQuery = (options?: UseQueryOptionWithoutSuspense<APIUser>) =>
   useQueryWithSuspense(
-    ['user', 'me'],
+    userKeys.me(),
     () => userAPI.getMyProfile().then(({ data }) => data),
     options
   );

src/queries/user/useUserProfileQuery.ts

@@ -1,15 +1,17 @@
-import userAPI from '@/apis/user';
+import type { APIUser, APIUserProfile } from '@/types/user';
 import useQueryWithSuspense, {
-  useQueryOptionWithOutSuspense,
+  UseQueryOptionWithoutSuspense,
 } from '@/hooks/useQueryWithSuspense';
-import type { APIUser } from '@/types/user';
+
+import userAPI from '@/apis/user';
+import userKeys from './key';
 
 const useUserProfileQuery = (
   userId: APIUser['userId'],
-  options?: useQueryOptionWithOutSuspense<APIUser>
+  options?: UseQueryOptionWithoutSuspense<APIUserProfile>
 ) =>
   useQueryWithSuspense(
-    ['user', String(userId)],
+    userKeys.detail(userId),
     () => userAPI.getUserProfile({ userId }).then(({ data }) => data),
     options
   );

src/types/group.ts

@@ -24,7 +24,7 @@ export interface APIGroup {
   hasJoinPasswd: boolean;
   isPublic: boolean;
   bookGroupId: number;
-  memberCount: number;
+  currentMemberCount: number;
   commentCount: number;
   book: APIGroupBook;
   owner: APIGroupOwner;
@@ -66,10 +66,36 @@ export interface APIGroupComment {
   userProfileImage: APIUser['profileImage'];
   createdAt: string;
   modifiedAt: string;
-  nickname: APIUser['nickname'];
+  nickname: string;
   writtenByCurrentUser: boolean;
 }
 
 export interface APIGroupCommentPagination extends Pagination {
+  bookGroup: { isPublic: APIGroup['isPublic'] };
   bookGroupComments: APIGroupComment[];
 }
+
+export type BookGroupDetail = {
+  title: APIGroup['title'];
+  description: APIGroup['introduce'];
+  bookId: APIBook['bookId'];
+  owner: { isMe: boolean; id: APIUser['userId'] };
+  date: { start: APIGroup['startDate']; end: APIGroup['endDate'] };
+  memberCount: {
+    current: APIGroup['currentMemberCount'];
+    max: APIGroup['maxMemberCount'];
+  };
+  isPublic: APIGroup['isPublic'];
+  isMember: APIGroupDetail['isGroupMember'];
+};
+
+export type BookGroupComment = {
+  id: APIGroup['bookGroupId'];
+  writer: {
+    id: APIUser['userId'];
+    profileImageSrc: APIUser['profileImage'];
+    name: APIUser['nickname'];
+  };
+  createdAt: APIGroupComment['createdAt'];
+  content: APIGroupComment['contents'];
+};

src/types/query.ts

@@ -1,3 +1,6 @@
 import { UseQueryOptions } from '@tanstack/react-query';
 
-export type QueryOptions<T> = UseQueryOptions<Awaited<T>, unknown, T, string[]>;
+export type QueryOptions<
+  TQueryFnData,
+  TQueryData = TQueryFnData
+> = UseQueryOptions<Awaited<TQueryFnData>, unknown, TQueryData, string[]>;