feat: 워크스페이스 생성 시 해당 워크스페이스로 이동 (#217)

Author: se030

client/src/components/WorkspaceModal/CreateModal.tsx

@@ -2,21 +2,22 @@ import React, { useState } from 'react';
 import { postWorkspace, postWorkspaceJoin } from 'src/apis/workspace';
 import { MENU } from 'src/constants/workspace';
 import useWorkspacesContext from 'src/hooks/useWorkspacesContext';
+import { Workspace } from 'src/types/workspace';
 
 import FormModal, { ModalContents } from './FormModal';
 
 interface CreateModalProps {
   modalContents: ModalContents;
   onClose: () => void;
   setSelectedMenu: React.Dispatch<React.SetStateAction<number>>;
-  setCode: React.Dispatch<React.SetStateAction<string>>;
+  setWorkspace: React.Dispatch<React.SetStateAction<Workspace | undefined>>;
 }
 
 function CreateModal({
   modalContents,
   onClose,
   setSelectedMenu,
-  setCode,
+  setWorkspace,
 }: CreateModalProps) {
   const { setWorkspaces } = useWorkspacesContext();
 
@@ -29,7 +30,7 @@ function CreateModal({
     await postWorkspaceJoin({ code });
 
     setWorkspaces((workspaces) => [...workspaces, workspace]);
-    setCode(code);
+    setWorkspace(workspace);
     setSelectedMenu(MENU.CREATE_SUCCESS);
 
     return;

client/src/components/WorkspaceModal/CreateSuccessModal.tsx

@@ -1,18 +1,30 @@
+import { useNavigate } from 'react-router-dom';
+import { Workspace } from 'src/types/workspace';
+
 import FormModal, { ModalContents } from './FormModal';
 
 interface CreateSuccessModalProps {
   modalContents: ModalContents;
-  code: string;
+  workspace?: Workspace;
   onClose: () => void;
 }
 
 function CreateSuccessModal({
   modalContents,
-  code,
+  workspace,
   onClose,
 }: CreateSuccessModalProps) {
+  const navigate = useNavigate();
+
+  if (!workspace) {
+    throw new Error('일어날 수 없는 일이 일어났어요 ^^');
+  }
+
+  const { id, code } = workspace;
+
   const onSubmit = () => {
     onClose();
+    navigate(`/workspace/${id}`);
     return;
   };
 

client/src/components/WorkspaceModal/index.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { MENU, MODAL_MENUS } from 'src/constants/workspace';
+import { Workspace } from 'src/types/workspace';
 
 import CreateModal from './CreateModal';
 import CreateSuccessModal from './CreateSuccessModal';
@@ -14,7 +15,7 @@ function WorkspaceModal({
   selectedMenu,
   setSelectedMenu,
 }: WorkspaceModalProps) {
-  const [code, setCode] = useState<string>('');
+  const [workspace, setWorkspace] = useState<Workspace>();
 
   const modalContents = MODAL_MENUS[selectedMenu];
 
@@ -27,15 +28,15 @@ function WorkspaceModal({
           modalContents={modalContents}
           onClose={onClose}
           setSelectedMenu={setSelectedMenu}
-          setCode={setCode}
+          setWorkspace={setWorkspace}
         />
       );
     case MENU.CREATE_SUCCESS:
       return (
         <CreateSuccessModal
           modalContents={modalContents}
           onClose={onClose}
-          code={code}
+          workspace={workspace}
         />
       );
     case MENU.JOIN: