Merge pull request #55 from boostcampwm-2022/fix/#50-B

Fix/#50-B: user 초기값이 없을 때 렌더링 되는 문제 해결

Author: dohun31

client/src/App.tsx

@@ -2,11 +2,11 @@ import { useState, useEffect } from 'react';
 import { Routes, Route, useNavigate } from 'react-router-dom';
 import { getAuth } from 'src/apis/auth';
 import UserContext, { User } from 'src/contexts/user';
-import { LoginPage, OAuthPage, WorkspacePage } from 'src/pages';
+import { LoadingPage, LoginPage, OAuthPage, WorkspacePage } from 'src/pages';
 import 'styles/reset.scss';
 
 function App() {
-  const [user, setUser] = useState<User>({ id: -1, name: '', avatarUrl: '' });
+  const [user, setUser] = useState<User | null>(null);
   const navigate = useNavigate();
 
   const autoLogin = async () => {
@@ -22,14 +22,16 @@ function App() {
     autoLogin();
   }, []);
 
-  return (
+  return user ? (
     <UserContext.Provider value={{ user, setUser }}>
       <Routes>
         <Route path="/" element={<LoginPage />} />
         <Route path="/oauth" element={<OAuthPage />} />
         <Route path="/workspace" element={<WorkspacePage />} />
       </Routes>
     </UserContext.Provider>
+  ) : (
+    <LoadingPage />
   );
 }
 

client/src/contexts/user.ts

@@ -7,8 +7,8 @@ export interface User {
 }
 
 interface IUserContext {
-  user?: User;
-  setUser: Dispatch<SetStateAction<User>>;
+  user: User;
+  setUser: Dispatch<SetStateAction<User | null>>;
 }
 
 const UserContext = createContext<IUserContext | null>(null);

client/src/pages/Loading/index.tsx

@@ -0,0 +1,14 @@
+import cx from 'classnames';
+import Loader from 'components/common/Loader';
+
+import style from './style.module.scss';
+
+function LoadingPage() {
+  return (
+    <div className={cx(style.container)}>
+      <Loader size={100} />
+    </div>
+  );
+}
+
+export default LoadingPage;

client/src/pages/Loading/style.module.scss

@@ -0,0 +1,7 @@
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100vw;
+  height: 100vh;
+}

client/src/pages/OAuth/index.tsx

@@ -1,23 +1,16 @@
-import cx from 'classnames';
-import Loader from 'components/common/Loader';
 import { useContext, useEffect } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { postAuthLogin } from 'src/apis/auth';
 import UserContext from 'src/contexts/user';
-
-import style from './style.module.scss';
+import LoadingPage from 'src/pages/Loading';
 
 function OAuthPage() {
   const userContext = useContext(UserContext);
 
   if (userContext === null) {
     console.log('유저 컨텍스트를 찾을 수 없습니다.');
 
-    return (
-      <div className={cx(style.container)}>
-        <Loader size={100} />
-      </div>
-    );
+    return <LoadingPage />;
   }
 
   const location = useLocation();
@@ -47,11 +40,7 @@ function OAuthPage() {
     login(code);
   }, []);
 
-  return (
-    <div className={cx(style.container)}>
-      <Loader size={100} />
-    </div>
-  );
+  return <LoadingPage />;
 }
 
 export default OAuthPage;

client/src/pages/index.ts

@@ -1,3 +1,4 @@
+export { default as LoadingPage } from './Loading';
 export { default as WorkspacePage } from './Workspace';
 export { default as LoginPage } from './Login';
 export { default as OAuthPage } from './OAuth';