diff --git a/apps/member/src/api/board.ts b/apps/member/src/api/board.ts index 80edae84..e509b7b5 100644 --- a/apps/member/src/api/board.ts +++ b/apps/member/src/api/board.ts @@ -1,8 +1,8 @@ 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, @@ -10,12 +10,14 @@ import type { } 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>({ @@ -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>({ + 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>({ url: END_POINT.BOARDS, @@ -48,8 +62,9 @@ export const postBoardsWrite = async (body: CommunityWriteItem) => { return data; }; - -// 커뮤니티 게시글 상세 조회 +/** + * 커뮤니티 게시글 상세 조회 + */ export const getBoardsDetail = async (id: string) => { const { data } = await server.get>({ url: END_POINT.BOARDERS_ITEM(id), @@ -57,9 +72,10 @@ export const getBoardsDetail = async (id: string) => { return data; }; - -// 커뮤니티 게시글 수정 -export const patchBoards = async ({ id, body }: PatchBoardsArgs) => { +/** + * 커뮤니티 게시글 수정 + */ +export const patchBoards = async ({ id, body }: PatchBoardsParams) => { const { data } = await server.patch({ url: END_POINT.BOARDERS_ITEM(id), body, diff --git a/apps/member/src/constants/key.ts b/apps/member/src/constants/key.ts index 05987dd0..56fbade4 100644 --- a/apps/member/src/constants/key.ts +++ b/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', diff --git a/apps/member/src/hooks/queries/index.ts b/apps/member/src/hooks/queries/index.ts index f1cde51c..91fea0b7 100644 --- a/apps/member/src/hooks/queries/index.ts +++ b/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'; diff --git a/apps/member/src/hooks/queries/useBoards.ts b/apps/member/src/hooks/queries/useBoards.ts index b6f9260e..331e0cd4 100644 --- a/apps/member/src/hooks/queries/useBoards.ts +++ b/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), }); }; diff --git a/apps/member/src/hooks/queries/useBoardsList.ts b/apps/member/src/hooks/queries/useBoardsList.ts new file mode 100644 index 00000000..6d59f5be --- /dev/null +++ b/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, + }); +}; diff --git a/apps/member/src/pages/CommunityDetailPage/CommunityDetailPage.tsx b/apps/member/src/pages/CommunityDetailPage/CommunityDetailPage.tsx index 50dcdf5f..a772ef8d 100644 --- a/apps/member/src/pages/CommunityDetailPage/CommunityDetailPage.tsx +++ b/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 }); diff --git a/apps/member/src/pages/MainPage/MainPage.tsx b/apps/member/src/pages/MainPage/MainPage.tsx index ef6642d9..d8051afc 100644 --- a/apps/member/src/pages/MainPage/MainPage.tsx +++ b/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(); diff --git a/apps/member/src/types/board.ts b/apps/member/src/types/board.ts index 39954d44..8c1ad4cd 100644 --- a/apps/member/src/types/board.ts +++ b/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; }