Merge pull request #102 from boostcampwm-2022/feat/#82-S

Feat/#82-S : 특정 워크스페이스 멤버, 회의록 API 연동 & 로그인 로직 리팩토링

Author: wcho21

client/src/App.tsx

@@ -1,42 +1,45 @@
-import { useState, useEffect } from 'react';
-import { Routes, Route, useNavigate, useLocation } from 'react-router-dom';
+import { useEffect, useState } 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, LoginPage, OAuthPage, WorkspacePage } from 'src/pages';
-import { User } from 'src/types/user';
+import { UserInfo } from 'src/types/user';
+
 import 'styles/reset.scss';
 
 function App() {
   const [isLoaded, setIsLoaded] = useState<boolean>(false);
-  const [user, setUser] = useState<User | null>(null);
+  const [userInfo, setUserInfo] = useState<UserInfo | null>(null);
 
   const navigate = useNavigate();
   const location = useLocation();
 
   const autoLogin = async () => {
-    const currentUser = await getAuth();
+    const { user, workspaces } = await getAuth();
 
     setIsLoaded(true);
 
-    if (!currentUser) {
-      if (location.pathname === '/workspace') navigate('/');
+    if (!user) {
+      if (location.pathname.match('/workspace')) navigate('/');
       return;
     }
 
-    setUser(currentUser);
-    navigate('/workspace');
+    setUserInfo({ user, workspaces });
+
+    const { id } = workspaces[0];
+    navigate(`/workspace/${id}`);
   };
 
   useEffect(() => {
     autoLogin();
   }, []);
 
   return isLoaded ? (
-    <UserContext.Provider value={{ user, setUser }}>
+    <UserContext.Provider value={{ userInfo, setUserInfo }}>
       <Routes>
         <Route path="/" element={<LoginPage />} />
         <Route path="/oauth" element={<OAuthPage />} />
-        <Route path="/workspace" element={<WorkspacePage />} />
+        <Route path="/workspace/:id" element={<WorkspacePage />} />
       </Routes>
     </UserContext.Provider>
   ) : (

client/src/apis/auth.ts

@@ -1,21 +1,20 @@
 import { PostLoginParams } from 'params/auth';
+import { GetUserInfo } from 'src/types/workspace';
 
 import { http } from './http';
-import { OK, CREATED } from './http-status';
+import { CREATED, OK } from './http-status';
 
-export const getAuth = async () => {
-  try {
-    const res = await http.get(`/auth`);
+export const getAuth = async (): Promise<GetUserInfo> => {
+  const res = await http.get(`/auth`);
 
-    if (res.status !== OK) return null;
+  if (res.status !== OK) throw new Error();
 
-    return res.data;
-  } catch (e) {
-    return null;
-  }
+  return res.data;
 };
 
-export const postAuthLogin = async ({ code }: PostLoginParams) => {
+export const postAuthLogin = async ({
+  code,
+}: PostLoginParams): Promise<GetUserInfo> => {
   const res = await http.post(`/auth/login`, { code });
 
   if (res.status !== CREATED) throw new Error();

client/src/apis/workspace.ts

@@ -1,8 +1,8 @@
-import { PostJoinParams, PostParams } from 'params/workspace';
-import { Workspace } from 'src/types/workspace';
+import { GetInfoParams, PostJoinParams, PostParams } from 'params/workspace';
+import { Workspace, WorkspaceInfo } from 'src/types/workspace';
 
 import { http } from './http';
-import { CREATED } from './http-status';
+import { CREATED, OK } from './http-status';
 
 export const postWorkspace = async ({
   name,
@@ -23,3 +23,13 @@ export const postWorkspaceJoin = async ({
 
   return res.data;
 };
+
+export const getWorkspaceInfo = async ({
+  id,
+}: GetInfoParams): Promise<WorkspaceInfo> => {
+  const res = await http.get(`/workspace/${id}`);
+
+  if (res.status !== OK) throw new Error();
+
+  return res.data;
+};

client/src/components/Workspace/index.tsx

@@ -1,8 +1,16 @@
 import Confbar from 'components/Confbar';
 import Mom from 'components/Mom';
 import Sidebar from 'components/Sidebar';
+import { TMom } from 'src/types/mom';
+import { TUser } from 'src/types/user';
 
-function Workspace() {
+interface WorkspaceProps {
+  name: string;
+  members: TUser[];
+  moms: TMom[];
+}
+
+function Workspace({ name, members, moms }: WorkspaceProps) {
   return (
     <>
       <Sidebar />

client/src/components/WorkspaceList/index.tsx

@@ -2,7 +2,6 @@ import Selector from 'common/Selector';
 import WorkspaceModal from 'components/WorkspaceModal';
 import WorkspaceThumbnaliList from 'components/WorkspaceThumbnailList';
 import { memo, useEffect, useState } from 'react';
-import { getWorkspaces } from 'src/apis/user';
 import { MENUS } from 'src/constants/workspace';
 import SetWorkspacesContext from 'src/contexts/set-workspaces';
 import { useUserContext } from 'src/hooks/useUserContext';
@@ -17,17 +16,11 @@ function WorkspaceList() {
 
   const [workspaces, setWorkspaces] = useState<Workspace[]>([]);
 
-  const updateWorkspaces = async (userId: number) => {
-    const { workspaces } = await getWorkspaces({ id: userId });
-    setWorkspaces(workspaces);
-  };
-
   useEffect(() => {
-    if (!userContext.user) {
+    if (!userContext.userInfo) {
       return;
     }
-
-    updateWorkspaces(userContext.user.id);
+    setWorkspaces(userContext.userInfo.workspaces);
   }, []);
 
   const [selectedMenu, setSelectedMenu] = useState<number>(0);

client/src/contexts/user.ts

@@ -1,9 +1,9 @@
 import { createContext, Dispatch, SetStateAction } from 'react';
-import { User } from 'src/types/user';
+import { UserInfo } from 'src/types/user';
 
 interface IUserContext {
-  user: User | null;
-  setUser: Dispatch<SetStateAction<User | null>>;
+  userInfo: UserInfo | null;
+  setUserInfo: Dispatch<SetStateAction<UserInfo | null>>;
 }
 
 const UserContext = createContext<IUserContext | null>(null);

client/src/pages/OAuth/index.tsx

@@ -20,9 +20,10 @@ function OAuthPage() {
     try {
       const authorizedUser = await postAuthLogin({ code });
 
-      userContext.setUser(authorizedUser);
+      userContext.setUserInfo(authorizedUser);
 
-      navigate('/workspace');
+      const id = authorizedUser.workspaces[0].id;
+      navigate(`/workspace/${id}`);
     } catch (e) {
       navigate('/');
     }

client/src/pages/Workspace/index.tsx

@@ -1,13 +1,37 @@
 import Workspace from 'components/Workspace';
 import WorkspaceList from 'components/WorkspaceList';
+import { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { getWorkspaceInfo } from 'src/apis/workspace';
+import { WorkspaceInfo } from 'src/types/workspace';
 
 import style from './style.module.scss';
 
 function WorkspacePage() {
+  const { id } = useParams();
+  const [workspace, setWorkspace] = useState<WorkspaceInfo | null>(null);
+
+  const loadWorkspaceInfo = async () => {
+    if (id) {
+      const workspaceInfo = await getWorkspaceInfo({ id });
+      setWorkspace(workspaceInfo);
+    }
+  };
+
+  useEffect(() => {
+    loadWorkspaceInfo();
+  }, []);
+
   return (
     <div className={style.container}>
       <WorkspaceList />
-      <Workspace />
+      {workspace && ( // TODO: 임시로 만들었어요
+        <Workspace
+          name={workspace.name}
+          members={workspace.members}
+          moms={workspace.moms}
+        />
+      )}
     </div>
   );
 }

client/src/types/mom.d.ts

@@ -0,0 +1,4 @@
+export type TMom = {
+  id: number;
+  name: string;
+};

client/src/types/user.d.ts

@@ -1,5 +1,12 @@
-export interface User {
+import { Workspace } from './workspace';
+
+export type TUser = {
   id: number;
   name: string;
   avatarUrl: string;
+};
+
+export interface UserInfo {
+  user: User;
+  workspaces: Workspace[];
 }