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

Author: juyeong-s

client/src/App.tsx

@@ -1,18 +1,27 @@
 import { useState, useEffect } from 'react';
-import { Routes, Route, useNavigate } from 'react-router-dom';
+import { Routes, Route, useNavigate, useLocation } from 'react-router-dom';
 import { getAuth } from 'src/apis/auth';
-import UserContext, { User } from 'src/contexts/user';
+import UserContext from 'src/contexts/user';
 import { LoadingPage, LoginPage, OAuthPage, WorkspacePage } from 'src/pages';
+import { User } from 'src/types/user';
 import 'styles/reset.scss';
 
 function App() {
+  const [isLoaded, setIsLoaded] = useState<boolean>(false);
   const [user, setUser] = useState<User | null>(null);
+
   const navigate = useNavigate();
+  const location = useLocation();
 
   const autoLogin = async () => {
     const currentUser = await getAuth();
 
-    if (!currentUser) return;
+    setIsLoaded(true);
+
+    if (!currentUser) {
+      if (location.pathname === '/workspace') navigate('/');
+      return;
+    }
 
     setUser(currentUser);
     navigate('/workspace');
@@ -22,7 +31,7 @@ function App() {
     autoLogin();
   }, []);
 
-  return user ? (
+  return isLoaded ? (
     <UserContext.Provider value={{ user, setUser }}>
       <Routes>
         <Route path="/" element={<LoginPage />} />

client/src/apis/auth.ts

@@ -4,11 +4,15 @@ import { http } from './http';
 import { OK, CREATED } from './http-status';
 
 export const getAuth = async () => {
-  const res = await http.get(`/auth`);
+  try {
+    const res = await http.get(`/auth`);
 
-  if (res.status !== OK) throw new Error();
+    if (res.status !== OK) return null;
 
-  return res.data;
+    return res.data;
+  } catch (e) {
+    return null;
+  }
 };
 
 export const postAuthLogin = async ({ code }: PostLoginParams) => {

client/src/apis/workspace.ts

@@ -0,0 +1,25 @@
+import { PostJoinParams, PostParams } from 'params/workspace';
+import { Workspace } from 'src/types/workspace';
+
+import { http } from './http';
+import { CREATED } from './http-status';
+
+export const postWorkspace = async ({
+  name,
+}: PostParams): Promise<Workspace> => {
+  const res = await http.post(`/workspace`, { name });
+
+  if (res.status !== CREATED) throw new Error();
+
+  return res.data;
+};
+
+export const postWorkspaceJoin = async ({
+  code,
+}: PostJoinParams): Promise<Workspace> => {
+  const res = await http.post(`/workspace/join`, { code });
+
+  if (res.status !== CREATED) throw new Error();
+
+  return res.data;
+};

client/src/components/SelectModal/index.tsx

@@ -1,22 +1,12 @@
 import { MdAdd } from '@react-icons/all-files/md/MdAdd';
-import React from 'react';
 
 import style from './style.module.scss';
 
 interface AddButtonProps {
-  onClick: () => void;
+  onClick: React.MouseEventHandler;
 }
-
 function AddButton({ onClick }: AddButtonProps) {
-  const onClickBtn = () => {
-    onClick();
-  };
-
-  return (
-    <button className={style.button} onClick={onClickBtn}>
-      <MdAdd color="white" size={20} />
-    </button>
-  );
+  return <MdAdd onClick={onClick} className={style.button} size={20} />;
 }
 
 export default AddButton;

client/src/components/SelectModal/style.module.scss

@@ -1,37 +1,62 @@
-import { memo, useContext, useEffect, useState } from 'react';
+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 UserContext from 'src/contexts/user';
+import { MENUS } from 'src/constants/workspace';
+import SetWorkspacesContext from 'src/contexts/set-workspaces';
+import { useUserContext } from 'src/hooks/useUserContext';
+import { SelectorStyle } from 'src/types/selector';
 import { Workspace } from 'src/types/workspace';
 
 import AddButton from './AddButton';
 import style from './style.module.scss';
-import WorkspaceThumbnaliList from './WorkspaceThumbnailList';
 
-interface WorkspaceListProps {
-  onSelectModalOpen: () => void;
-}
+function WorkspaceList() {
+  const userContext = useUserContext();
 
-function WorkspaceList({ onSelectModalOpen }: WorkspaceListProps) {
   const [workspaces, setWorkspaces] = useState<Workspace[]>([]);
-  const userContext = useContext(UserContext);
 
   const updateWorkspaces = async (userId: number) => {
     const { workspaces } = await getWorkspaces({ id: userId });
     setWorkspaces(workspaces);
   };
 
   useEffect(() => {
-    if (!userContext) {
+    if (!userContext.user) {
       return;
     }
+
     updateWorkspaces(userContext.user.id);
   }, []);
 
+  const [selectedMenu, setSelectedMenu] = useState<number>(0);
+
+  const onSelectMenu = (id: number) => {
+    setSelectedMenu(id);
+  };
+
+  const selectorStyle: SelectorStyle = {
+    menu: style.menu,
+    dimmed: style.dimmed,
+  };
+
   return (
-    <div className={style.workspace__container}>
-      <WorkspaceThumbnaliList workspaces={workspaces} />
-      <AddButton onClick={onSelectModalOpen} />
-    </div>
+    <SetWorkspacesContext.Provider value={setWorkspaces}>
+      <div className={style.workspace__container}>
+        <WorkspaceThumbnaliList workspaces={workspaces} />
+        <Selector
+          TriggerElement={AddButton}
+          options={MENUS}
+          onChange={onSelectMenu}
+          style={selectorStyle}
+        />
+        <WorkspaceModal
+          selectedMenu={selectedMenu}
+          setSelectedMenu={setSelectedMenu}
+        />
+      </div>
+    </SetWorkspacesContext.Provider>
   );
 }
 

client/src/components/WorkspaceList/AddButton.tsx

@@ -1,6 +1,8 @@
 @import 'styles/color.module.scss';
 
 .workspace__container {
+  position: relative;
+
   background-color: $primary-100;
   height: 100vh;
   width: 78px;
@@ -10,42 +12,52 @@
   align-items: center;
 }
 
-.thumbnail__list {
-  padding: 12px;
-}
-
-.thumbnail {
-  width: 45px;
-  height: 45px;
-
-  border: 1px solid $white;
-  border-radius: 50%;
+.button {
+  fill: $white;
   cursor: pointer;
-
-  & + & {
-    margin-top: 12px;
-  }
 }
 
-/** 
-나중에 img로 바뀌면 변경될 수 있어요.
-*/
-.thumbnail__content {
-  width: 100%;
-  height: 100%;
+.menu {
+  position: relative;
+  z-index: 1;
+  top: -8px;
+  left: 70px;
 
   display: flex;
-  justify-content: center;
+  flex-direction: column;
   align-items: center;
+  padding: 20px;
 
+  border-radius: 10px;
+  box-shadow: 1px 1px 3px $gray-300;
+  background-color: $primary-100;
+  font-size: 14px;
   color: $white;
-}
 
-.button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  li {
+    width: max-content;
+    padding: 8px 15px;
+    cursor: pointer;
 
-  padding: 12px;
-  cursor: pointer;
+    &:not(:last-of-type) {
+      border-bottom: 1px solid $gray-200;
+    }
+
+    &:first-child {
+      padding-top: 0;
+    }
+
+    &:last-child {
+      padding-bottom: 0;
+    }
+  }
+}
+
+.dimmed {
+  position: fixed;
+  z-index: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
 }

client/src/components/WorkspaceList/index.tsx

@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import { postWorkspace, postWorkspaceJoin } from 'src/apis/workspace';
+import { MENU } from 'src/constants/workspace';
+import { useSetWorkspaces } from 'src/hooks/useSetWorkspaces';
+
+import FormModal, { ModalContents } from './FormModal';
+
+interface CreateModalProps {
+  modalContents: ModalContents;
+  onClose: () => void;
+  setSelectedMenu: React.Dispatch<React.SetStateAction<number>>;
+  setCode: React.Dispatch<React.SetStateAction<string>>;
+}
+
+function CreateModal({
+  modalContents,
+  onClose,
+  setSelectedMenu,
+  setCode,
+}: CreateModalProps) {
+  const setWorkspaces = useSetWorkspaces();
+  const [inputValue, setInputValue] = useState<string>('');
+
+  const onSubmit = async () => {
+    const workspace = await postWorkspace({ name: inputValue });
+    const { code } = workspace;
+
+    await postWorkspaceJoin({ code });
+
+    setWorkspaces((workspaces) => [...workspaces, workspace]);
+    setCode(code);
+    setSelectedMenu(MENU.CREATE_SUCCESS);
+
+    return;
+  };
+
+  return (
+    <FormModal
+      {...modalContents}
+      onClose={onClose}
+      onSubmit={onSubmit}
+      inputValue={inputValue}
+      setInputValue={setInputValue}
+    />
+  );
+}
+
+export default CreateModal;