게시물 개수 api 타입 수정

frontend/cypress/e2e/app.cy.ts

@@ -23,6 +23,8 @@ describe('러너 E2E 테스트', () => {
   });
 
   it('게시글을 검색한다.', () => {
+    cy.wait(1000);
+
     cy.contains('리뷰 완료').click();
     cy.wait(500);
 

frontend/src/apis/apis.ts

@@ -5,7 +5,7 @@ import {
   GetOtherSupporterPostCountResponse,
   GetRunnerPostResponse,
   getRunnerPostRequestParams,
-  GetPostCountResponse,
+  PostCount,
 } from '@/types/runnerPost';
 import { GetSearchTagResponse } from '@/types/tags';
 import {
@@ -109,7 +109,7 @@ export const getSupporterRank = () => {
 };
 
 export const getPostCount = () => {
-  return request.get<GetPostCountResponse>('/posts/runner/count', false);
+  return request.get<PostCount>('/posts/runner/count', false);
 };
 
 export const postRunnerPostCreation = (formData: CreateRunnerPostRequest) => {

frontend/src/components/RunnerPost/RunnerPostFilter/RunnerPostFilter.tsx

@@ -14,7 +14,6 @@ interface Props {
 
 const RunnerPostFilter = ({ reviewStatus, handleClickRadioButton }: Props) => {
   const { data: totalCount } = usePostCount();
-  const { isMobile } = useViewport();
 
   function transformPostCountToReviewStatusFilter(postCount: PostCount): { [key in ReviewStatusFilter]: number } {
     const all = Object.values(postCount).reduce((acc, currentValue) => acc + currentValue, 0);
@@ -28,10 +27,6 @@ const RunnerPostFilter = ({ reviewStatus, handleClickRadioButton }: Props) => {
     };
   }
 
-  if (!totalCount) {
-    return <div style={isMobile ? { height: '38px' } : { height: '46px' }}></div>;
-  }
-
   const reviewStatusCounts = transformPostCountToReviewStatusFilter(totalCount);
 
   return (
@@ -78,6 +73,18 @@ const appear = keyframes`
  }
 `;
 
+const pulseAnimation = keyframes`
+  0% {
+    background-color: #e0e0e0;
+  }
+  50% {
+    background-color: #f0f0f0;
+  }
+  100% {
+    background-color: #e0e0e0;
+  }
+`;
+
 const underLine = css`
   content: '';
   margin-top: 5px;

frontend/src/hooks/query/usePostCount.ts

@@ -1,12 +1,12 @@
 import { getPostCount } from '@/apis/apis';
 import { PostCount } from '@/types/runnerPost';
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
 
 export const usePostCount = () => {
-  const queryResult = useQuery<PostCount>({
+  const queryResult = useSuspenseQuery<PostCount>({
     queryKey: ['runnerPostCount'],
 
-    queryFn: () => getPostCount().then((res) => res.data),
+    queryFn: () => getPostCount().then((res) => res),
   });
 
   return {

frontend/src/mocks/data/postCount.json

@@ -1,8 +1,6 @@
 {
-  "data": {
-    "notStarted": 1,
-    "inProgress": 2,
-    "overdue": 3,
-    "done": 4
-  }
+  "notStarted": 1,
+  "inProgress": 2,
+  "overdue": 3,
+  "done": 4
 }

frontend/src/pages/MainPage.tsx

@@ -7,7 +7,7 @@ import { usePageRouter } from '@/hooks/usePageRouter';
 import { useRunnerPostList } from '@/hooks/query/useRunnerPostList';
 import useViewport from '@/hooks/useViewport';
 import { ReviewStatus } from '@/types/runnerPost';
-import { useContext, useEffect, useState } from 'react';
+import { useContext, useState } from 'react';
 import { styled } from 'styled-components';
 import { isLogin } from '@/apis/auth';
 import SideWidget from '@/components/common/SideWidget/SideWidget';
@@ -124,6 +124,16 @@ const MainPage = () => {
 
 export default MainPage;
 
+const FilterSkeleton = styled.div`
+  height: 104px;
+  width: 442px;
+
+  @media (max-width: 768px) {
+    height: 92px;
+    width: 340px;
+  }
+`;
+
 const S = {
   MainContainer: styled.div`
     min-width: 480px;

frontend/src/pages/RunnerPostCreatePage.tsx

@@ -278,6 +278,10 @@ const S = {
 
     &:first-child {
       margin-top: 60px;
+
+      @media (max-width: 768px) {
+        margin-top: 20px;
+      }
     }
   `,
 

frontend/src/types/runnerPost.ts

@@ -26,10 +26,6 @@ export interface PostCount {
   done: number;
 }
 
-export interface GetPostCountResponse {
-  data: PostCount;
-}
-
 export interface RunnerProfile {
   name: string;
   imageUrl: string;