Feat: #24 React Portal Modal Layout UI 작업

GU-99 · Jun 21, 2024 · bf61c55 · bf61c55
1 parent 53dc5ff
commit bf61c55
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 30 deletions.
diff --git a/index.html b/index.html
@@ -8,6 +8,7 @@
   </head>
   <body>
     <div id="root"></div>
+    <div id="modal"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/src/components/common/.gitkeep b/src/components/common/.gitkeep
diff --git a/src/components/common/ModalPortal.tsx b/src/components/common/ModalPortal.tsx
@@ -0,0 +1,7 @@
+import type { PropsWithChildren } from 'react';
+import { createPortal } from 'react-dom';
+
+export default function ModalPortal({ children }: PropsWithChildren) {
+  const container = document.getElementById('modal')! as HTMLDivElement;
+  return createPortal(children, container);
+}
diff --git a/src/layouts/ModalLayout.tsx b/src/layouts/ModalLayout.tsx
@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+
+type ModalLayoutProps = {
+  onClose: () => void;
+  children?: React.ReactNode | undefined;
+};
+
+export default function ModalLayout({ onClose, children }: ModalLayoutProps) {
+  const handleKeyDownClose = (event: KeyboardEvent) => {
+    if (event.key.toLowerCase() === 'escape') onClose();
+  };
+
+  useEffect(() => {
+    globalThis.addEventListener('keydown', handleKeyDownClose);
+    return () => globalThis.removeEventListener('keydown', handleKeyDownClose);
+  }, []);
+
+  return (
+    <div className="absolute bottom-0 left-0 right-0 top-0 flex items-center justify-center bg-black/50" tabIndex={-1}>
+      <div className="h-4/5 max-h-375 min-w-375 overflow-auto bg-white p-20">{children}</div>
+    </div>
+  );
+}
diff --git a/src/layouts/page/ProjectLayout.tsx b/src/layouts/page/ProjectLayout.tsx
@@ -1,10 +1,13 @@
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { RiSettings5Fill } from 'react-icons/ri';
 import { NavLink, Outlet, useParams } from 'react-router-dom';
 
 import ListSidebar from '@components/sidebar/ListSidebar';
 import ListProject from '@components/sidebar/ListProject';
 
+import ModalPortal from '@components/common/ModalPortal';
+import ModalLayout from '@layouts/ModalLayout';
+
 const dummy = {
   teamName: '김찌와 소주',
   data: [
@@ -23,39 +26,54 @@ const dummy = {
 
 export default function ProjectLayout() {
   const { projectId } = useParams();
+  const [showStateModal, setShowStateModal] = useState(false);
   const target = useMemo(() => dummy.data.find((d) => d.id === projectId), [projectId]);
 
   return (
-    <section className="flex h-full p-15">
-      <ListSidebar label="team" title={dummy.teamName}>
-        <ListProject data={dummy.data} targetId={projectId} />
-      </ListSidebar>
-      <section className="flex w-2/3 flex-col border border-list bg-contents-box">
-        <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?.title}</span>
-          </div>
-          <div className="flex cursor-pointer items-center text-sm text-main">
-            <RiSettings5Fill /> Project Setting
+    <>
+      <section className="flex h-full p-15">
+        <ListSidebar label="team" title={dummy.teamName}>
+          <ListProject data={dummy.data} targetId={projectId} />
+        </ListSidebar>
+        <section className="flex w-2/3 flex-col border border-list bg-contents-box">
+          <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?.title}</span>
+            </div>
+            <div className="flex cursor-pointer items-center text-sm text-main">
+              <RiSettings5Fill /> Project Setting
+            </div>
+          </header>
+          <div className="grow p-10">
+            <div className="flex justify-between">
+              <ul className="flex border-b *:mr-15">
+                <li>
+                  <NavLink to="calendar" className={({ isActive }) => (isActive ? 'text-main' : 'text-emphasis')}>
+                    Calendar
+                  </NavLink>
+                </li>
+                <li>
+                  <NavLink to="kanban" className={({ isActive }) => (isActive ? 'text-main' : 'text-emphasis')}>
+                    Kanban
+                  </NavLink>
+                </li>
+              </ul>
+              <div className="text-main">
+                <button type="button" onClick={() => setShowStateModal(true)}>
+                  <small>+</small> New State
+                </button>
+              </div>
+            </div>
+            <Outlet />
           </div>
-        </header>
-        <div className="grow p-10">
-          <ul className="flex border-b *:mr-15">
-            <li>
-              <NavLink to="calendar" className={({ isActive }) => (isActive ? 'text-main' : 'text-emphasis')}>
-                Calendar
-              </NavLink>
-            </li>
-            <li>
-              <NavLink to="kanban" className={({ isActive }) => (isActive ? 'text-main' : 'text-emphasis')}>
-                Kanban
-              </NavLink>
-            </li>
-          </ul>
-          <Outlet />
-        </div>
+        </section>
       </section>
-    </section>
+      {showStateModal && (
+        <ModalPortal>
+          <ModalLayout onClose={() => setShowStateModal(false)} />
+        </ModalPortal>
+      )}
+    </>
   );
 }