♻️ refactor: Drawer 컴포넌트 제어/비제어 로직 추가

src/components/common/Drawer/Drawer.tsx

@@ -1,13 +1,18 @@
 import type { PropsWithChildren, ReactNode } from "react";
 import { css } from "twin.macro";
 
+import { useScrollLocker } from "@/application/hooks";
 import { Portal } from "@/components/common/Portal";
 
 import { DrawerContextProvider, useDrawerContext, useSetDrawerContext } from "./context";
 
-export const Drawer = ({ children }: PropsWithChildren) => {
+interface DrawerProps {
+  isOpen?: boolean;
+  onOpenChange?(open: boolean): void;
+}
+export const Drawer = ({ children, isOpen, onOpenChange }: PropsWithChildren<DrawerProps>) => {
   return (
-    <DrawerContextProvider>
+    <DrawerContextProvider isOpen={isOpen} onOpenChange={onOpenChange}>
       {/* NOTE: 공백 문자 제거 */}
       <section css={{ fontSize: 0 }}>{children}</section>
     </DrawerContextProvider>
@@ -38,6 +43,8 @@ const DrawerContent = ({
 }: DrawerContentProps) => {
   const isOpen = useDrawerContext();
 
+  useScrollLocker(isOpen);
+
   return (
     <Portal id="drawer-portal">
       <div

src/components/common/Drawer/context.tsx

@@ -1,20 +1,36 @@
 import type { PropsWithChildren } from "react";
-import { createContext, useCallback, useContext, useState } from "react";
+import { createContext, useCallback, useContext, useEffect, useState } from "react";
 
 const DrawerContext = createContext(false);
 const DrawerSetContext = createContext<(state: boolean) => void>(() => null);
 
-export const DrawerContextProvider = ({ children }: PropsWithChildren) => {
-  const [isOpen, setIsOpen] = useState(false);
+interface DrawerContextProviderProps {
+  isOpen?: boolean;
+  onOpenChange?(open: boolean): void;
+}
+export const DrawerContextProvider = ({
+  children,
+  isOpen: isOpenProp,
+  onOpenChange,
+}: PropsWithChildren<DrawerContextProviderProps>) => {
+  const [isOpen = false, setIsOpen] = useState(isOpenProp);
+  const isControlled = isOpenProp !== undefined;
+  const value = isControlled ? isOpenProp : isOpen;
 
-  const handleDrawer = useCallback((state: boolean) => {
-    if (state) document.body.style.overflow = "hidden";
-    else document.body.style.overflow = "";
-    setIsOpen(state);
-  }, []);
+  const handleDrawer: React.Dispatch<React.SetStateAction<boolean | undefined>> = useCallback(
+    (nextValue) => {
+      const value = typeof nextValue === "function" ? nextValue(isOpenProp) : nextValue;
+      if (isControlled) {
+        if (value !== isOpenProp) onOpenChange?.(value as boolean);
+      } else {
+        setIsOpen(nextValue);
+      }
+    },
+    [isControlled, isOpenProp, onOpenChange],
+  );
 
   return (
-    <DrawerContext.Provider value={isOpen}>
+    <DrawerContext.Provider value={value}>
       <DrawerSetContext.Provider value={handleDrawer}>{children}</DrawerSetContext.Provider>
     </DrawerContext.Provider>
   );