Feat: #62 teamid 예외처리 추가 및 ListSidebar button props 변경

GU-99 · Aug 8, 2024 · 6d3c1d4 · 6d3c1d4
1 parent 2755593
commit 6d3c1d4
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 22 deletions.
diff --git a/src/components/modal/team/CreateModalTeam.tsx b/src/components/modal/team/CreateModalTeam.tsx
@@ -1,7 +1,7 @@
 import { SubmitHandler } from 'react-hook-form';
 import ModalLayout from '@layouts/ModalLayout';
 import ModalPortal from '@components/modal/ModalPortal';
-import ModaFormButton from '@components/modal/ModaFormButton';
+import ModaFormButton from '@components/modal/ModalFormButton';
 import { Team } from '@/types/TeamType';
 import ModalTeamForm from './ModalTeamForm';
 
@@ -19,10 +19,8 @@ export default function CreateModalTeam({ onClose: handleClose }: CreateModalPro
   return (
     <ModalPortal>
       <ModalLayout onClose={handleClose}>
-        <div className="flex h-full flex-col items-center justify-center">
-          <ModalTeamForm formId="createTeamForm" onSubmit={handleSubmit} />
-          <ModaFormButton formId="createTeamForm" isCreate onClose={handleClose} />
-        </div>
+        <ModalTeamForm formId="createTeamForm" onSubmit={handleSubmit} />
+        <ModaFormButton formId="createTeamForm" isCreate onClose={handleClose} />
       </ModalLayout>
     </ModalPortal>
   );

diff --git a/src/components/sidebar/ListSidebar.tsx b/src/components/sidebar/ListSidebar.tsx
@@ -3,12 +3,14 @@ import type { ReactNode } from 'react';
 type ListSidebarProps = {
   label?: string;
   title: string;
-  children?: ReactNode | undefined;
-  button?: ReactNode;
+  children?: ReactNode;
+  isButton?: boolean;
+  buttonText?: string;
+  onButtonClick?: () => void;
 };
 
 // ToDo: 프로젝트 생성 등과 같은 버튼 기능 추가할 것
-export default function ListSidebar({ label, title, children, button }: ListSidebarProps) {
+export default function ListSidebar({ label, title, children, isButton, buttonText, onButtonClick }: ListSidebarProps) {
   return (
     <aside className="mr-10 flex w-1/3 flex-col border border-list bg-contents-box">
       <div className="flex min-h-30 items-center justify-between bg-sub px-10">
@@ -17,7 +19,15 @@ export default function ListSidebar({ label, title, children, button }: ListSide
           <span className="text-emphasis">{title}</span>
         </div>
         {/* 팀 생성 모달 */}
-        {button && <div>{button}</div>}
+        {isButton && (
+          <button
+            type="button"
+            className="rounded-md bg-main px-4 py-2 text-white outline-none hover:brightness-90"
+            onClick={onButtonClick}
+          >
+            {buttonText}
+          </button>
+        )}
       </div>
       {children}
     </aside>

diff --git a/src/layouts/page/TeamLayout.tsx b/src/layouts/page/TeamLayout.tsx
@@ -1,34 +1,28 @@
-import { Outlet, useLocation, useParams } from 'react-router-dom';
+import { Navigate, Outlet, useLocation, useParams } from 'react-router-dom';
 import ListSidebar from '@components/sidebar/ListSidebar';
 import ListTeam from '@components/sidebar/ListTeam';
 import CreateModalTeam from '@components/modal/team/CreateModalTeam';
 import useModal from '@hooks/useModal';
 import { TEAM_DUMMY } from '@mocks/mockData';
+import { useMemo } from 'react';
 import { Team } from '@/types/TeamType';
 
 export default function TeamLayout() {
   const { showModal: showTeamModal, openModal: openTeamModal, closeModal: closeTeamModal } = useModal();
   const location = useLocation();
   const { teamId } = useParams();
   const teamData: Team[] = TEAM_DUMMY;
+  const selectedTeam = useMemo(() => teamData.find((team) => team.teamId.toString() === teamId), [teamId, teamData]);
   const hasProjectRoute = location.pathname.split('/').includes('projects');
+
+  if (!selectedTeam && teamId) return <Navigate to="/error" replace />;
+
   if (hasProjectRoute) return <Outlet />;
 
   return (
     <>
       <section className="flex h-full p-15">
-        <ListSidebar
-          title="팀 목록"
-          button={
-            <button
-              type="button"
-              className="rounded-md bg-main px-4 py-2 text-white outline-none hover:brightness-90"
-              onClick={openTeamModal}
-            >
-              팀 생성
-            </button>
-          }
-        >
+        <ListSidebar title="팀 목록" isButton buttonText="팀 생성" onButtonClick={openTeamModal}>
           {/* ToDo: 사이드바 팀정보 추가 예정 */}
           <div />
         </ListSidebar>