From 6d3c1d4ba16a856171d90f08be0ef2df64892749 Mon Sep 17 00:00:00 2001
From: seungchanwoo <tmdcksqkd123@naver.com>
Date: Thu, 8 Aug 2024 13:43:14 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=20#62=20teamid=20=EC=98=88=EC=99=B8?=
 =?UTF-8?q?=EC=B2=98=EB=A6=AC=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20ListSideb?=
 =?UTF-8?q?ar=20button=20props=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/modal/team/CreateModalTeam.tsx |  8 +++-----
 src/components/sidebar/ListSidebar.tsx        | 18 +++++++++++++----
 src/layouts/page/TeamLayout.tsx               | 20 +++++++------------
 3 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/src/components/modal/team/CreateModalTeam.tsx b/src/components/modal/team/CreateModalTeam.tsx
index 0e73fc47..5c7bfbc0 100644
--- 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
index 941033ae..bc84792b 100644
--- 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
index 50d029c9..70c0adc1 100644
--- a/src/layouts/page/TeamLayout.tsx
+++ b/src/layouts/page/TeamLayout.tsx
@@ -1,9 +1,10 @@
-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() {
@@ -11,24 +12,17 @@ export default function TeamLayout() {
   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>