더보기 연속 클릭 및 게시글 검색 API 통일 (#560)

* feat: 게시글 조회 기능 검색 API로 통일

* feat: 게시글 검색 msw 고도화

* refactor: 사용되지 않는 mockData 삭제

* refactor: 첫 게시글 목록 불러올 때 기본 state 사용

frontend/src/mocks/handlers.ts

@@ -12,19 +12,13 @@ import notStarted from './data/myPagePost/notStarted.json';
 import inProgress from './data/myPagePost/inProgress.json';
 import done from './data/myPagePost/done.json';
 import tagList from './data/tagList.json';
-import searchedPostList from './data/searchedPostList.json';
-import emptyPostList from './data/emptyRunnerPostList.json';
 import { BATON_BASE_URL } from '@/constants';
 
 export const handlers = [
   rest.post(`${BATON_BASE_URL}/posts/runner`, async (req, res, ctx) => {
     return res(ctx.delay(300), ctx.status(201));
   }),
 
-  rest.get(`${BATON_BASE_URL}/posts/runner`, async (req, res, ctx) => {
-    return res(ctx.delay(300), ctx.status(200), ctx.set('Content-Type', 'application/json'), ctx.json(runnerPostList));
-  }),
-
   rest.get(`${BATON_BASE_URL}/profile/me`, async (req, res, ctx) => {
     return res(ctx.delay(300), ctx.status(200), ctx.set('Content-Type', 'application/json'), ctx.json(headerProfile));
   }),
@@ -157,14 +151,38 @@ export const handlers = [
 
   rest.get(`${BATON_BASE_URL}/posts/runner/tags/search`, async (req, res, ctx) => {
     const name = req.url.searchParams.get('tagName');
+    const reviewStatus = req.url.searchParams.get('reviewStatus');
+    const page = req.url.searchParams.get('page');
+
+    if (!reviewStatus || !page)
+      return res(
+        ctx.status(400),
+        ctx.set('Content-Type', 'application/json'),
+        ctx.json({ errorCode: 'FE001', message: '잘못된 요청' }),
+      );
 
-    if (!name)
-      return res(ctx.delay(300), ctx.status(200), ctx.set('Content-Type', 'application/json'), ctx.json(emptyPostList));
+    const postList = structuredClone(runnerPostList);
+
+    if (!name || name.trim() === '') {
+      postList.data.forEach((post, idx) => {
+        post.runnerPostId = Date.now() + idx;
+        post.title = `${post.title} (${page})`;
+        post.reviewStatus = reviewStatus;
+      });
+
+      postList.pageInfo.currentPage = Number(page);
+
+      return res(ctx.delay(300), ctx.status(200), ctx.set('Content-Type', 'application/json'), ctx.json(postList));
+    }
 
-    const list = structuredClone(searchedPostList);
-    list.data[0].tags = [name];
+    postList.data.forEach((post, idx) => {
+      post.runnerPostId = Date.now() + idx;
+      post.title = `검색된 목록입니다 (${page})`;
+      post.tags = [name];
+      post.reviewStatus = reviewStatus!;
+    });
 
-    return res(ctx.delay(300), ctx.status(200), ctx.set('Content-Type', 'application/json'), ctx.json(list));
+    return res(ctx.delay(300), ctx.status(200), ctx.set('Content-Type', 'application/json'), ctx.json(postList));
   }),
 
   rest.get(`${BATON_BASE_URL}/posts/runner/:runnerPostId`, async (req, res, ctx) => {

frontend/src/pages/MainPage.tsx

@@ -30,11 +30,11 @@ const MainPage = () => {
   const [searchedTags, setSearchedTags] = useState<Tag[]>([]);
 
   const handleClickMoreButton = () => {
-    getRunnerPosts();
+    getNextPage();
   };
 
   useEffect(() => {
-    getRunnerPosts();
+    searchPosts(reviewStatus);
   }, []);
 
   const handleClickPostButton = () => {
@@ -48,22 +48,24 @@ const MainPage = () => {
     goToRunnerPostCreatePage();
   };
 
-  const getRunnerPosts = () => {
+  const getNextPage = () => {
     const params = new URLSearchParams([
       ['size', '10'],
-      ['page', page.toString()],
+      ['page', (page + 1).toString()],
       ['reviewStatus', reviewStatus],
     ]);
 
     if (tag) {
       params.set('tagName', tag);
     }
 
-    setPage(page + 1);
+    setIsLast(true);
 
-    getRequest(`/posts/runner?${params.toString()}`, async (response) => {
+    getRequest(`/posts/runner/tags/search?${params.toString()}`, async (response) => {
       const data: GetRunnerPostResponse = await response.json();
+
       setRunnerPostList([...runnerPostList, ...data.data]);
+      setPage(data.pageInfo.currentPage);
       setIsLast(data.pageInfo.isLast);
     });
   };
@@ -80,13 +82,14 @@ const MainPage = () => {
       setTag(tag);
     }
 
-    setPage(2);
     setIsLast(true);
     setRunnerPostList([]);
 
     getRequest(`/posts/runner/tags/search?${params.toString()}`, async (response) => {
       const data: GetRunnerPostResponse = await response.json();
+
       setRunnerPostList(() => [...data.data]);
+      setPage(data.pageInfo.currentPage);
       setIsLast(data.pageInfo.isLast);
     });
   };