게시물 개수 표시 기능 수정 (#726)

* design: 헤더 높이에 따른 드롭다운 gap 수정

* feat: 변경된 게시물 개수 api 적용

frontend/src/apis/apis.ts

@@ -4,8 +4,8 @@ import {
   GetDetailedRunnerPostResponse,
   GetOtherSupporterPostCountResponse,
   GetRunnerPostResponse,
-  ReviewStatus,
   getRunnerPostRequestParams,
+  GetPostCountResponse,
 } from '@/types/runnerPost';
 import { GetSearchTagResponse } from '@/types/tags';
 import {
@@ -108,6 +108,10 @@ export const getSupporterRank = () => {
   return request.get<GetSupporterRankResponse>('/rank/supporter', false);
 };
 
+export const getPostCount = () => {
+  return request.get<GetPostCountResponse>('/posts/runner/count', false);
+};
+
 export const postRunnerPostCreation = (formData: CreateRunnerPostRequest) => {
   const body = JSON.stringify(formData);
   return request.post<void>(`/posts/runner`, body);

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

@@ -3,16 +3,36 @@ import { css, keyframes, styled } from 'styled-components';
 import { REVIEW_STATUS_FILTER_TEXT } from '@/constants';
 import Text from '@/components/common/Text/Text';
 import Flex from '@/components/common/Flex/Flex';
-import { ReviewStatusFilter } from '@/types/runnerPost';
-import useTotalCount from '@/hooks/query/useTotalCount';
+import { PostCount, ReviewStatusFilter } from '@/types/runnerPost';
+import { usePostCount } from '@/hooks/query/usePostCount';
+import useViewport from '@/hooks/useViewport';
 
 interface Props {
   reviewStatus: ReviewStatusFilter;
   handleClickRadioButton: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 const RunnerPostFilter = ({ reviewStatus, handleClickRadioButton }: Props) => {
-  const { totalCounts, isAllLoaded } = useTotalCount();
+  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);
+
+    return {
+      NOT_STARTED: postCount.notStarted,
+      IN_PROGRESS: postCount.inProgress,
+      OVERDUE: postCount.overdue,
+      DONE: postCount.done,
+      ALL: all,
+    };
+  }
+
+  if (!totalCount) {
+    return <div style={isMobile ? { height: '38px' } : { height: '46px' }}></div>;
+  }
+
+  const reviewStatusCounts = transformPostCountToReviewStatusFilter(totalCount);
 
   return (
     <S.FilterContainer>
@@ -34,7 +54,7 @@ const RunnerPostFilter = ({ reviewStatus, handleClickRadioButton }: Props) => {
                   <Flex align="end" gap={3}>
                     <Text color={isSelected ? 'red' : 'gray600'}>{text}</Text>
                     <Text color={isSelected ? 'red' : 'gray600'} typography="t8">
-                      ({isAllLoaded ? totalCounts[value as ReviewStatusFilter] : 0})
+                      ({reviewStatusCounts[value as ReviewStatusFilter]})
                     </Text>
                   </Flex>
                 </S.Label>

frontend/src/hooks/query/usePostCount.ts

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

frontend/src/layout/MyMenu.tsx

@@ -51,7 +51,7 @@ const MyMenu = () => {
       <S.NotificationContainer>
         <Dropdown
           onClose={handleCloseDropdown}
-          gapFromTrigger="52px"
+          gapFromTrigger="42px"
           isDropdownOpen={isNotificationDropdownOpen}
           trigger={
             <S.NotificationIcon
@@ -67,7 +67,7 @@ const MyMenu = () => {
       </S.NotificationContainer>
       <Dropdown
         onClose={handleCloseDropdown}
-        gapFromTrigger="57px"
+        gapFromTrigger="47px"
         isDropdownOpen={isProfileDropdownOpen}
         trigger={
           <S.AvatarContainer onClick={handleProfileDropdown}>

frontend/src/mocks/data/postCount.json

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

frontend/src/mocks/data/runnerPostList.json

@@ -103,7 +103,6 @@
   ],
   "pageInfo": {
     "isLast": false,
-    "nextCursor": 1,
-    "totalCount": 129
+    "nextCursor": 1
   }
 }

frontend/src/mocks/handlers.ts

@@ -12,6 +12,7 @@ import myPagePostList from './data/myPagePost/myPagePostList.json';
 import tagList from './data/tagList.json';
 import notificationList from './data/notification.json';
 import rank from './data/rank.json';
+import postCount from './data/postCount.json';
 import { BATON_BASE_URL } from '@/constants';
 import { getRestMinute } from '@/utils/jwt';
 
@@ -66,6 +67,10 @@ export const handlers = [
     return res(ctx.delay(300), ctx.status(201));
   }),
 
+  rest.get(`${BATON_BASE_URL}/posts/runner/count`, async (req, res, ctx) => {
+    return res(ctx.delay(300), ctx.status(200), ctx.json(postCount));
+  }),
+
   rest.get(`${BATON_BASE_URL}/profile/me`, async (req, res, ctx) => {
     const jwt = req.headers.get('Authorization');
 

frontend/src/types/runnerPost.ts

@@ -19,6 +19,17 @@ export interface RunnerPost {
   reviewStatus: ReviewStatus;
 }
 
+export interface PostCount {
+  notStarted: number;
+  inProgress: number;
+  overdue: number;
+  done: number;
+}
+
+export interface GetPostCountResponse {
+  data: PostCount;
+}
+
 export interface RunnerProfile {
   name: string;
   imageUrl: string;
@@ -63,7 +74,7 @@ export interface PageInfo {
 
 interface requestParams {
   tagName?: string;
-  reviewStatus: ReviewStatus | ReviewStatusFilter | null;
+  reviewStatus: ReviewStatus | null;
 }
 
 export interface getRunnerPostRequestParams extends pageParamsRequest, requestParams {}