feat: Portal Component 기능 개선

Author: ssi02014

src/components/Portal/index.tsx

@@ -1,20 +1,92 @@
-import React, { useEffect, useState } from 'react';
-import ReactDOM from 'react-dom';
+import React from 'react';
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useLayoutEffect,
+  useMemo,
+} from 'react';
+import { createPortal } from 'react-dom';
+import { useIsMounted } from '../../hooks/useIsMounted';
 
 interface PortalProps {
-  id?: string;
   children: React.ReactNode;
+  className?: string;
+  containerRef?: React.RefObject<HTMLElement | null>;
 }
 
-const Portal = ({ id, children }: PortalProps) => {
-  const [portalElement, setPortalElement] = useState<Element | null>(null);
+const portalContext = createContext<{ parentPortal: HTMLElement | null }>({
+  parentPortal: null,
+});
 
-  useEffect(() => {
-    setPortalElement(document.querySelector(`#${id}`));
-  }, [id]);
+const PORTAL_DEFAULT_CLASS = 'thumbnail-generator';
 
-  if (!portalElement) return <>{children}</>;
-  return ReactDOM.createPortal(children, portalElement);
-};
+function RenderPortal({ children, className, containerRef }: PortalProps) {
+  const { parentPortal } = useContext(portalContext);
 
-export default Portal;
+  const getPortalNode = useCallback(
+    (mountNode: HTMLElement) => {
+      const portalNode = mountNode.ownerDocument.createElement('div');
+      portalNode.classList.add(className || PORTAL_DEFAULT_CLASS);
+
+      return portalNode;
+    },
+    [className]
+  );
+
+  /**
+   * This is the mount node to render portal nodes.
+   * The mountNode has the value "containerRef.current" if it has a "containerRef", or the parent portal node if it is a nested portal.
+   * By default, it has "document.body".
+   */
+  const mountNode = useMemo(() => {
+    if (parentPortal) {
+      return parentPortal;
+    }
+
+    if (containerRef?.current) {
+      return containerRef.current;
+    }
+
+    return document.body;
+  }, [parentPortal, containerRef]);
+
+  const portalNode = useMemo(
+    () => getPortalNode(mountNode),
+    [getPortalNode, mountNode]
+  );
+
+  useLayoutEffect(() => {
+    mountNode.appendChild(portalNode);
+
+    /**
+     * "portalNode" is removed from "mountNode" on unmount.
+     */
+    return () => {
+      if (mountNode.contains(portalNode)) {
+        mountNode.removeChild(portalNode);
+      }
+    };
+  }, [portalNode, mountNode]);
+
+  return createPortal(
+    <portalContext.Provider value={{ parentPortal: portalNode }}>
+      {children}
+    </portalContext.Provider>,
+    portalNode
+  );
+}
+
+/** @tossdocs-ignore */
+export default function Portal({ children, ...restProps }: PortalProps) {
+  const isMounted = useIsMounted();
+
+  /**
+   * With this code, it is possible to solve the "window is not defined" and "Hydration Error" that can occur in SSR.
+   */
+  if (!isMounted) {
+    return <></>;
+  }
+
+  return <RenderPortal {...restProps}>{children}</RenderPortal>;
+}

src/hooks/useIsMounted.ts

@@ -0,0 +1,9 @@
+import { useEffect, useState } from 'react';
+
+export function useIsMounted() {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  return mounted;
+}

src/lib/ThumbnailGenerator.tsx

@@ -7,7 +7,6 @@ import Portal from '@components/Portal';
 import Icon from '@components/Icon';
 
 interface ThumbnailGeneratorProps {
-  id?: string;
   isDefaultOpen?: boolean;
   buttonIcon?: React.ReactNode;
   iconSize?: 'small' | 'medium' | 'large';
@@ -19,7 +18,6 @@ interface ThumbnailGeneratorProps {
 }
 
 const ThumbnailGenerator = ({
-  id,
   buttonIcon,
   isDefaultOpen = false,
   iconSize = 'medium',
@@ -37,7 +35,7 @@ const ThumbnailGenerator = ({
 
   return (
     <>
-      <Portal id={id}>
+      <Portal>
         {isOpen ? (
           <TG
             isFullWidth={isFullWidth}