피드 조회수 API 연결 (#1223)

* feat: update v2 api schema(type)

* feat: add PostViewsResponse

* feat: add views fetch function

* feat: add views mutation function

* feat: 조회수 API 연결

* fix: 모임 개설 퍼널 개선으로 인해 빠진 schema optional로 변경됨에 따라 nullish 처리

Author: constantly-dev

pages/post/index.tsx

@@ -7,7 +7,12 @@ import { api } from '@api/index';
 import { useMeetingQueryOption } from '@api/meeting/query';
 import { PostCommentWithMentionRequest } from '@api/mention';
 import { useMutationPostCommentWithMention } from '@api/mention/mutation';
-import { useDeletePostMutation, usePostLikeMutation, useUpdatePostLikeMutation } from '@api/post/mutation';
+import {
+  useDeletePostMutation,
+  usePostLikeMutation,
+  usePostViewsMutation,
+  useUpdatePostLikeMutation,
+} from '@api/post/mutation';
 import { useGetPostDetailQueryOption, useGetPostListInfiniteQuery } from '@api/post/query';
 import { useUserProfileQueryOption } from '@api/user/query';
 import LikeButton from '@common/button/LikeButton';
@@ -59,6 +64,8 @@ export default function PostPage() {
     toggleCommentLike(commentId);
   };
 
+  const { mutate: mutatePostViews, data: viewCount } = usePostViewsMutation(query.id as string);
+
   const { setTarget } = useIntersectionObserver({
     onIntersect: entries => {
       const entry = entries[0];
@@ -182,15 +189,22 @@ export default function PostPage() {
     if (allMeetingPosts?.length !== 5) fetchNextPage();
   }, [hasNextPage, allMeetingPosts, fetchNextPage]);
 
+  useEffect(() => {
+    if (query.id) {
+      mutatePostViews();
+    }
+  }, [query.id, mutatePostViews]);
+
   // TODO: loading 스켈레톤 UI가 있으면 좋을 듯
-  if (!post) return <Loader />;
+  if (!post || !viewCount) return <Loader />;
 
   const isMine = post.user.id === me?.id;
 
   return (
     <Container>
       <FeedPostViewer
         post={post}
+        viewCount={viewCount.viewCount}
         Actions={FeedActionsContainer({
           postId: post.id,
           isMine: isMine,

src/__generated__/schema2.d.ts

@@ -3,6 +3,7 @@ import {
   GetPostListResponse,
   PostPostLikeResponse,
   PostPostResponse,
+  PostViewsResponse,
   PutPostResponse,
 } from '@api/post/type';
 import { FormCreateType, FormEditType } from '@shared/feed/Modal/feedSchema';
@@ -42,3 +43,8 @@ export const deletePost = async (postId: number) => {
   const { data } = await api.delete(`/post/v2/${postId}`);
   return data;
 };
+
+export const postViews = async (postId: number) => {
+  const { data } = await api.post<PostViewsResponse>(`/post/v2/${postId}/views`);
+  return data;
+};

src/api/post/index.ts

@@ -2,7 +2,7 @@ import PostQueryKey from '@api/post/PostQueryKey';
 import { GetPostDetailResponse, GetPostListResponse } from '@api/post/type';
 import { InfiniteData, useMutation, useQueryClient } from '@tanstack/react-query';
 import { produce } from 'immer';
-import { deletePost, postPostLike } from '.';
+import { deletePost, postPostLike, postViews } from '.';
 
 export const useDeletePostMutation = () => {
   const queryClient = useQueryClient();
@@ -86,3 +86,9 @@ export const usePostLikeMutation = (queryId: string) => {
     },
   });
 };
+
+export const usePostViewsMutation = (queryId: string) => {
+  return useMutation({
+    mutationFn: () => postViews(+queryId),
+  });
+};

src/api/post/mutation.ts

@@ -14,3 +14,6 @@ export type PutPostResponse =
 
 export type PostPostLikeResponse =
   paths['/post/v2/{postId}/like']['post']['responses']['201']['content']['application/json;charset=UTF-8'];
+
+export type PostViewsResponse =
+  paths['/post/v2/{postId}/views']['post']['responses']['200']['content']['application/json;charset=UTF-8'];

src/api/post/type.ts

@@ -48,7 +48,7 @@ export const MeetingDetailList = (detailData: GetMeeting['response']) => [
   {
     key: '진행 방식',
     Title: () => <STitle>진행 방식</STitle>,
-    Content: () => <SDescription>{parseTextToLink(detailData?.processDesc)}</SDescription>,
+    Content: () => <SDescription>{parseTextToLink(detailData?.processDesc ?? '')}</SDescription>,
     isValid: detailData?.processDesc,
   },
   {
@@ -77,7 +77,7 @@ export const MeetingDetailList = (detailData: GetMeeting['response']) => [
   {
     key: '유의사항',
     Title: () => <STitle>유의 사항</STitle>,
-    Content: () => <SDescription>{parseTextToLink(detailData?.note)}</SDescription>,
+    Content: () => <SDescription>{parseTextToLink(detailData?.note ?? '')}</SDescription>,
     isValid: detailData?.note,
   },
 ];

src/domain/detail/Information/constant.tsx

@@ -23,6 +23,7 @@ dayjs.locale('ko');
 
 interface FeedPostViewerProps {
   post: paths['/post/v2/{postId}']['get']['responses']['200']['content']['application/json;charset=UTF-8'];
+  viewCount: number;
   Actions: React.ReactNode[];
   CommentLikeSection: React.ReactNode;
   CommentList: React.ReactNode;
@@ -33,6 +34,7 @@ interface FeedPostViewerProps {
 
 export default function FeedPostViewer({
   post,
+  viewCount,
   Actions,
   CommentLikeSection,
   CommentList,
@@ -115,7 +117,7 @@ export default function FeedPostViewer({
               )}
             </ImageSection>
           )}
-          <ViewCount>조회 {post.viewCount}회</ViewCount>
+          <ViewCount>조회 {viewCount}회</ViewCount>
         </ContentBody>
         <Link href={`/detail?id=${post.meeting.id}`} passHref legacyBehavior>
           <GroupButton>

src/shared/feed/FeedPostViewer/FeedPostViewer.tsx

@@ -24,8 +24,8 @@ const getIsGroupActive = (mstartDate: string, mendDate: string) => {
 };
 
 const MobileSizeCard: FC<MeetingData> = ({ id, title, category, mStartDate, mEndDate, status, imageURL }) => {
-  const isGroupActive = getIsGroupActive(mStartDate, mEndDate);
-  const newStatus = getNewStatus(status, mStartDate, isGroupActive);
+  const isGroupActive = getIsGroupActive(mStartDate ?? '', mEndDate ?? '');
+  const newStatus = getNewStatus(status, mStartDate ?? '', isGroupActive);
 
   return (
     <Link href={`/detail?id=${id}`}>