hotfix: 로그인 세션이 만료되었을때 홈화면에 글 리스트가 나오지 않는 이슈 수정 (#714)

* hotfix: 로그인 세션이 만료되었을때 홈화면에 글 리스트가 나오지 않는 이슈 수정

* feat: unauthorization error 처리 로직을 useStudylog로 이동한다

* feat: unauthorization 에러시에 alert를 추가한다

Author: sunhpark42

frontend/src/hooks/useStudylog.js

@@ -1,4 +1,6 @@
-import { useState } from 'react';
+import { useContext, useState } from 'react';
+
+import { UserContext } from '../contexts/UserProvider';
 import { ERROR_MESSAGE } from '../constants/message';
 import {
   requestGetStudylog,
@@ -7,17 +9,26 @@ import {
   requestEditStudylog,
 } from '../service/requests';
 import useMutation from './useMutation';
+import ERROR_CODE from '../constants/errorCode';
 
 const useStudylog = (defaultValue) => {
   const [response, setResponse] = useState(defaultValue);
   const [error, setError] = useState('');
 
+  const { onLogout } = useContext(UserContext)
+
   const onSuccess = (data) => {
     setResponse(data);
+    setError('');
   };
 
   const onError = (error) => {
     console.error(error);
+
+    if (error.code === ERROR_CODE.EXPIRED_ACCESS_TOKEN) {
+      onLogout();
+    }
+
     setError(ERROR_MESSAGE[error.code] ?? ERROR_MESSAGE.DEFAULT);
   };
 

frontend/src/pages/MainPage/index.js

@@ -14,12 +14,18 @@ import { UserContext } from '../../contexts/UserProvider';
 const MainPage = () => {
   const { user } = useContext(UserContext);
   const { accessToken } = user;
-  const { response: recentStudylogs, getAllData: fetchRecentStudylogs } = useStudylog([]);
+  const { response: recentStudylogs, error: recentStudylogsError, getAllData: fetchRecentStudylogs } = useStudylog([]);
 
   useEffect(() => {
     fetchRecentStudylogs({ query: { type: 'searchParams', data: 'size=3' }, accessToken });
   }, [accessToken]);
 
+  useEffect(() => {
+    if (recentStudylogsError) {
+      alert(recentStudylogsError)
+    }
+  }, [recentStudylogsError])
+
   return (
     <>
       <BannerList bannerList={bannerList} />