새로 고침 시 로그인이 풀리는 버그 수정과 그에 따른 hook과 컴포넌트 로직 수정 (after #69 merged)

src/App.tsx

@@ -10,12 +10,10 @@ import ServicePage from './pages/ServicePage';
 import SigninPage from './pages/SigninPage';
 import SignupPage from './pages/SignupPage';
 import PrivateRoute from './components/common/PrivateRoute';
-import { useUserStateValue } from './atoms/userState';
+import useAutoLogin from './hooks/useAutoLogin';
 
 const App: FC = () => {
-  const user = useUserStateValue();
-
-  const isAuthenticated = !!user;
+  const { isLoggedIn } = useAutoLogin();
 
   return (
     <ErrorBoundary>
@@ -25,19 +23,19 @@ const App: FC = () => {
           path={Uri.signup}
           exact
           component={SignupPage}
-          isAccessible={!isAuthenticated}
+          isAccessible={!isLoggedIn}
         />
         <PrivateRoute
           path={Uri.signin}
           exact
           component={SigninPage}
-          isAccessible={!isAuthenticated}
+          isAccessible={!isLoggedIn}
         />
         <PrivateRoute
           path={Uri.service}
           exact
           component={ServicePage}
-          isAccessible={isAuthenticated}
+          isAccessible={isLoggedIn}
         />
         <Route path={Uri.serviceEdit} exact component={ServiceEditPage} />
         <Route component={NotFoundPage} />

src/components/common/Navbar/index.tsx

@@ -1,21 +1,20 @@
 import React, { FC } from 'react';
 import { Link } from 'react-router-dom';
 
-import { useUserState } from '@/atoms/userState';
 import useConfirmModal from '@/hooks/useConfirmModal';
 import Uri from '@/constants/uri';
 import PrivateNavbar from '@/components/nav/PrivateNavbar';
 import PublicNavbar from '@/components/nav/PublicNavbar';
 import Logo from '@/components/common/Logo';
+import useAuth from '@/hooks/useAuth';
 
 import { navStyle } from './style';
 
 const Navbar: FC = () => {
-  const [user, setUser] = useUserState();
+  const { user, logout } = useAuth();
   const [open] = useConfirmModal();
 
   const logoutHandler = () => {
-    const logout = () => setUser(null);
     open({ message: 'Do you want to logout?', acceptHandler: logout });
   };
 

src/hooks/useAuth.ts

@@ -2,18 +2,19 @@ import { useState } from 'react';
 import { useHistory } from 'react-router-dom';
 
 import { authApi } from '@/apis';
-import { LoginRequestBody } from '@/types';
-import { useSetUserState } from '@/atoms/userState';
-import { NETWORK_ERROR, loginError, UNEXPECTED_ERROR } from '@/constants/error';
+import { useUserState } from '@/atoms/userState';
+import { NETWORK_ERROR, UNEXPECTED_ERROR, loginError } from '@/constants/error';
 import Uri from '@/constants/uri';
+import { LoginRequestBody, User } from '@/types';
 
 const useAuth = (): {
+  user: User;
   login: ({ userId, password }: LoginRequestBody) => Promise<void>;
   logout: () => void;
   isLoading: boolean;
   error: string;
 } => {
-  const setUserState = useSetUserState();
+  const [user, setUserState] = useUserState();
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const history = useHistory();
@@ -24,9 +25,13 @@ const useAuth = (): {
 
       await authApi.login({ userId, password });
 
-      // @TODO 로그인 성공 시 사용자 정보 가져오는 API 호출 후 상태로 저장
+      setUserState((prev) => ({ ...prev, userId }));
 
-      history.replace(Uri.home);
+      localStorage.setItem('userId', userId);
+
+      setIsLoading(false);
+
+      history.replace(Uri.service);
     } catch (e) {
       if (e.response) {
         if (loginError[e.response.status]) {
@@ -37,20 +42,25 @@ const useAuth = (): {
       } else {
         setError(NETWORK_ERROR);
       }
-      throw e;
-    } finally {
+
       setIsLoading(false);
+
+      throw e;
     }
   };
 
   const logout = () => {
     setUserState(null);
+
+    localStorage.removeItem('userId');
+
     authApi.logout().catch(() => {
       /* 로그아웃의 경우, 별도의 에러 처리를 하지 않음 */
     });
   };
 
   return {
+    user,
     login,
     logout,
     isLoading,

src/hooks/useAutoLogin.ts

@@ -1,35 +1,39 @@
 import { useEffect, useState } from 'react';
 
 import { authApi } from '@/apis';
-import { useUserStateValue } from '@/atoms/userState';
+import { useUserState } from '@/atoms/userState';
 
 const useAutoLogin = (): { isLoading: boolean; isLoggedIn: boolean } => {
-  const userState = useUserStateValue();
+  const [user, setUserState] = useUserState();
 
   const [isLoading, setIsLoading] = useState(false);
-  const [isLoggedIn, setIsLoggedIn] = useState(false);
 
   const autoLogin = async () => {
     try {
+      const userId = localStorage.getItem('userId');
+      if (!userId) return;
+
       setIsLoading(true);
 
       await authApi.refresh();
 
-      // @TODO refresh API 성공 시, 사용자 정보 가져오는 API를 호출하여 사용자 상태로 저장
-
-      setIsLoggedIn(true);
+      setUserState({ userId });
     } catch (e) {
-      setIsLoggedIn(false);
+      /* 
+        따로 에러 핸들링 해야할 것으로 보입니다.
+        refresh를 실패했다는 것은 곧 refresh token이 만료되었을 경우가 대부분일테니
+        이에 따라서 다시 로그인 해달라는 창을 보여주는 것이 어떨지.. toastify 처럼..
+      */
     } finally {
       setIsLoading(false);
     }
   };
 
   useEffect(() => {
     autoLogin();
-  }, [userState]);
+  }, []);
 
-  return { isLoading, isLoggedIn };
+  return { isLoading, isLoggedIn: user !== null };
 };
 
 export default useAutoLogin;

src/pages/SigninPage/index.test.tsx

@@ -4,13 +4,16 @@ import { MemoryRouter, Router } from 'react-router-dom';
 
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { RecoilRoot } from 'recoil';
 
 import SigninPage from '.';
 
 describe('SigninPage 테스트', () => {
   const signupPageContainer = (
     <MemoryRouter>
-      <SigninPage />
+      <RecoilRoot>
+        <SigninPage />
+      </RecoilRoot>
     </MemoryRouter>
   );
 
@@ -34,7 +37,9 @@ describe('SigninPage 테스트', () => {
 
     render(
       <Router history={history}>
-        <SigninPage />
+        <RecoilRoot>
+          <SigninPage />
+        </RecoilRoot>
       </Router>,
     );
 

src/pages/SigninPage/index.tsx

@@ -1,21 +1,19 @@
 import React, { FC, useCallback } from 'react';
-import { Link, useHistory } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 
-import { authApi } from '@/apis';
-import { useSetUserState } from '@/atoms/userState';
 import Jumbotron from '@/components/common/Jumbotron';
 import Logo from '@/components/common/Logo';
 import Shell from '@/components/shell/Shell';
 import { reject, renderProps, resolve } from '@/components/shell/helper';
 import { NETWORK_ERROR, UNEXPECTED_ERROR, loginError } from '@/constants/error';
 import Uri from '@/constants/uri';
+import useAuth from '@/hooks/useAuth';
 import { LoginRequestBody } from '@/types';
 
 import { footerStyle, headerStyle, layoutStyle } from './style';
 
 const SigninPage: FC = () => {
-  const setUserState = useSetUserState();
-  const { push } = useHistory();
+  const { login } = useAuth();
 
   const checkIsValueEmpty = useCallback(
     (option: {
@@ -37,11 +35,7 @@ const SigninPage: FC = () => {
     if (val !== 'y') return reject(2, 'Access denied');
 
     try {
-      await authApi.login(body);
-
-      setUserState((prev) => ({ ...prev, userId: body.userId }));
-
-      push(Uri.service);
+      await login(body);
 
       return resolve();
     } catch (error) {