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

This reverts commit 617614f.

src/apis/user.tsx

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

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

@@ -1,52 +1,19 @@
 'use client';
 
-import TopNavigation from '@/ui/Base/TopNavigation';
-import BookGroupInfo from '@/v1/bookGroup/detail/BookGroupInfo';
-import { IconArrowLeft, IconHamburger, IconPost } from '@public/icons';
+import { Flex } from '@chakra-ui/react';
 
-import { useBookGroupTitle } from '@/queries/group/useBookGroupQuery';
-import CommentList from '@/v1/bookGroup/detail/CommentList';
+import GroupDetail from '@/ui/Group/GroupDetail';
 
-const DetailBookGroupPage = ({
+const GroupDetailPage = ({
   params: { groupId },
 }: {
   params: { groupId: number };
 }) => {
   return (
-    <>
-      <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>
-    </>
+    <Flex direction="column" justify="center">
+      <GroupDetail bookGroupId={Number(groupId)} />
+    </Flex>
   );
 };
 
-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>
-);
+export default GroupDetailPage;

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/useGroupCommentsQuery/index.tsx

@@ -0,0 +1,14 @@
+import GroupAPI from '@/apis/group';
+import { APIGroupDetail } from '@/types/group';
+import { useQuery } from '@tanstack/react-query';
+
+const useGroupCommentsQuery = ({
+  bookGroupId,
+}: {
+  bookGroupId: APIGroupDetail['bookGroupId'];
+}) =>
+  useQuery(['group', bookGroupId, 'comments'], () =>
+    GroupAPI.getGroupComments({ bookGroupId }).then(({ data }) => data)
+  );
+
+export default useGroupCommentsQuery;

src/queries/user/useMyProfileQuery.ts

@@ -1,13 +1,12 @@
 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(
-    userKeys.me(),
+    ['user', 'me'],
     () => userAPI.getMyProfile().then(({ data }) => data),
     options
   );

src/queries/user/useUserProfileQuery.ts

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

src/stories/bookGroup/detail/BookGroupInfo.stories.tsx

@@ -0,0 +1,40 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import BookGroupInfo from '@/v1/bookGroup/detail/BookGroupInfo';
+
+const meta: Meta<typeof BookGroupInfo> = {
+  title: 'bookgroup/detail/BookGroupInfo',
+  component: BookGroupInfo,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BookGroupInfo>;
+
+export const Default: Story = {
+  args: {
+    title: '프롱이 리팩터링 스터디',
+    description:
+      '제 1차 프롱이 기수연합 독서 스터디 입니다. 마틴 파울러의 저서 ‘리팩터링 2판’과 함께 진행합니다.',
+    book: {
+      title: '리팩터링 2판',
+      author: '마틴 파울러',
+      bookImageSrc: 'https://image.yes24.com/goods/89649360/XL',
+    },
+    date: {
+      start: '2023-10-31',
+      end: '2023-11-27',
+    },
+    memberCount: {
+      current: 3,
+      max: 20,
+    },
+    owner: {
+      isMe: true,
+      name: '소피아',
+      profileImageSrc: '/icons/logo.svg',
+    },
+    isPublic: false,
+  },
+};

src/stories/bookGroup/detail/CommentList.stories.tsx

@@ -0,0 +1,32 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import CommentList from '@/v1/bookGroup/detail/CommentList';
+
+const meta: Meta<typeof CommentList> = {
+  title: 'bookgroup/detail/CommentList',
+  component: CommentList,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CommentList>;
+
+export const Default: Story = {
+  args: {
+    comments: [
+      {
+        id: 1,
+        writer: { id: 10, name: '소피아', profileImageSrc: '/icons/logo.svg' },
+        createdAt: '2023.10.22',
+        content: '프론트엔드 개발자라면 꼭 읽어봐야 할 책이라고 생각해요.',
+      },
+      {
+        id: 2,
+        writer: { id: 21, name: '다독이', profileImageSrc: '' },
+        createdAt: '2023.10.18',
+        content: '이 책 덕분에 프로젝트 리팩터링에 도전할 수 있었어요.',
+      },
+    ],
+  },
+};

src/types/group.ts

@@ -24,7 +24,7 @@ export interface APIGroup {
   hasJoinPasswd: boolean;
   isPublic: boolean;
   bookGroupId: number;
-  currentMemberCount: number;
+  memberCount: number;
   commentCount: number;
   book: APIGroupBook;
   owner: APIGroupOwner;
@@ -66,36 +66,10 @@ export interface APIGroupComment {
   userProfileImage: APIUser['profileImage'];
   createdAt: string;
   modifiedAt: string;
-  nickname: string;
+  nickname: APIUser['nickname'];
   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,6 +1,3 @@
 import { UseQueryOptions } from '@tanstack/react-query';
 
-export type QueryOptions<
-  TQueryFnData,
-  TQueryData = TQueryFnData
-> = UseQueryOptions<Awaited<TQueryFnData>, unknown, TQueryData, string[]>;
+export type QueryOptions<T> = UseQueryOptions<Awaited<T>, unknown, T, string[]>;