[#571] Drawer 컴포넌트 style 개선 (#573)

* fix: drawer body scroll 되는 문제 해결

- drawer style fixed로 수정

* fix: useBodyScrollLock 훅 개선

src/hooks/useBodyScrollLock.ts

@@ -0,0 +1,36 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+type Options = {
+  enabled?: boolean;
+};
+
+export function useBodyScrollLock(options?: Options) {
+  const enabled = options?.enabled;
+  const scrollRef = useRef(0);
+
+  const lockScroll = useCallback(() => {
+    scrollRef.current = window.scrollY;
+    document.body.style.overflow = 'hidden';
+    document.body.style.marginTop = `-${scrollRef.current}px`;
+  }, []);
+
+  const openScroll = useCallback(() => {
+    document.body.style.removeProperty('overflow');
+    document.body.style.removeProperty('margin-top');
+    window.scrollTo(0, scrollRef.current);
+  }, []);
+
+  useEffect(() => {
+    if (enabled === undefined) {
+      return;
+    }
+
+    if (enabled) {
+      lockScroll();
+    } else {
+      openScroll();
+    }
+  }, [enabled, lockScroll, openScroll]);
+
+  return { lockScroll, openScroll };
+}

src/v1/base/Drawer.tsx

@@ -1,7 +1,9 @@
 import { createContext, PropsWithChildren, ReactNode, useContext } from 'react';
 
 import { IconClose } from '@public/icons';
-import Portal from './Portal';
+import { useBodyScrollLock } from '@/hooks/useBodyScrollLock';
+
+import Portal from '@/v1/base/Portal';
 
 interface DrawerProps {
   isOpen: boolean;
@@ -18,25 +20,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';
 

src/v1/comment/CommentDrawer.tsx

@@ -36,7 +36,8 @@ const CommentDrawer = forwardRef<HTMLTextAreaElement, CommentDrawerProps>(
         </Drawer.Header>
         <Drawer.Content>
           <textarea
-            className="h-[60vh] w-full resize-none border-none text-md focus:outline-none"
+            className="h-full w-full resize-none border-none text-md focus:outline-none"
+            rows={15}
             defaultValue={defaultComment}
             placeholder={placeholder}
             ref={ref}