Refactor/#205-K: 가입된 워크스페이스 정보 Context 통일 (#211)

* refactor: UserContext에서 workspaces 제거

* refactor: API 요청 메서드 타입 수정

* refactor: 로그인 로직에서 workspaces 제거

* refactor: Workspace 컴포넌트에서 유저가 가입한 워크스페이스 정보 요청

* refactor: WorkspacesContext에서 상태와 상태 변경 함수 제공하도록 변경

context, hook에서 WorkspacesContext로 네이밍 통일

* refactor: WorkspacesContext를 WorkspacePage로 이동

* fix: 변경 사항 기존 파일들에 반영

* feat: 참여한 워크스페이스 페이지로 navigate

Author: se030

client/src/App.tsx

@@ -3,20 +3,19 @@ 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 { UserInfo } from 'src/types/user';
+import { User } from 'src/types/user';
 
 import 'styles/reset.scss';
 
 function App() {
   const [isLoaded, setIsLoaded] = useState<boolean>(false);
-  const [userInfo, setUserInfo] = useState<UserInfo | null>(null);
+  const [user, setUser] = useState<User | null>(null);
 
   const navigate = useNavigate();
   const location = useLocation();
 
   const autoLogin = async () => {
-    const authorizedUser = await getAuth();
-    const { user, workspaces } = authorizedUser;
+    const { user } = await getAuth();
 
     setIsLoaded(true);
 
@@ -25,25 +24,16 @@ function App() {
       return;
     }
 
-    setUserInfo(authorizedUser);
-
-    if (!workspaces.length) {
-      navigate('/workspace');
-      return;
-    }
-
-    const defaultWorkspace = workspaces[0];
-    const { id } = defaultWorkspace;
-
-    navigate(`/workspace/${id}`);
+    setUser(user);
+    navigate('/workspace');
   };
 
   useEffect(() => {
     autoLogin();
   }, []);
 
   return isLoaded ? (
-    <UserContext.Provider value={{ userInfo, setUserInfo }}>
+    <UserContext.Provider value={{ user, setUser }}>
       <Routes>
         <Route path="/" element={<LoginPage />} />
         <Route path="/oauth" element={<OAuthPage />} />

client/src/apis/auth.ts

@@ -1,9 +1,16 @@
 import { PostLoginParams } from 'params/auth';
-import { GetUserInfo } from 'src/types/workspace';
+import { User } from 'src/types/user';
+import { Workspace } from 'src/types/workspace';
 
 import { http } from './http';
 import { CREATED, OK } from './http-status';
 
+// TODO: BE API 변경할 때 제거
+type GetUserInfo = {
+  user: User;
+  workspaces: Workspace[];
+};
+
 export const getAuth = async (): Promise<GetUserInfo> => {
   const res = await http.get(`/auth`);
 

client/src/apis/user.ts

@@ -1,9 +1,11 @@
-import { GetWorkspaceParams } from 'params/user';
+import { GetWorkspaceParams, GetWorkspacesResBody } from 'params/user';
 
 import { http } from './http';
 import { OK } from './http-status';
 
-export const getWorkspaces = async ({ id }: GetWorkspaceParams) => {
+export const getWorkspaces = async ({
+  id,
+}: GetWorkspaceParams): Promise<GetWorkspacesResBody> => {
   const res = await http.get(`/user/${id}/workspace`);
 
   if (res.status !== OK) throw new Error();

client/src/components/Sidebar/MemberList.tsx

@@ -1,10 +1,10 @@
 import { memo } from 'react';
-import { TUser } from 'src/types/user';
+import { User } from 'src/types/user';
 
 import style from './style.module.scss';
 
 interface MemberListProps {
-  members: TUser[];
+  members: User[];
 }
 
 function MemberList({ members }: MemberListProps) {

client/src/components/WorkspaceList/index.tsx

@@ -1,27 +1,16 @@
 import Selector from 'common/Selector';
 import WorkspaceModal from 'components/WorkspaceModal';
 import WorkspaceThumbnaliList from 'components/WorkspaceThumbnailList';
-import { memo, useEffect, useState } from 'react';
+import { memo, useState } from 'react';
 import { MENUS } from 'src/constants/workspace';
-import WorkspaceContext from 'src/contexts/workspaces';
-import { useUserContext } from 'src/hooks/useUserContext';
+import useWorkspacesContext from 'src/hooks/useWorkspacesContext';
 import { SelectorStyle } from 'src/types/selector';
-import { Workspace } from 'src/types/workspace';
 
 import AddButton from './AddButton';
 import style from './style.module.scss';
 
 function WorkspaceList() {
-  const userContext = useUserContext();
-
-  const [workspaces, setWorkspaces] = useState<Workspace[]>([]);
-
-  useEffect(() => {
-    if (!userContext.userInfo) {
-      return;
-    }
-    setWorkspaces(userContext.userInfo.workspaces);
-  }, []);
+  const { workspaces } = useWorkspacesContext();
 
   const [selectedMenu, setSelectedMenu] = useState<number>(0);
 
@@ -35,21 +24,19 @@ function WorkspaceList() {
   };
 
   return (
-    <WorkspaceContext.Provider value={{ setWorkspaces }}>
-      <div className={style['workspace-list-container']}>
-        <WorkspaceThumbnaliList workspaces={workspaces} />
-        <Selector
-          TriggerElement={AddButton}
-          options={MENUS}
-          onChange={onSelectMenu}
-          style={selectorStyle}
-        />
-        <WorkspaceModal
-          selectedMenu={selectedMenu}
-          setSelectedMenu={setSelectedMenu}
-        />
-      </div>
-    </WorkspaceContext.Provider>
+    <div className={style['workspace-list-container']}>
+      <WorkspaceThumbnaliList workspaces={workspaces} />
+      <Selector
+        TriggerElement={AddButton}
+        options={MENUS}
+        onChange={onSelectMenu}
+        style={selectorStyle}
+      />
+      <WorkspaceModal
+        selectedMenu={selectedMenu}
+        setSelectedMenu={setSelectedMenu}
+      />
+    </div>
   );
 }
 

client/src/components/WorkspaceModal/CreateModal.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { postWorkspace, postWorkspaceJoin } from 'src/apis/workspace';
 import { MENU } from 'src/constants/workspace';
-import useWorkspaceContext from 'src/hooks/useWorkspaceContext';
+import useWorkspacesContext from 'src/hooks/useWorkspacesContext';
 
 import FormModal, { ModalContents } from './FormModal';
 
@@ -18,7 +18,8 @@ function CreateModal({
   setSelectedMenu,
   setCode,
 }: CreateModalProps) {
-  const { setWorkspaces } = useWorkspaceContext();
+  const { setWorkspaces } = useWorkspacesContext();
+
   const [inputValue, setInputValue] = useState<string>('');
 
   const onSubmit = async () => {

client/src/components/WorkspaceModal/JoinModal.tsx

@@ -1,8 +1,9 @@
 // eslint-disable-next-line import/named
 import { AxiosError, AxiosResponse } from 'axios';
 import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { postWorkspaceJoin } from 'src/apis/workspace';
-import useWorkspaceContext from 'src/hooks/useWorkspaceContext';
+import useWorkspacesContext from 'src/hooks/useWorkspacesContext';
 
 import FormModal, { ModalContents } from './FormModal';
 
@@ -12,9 +13,11 @@ interface JoinModalProps {
 }
 
 function JoinModal({ modalContents, onClose }: JoinModalProps) {
+  const navigate = useNavigate();
+  const { setWorkspaces } = useWorkspacesContext();
+
   const [inputValue, setInputValue] = useState<string>('');
 
-  const { setWorkspaces } = useWorkspaceContext();
   const [errorMessage, setErrorMessage] = useState<string | undefined>(
     undefined,
   );
@@ -28,6 +31,7 @@ function JoinModal({ modalContents, onClose }: JoinModalProps) {
       });
 
       onClose();
+      navigate(`/workspace/${workspace.id}`);
     } catch (e) {
       const { data } = (e as AxiosError).response as AxiosResponse;
 

client/src/contexts/user.ts

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

client/src/contexts/workspaces.ts

@@ -2,9 +2,10 @@ import { createContext } from 'react';
 import { Workspace } from 'src/types/workspace';
 
 interface IWorkspceContext {
+  workspaces: Workspace[];
   setWorkspaces: React.Dispatch<React.SetStateAction<Workspace[]>>;
 }
 
-const WorkspaceContext = createContext<IWorkspceContext | null>(null);
+const WorkspacesContext = createContext<IWorkspceContext | null>(null);
 
-export default WorkspaceContext;
+export default WorkspacesContext;

client/src/hooks/useCRDT.tsx

@@ -17,8 +17,11 @@ interface RemoteOperation {
 }
 
 export function useCRDT() {
-  const userContext = useUserContext();
-  const clientId = userContext.userInfo?.user.id;
+  const { user } = useUserContext();
+
+  if (!user) throw new Error('인증되지 않은 유저에요 ^^');
+
+  const { id: clientId } = user;
 
   const crdtRef = useRef<CRDT>(new CRDT(clientId, new LinkedList()));