Feat/#201-K: 가입된 워크스페이스 없어도 워크스페이스 페이지로 이동 (#204)

Author: se030

client/src/App.tsx

@@ -15,7 +15,8 @@ function App() {
   const location = useLocation();
 
   const autoLogin = async () => {
-    const { user, workspaces } = await getAuth();
+    const authorizedUser = await getAuth();
+    const { user, workspaces } = authorizedUser;
 
     setIsLoaded(true);
 
@@ -24,9 +25,16 @@ function App() {
       return;
     }
 
-    setUserInfo({ user, workspaces });
+    setUserInfo(authorizedUser);
+
+    if (!workspaces.length) {
+      navigate('/workspace');
+      return;
+    }
+
+    const defaultWorkspace = workspaces[0];
+    const { id } = defaultWorkspace;
 
-    const { id } = workspaces[0];
     navigate(`/workspace/${id}`);
   };
 
@@ -39,7 +47,7 @@ function App() {
       <Routes>
         <Route path="/" element={<LoginPage />} />
         <Route path="/oauth" element={<OAuthPage />} />
-        <Route path="/workspace/:id" element={<WorkspacePage />} />
+        <Route path="/workspace/*" element={<WorkspacePage />} />
       </Routes>
     </UserContext.Provider>
   ) : (

client/src/components/Workspace/index.tsx

@@ -1,40 +1,63 @@
 import Mom from 'components/Mom';
 import Sidebar from 'components/Sidebar';
-import { useEffect, useState } from 'react';
+import { useState, useEffect, useMemo } from 'react';
+import { useParams } from 'react-router-dom';
 import { getWorkspaceInfo } from 'src/apis/workspace';
+import ConfMediaBar from 'src/components/ConfMediaBar';
+import SOCKET_MESSAGE from 'src/constants/socket-message';
+import ConfContext from 'src/contexts/conf';
 import { SelectedMomContext } from 'src/contexts/selected-mom';
+import { SocketContext } from 'src/contexts/socket';
+import useSocket from 'src/hooks/useSocket';
 import { TMom } from 'src/types/mom';
 import { WorkspaceInfo } from 'src/types/workspace';
 
-interface WorkspaceProps {
-  workspaceId?: string;
-}
+function Workspace() {
+  const { id } = useParams();
+  const [isStart, setIsStart] = useState(false);
+
+  const momSocket = useMemo(() => useSocket(`/sc-workspace/${id}`), [id]);
+  const workspaceSocket = useMemo(() => useSocket(`/workspace/${id}`), [id]);
 
-function Workspace({ workspaceId }: WorkspaceProps) {
   const [workspace, setWorkspace] = useState<WorkspaceInfo | null>(null);
   const [selectedMom, setSelectedMom] = useState<TMom | null>(null);
 
-  useEffect(() => {
-    loadWorkspaceInfo();
-  }, [workspaceId]);
-
   const loadWorkspaceInfo = async () => {
-    if (workspaceId) {
-      const workspaceInfo = await getWorkspaceInfo({ id: workspaceId });
+    if (id) {
+      const workspaceInfo = await getWorkspaceInfo({ id });
 
       setWorkspace(workspaceInfo);
 
       if (!workspaceInfo.moms[0]) setSelectedMom(null);
     }
   };
 
+  useEffect(() => {
+    workspaceSocket.on(SOCKET_MESSAGE.WORKSPACE.START_MEETING, () => {
+      setIsStart(true);
+    });
+
+    workspaceSocket.on(SOCKET_MESSAGE.WORKSPACE.END_MEETING, () => {
+      setIsStart(false);
+    });
+  }, []);
+
+  useEffect(() => {
+    loadWorkspaceInfo();
+  }, [id]);
+
   return (
-    workspace && (
-      <SelectedMomContext.Provider value={{ selectedMom, setSelectedMom }}>
-        <Sidebar workspace={workspace} />
-        <Mom />
-      </SelectedMomContext.Provider>
-    )
+    <SocketContext.Provider value={{ momSocket, workspaceSocket }}>
+      <ConfContext.Provider value={{ isStart, setIsStart }}>
+        {workspace && (
+          <SelectedMomContext.Provider value={{ selectedMom, setSelectedMom }}>
+            <Sidebar workspace={workspace} />
+            <Mom />
+          </SelectedMomContext.Provider>
+        )}
+        {isStart && <ConfMediaBar />}
+      </ConfContext.Provider>
+    </SocketContext.Provider>
   );
 }
 

client/src/pages/OAuth/index.tsx

@@ -22,7 +22,16 @@ function OAuthPage() {
 
       userContext.setUserInfo(authorizedUser);
 
-      const id = authorizedUser.workspaces[0].id;
+      const { workspaces } = authorizedUser;
+
+      if (!workspaces.length) {
+        navigate('/workspace');
+        return;
+      }
+
+      const defaultWorkspace = workspaces[0];
+      const { id } = defaultWorkspace;
+
       navigate(`/workspace/${id}`);
     } catch (e) {
       navigate('/');

client/src/pages/Workspace/Layout.tsx

@@ -0,0 +1,15 @@
+import WorkspaceList from 'components/WorkspaceList';
+import { Outlet } from 'react-router-dom';
+
+import style from './style.module.scss';
+
+function Layout() {
+  return (
+    <div className={style.container}>
+      <WorkspaceList />
+      <Outlet />
+    </div>
+  );
+}
+
+export default Layout;

client/src/pages/Workspace/index.tsx

@@ -1,42 +1,16 @@
 import Workspace from 'components/Workspace';
-import WorkspaceList from 'components/WorkspaceList';
-import { useEffect, useMemo, useState } from 'react';
-import { useParams } from 'react-router-dom';
-import ConfMediaBar from 'src/components/ConfMediaBar';
-import SOCKET_MESSAGE from 'src/constants/socket-message';
-import ConfContext from 'src/contexts/conf';
-import { SocketContext } from 'src/contexts/socket';
-import useSocket from 'src/hooks/useSocket';
+import { Route, Routes } from 'react-router-dom';
 
-import style from './style.module.scss';
+import Layout from './Layout';
 
 function WorkspacePage() {
-  const { id } = useParams();
-  const [isStart, setIsStart] = useState(false);
-
-  const momSocket = useMemo(() => useSocket(`/sc-workspace/${id}`), [id]);
-  const workspaceSocket = useMemo(() => useSocket(`/workspace/${id}`), [id]);
-
-  useEffect(() => {
-    workspaceSocket.on(SOCKET_MESSAGE.WORKSPACE.START_MEETING, () => {
-      setIsStart(true);
-    });
-
-    workspaceSocket.on(SOCKET_MESSAGE.WORKSPACE.END_MEETING, () => {
-      setIsStart(false);
-    });
-  }, []);
-
   return (
-    <SocketContext.Provider value={{ momSocket, workspaceSocket }}>
-      <ConfContext.Provider value={{ isStart, setIsStart }}>
-        <div className={style.container}>
-          <WorkspaceList />
-          <Workspace workspaceId={id} />
-          {isStart && <ConfMediaBar />}
-        </div>
-      </ConfContext.Provider>
-    </SocketContext.Provider>
+    <Routes>
+      <Route path="/" element={<Layout />}>
+        <Route index element={<div>만들어질 예정인 예외 페이지</div>} />
+        <Route path="/:id" element={<Workspace />} />
+      </Route>
+    </Routes>
   );
 }