카테고리별 게시글 조회 기능을 위해 getPostList 함수 수정 이후 usePostList 훅 추가 기능 구현

frontend/__test__/api/postList.test.ts

@@ -20,4 +20,15 @@ describe('전체 게시글 목록을 패치하는 로직이 의도한대로 작
 
  expect(data.pageNumber).toEqual(3);
  });
+
+ test('카테고리별 게시글 페이지의 정보를 불러온다.', async () => {
+ const data = await getPostList({
+ postStatus: 'closed',
+ postSorting: 'popular',
+ pageNumber: 3,
+ categoryId: 1,
+ });
+
+ expect(data.postList).toEqual(MOCK_POST_LIST[3]);
+ });
 });

frontend/__test__/hooks/query/usePostList.test.tsx

@@ -14,7 +14,7 @@ const wrapper = ({ children }: { children: ReactNode }) => (
 );
 
 describe('usePostList 훅이 의도한대로 작동하는 지 확인한다.', () => {
- test('게시글 목록을 불러온다.', async () => {
+ test('전체 게시글 목록을 불러온다.', async () => {
  const { result } = renderHook(
  () => usePostList({ postSorting: 'popular', postStatus: 'all' }),
  {
@@ -24,4 +24,15 @@ describe('usePostList 훅이 의도한대로 작동하는 지 확인한다.', ()
 
  await waitFor(() => expect(result.current.data?.pages[0].postList).toEqual(MOCK_POST_LIST[0]));
  });
+
+ test('카테고리별 게시글 목록을 불러온다.', async () => {
+ const { result } = renderHook(
+ () => usePostList({ postSorting: 'popular', postStatus: 'all', categoryId: 1 }),
+ {
+ wrapper,
+ }
+ );
+
+ await waitFor(() => expect(result.current.data?.pages[0].postList).toEqual(MOCK_POST_LIST[0]));
+ });
 });

frontend/src/api/wus/postList.ts

@@ -4,10 +4,11 @@ import type { PostSorting, PostStatus } from '@components/post/PostListPage/type
 
 import { getFetch } from '@utils/fetch';
 
-interface GetPostList {
+interface PostListByOption {
  postStatus: PostStatus;
  postSorting: PostSorting;
  pageNumber: number;
+ categoryId?: number;
 }
 
 const REQUEST_STATUS_OPTION: Record<PostStatus, string> = {
@@ -21,13 +22,27 @@ const REQUEST_SORTING_OPTION: Record<PostSorting, string> = {
  popular: 'HOT',
 };
 
-export const getPostList = async ({ postStatus, postSorting, pageNumber }: GetPostList) => {
+const getPostListUrl = ({ categoryId, postStatus, postSorting, pageNumber }: PostListByOption) => {
  const requestedStatus = REQUEST_STATUS_OPTION[postStatus];
  const requestedSorting = REQUEST_SORTING_OPTION[postSorting];
 
- const postList = await getFetch<PostInfo[]>(
- `/posts?status=${requestedStatus}&sorting=${requestedSorting}&pages=${pageNumber}`
- );
+ if (categoryId) {
+ return `/posts?categoryId=${categoryId}&status=${requestedStatus}&sorting=${requestedSorting}&pages=${pageNumber}`;
+ }
+
+ return `/posts?status=${requestedStatus}&sorting=${requestedSorting}&pages=${pageNumber}`;
+};
+
+export const getPostList = async ({
+ postStatus,
+ postSorting,
+ pageNumber,
+ categoryId,
+}: PostListByOption) => {
+ const postListUrl = getPostListUrl({ pageNumber, postSorting, postStatus, categoryId });
+
+ const postList = await getFetch<PostInfo[]>(postListUrl);
+
  return {
  pageNumber,
  postList,

frontend/src/components/post/PostList/index.tsx

@@ -10,6 +10,8 @@ import Skeleton from '@components/common/Skeleton';
 import { SORTING_OPTION, STATUS_OPTION } from '@components/post/PostListPage/constants';
 import type { PostSorting, PostStatus } from '@components/post/PostListPage/types';
 
+import { CATEGORY_ID } from '@constants/post';
+
 import * as S from './style';
 
 export default function PostList() {
@@ -23,9 +25,14 @@ export default function PostList() {
  const { selectedOption: selectedSortingOption, handleOptionChange: handleSortingOptionChange } =
  useSelect<PostSorting>('latest');
 
+ const URL = new URLSearchParams(window.location.search);
+
+ const categoryId = URL.get(CATEGORY_ID);
+
  const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = usePostList({
  postSorting: selectedSortingOption,
  postStatus: selectedStatusOption,
+ categoryId: Number(categoryId),
  });
 
  useEffect(() => {

frontend/src/constants/post.ts

@@ -1,3 +1,5 @@
 export const POST = {
  NOT_VOTE: 0,
 };
+
+export const CATEGORY_ID = 'categoryId';

frontend/src/hooks/query/usePostList.tsx

@@ -9,15 +9,17 @@ import { PostSorting, PostStatus } from '@components/post/PostListPage/types';
 interface UsePostList {
  postSorting: PostSorting;
  postStatus: PostStatus;
+ categoryId?: number;
 }
 
 const MAX_LIST_LENGTH = 10;
 
-export const usePostList = ({ postSorting, postStatus }: UsePostList) => {
+export const usePostList = ({ postSorting, postStatus, categoryId }: UsePostList) => {
  const { data, error, fetchNextPage, hasNextPage, isFetchingNextPage } =
  useInfiniteQuery<PostList>(
- ['posts', postSorting, postStatus],
- ({ pageParam = 0 }) => getPostList({ postSorting, postStatus, pageNumber: pageParam }),
+ ['posts', postSorting, postStatus, categoryId],
+ ({ pageParam = 0 }) =>
+ getPostList({ postSorting, postStatus, pageNumber: pageParam, categoryId }),
  {
  getNextPageParam: lastPage => {
  if (lastPage.postList.length !== MAX_LIST_LENGTH) return;

frontend/src/mocks/handlers.ts

@@ -1,7 +1,7 @@
 import { example } from './example/get';
-
 import { mockVoteResult } from './getVoteDetail';
 import { mockPost } from './post';
 import { mockVote } from './vote';
+import { mockPostList } from './wus/post';
 
-export const handlers = [...example, ...mockPost, ...mockVoteResult, ...mockVote];
+export const handlers = [...example, ...mockPost, ...mockVoteResult, ...mockVote, ...mockPostList];

frontend/src/mocks/wus/post.ts

@@ -2,7 +2,7 @@ import { rest } from 'msw';
 
 import { MOCK_POST_LIST } from '@mocks/mockData/postList';
 
-export const postListHandlers = [
+export const mockPostList = [
  rest.get('/posts', (req, res, ctx) => {
  const pages = Number(req.url.searchParams.get('pages'));