refactor(member): add useBoards API hook (#86)

apps/member/src/api/board.ts

@@ -1,21 +1,23 @@
 import { BaseResponse, PaginationType } from '@type/api';
 import { server } from './server';
 import { END_POINT } from '@constants/api';
-import type { BoardItem } from '@type/board';
 import { createCommonPagination } from '@utils/api';
+import type { BoardItem, BoardType } from '@type/board';
 import type {
   CommunityCategoryKorType,
   CommunityPostDetailItem,
   CommunityWriteItem,
 } from '@type/community';
 import type { PostItem } from '@type/post';
 
-interface PatchBoardsArgs {
+interface PatchBoardsParams {
   id: string;
   body: CommunityWriteItem;
 }
 
-// 내가 작성한 커뮤니티 게시글 조회
+/**
+ * 내가 작성한 커뮤니티 게시글 조회
+ */
 export const getMyBoards = async (page: number, size: number) => {
   const params = { page, size };
   const { data } = await server.get<PaginationType<BoardItem>>({
@@ -24,8 +26,19 @@ export const getMyBoards = async (page: number, size: number) => {
 
   return data;
 };
+/**
+ * 커뮤니티 게시글 목록 조회
+ */
+export const getBoards = async (page: number, size: number) => {
+  const { data } = await server.get<PaginationType<BoardType>>({
+    url: createCommonPagination(END_POINT.BOARDS, { page, size }),
+  });
 
-// 커뮤니티 게시글 카테고리별 조회
+  return data;
+};
+/**
+ * 커뮤니티 게시글 카테고리별 조회
+ */
 export const getBoardsList = async (
   category: CommunityCategoryKorType,
   page: number,
@@ -38,8 +51,9 @@ export const getBoardsList = async (
 
   return data;
 };
-
-// 커뮤니티 게시글 작성
+/**
+ * 커뮤니티 게시글 작성
+ */
 export const postBoardsWrite = async (body: CommunityWriteItem) => {
   const { data } = await server.post<CommunityWriteItem, BaseResponse<number>>({
     url: END_POINT.BOARDS,
@@ -48,18 +62,20 @@ export const postBoardsWrite = async (body: CommunityWriteItem) => {
 
   return data;
 };
-
-// 커뮤니티 게시글 상세 조회
+/**
+ * 커뮤니티 게시글 상세 조회
+ */
 export const getBoardsDetail = async (id: string) => {
   const { data } = await server.get<BaseResponse<CommunityPostDetailItem>>({
     url: END_POINT.BOARDERS_ITEM(id),
   });
 
   return data;
 };
-
-// 커뮤니티 게시글 수정
-export const patchBoards = async ({ id, body }: PatchBoardsArgs) => {
+/**
+ * 커뮤니티 게시글 수정
+ */
+export const patchBoards = async ({ id, body }: PatchBoardsParams) => {
   const { data } = await server.patch<CommunityWriteItem, BaseResponse>({
     url: END_POINT.BOARDERS_ITEM(id),
     body,

apps/member/src/constants/key.ts

@@ -11,6 +11,7 @@ export const QUERY_KEY = {
   MY_COMMENTS: 'MyComments',
   MY_ACTIVITY: 'MyActivity',
   MY_BOOK: 'MyBook',
+  BOARDS: 'Boards',
   BORDER_NOTICE: 'BorderNotice',
   BORDER_FREE: 'BorderFREE',
   BORDER_QNA: 'BorderQNA',

apps/member/src/hooks/queries/index.ts

@@ -14,6 +14,7 @@ export * from './useBlog';
 export * from './useBoardModifyMutation';
 export * from './useBoardWriteMutation';
 export * from './useBoards';
+export * from './useBoardsList';
 export * from './useCommentList';
 export * from './useCommentWriteMutation';
 export * from './useHire';

apps/member/src/hooks/queries/useBoards.ts

@@ -1,47 +1,16 @@
-import { getMyHire } from '@api/hire';
-import { getNews } from '@api/news';
+import { getBoards } from '@api/board';
 import { QUERY_KEY } from '@constants/key';
 import { useSuspenseQuery } from '@tanstack/react-query';
-import { categoryToTitle } from '@utils/community';
-import type { CommunityCategoryType } from '@type/community';
-import { getBoardsList } from '@api/board';
+import type { PaginationPramsType } from '@type/api';
 
-export const useBoards = (
-  category: CommunityCategoryType,
-  page = 0,
-  size = 6,
-) => {
-  const queryOptions = {
-    notice: {
-      queryKey: QUERY_KEY.BORDER_NOTICE,
-      queryFn: () => getBoardsList(categoryToTitle('notice'), page, size),
-    },
-    free: {
-      queryKey: QUERY_KEY.BORDER_FREE,
-      queryFn: () => getBoardsList(categoryToTitle('free'), page, size),
-    },
-    qna: {
-      queryKey: QUERY_KEY.BORDER_QNA,
-      queryFn: () => getBoardsList(categoryToTitle('qna'), page, size),
-    },
-    graduated: {
-      queryKey: QUERY_KEY.BORDER_GRADUATED,
-      queryFn: () => getBoardsList(categoryToTitle('graduated'), page, size),
-    },
-    news: {
-      queryKey: QUERY_KEY.NEWS,
-      queryFn: () => getNews(page, size),
-    },
-    hire: {
-      queryKey: QUERY_KEY.HIRE,
-      queryFn: () => getMyHire(page, size),
-    },
-  };
-
-  const options = queryOptions[category];
+interface UseBoardsParams extends PaginationPramsType {}
 
+/**
+ * 커뮤니티 게시글 목록을 조회합니다.
+ */
+export const useBoards = ({ page = 0, size = 20 }: UseBoardsParams) => {
   return useSuspenseQuery({
-    queryKey: [options.queryKey, category, page, size],
-    queryFn: options.queryFn,
+    queryKey: [QUERY_KEY.BOARDS],
+    queryFn: () => getBoards(page, size),
   });
 };

apps/member/src/hooks/queries/useBoardsList.ts

@@ -0,0 +1,53 @@
+import { getMyHire } from '@api/hire';
+import { getNews } from '@api/news';
+import { QUERY_KEY } from '@constants/key';
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { categoryToTitle } from '@utils/community';
+import type { CommunityCategoryType } from '@type/community';
+import { getBoardsList } from '@api/board';
+import { PaginationPramsType } from '@type/api';
+
+interface UseBoardsListParams extends PaginationPramsType {
+  category: CommunityCategoryType;
+}
+
+/**
+ * 커뮤니티 게시글를 카테고리별로 조회합니다.
+ */
+export const useBoardsList = ({
+  category,
+  page = 0,
+  size = 6,
+}: UseBoardsListParams) => {
+  const queryOptions = {
+    notice: {
+      queryKey: QUERY_KEY.BORDER_NOTICE,
+      queryFn: () => getBoardsList(categoryToTitle('notice'), page, size),
+    },
+    free: {
+      queryKey: QUERY_KEY.BORDER_FREE,
+      queryFn: () => getBoardsList(categoryToTitle('free'), page, size),
+    },
+    qna: {
+      queryKey: QUERY_KEY.BORDER_QNA,
+      queryFn: () => getBoardsList(categoryToTitle('qna'), page, size),
+    },
+    graduated: {
+      queryKey: QUERY_KEY.BORDER_GRADUATED,
+      queryFn: () => getBoardsList(categoryToTitle('graduated'), page, size),
+    },
+    news: {
+      queryKey: QUERY_KEY.NEWS,
+      queryFn: () => getNews(page, size),
+    },
+    hire: {
+      queryKey: QUERY_KEY.HIRE,
+      queryFn: () => getMyHire(page, size),
+    },
+  }[category];
+
+  return useSuspenseQuery({
+    queryKey: [queryOptions.queryKey, category, page],
+    queryFn: queryOptions.queryFn,
+  });
+};

apps/member/src/pages/CommunityDetailPage/CommunityDetailPage.tsx

@@ -6,7 +6,7 @@ import Pagination from '@components/common/Pagination/Pagination';
 import { useState } from 'react';
 import { PATH_FINDER } from '@constants/path';
 import { toYYMMDD } from '@utils/date';
-import { useBoards } from '@hooks/queries/useBoards';
+import { useBoardsList } from '@hooks/queries/useBoardsList';
 import { categoryToTitle, isCommunityCategoryType } from '@utils/community';
 import { COMMUNITY_MESSAGE } from '@constants/message';
 import { Table } from '@clab/design-system';
@@ -27,10 +27,8 @@ const CommunityDetailPage = () => {
   });
 
   const { page, size } = pagination;
-
   const name = categoryToTitle(type);
-
-  const { data } = useBoards(type, page, size);
+  const { data } = useBoardsList({ category: type, page, size });
 
   const handlePageChange = (page: number) => {
     setPagination({ ...pagination, page: page - 1 });

apps/member/src/pages/MainPage/MainPage.tsx

@@ -4,21 +4,22 @@ import NewsCardSection from '@components/main/NewsCardSection/NewsCardSection';
 import CommunitySection from '@components/main/CommunitySection/CommunitySection';
 import BirthdayList from '@components/main/BirthdayList/BirthdayList';
 import { PATH } from '@constants/path';
-
-import { useNews } from '@hooks/queries/useNews';
-import { useBlog } from '@hooks/queries/useBlog';
-import { useHire } from '@hooks/queries/useHire';
-import { useBirthday } from '@hooks/queries/useBirthday';
-import { useActivityPicture } from '@hooks/queries/useActivityPicture';
-import { useSchedule } from '@hooks/queries/useSchedule';
-import { useBoards } from '@hooks/queries/useBoards';
+import {
+  useNews,
+  useBlog,
+  useSchedule,
+  useActivityPicture,
+  useBirthday,
+  useHire,
+} from '@hooks/queries';
+import { useBoardsList } from '@hooks/queries/useBoardsList';
 import MainAlert from '@components/main/MainAlert/MainAlert';
 
 const MainPage = () => {
   const { data: mainAlertData } = useSchedule({});
   const { data: mainBannerData } = useActivityPicture();
-  const { data: noticeData } = useBoards('notice');
-  const { data: QnAData } = useBoards('qna');
+  const { data: noticeData } = useBoardsList({ category: 'notice' });
+  const { data: QnAData } = useBoardsList({ category: 'qna' });
   const { data: birthdayData } = useBirthday();
   const { data: blogData } = useBlog();
   const { data: ITNewsData } = useNews();

apps/member/src/types/board.ts

@@ -1,9 +1,12 @@
 import type { CommunityCategoryKorType } from './community';
 
-export interface BoardItem {
+export interface BoardType {
   id: number;
   category: CommunityCategoryKorType;
   title: string;
+}
+
+export interface BoardItem extends BoardType {
   writer: string;
   createdAt: string;
 }