Feat/#566 overlay를 다룰 useOverlay 훅 구현

frontend/src/router.tsx

@@ -12,14 +12,17 @@ import SongDetailListPage from './pages/SongDetailListPage';
 import AuthLayout from './shared/components/Layout/AuthLayout';
 import Layout from './shared/components/Layout/Layout';
 import ROUTE_PATH from './shared/constants/path';
+import { OverlayProvider } from './shared/hooks/useOverlay';
 
 const router = createBrowserRouter([
   {
     path: ROUTE_PATH.ROOT,
     element: (
-      <LoginPopupProvider>
-        <Layout />
-      </LoginPopupProvider>
+      <OverlayProvider>
+        <LoginPopupProvider>
+          <Layout />
+        </LoginPopupProvider>
+      </OverlayProvider>
     ),
     children: [
       {

frontend/src/shared/hooks/useOverlay/OverlayController.tsx

@@ -0,0 +1,37 @@
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from 'react';
+import type { CreateOverlayElement } from './types';
+import type { Ref } from 'react';
+
+interface OverlayControllerProps {
+  overlayElement: CreateOverlayElement;
+  onExit: () => void;
+}
+
+export interface OverlayControlRef {
+  close: () => void;
+}
+
+export const OverlayController = forwardRef(function OverlayController(
+  { overlayElement: OverlayElement, onExit }: OverlayControllerProps,
+  ref: Ref<OverlayControlRef>
+) {
+  const [isOpenOverlay, setIsOpenOverlay] = useState(false);
+
+  const handleOverlayClose = useCallback(() => setIsOpenOverlay(false), []);
+
+  useImperativeHandle(
+    ref,
+    () => {
+      return { close: handleOverlayClose };
+    },
+    [handleOverlayClose]
+  );
+
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      setIsOpenOverlay(true);
+    });
+  }, []);
+
+  return <OverlayElement isOpen={isOpenOverlay} close={handleOverlayClose} exit={onExit} />;
+});

frontend/src/shared/hooks/useOverlay/OverlayProvider.tsx

@@ -0,0 +1,42 @@
+import React, { createContext, useCallback, useMemo, useRef, useState } from 'react';
+import type { Mount, Unmount } from './types';
+import type { MutableRefObject, PropsWithChildren, ReactNode } from 'react';
+
+export const OverlayContext = createContext<{
+  mount: Mount;
+  unmount: Unmount;
+  elementIdRef: MutableRefObject<number>;
+} | null>(null);
+
+export function OverlayProvider({ children }: PropsWithChildren<{ containerId?: string }>) {
+  const [overlayById, setOverlayById] = useState<Map<string, ReactNode>>(new Map());
+
+  const elementIdRef = useRef(1);
+
+  const mount = useCallback<Mount>((id, element) => {
+    setOverlayById((overlayById) => {
+      const cloned = new Map(overlayById);
+      cloned.set(id, element);
+      return cloned;
+    });
+  }, []);
+
+  const unmount = useCallback<Unmount>((id) => {
+    setOverlayById((overlayById) => {
+      const cloned = new Map(overlayById);
+      cloned.delete(id);
+      return cloned;
+    });
+  }, []);
+
+  const context = useMemo(() => ({ mount, unmount, elementIdRef }), [mount, unmount]);
+
+  return (
+    <OverlayContext.Provider value={context}>
+      {children}
+      {[...overlayById.entries()].map(([id, element]) => (
+        <React.Fragment key={id}>{element}</React.Fragment>
+      ))}
+    </OverlayContext.Provider>
+  );
+}

frontend/src/shared/hooks/useOverlay/index.ts

@@ -0,0 +1,2 @@
+export { OverlayProvider, OverlayContext } from './OverlayProvider';
+export { useOverlay } from './useOverlay';

frontend/src/shared/hooks/useOverlay/types.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+
+export type Mount = (id: string, element: ReactNode) => void;
+export type Unmount = (id: string) => void;
+
+export type CreateOverlayElement = (props: {
+  isOpen: boolean;
+  close: () => void;
+  exit: () => void;
+}) => ReactNode;

frontend/src/shared/hooks/useOverlay/useOverlay.tsx

@@ -0,0 +1,54 @@
+import { useContext, useEffect, useMemo, useRef } from 'react';
+import { OverlayController } from './OverlayController';
+import { OverlayContext } from './OverlayProvider';
+import type { OverlayControlRef } from './OverlayController';
+import type { CreateOverlayElement } from './types';
+
+interface Options {
+  exitOnUnmount?: boolean;
+}
+
+export function useOverlay({ exitOnUnmount = true }: Options = {}) {
+  const context = useContext(OverlayContext);
+
+  if (context === null) {
+    throw new Error('useOverlay는 OverlayProvider 내부에서 사용 가능합니다.');
+  }
+
+  const { mount, unmount, elementIdRef } = context;
+
+  const id = String(elementIdRef.current++);
+  const overlayRef = useRef<OverlayControlRef>(null);
+
+  useEffect(() => {
+    return () => {
+      if (exitOnUnmount) {
+        unmount(id);
+      }
+    };
+  }, [exitOnUnmount, id, unmount]);
+
+  return useMemo(
+    () => ({
+      open: (overlayElement: CreateOverlayElement) => {
+        mount(
+          id,
+          <OverlayController
+            // NOTE: 오버레이를 열때마다 state를 초기화하기 위함입니다.
+            key={Date.now()}
+            ref={overlayRef}
+            overlayElement={overlayElement}
+            onExit={() => unmount(id)}
+          />
+        );
+      },
+      close: () => {
+        overlayRef.current?.close();
+      },
+      exit: () => {
+        unmount(id);
+      },
+    }),
+    [id, mount, unmount]
+  );
+}