refactor: (#110) 카테고리별 게시글 URL 경로 및 API 연동 코드 추가

frontend/src/api/wus/postList.ts

@@ -13,6 +13,8 @@ interface PostListByOption {
  categoryId?: number;
 }
 
+const BASE_URL = process.env.VOTOGETHER_MOCKING_URL;
+
 export const makePostListUrl = ({
  categoryId,
  postStatus,
@@ -22,13 +24,14 @@ export const makePostListUrl = ({
  const requestedStatus = REQUEST_STATUS_OPTION[postStatus];
  const requestedSorting = REQUEST_SORTING_OPTION[postSorting];
 
+ const POST_BASE_URL = `${BASE_URL}/posts`;
  const OPTION_URL = `status=${requestedStatus}&sorting=${requestedSorting}&pages=${pageNumber}`;
 
  if (categoryId) {
- return `/posts?categoryId=${categoryId}&${OPTION_URL}`;
+ return `${POST_BASE_URL}?categoryId=${categoryId}&${OPTION_URL}`;
  }
 
- return `/posts?${OPTION_URL}`;
+ return `${POST_BASE_URL}?${OPTION_URL}`;
 };
 
 export const getPostList = async ({

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

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 
 import { usePostList } from '@hooks/query/usePostList';
 import { useIntersectionObserver } from '@hooks/useIntersectionObserver';
@@ -11,11 +11,10 @@ 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';
 import * as S from './style';
 
 export default function PostList() {
- const [searchParams] = useSearchParams();
+ const { categoryId } = useParams<{ categoryId?: string }>();
  const { targetRef, isIntersecting } = useIntersectionObserver({
  root: null,
  rootMargin: '',
@@ -26,8 +25,6 @@ export default function PostList() {
  const { selectedOption: selectedSortingOption, handleOptionChange: handleSortingOptionChange } =
  useSelect<PostSorting>('latest');
 
- const categoryId = searchParams.get(CATEGORY_ID);
-
  const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = usePostList({
  postSorting: selectedSortingOption,
  postStatus: selectedStatusOption,

frontend/src/routes/router.tsx

@@ -27,6 +27,7 @@ const router = createBrowserRouter([
  path: 'posts/result/:postId',
  element: <VoteStatisticsPage />,
  },
+ { path: 'posts/category/:categoryId', element: <Home /> },
  ],
  },
 ]);