Merge branch 'dev' of https://github.com/boostcampwm-2022/web27-Wabinar into feat/#51-S

Author: juyeong-s

client/src/App.tsx

@@ -2,11 +2,11 @@ import { useState, useEffect } from 'react';
 import { Routes, Route, useNavigate } from 'react-router-dom';
 import { getAuth } from 'src/apis/auth';
 import UserContext, { User } from 'src/contexts/user';
-import { LoginPage, OAuthPage, WorkspacePage } from 'src/pages';
+import { LoadingPage, LoginPage, OAuthPage, WorkspacePage } from 'src/pages';
 import 'styles/reset.scss';
 
 function App() {
-  const [user, setUser] = useState<User>({ id: -1, name: '', avatarUrl: '' });
+  const [user, setUser] = useState<User | null>(null);
   const navigate = useNavigate();
 
   const autoLogin = async () => {
@@ -22,14 +22,16 @@ function App() {
     autoLogin();
   }, []);
 
-  return (
+  return user ? (
     <UserContext.Provider value={{ user, setUser }}>
       <Routes>
         <Route path="/" element={<LoginPage />} />
         <Route path="/oauth" element={<OAuthPage />} />
         <Route path="/workspace" element={<WorkspacePage />} />
       </Routes>
     </UserContext.Provider>
+  ) : (
+    <LoadingPage />
   );
 }
 

client/src/apis/auth.ts

@@ -1,3 +1,5 @@
+import { PostLoginParams } from 'params/auth';
+
 import { http } from './http';
 import { OK, CREATED } from './http-status';
 
@@ -9,7 +11,7 @@ export const getAuth = async () => {
   return res.data;
 };
 
-export const postAuthLogin = async (code: string) => {
+export const postAuthLogin = async ({ code }: PostLoginParams) => {
   const res = await http.post(`/auth/login`, { code });
 
   if (res.status !== CREATED) throw new Error();

client/src/apis/user.ts

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

client/src/components/WorkspaceList/index.tsx

@@ -1,5 +1,6 @@
-import { memo, useEffect, useState } from 'react';
+import { memo, useContext, useEffect, useState } from 'react';
 import { getWorkspaces } from 'src/apis/user';
+import UserContext from 'src/contexts/user';
 import { Workspace } from 'src/types/workspace';
 
 import AddButton from './AddButton';
@@ -12,18 +13,18 @@ interface WorkspaceListProps {
 
 function WorkspaceList({ onSelectModalOpen }: WorkspaceListProps) {
   const [workspaces, setWorkspaces] = useState<Workspace[]>([]);
-  /**
-   * 나중에 login하고 context생기면 바꿔 끼우면 돼요.
-   */
-  const userId = 63814960;
+  const userContext = useContext(UserContext);
 
   const updateWorkspaces = async (userId: number) => {
-    const { workspaces } = await getWorkspaces(userId);
+    const { workspaces } = await getWorkspaces({ id: userId });
     setWorkspaces(workspaces);
   };
 
   useEffect(() => {
-    updateWorkspaces(userId);
+    if (!userContext) {
+      return;
+    }
+    updateWorkspaces(userContext.user.id);
   }, []);
 
   return (

client/src/contexts/user.ts

@@ -7,8 +7,8 @@ export interface User {
 }
 
 interface IUserContext {
-  user?: User;
-  setUser: Dispatch<SetStateAction<User>>;
+  user: User;
+  setUser: Dispatch<SetStateAction<User | null>>;
 }
 
 const UserContext = createContext<IUserContext | null>(null);

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

client/src/pages/OAuth/index.tsx

@@ -1,31 +1,24 @@
-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();
   const navigate = useNavigate();
 
   const login = async (code: string) => {
     try {
-      const authorizedUser = await postAuthLogin(code);
+      const authorizedUser = await postAuthLogin({ code });
 
       userContext.setUser(authorizedUser);
 
@@ -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/Workspace/index.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import SelcetModal from 'src/components/SelectModal';
+import SelectModal from 'src/components/SelectModal';
 import WorkspaceList from 'src/components/WorkspaceList';
 import WorkspaceModal from 'src/components/WorkspaceModal';
 import { MENU, MENUS, MODAL_MENUS } from 'src/constants/workspace';
@@ -37,7 +37,7 @@ function WorkspacePage() {
     <div className={style.container}>
       <WorkspaceList onSelectModalOpen={() => setIsOpenSelectModal(true)} />
       {isOpenSelectModal && (
-        <SelcetModal
+        <SelectModal
           className={style['select-modal']}
           onClose={() => setIsOpenSelectModal(false)}
         >
@@ -48,7 +48,7 @@ function WorkspacePage() {
               </li>
             ))}
           </ul>
-        </SelcetModal>
+        </SelectModal>
       )}
 
       {MODAL_MENUS.map(({ id, props: { title, texts, btnText } }) => {

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';