// 컴포넌트 구조
<Modal>
  <ModalTrigger />
  <ModalContent>
    <ModalHeader />
    <ModalBody />
    <ModalFooter />
  </ModalContent>
</Modal>

// Modal.tsx
// 모달의 실제 UI를 담당. ModalTitle, ModalBody, ModalFooter가 여기에 포함.
function ModalContent() {
  const { style, onCloseModal, disableOutsideClick, footer } =
    useContext(ModalContext);
  const modalContentRef = useRef<HTMLDivElement>(null);
 
  useOutsideClick(modalContentRef, () => {
    if (!disableOutsideClick && onCloseModal) onCloseModal();
  });
 
  return (
    <S.ModalWrapper ref={modalContentRef} style={style}>
      <ModalTitle />
      <ModalBody />
      {footer && <ModalFooter />}
    </S.ModalWrapper>
  );
}
 
/**
 * 페이지를 가리고 사용자에게 정보를 입력받거나, 단순 확인을 위한 모달 컴포넌트입니다.
 * children을 prop으로 넘길 경우, ModalTrigger 컴포넌트로 전달됩니다.
 * ModalTrigger 클릭 시 모달이 노출되며 모달 컨텐츠 자체는 portal을 통해 backdrop에 렌더링됩니다.
 *
 * children을 사용하는 방식 대신 외부에서 Modal 컴포넌트를 사용할 경우 `externalShow`, `onCloseModal`을 사용하여 모달을 제어할 수 있습니다.
 *
 * `type`이 confirm인 경우 `title`은 string, `type`이 close인 경우 title은 string | React.ReactNode으로 받습니다.
 *
 * @example
 * ```tsx
 * // Modal 구조
 * <Modal>
 *  <ModalTrigger />
 *  <ModalContent>
 *    <ModalTitle />
 *    <ModalBody />
 *    <ModalFooter />
 *  </ModalContent>
 * </Modal>
 * ```
 */
export function Modal(props: ModalProps) {
  const { children, onShow, onCloseModal, externalShow } = props;
  const [backdrop, setBackdrop] = useState<HTMLDivElement | null>(null);
  // modal의 노출 여부를 관리하는 state
  const [show, setShow] = useState(externalShow || false);
 
  const onClickShowModal = () => {
    setShow(true);
  };
 
  const onClickCloseModal = () => {
    if (onCloseModal) onCloseModal();
    setShow(false);
  };
 
  // _app.tsx 내에 backdrop이라는 id를 가진 엘리먼트 존재
  useEffect(() => {
    setBackdrop(document.getElementById('backdrop') as HTMLDivElement);
  }, []);
 
  useEffect(() => {
    if (show && onShow) onShow();
  }, [show, onShow]);
 
  useEffect(() => {
    if (externalShow !== undefined) {
      setShow(externalShow);
    }
  }, [externalShow]);
 
  return (
    <>
      {children && (
        <ModalTrigger onClickShowModal={onClickShowModal}>
          {children}
        </ModalTrigger>
      )}
      {show && (
        <ModalContext.Provider
          value={{ ...props, onCloseModal: onClickCloseModal }}
        >
          {backdrop &&
            (createPortal(
              <Backdrop deep>
                <ModalContent />
              </Backdrop>,
              backdrop as HTMLDivElement
            ) as ReactNode)}
        </ModalContext.Provider>
      )}
    </>
  );
}

<Modal
  type={MODAL_TYPES.CONFIRM} // type에 따라 Modalitle 영역 UI가 달라짐
  title={isEdit ? '그룹 수정' : '그룹 추가'}
  titleAlign="left" // title의 text-align 방향
  externalShow={externalShow}
  onCloseModal={onCloseModal}
  content={ // 모달 실제 content
    <StyledInput
      guide="그룹명"
      required
      clearable
      width={'100%'}
      value={productName}
      maxLength={20}
      onInput={handleOnInput}
      placeholder="그룹명을 입력하세요 (최대 20자)"
    />
  }
  footer={{ // 모달 footer 영역
    left: (
      <Button size="medium" fullWidth>
        돌아가기
      </Button>
    ),
    right: (
      <Button
        size="medium"
        type="primary"
        onClick={onClickSave}
        fullWidth
        disabled={!productName}
      >
        저장
      </Button>
    ),
  }}
/>

// components/common/Modal/Modal.tsx
import { forwardRef, useEffect, useState } from 'react';
import { createPortal } from 'react-dom';
import { Backdrop } from '../Backdrop';
 
import * as S from './styled';
 
export const Modal = forwardRef(function Modal<T>({
  open,
  children,
  width = 375,
}: {
  open: boolean;
  children: React.ReactElement<T>;
  width?: number;
}) {
  const [backdrop, setBackdrop] = useState<HTMLDivElement | null>(null);
 
  useEffect(() => {
    setBackdrop(document.getElementById('backdrop') as HTMLDivElement);
  }, []);
 
  return (
    <>
      {open &&
        backdrop &&
        createPortal(
          <Backdrop deep>
            <S.ModalWrapper style={{ width: width }}>{children}</S.ModalWrapper>
          </Backdrop>,
          backdrop as HTMLDivElement
        )}
    </>
  );
});

// ex) Modal 사용 예시 - useSpecificModal
import { Modal } from '@/components/common';
 
export function useSpecificModal() {
  const overlay = useOverlay(); // 토스의 useOverlay 훅을 차요
 
  return useMemo(
    () => ({
      open: (id: number) =>
        overlay.open(({ isOpen, close }) => (
          <Modal open={isOpen} width={610}>
	          {* Modal의 contents가 될 컴포넌트가 children으로 들어감 *}
          </Modal>
        )),
      close: overlay.close,
    }),
    [overlay]
  );
}

// AS_IS : 리팩토링 전 모달마다 show 상태 정의 필요, 수많은 prop 대응 = 장황해지는 코드 😥
const [showSpecificModal, setShowSpecificModal] = useState(false)
...
<SpecificModal
  show={showSpecificModal}
  // 이외 필요한 수많은 prop들
/>
 
// TO_BE : 리팩토링 후 코드가 훨씬 간결, 명확해짐. 추상화 레벨이 높아짐 = react스러워짐! 😊
const { open } = useSpecificModal()