UI: #51 Stacking Context 수정 & UI 간격 수정

GU-99 · Jul 17, 2024 · 59c134e · 59c134e
1 parent a689c4b
commit 59c134e
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/src/layouts/ModalLayout.tsx b/src/layouts/ModalLayout.tsx
@@ -16,7 +16,10 @@ export default function ModalLayout({ onClose, children }: ModalLayoutProps) {
   }, []);
 
   return (
-    <div className="absolute bottom-0 left-0 right-0 top-0 flex items-center justify-center bg-black/50" tabIndex={-1}>
+    <div
+      className="absolute bottom-0 left-0 right-0 top-0 z-20 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
@@ -31,8 +31,8 @@ export default function ProjectLayout() {
               <RiSettings5Fill /> Project Setting
             </div>
           </header>
-          <div className="flex grow flex-col overflow-auto p-10">
-            <div className="flex items-center justify-between border-b">
+          <div className="flex grow flex-col overflow-auto p-10 pt-0">
+            <div className="sticky top-0 z-10 mb-10 flex min-w-375 items-center justify-between border-b bg-contents-box pt-10">
               <ul className="*:mr-15">
                 <li className="inline">
                   <NavLink to="calendar" className={({ isActive }) => (isActive ? 'text-main' : 'text-emphasis')}>