Refactor/#338-K: 초기 접속 시 페이지 이동 UX 개선 (#346)

* refactor: 자동 로그인 위치 App으로 이동

* feat: Workspace에 로딩 페이지 추가

* feat: /workspace/:id url로 접근한 경우 다른 경로로 navigate 하지 않도록 수정

Author: se030

client/src/App.tsx

@@ -1,5 +1,6 @@
-import { Suspense, useState } from 'react';
-import { Route, Routes } from 'react-router-dom';
+import { useState, useEffect } from 'react';
+import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
+import { getAuth } from 'src/apis/auth';
 import UserContext from 'src/contexts/user';
 import {
   LoadingPage,
@@ -14,18 +15,38 @@ import 'styles/reset.scss';
 
 function App() {
   const [user, setUser] = useState<User | null>(null);
+  const [isLoaded, setIsLoaded] = useState<boolean>(false);
 
-  return (
-    <Suspense fallback={<LoadingPage />}>
-      <UserContext.Provider value={{ user, setUser }}>
-        <Routes>
-          <Route path="/" element={<LoginPage />} />
-          <Route path="/oauth" element={<OAuthPage />} />
-          <Route path="/workspace/*" element={<WorkspacePage />} />
-          <Route path="/404" element={<NotFoundPage />} />
-        </Routes>
-      </UserContext.Provider>
-    </Suspense>
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const autoLogin = async () => {
+    const { user } = await getAuth();
+
+    setIsLoaded(true);
+
+    setUser(user);
+
+    if (user && !/^\/workspace(\/\d)?$/.test(location.pathname)) {
+      navigate('/workspace');
+    }
+  };
+
+  useEffect(() => {
+    autoLogin();
+  }, []);
+
+  return isLoaded ? (
+    <UserContext.Provider value={{ user, setUser }}>
+      <Routes>
+        <Route path="/" element={<LoginPage />} />
+        <Route path="/oauth" element={<OAuthPage />} />
+        <Route path="/workspace/*" element={<WorkspacePage />} />
+        <Route path="/404" element={<NotFoundPage />} />
+      </Routes>
+    </UserContext.Provider>
+  ) : (
+    <LoadingPage />
   );
 }
 

client/src/pages/Login/index.tsx

@@ -3,36 +3,12 @@ import BubblesIcon from 'common/Icon/Bubbles';
 import GithubIcon from 'common/Icon/Github';
 import LogoIcon from 'common/Icon/Logo';
 import env from 'config';
-import { useEffect } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
-import { getAuth } from 'src/apis/auth';
 import WabinarIcon from 'src/components/common/Icon/Wabinar';
-import useUserContext from 'src/hooks/context/useUserContext';
 
 import style from './style.module.scss';
 
 function LoginPage() {
   const GITHUB_AUTH_URL = `https://github.com/login/oauth/authorize?client_id=${env.GITHUB_CLIENT_ID}`;
-  const navigate = useNavigate();
-  const location = useLocation();
-
-  const { setUser } = useUserContext();
-
-  const autoLogin = async () => {
-    const { user } = await getAuth();
-
-    if (!user) {
-      if (location.pathname.match('/workspace')) navigate('/');
-      return;
-    }
-
-    setUser(user);
-    navigate('/workspace');
-  };
-
-  useEffect(() => {
-    autoLogin();
-  }, []);
 
   return (
     <div className={style.container}>

client/src/pages/Workspace/index.tsx

@@ -1,19 +1,23 @@
 import Workspace from 'components/Workspace';
 import { useEffect, useState } from 'react';
-import { Route, Routes, useNavigate } from 'react-router-dom';
+import { Route, Routes, useNavigate, useParams } from 'react-router-dom';
 import { getWorkspaces } from 'src/apis/user';
 import DefaultWorkspace from 'src/components/Workspace/DefaultWorkspace';
 import WorkspacesContext from 'src/contexts/workspaces';
 import useUserContext from 'src/hooks/context/useUserContext';
+import LoadingPage from 'src/pages/Loading';
 import { Workspace as TWorkspace } from 'src/types/workspace';
 
 import Layout from './Layout';
 
 function WorkspacePage() {
   const { user } = useUserContext();
+
+  const params = useParams();
   const navigate = useNavigate();
 
   const [workspaces, setWorkspaces] = useState<TWorkspace[]>([]);
+  const [isLoaded, setIsLoaded] = useState<boolean>(false);
 
   const loadWorkspaces = async () => {
     if (!user) {
@@ -27,13 +31,17 @@ function WorkspacePage() {
       id: userId,
     });
 
+    setIsLoaded(true);
+
     setWorkspaces(userWorkspaces);
 
     if (!userWorkspaces.length) {
       navigate('/workspace');
       return;
     }
 
+    if (params['*']?.length) return;
+
     const defaultWorkspace = userWorkspaces[0];
     const { id: workspaceId } = defaultWorkspace;
 
@@ -46,12 +54,16 @@ function WorkspacePage() {
 
   return (
     <WorkspacesContext.Provider value={{ workspaces, setWorkspaces }}>
-      <Routes>
-        <Route path="/" element={<Layout />}>
-          <Route index element={<DefaultWorkspace />} />
-          <Route path="/:id" element={<Workspace />} />
-        </Route>
-      </Routes>
+      {isLoaded ? (
+        <Routes>
+          <Route path="/" element={<Layout />}>
+            <Route index element={<DefaultWorkspace />} />
+            <Route path="/:id" element={<Workspace />} />
+          </Route>
+        </Routes>
+      ) : (
+        <LoadingPage />
+      )}
     </WorkspacesContext.Provider>
   );
 }