refactor: OAuth 페이지에서 로딩 페이지 분리

Co-authored-by: Seyoung Kim <[email protected]>

Author: dohun31

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,14 @@
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100vw;
+  height: 100vh;
+}
+.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';