💄 style : 전반적인 z-index 수정

dnd-side-project · Apr 17, 2024 · 59ff6d5 · 59ff6d5
1 parent 2bf1738
commit 59ff6d5
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 7 deletions.
diff --git a/src/components/Button/BottomFixedDiv.tsx b/src/components/Button/BottomFixedDiv.tsx
@@ -15,7 +15,7 @@ export function BottomDiv({ children }: StrictPropsWithChildren) {
 export function BottomFixedDiv({ children }: StrictPropsWithChildren) {
   return (
     <>
-      <div className={`fixed inset-x-0 bottom-0`}>
+      <div className={`fixed inset-x-0 bottom-0 z-30`}>
         <BottomDiv>{children}</BottomDiv>
       </div>
       <div className="h-100" />

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -18,7 +18,7 @@ export default function Header({
   return (
     <>
       <Spacing size={48} />
-      <div className="fixed inset-x-0 top-0 z-10 mx-auto max-w-440 bg-white">
+      <div className="fixed inset-x-0 top-0 z-30 mx-auto max-w-440 bg-white">
         <div className="flex h-48 items-center justify-between gap-12 px-4 pt-8">
           {close ? <CloseButton /> : <div className="w-4" />}
           <h4 className="flex flex-1">{title}</h4>

diff --git a/src/components/Modal/BottomSheet.tsx b/src/components/Modal/BottomSheet.tsx
@@ -11,13 +11,13 @@ export default function BottomSheet({ children }: StrictPropsWithChildren) {
   return (
     <>
       <div
-        className="fixed inset-x-0 inset-y-0 z-30 bg-dimmed opacity-30"
+        className="fixed inset-x-0 inset-y-0 z-modal bg-dimmed opacity-30"
         onClick={closeBottomSheet}
       />
       <AnimatedPortal
         motionProps={{ initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }}
       >
-        <div className="fixed inset-x-0 bottom-0 z-30 mx-auto max-w-440 rounded-t-16 bg-white">
+        <div className="fixed inset-x-0 bottom-0 z-modal mx-auto max-w-440 rounded-t-16 bg-white">
           <div className="flex justify-end px-8 pt-12">
             <IconButton icon={ICON.close.black} onClick={closeBottomSheet} />
           </div>

diff --git a/src/components/Modal/Popup.tsx b/src/components/Modal/Popup.tsx
@@ -10,9 +10,9 @@ interface PopupI extends PropsWithChildren {
 
 export default function Popup({ title, content, children, onClose }: PopupI) {
   return (
-    <div className="fixed inset-x-0 inset-y-0 z-30 flex items-center justify-center">
+    <div className="fixed inset-x-0 inset-y-0 z-modal flex items-center justify-center">
       <div className="fixed inset-x-0 inset-y-0 bg-dimmed opacity-30" onClick={onClose} />
-      <div className="z-30 w-300 rounded-16 bg-white p-16 text-center">
+      <div className="z-modal w-300 rounded-16 bg-white p-16 text-center">
         {(title || content) && (
           <div className="mb-16 py-16">
             <h4 className="mb-8">{title}</h4>

diff --git a/src/components/Modal/PoseImage.tsx b/src/components/Modal/PoseImage.tsx
@@ -12,7 +12,7 @@ export default function PoseImage({ src, responsive = false, onLoad }: DetailedI
     <>
       {isModalShow && (
         <div
-          className="fixed inset-x-0 inset-y-0 z-30 flex items-center justify-center"
+          className="fixed inset-x-0 inset-y-0 z-modal flex items-center justify-center"
           onClick={() => setIsModalShow(false)}
         >
           <div className="fixed inset-x-0 inset-y-0 bg-dimmed opacity-70" />