React portal을 활용한 드롭다운 컴포넌트 구현하기

import styled from "styled-components";
import { useRecoilState } from "recoil";
import { dropdownOpenAtom } from "../../atoms/globalAtoms";
import { createPortal } from "react-dom";
import { PortalProps } from "../../global/customType";
import { COLORS, SIZES } from "../../global/constants";

export default function Dropdown({ children }: { children: React.ReactNode }) {
  const [showDropdown, setShowDropdown] = useRecoilState(dropdownOpenAtom);

  const DropdownPortal = ({ children }: PortalProps) => {
    return createPortal(
      children,
      document.getElementById("dropdown") as HTMLElement,
    );
  };

  return (
    <DropdownPortal>
      {showDropdown && (
        <DropdownContainer>
          <DropdownBackdrop
            className="dropdown-backdrop"
            onClick={() => setShowDropdown("")}
          />
          {children}
        </DropdownContainer>
      )}
    </DropdownPortal>
  );
}

const DropdownContainer = styled.div`
  position: absolute;

  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 111;

  & > *:not(.dropdown-backdrop) {
    z-index: 113;
  }
`;

const DropdownBackdrop = styled(DropdownContainer)`
  z-index: 112;
  position: fixed;
`;

export const DropdownUIContainerStyle = styled.div<{
  data: {
    x: number;
    y: number;
    width: number;
    height: number;
  };
}>`
  position: absolute;
  left: ${(props) => props.data.x + props.data.width - 200}px;
  top: ${(props) => props.data.y + props.data.height}px;
  height: auto;
  width: 200px;
  max-height: calc(100vh - 100px);

  overflow-x: hidden;
  overflow-y: auto;

  margin-top: 6px;
  background-color: #fff;
  border-radius: 5px;
  background-color: ${COLORS.BASIC_WHITE};
  box-shadow: 0 2px 7px 0 ${COLORS.GRAY_07_OVERAY};
  max-width: ${SIZES.MAX_WIDTH * 0.65}px;
`;

import Dropdown from "../dropdown/Dropdown";
import Dropdown_Member from "../dropdown/Dropdown.Member";
import { useRecoilState } from "recoil";

export default function Button_Icontype({
  children,
}: {
  children: React.ReactElement | string;
}) {
  const [showDropdown, setShowDropdown] = useRecoilState(dropdownOpenAtom);

  return (
    <>
      <IcontypeButton
        onClick={setShowDropdown("MEMBER")}
      >
        {children}
      </IcontypeButton>
      {showDropdown && (
        <Dropdown>
          <Dropdown_Member />
        </Dropdown>
      )}
    </>
  );
}

import Dropdown from "../dropdown/Dropdown";
import Dropdown_Member from "../dropdown/Dropdown.Member";
import { useRecoilState } from "recoil";
import { useRef } from "react";

export default function Button_Icontype({
  children,
}: {
  children: React.ReactElement | string;
}) {
  const [showDropdown, setShowDropdown] = useRecoilState(dropdownOpenAtom);

  const targetRef = useRef(null);

  function calculateElementPositionAndSize({
    target,
  }: {
    target: Element;
  }) {
    const targetRect = target?.getBoundingClientRect();
    const targetPosition = {
        x: targetRect.left,
        y: targetRect.top,
        width: targetRect.width,
        height: targetRect.height,
    };

    return targetPosition;
  }

  return (
    <>
      <IcontypeButton
        ref={targetRef}
        onClick={setShowDropdown("MEMBER")}
      >
        {children}
      </IcontypeButton>
      {showDropdown && (
        <Dropdown>
          <Dropdown_Member data={calculateElementPositionAndSize(targetRef)} />
        </Dropdown>
      )}
    </>
  );
}

import { MenuGroup_ListType } from "../compound/MenuGroup.listType";
import Button_Boxtype from "../basic/Button.boxType";
import { DropdownProps } from "../../global/customType";
import { LABELS } from "../../global/constants";
import { DropdownUIContainerStyle } from "./Dropdown";

export default function Dropdown_Member({ data }: DropdownProps) {
  return (
    <DropdownUIContainerStyle data={data}>
      <MenuGroup_ListType>
        <li>
          <Button_Boxtype>{LABELS.LABEL_WITHDRAW_MEMBER}</Button_Boxtype>
        </li>
      </MenuGroup_ListType>
    </DropdownUIContainerStyle>
  );
}

import { throttle } from "lodash";
import { useState, useEffect, useRef } from "react";
import { useRecoilState } from "recoil";
import { dropdownOpenAtom } from "../../atoms/globalAtoms";
import { calculateElementPositionAndSize } from "../../util/handleElement";

export function useDropdown({
  dropdownType,
  dropdownId,
}: {
  dropdownType?: string | undefined;
  dropdownId?: string | undefined;
}) {
  const [showDropdown, setShowDropdown] = useRecoilState(dropdownOpenAtom);
  const [targetPosition, setTargetPosition] = useState({
    x: 0,
    y: 0,
    width: 0,
    height: 0,
  });

  const [windowWidth, setWindowWidth] = useState(window.innerWidth);

  const targetRef = useRef(null);

  // custom hook의 props로 전달된 2개의 값을 조합하여 드롭다운 unique key를 생성
  const showDropdownUniqueKey = `${dropdownType}_${dropdownId}`;

  const handleResize = throttle(() => {
    setWindowWidth(window.innerWidth);
  }, 500);

  useEffect(() => {
    window.addEventListener("resize", handleResize);
    return () => {
      // cleanup
      window.removeEventListener("resize", handleResize);
    };
  }, [handleResize]);

  /* resize 이벤트 발생 시 data props 갱신 */
  useEffect(() => {
    if (showDropdown && targetRef.current) {
      const targetPos = calculateElementPositionAndSize({
        target: targetRef.current as Element,
      });
      setTargetPosition(targetPos);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [windowWidth]);

  function handleDropdownTrigger() {
    const targetPos = calculateElementPositionAndSize({
      target: targetRef.current as unknown as Element,
    });
    setTargetPosition(targetPos);
    setShowDropdown(showDropdownUniqueKey);
  }

  return {
    targetRef,
    showDropdown,
    targetPosition,
    handleDropdownTrigger,
    showDropdownUniqueKey,
  };
}

import { TYPES } from "../../global/constants";
import Dropdown from "../dropdown/Dropdown";
import Dropdown_Member from "../dropdown/Dropdown.Member";
import { useDropdown } from "../hooks/useDropdown";

export default function Button_Icontype({
  children,
  onClick,
  dropdownId,
  dropdownType,
}: {
  children: React.ReactElement | string;
  onClick?: (e: React.SyntheticEvent) => void;
  dropdownId?: string;
  dropdownType?: string;
}) {
  const {
    targetRef,
    showDropdown,
    targetPosition,
    handleDropdownTrigger,
    showDropdownUniqueKey,
  } = useDropdown({
    dropdownType,
    dropdownId,
  });

  return (
    <>
      <IcontypeButton
        ref={targetRef}
        className={showDropdown === showDropdownUniqueKey ? "active" : ""}
        onClick={dropdownType ? handleDropdownTrigger : onClick}
      >
        {children}
      </IcontypeButton>
      {showDropdown === showDropdownUniqueKey &&
        dropdownType === TYPES.DROPDOWN_KEY_MEMBER_MORE && (
          <Dropdown>
            <Dropdown_Member data={targetPosition} />
          </Dropdown>
        )}
    </>
  );
}