Feat: #51 PageLayout의 Outlet Context 설정 & 커스텀훅 추가

src/hooks/useProjectContext.tsx

@@ -0,0 +1,8 @@
+import { useOutletContext } from 'react-router-dom';
+import { Project } from '@/types/ProjectType';
+
+export type ProjectContext = { project: Project };
+
+export default function useProjectContext() {
+  return useOutletContext<ProjectContext>();
+}

src/layouts/page/ProjectLayout.tsx

@@ -1,22 +1,25 @@
 import { useMemo } from 'react';
-import { NavLink, Outlet, useParams } from 'react-router-dom';
+import { Navigate, NavLink, Outlet, useParams } from 'react-router-dom';
 import useModal from '@hooks/useModal';
 import ListSidebar from '@components/sidebar/ListSidebar';
 import ListProject from '@components/sidebar/ListProject';
+import CreateModalTask from '@components/modal/task/CreateModalTask';
 import CreateModalProjectStatus from '@components/modal/project-status/CreateModalProjectStatus';
+import { ProjectContext } from '@hooks/useProjectContext';
 import { PROJECT_DUMMY } from '@mocks/mockData';
 import { RiSettings5Fill } from 'react-icons/ri';
-import CreateModalTask from '@/components/modal/task/CreateModalTask';
 
 export default function ProjectLayout() {
   const { projectId } = useParams();
   const { showModal: showTaskModal, openModal: openTaskModal, closeModal: closeTaskModal } = useModal();
   const { showModal: showStatusModal, openModal: openStatusModal, closeModal: closeStatusModal } = useModal();
-  const target = useMemo(
+  const project = useMemo(
     () => PROJECT_DUMMY.find((project) => project.projectId.toString() === projectId),
     [projectId],
   );
 
+  if (!project) return <Navigate to="/error" replace />;
+
   return (
     <>
       <section className="flex h-full p-15">
@@ -27,7 +30,7 @@ export default function ProjectLayout() {
           <header className="flex h-30 items-center justify-between border-b p-10">
             <div>
               <small className="mr-5 font-bold text-category">project</small>
-              <span className="text-emphasis">{target?.name}</span>
+              <span className="text-emphasis">{project?.name}</span>
             </div>
             <div className="flex cursor-pointer items-center text-sm text-main">
               <RiSettings5Fill /> Project Setting
@@ -56,7 +59,7 @@ export default function ProjectLayout() {
                 </button>
               </div>
             </div>
-            <Outlet />
+            <Outlet context={{ project } satisfies ProjectContext} />
           </div>
         </section>
       </section>