feat: 조회수 기능 추가

Co-authored-by: 이도현 <[email protected]>
woowacourse · Oct 4, 2023 · c5ba5b3 · c5ba5b3
1 parent 426afe0
commit c5ba5b3
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 1 deletion.
diff --git a/frontend/src/apis/articles.ts b/frontend/src/apis/articles.ts
@@ -26,3 +26,7 @@ export const requestGetFilteredArticle = (course: string, bookmark: boolean) =>
 export const requestPutArticleLike = ({ articleId, like }: ArticleLikePutRequest) => {
   return client.put(`/articles/${articleId}/like`, { like });
 };
+
+export const requestPostArticleView = (articleId: number) => {
+  return client.post(`/articles/${articleId}/views`);
+};
diff --git a/frontend/src/components/Article/Article.tsx b/frontend/src/components/Article/Article.tsx
@@ -3,6 +3,7 @@ import type { ArticleType } from '../../models/Article';
 import Scrap from '../Reaction/Scrap';
 import { useRef, useState } from 'react';
 import {
+  usePostArticleViewsMutation,
   usePutArticleBookmarkMutation,
   usePutArticleLikeMutation,
 } from '../../hooks/queries/article';
@@ -25,6 +26,7 @@ const Article = ({
   const [like, setLike] = useState(isLiked);
   const { mutate: putBookmark } = usePutArticleBookmarkMutation();
   const { mutate: putLike } = usePutArticleLikeMutation();
+  const { mutate: postViews } = usePostArticleViewsMutation();
 
   const toggleBookmark: React.MouseEventHandler<HTMLButtonElement> = (e) => {
     e.preventDefault();
@@ -49,7 +51,7 @@ const Article = ({
   };
 
   return (
-    <Styled.Container>
+    <Styled.Container onClick={() => postViews(id)}>
       <Styled.Anchor href={url} target="_blank" rel="noopener noreferrer">
         <Styled.ThumbnailWrapper>
           <Styled.Thumbnail src={imageUrl} />

diff --git a/frontend/src/hooks/queries/article.ts b/frontend/src/hooks/queries/article.ts
@@ -1,6 +1,7 @@
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 import {
   requestGetFilteredArticle,
+  requestPostArticleView,
   requestPostArticles,
   requestPutArticleBookmark,
   requestPutArticleLike,
@@ -48,3 +49,14 @@ export const usePutArticleLikeMutation = () => {
     onError: () => {},
   });
 };
+
+export const usePostArticleViewsMutation = () => {
+  return useMutation(requestPostArticleView, {
+    onSuccess: () => {
+      alert(SUCCESS_MESSAGE.CREATE_ARTICLE);
+    },
+    onError: () => {
+      alert(ERROR_MESSAGE.DEFAULT);
+    },
+  });
+};
diff --git a/frontend/src/mocks/handlers/articles.ts b/frontend/src/mocks/handlers/articles.ts
@@ -62,4 +62,8 @@ export const articlesHandler = [
 
     return res(ctx.status(200), ctx.json(filteredArticle));
   }),
+
+  rest.post(`${BASE_URL}/articles/:articleId/views`, (req, res, ctx) => {
+    return res(ctx.status(200));
+  }),
 ];