Merge pull request #115 from COW-dev/feat/#112

[FIX] 레이아웃 겹침 문제 수정

Author: ujinsim

src/shared/ui/Drawer/Drawer.tsx

@@ -33,7 +33,7 @@ export function Drawer({ isOpen, onClose, children }: Props) {
       <motion.div
         key="drawer-backdrop"
         onClick={onClose}
-        className="fixed inset-0 bg-black/50"
+        className="fixed inset-0 z-50 bg-black/50"
         initial={FADE_IN_ANIMATION.initial}
         animate={FADE_IN_ANIMATION.animate}
         exit={FADE_IN_ANIMATION.exit}

src/shared/ui/Header/Header.tsx

@@ -13,7 +13,7 @@ export function Header({ children, className }: Props) {
   return (
     <header
       className={cn(
-        'fixed top-0 left-0 z-10 w-full border-b border-gray-200 bg-white px-6 md:z-20',
+        'fixed top-0 left-0 z-10 w-full border-b border-gray-200 bg-white px-6',
         className
       )}
     >

src/shared/ui/Modal/Modal.tsx

@@ -46,7 +46,7 @@ export function Modal({ isOpen, closeModal, children, className }: Props) {
         animate={MODAL_MOTION.animate}
         exit={MODAL_MOTION.exit}
         transition={MODAL_MOTION.transition}
-        className={cn('fixed inset-0 z-30 flex w-full items-center justify-center', className)}
+        className={cn('fixed inset-0 z-50 flex w-full items-center justify-center', className)}
       >
         <div className="absolute inset-0 bg-black/50" onClick={handleOutsideClick} />
         <ModalContent>{children}</ModalContent>
@@ -62,7 +62,7 @@ export function ModalContent({ children }: { children: React.ReactNode }) {
       aria-modal="true"
       justifyContent="center"
       alignItems="center"
-      className="relative z-40 rounded-lg bg-white p-6"
+      className="relative z-50 rounded-lg bg-white p-6"
     >
       {children}
     </Flex>