Feature/#1566 비크루 권한 처리 및 조회수 API 추가

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`);
+};

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} />

frontend/src/contexts/UserProvider.js

@@ -10,7 +10,7 @@ const DEFAULT_USER = {
   userId: null,
   username: null,
   nickname: null,
-  role: null,
+  role: '',
   imageUrl: null,
   accessToken: null,
   isLoggedIn: false,

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,7 @@ export const usePutArticleLikeMutation = () => {
     onError: () => {},
   });
 };
+
+export const usePostArticleViewsMutation = () => {
+  return useMutation(requestPostArticleView);
+};

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));
+  }),
 ];

frontend/src/pages/ArticleListPage/index.tsx

@@ -30,7 +30,9 @@ const ArticleListPage = () => {
   const [checked, setChecked] = useState(false);
 
   const { user } = useContext(UserContext);
-  const { isLoggedIn } = user;
+  const { isLoggedIn, role } = user;
+
+  const authorized = role === 'CREW' && isLoggedIn;
 
   const { data: filteredArticles = [], refetch: getFilteredArticles } = useGetFilteredArticleQuery(
     selectedCourse.value,
@@ -66,7 +68,7 @@ const ArticleListPage = () => {
             <ArticleBookmarkFilter checked={checked} handleCheckBookmark={handleCheckBookmark} />
           )}
         </FilteringWrapper>
-        {isLoggedIn && (
+        {authorized && (
           <Button
             type="button"
             size="X_SMALL"