fix: drawer body scroll 되는 문제 해결

- drawer style fixed로 수정

src/hooks/useBodyScrollLock.ts

@@ -0,0 +1,13 @@
+import { useEffect } from 'react';
+
+export function useBodyScrollLock({ enabled = true }: { enabled?: boolean }) {
+  useEffect(() => {
+    if (enabled) {
+      document.body.style.overflow = 'hidden';
+    }
+
+    return () => {
+      document.body.style.removeProperty('overflow');
+    };
+  }, [enabled]);
+}

src/v1/base/Drawer.tsx

@@ -2,6 +2,7 @@ import { createContext, PropsWithChildren, ReactNode, useContext } from 'react';
 
 import { IconClose } from '@public/icons';
 import Portal from './Portal';
+import { useBodyScrollLock } from '@/hooks/useBodyScrollLock';
 
 interface DrawerProps {
   isOpen: boolean;
@@ -18,25 +19,28 @@ const Drawer = ({
   onClose,
   children,
 }: PropsWithChildren<DrawerProps>) => {
+  useBodyScrollLock({ enabled: isOpen });
+
   return (
     <DrawerContext.Provider value={{ isOpen, onClose }}>
-      <Portal id="drawer">
+      <Portal id="drawer-root">
         <div
-          className={`absolute inset-0 z-10 transform overflow-hidden ease-in-out ${
+          className={`fixed inset-0 z-10 flex w-screen transform justify-center overflow-hidden ease-in-out ${
             isOpen
               ? 'translate-x-0 scale-x-100 opacity-100 transition-opacity duration-500'
               : 'translate-x-full scale-x-0 opacity-0 transition-all delay-100 duration-500'
           }`}
         >
+          {/** overlay */}
+          <div className="absolute h-full w-full" onClick={onClose} />
+          {/** drawer section */}
           <section
-            className={`duration-400 absolute right-0 flex h-full w-full max-w-[43rem] transform flex-col gap-[2rem] overflow-hidden bg-white p-[2rem] shadow-bookcard transition-all ease-in-out ${
+            className={`duration-400 ease-out-in relative flex h-full w-full max-w-[43rem] transform flex-col gap-[2rem] overflow-hidden bg-white p-[2rem] shadow-bookcard transition-all ${
               isOpen ? 'translate-x-0' : 'translate-x-full'
             }`}
           >
             {isOpen && children}
           </section>
-          {/** overlay */}
-          <section className="h-full w-full" onClick={onClose}></section>
         </div>
       </Portal>
     </DrawerContext.Provider>

src/v1/base/Portal.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { PropsWithChildren, useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';