diff --git a/frontend/src/apis/comment.ts b/frontend/src/apis/comment.ts index d0af89261..62852109c 100644 --- a/frontend/src/apis/comment.ts +++ b/frontend/src/apis/comment.ts @@ -2,6 +2,7 @@ import { createAxiosInstance } from '../utils/axiosInstance'; import { CommentListResponse, CommentRequest } from '../models/Comment'; const instanceWithoutToken = createAxiosInstance(); +const instanceWithToken = (accessToken) => createAxiosInstance({ accessToken }); export const getComments = async (studylogId: number): Promise => { const response = await instanceWithoutToken.get(`/studylogs/${studylogId}/comments`); @@ -12,25 +13,31 @@ export const getComments = async (studylogId: number): Promise instanceWithoutToken.post(`/studylogs/${studylogId}/comments`, body); + accessToken: string; +}) => instanceWithToken(accessToken).post(`/studylogs/${studylogId}/comments`, body); export const editComment = ({ studylogId, commentId, body, + accessToken, }: { studylogId: number; commentId: number; body: CommentRequest; -}) => instanceWithoutToken.put(`/studylogs/${studylogId}/comments/${commentId}`, body); + accessToken: string; +}) => instanceWithToken(accessToken).put(`/studylogs/${studylogId}/comments/${commentId}`, body); export const deleteComment = ({ studylogId, commentId, + accessToken, }: { studylogId: number; commentId: number; -}) => instanceWithoutToken.delete(`/studylogs/${studylogId}/comments/${commentId}`); + accessToken: string; +}) => instanceWithToken(accessToken).delete(`/studylogs/${studylogId}/comments/${commentId}`); diff --git a/frontend/src/contexts/UserProvider.js b/frontend/src/contexts/UserProvider.js index 84ad18af8..06e9fcfb3 100644 --- a/frontend/src/contexts/UserProvider.js +++ b/frontend/src/contexts/UserProvider.js @@ -57,6 +57,7 @@ const UserProvider = ({ children }) => { client.defaults.headers['Authorization'] = `Bearer ${accessToken}`; setState((prev) => ({ ...prev, accessToken })); }, + onLogout }); function onLogout() { diff --git a/frontend/src/hooks/queries/comment.ts b/frontend/src/hooks/queries/comment.ts index c8807f31c..5ada145a0 100644 --- a/frontend/src/hooks/queries/comment.ts +++ b/frontend/src/hooks/queries/comment.ts @@ -1,6 +1,7 @@ import { useMutation, useQuery, useQueryClient } from 'react-query'; import { createCommentRequest, deleteComment, editComment, getComments } from '../../apis/comment'; import { CommentRequest } from '../../models/Comment'; +import LOCAL_STORAGE_KEY from "../../constants/localStorage"; const QUERY_KEY = { comments: 'comments', @@ -12,7 +13,11 @@ export const useFetchComments = (studylogId: number) => export const useCreateComment = (studylogId: number) => { const queryClient = useQueryClient(); - return useMutation((body: CommentRequest) => createCommentRequest({ studylogId, body }), { + return useMutation((body: CommentRequest) => createCommentRequest({ + studylogId, + body, + accessToken: localStorage.getItem(LOCAL_STORAGE_KEY.ACCESS_TOKEN) as string + }), { onSuccess() { queryClient.invalidateQueries([QUERY_KEY.comments, studylogId]); }, @@ -24,7 +29,7 @@ export const useEditCommentMutation = (studylogId: number) => { return useMutation( ({ commentId, body }: { commentId: number; body: CommentRequest }) => - editComment({ studylogId, commentId, body }), + editComment({ studylogId, commentId, body, accessToken: localStorage.getItem(LOCAL_STORAGE_KEY.ACCESS_TOKEN) as string }), { onSuccess() { queryClient.invalidateQueries([QUERY_KEY.comments, studylogId]); @@ -36,7 +41,7 @@ export const useEditCommentMutation = (studylogId: number) => { export const useDeleteCommentMutation = (studylogId: number) => { const queryClient = useQueryClient(); - return useMutation((commentId: number) => deleteComment({ studylogId, commentId }), { + return useMutation((commentId: number) => deleteComment({ studylogId, commentId, accessToken: localStorage.getItem(LOCAL_STORAGE_KEY.ACCESS_TOKEN) as string }), { onSuccess() { queryClient.invalidateQueries([QUERY_KEY.comments, studylogId]); }, diff --git a/frontend/src/hooks/queries/studylog.ts b/frontend/src/hooks/queries/studylog.ts index 1c1dd6508..a3f100544 100644 --- a/frontend/src/hooks/queries/studylog.ts +++ b/frontend/src/hooks/queries/studylog.ts @@ -34,13 +34,16 @@ export const useGetRecentStudylogsQuery = () => { const { accessToken } = user; return useQuery([QUERY_KEY.recentStudylogs], async () => { - const response = await requestGetStudylogs({ - query: { type: 'searchParams', data: 'size=3' }, - accessToken, - }); - const { data } = await response.data; - - return data; + try { + const response = await requestGetStudylogs({ + query: {type: 'searchParams', data: 'size=3'}, + accessToken, + }); + const {data} = await response.data; + return data; + } catch (error) { + alert(ERROR_MESSAGE.DEFAULT); + } }); }; diff --git a/frontend/src/hooks/useFilterWithParams.ts b/frontend/src/hooks/useFilterWithParams.ts index 945484465..ab205691d 100644 --- a/frontend/src/hooks/useFilterWithParams.ts +++ b/frontend/src/hooks/useFilterWithParams.ts @@ -18,8 +18,8 @@ const useFilterWithParams = () => { ...memberFilter, ]); - const [postQueryParams, setPostQueryParams] = useState({ - page: query.page ? query.page : 1, + const [postQueryParams, setPostQueryParams] = useState<{ page?: number }>({ + page: query.page ? Number(query.page) : 1, }); const onSetPage = (page) => { diff --git a/frontend/src/hooks/useRequest.js b/frontend/src/hooks/useRequest.js index 4635b661c..85964992c 100644 --- a/frontend/src/hooks/useRequest.js +++ b/frontend/src/hooks/useRequest.js @@ -20,6 +20,16 @@ const useRequest = (defaultValue, callback, onSuccess, onError, onFinish) => { setResponse(responseData); onSuccess?.(responseData); } catch (error) { + + if (!response.isLoggedIn) { + setError(ERROR_CODE.EXPIRED_ACCESS_TOKEN); + onError?.({ + code: ERROR_CODE.EXPIRED_ACCESS_TOKEN, + message: ERROR_MESSAGE[ERROR_CODE.EXPIRED_ACCESS_TOKEN], + }); + return; + } + if (error instanceof TypeError) { setError(ERROR_CODE.SERVER_ERROR); onError?.({ diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index 577730b5d..3b602482a 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -11,11 +11,11 @@ import GlobalStyles from './GlobalStyles'; const queryClient = new QueryClient(); -if (process.env.NODE_ENV === 'development') { - const { worker } = require('./mocks/browser'); - - worker.start(); -} +// if (process.env.NODE_ENV === 'development') { +// const { worker } = require('./mocks/browser'); +// +// worker.start(); +// } ReactDOM.render(