React에서 커스텀 모달 구현

import React, {
  createContext,
  useState,
  useCallback,
  ReactNode,
} from "react";

export interface ModalContextValue {
  openModals: string[];              // 열린 모달 ID 목록
  open: (id: string) => void;        // 모달 열기
  close: (id: string) => void;       // 모달 닫기
}

export const ModalContext = createContext<ModalContextValue | undefined>(
  undefined
);

import { createPortal } from "react-dom";
import { useEffect, useMemo } from "react";

export function ModalProvider({ children }: { children: ReactNode }) {
  const [openModals, setOpenModals] = useState<string[]>([]);

  // C-1. open: 중복 없이 ID 추가
  const open = useCallback((id: string) => {
    setOpenModals(prev =>
      prev.includes(id) ? prev : [...prev, id]
    );
  }, []);

  // C-2. close: 해당 ID 제거
  const close = useCallback((id: string) => {
    setOpenModals(prev => prev.filter(modal => modal !== id));
  }, []);

  // C-3. ESC 키 처리 → 마지막 열린 모달만 닫기
  useEffect(() => {
    const handler = (e: KeyboardEvent) => {
      if (e.key === "Escape" && openModals.length) {
        close(openModals[openModals.length - 1]);
      }
    };
    window.addEventListener("keydown", handler);
    return () => window.removeEventListener("keydown", handler);
  }, [openModals, close]);

  // C-4. body 스크롤 잠금 처리
  useEffect(() => {
    document.body.style.overflow = openModals.length ? "hidden" : "";
  }, [openModals]);

  // C-5. 공통 백드롭 (가장 밑에 렌더링)
  const backdrop = openModals.length > 0 && createPortal(
    <div
      className="fixed inset-0 bg-black/70"
      style={{ zIndex: 1000 }}
      onClick={() => close(openModals[openModals.length - 1])}
    />,
    document.body
  );

  const value = useMemo(
    () => ({ openModals, open, close }),
    [openModals, open, close]
  );

  return (
    <ModalContext.Provider value={value}>
      {children}
      {backdrop}
    </ModalContext.Provider>
  );
}

import { useContext } from "react";
import { ModalContext } from "@/components/providers/ModalProvider";

export function useModal(id: string) {
  const ctx = useContext(ModalContext);
  if (!ctx) {
    throw new Error("useModal must be used within a ModalProvider");
  }
  const { openModals, open, close } = ctx;

  // D-1. isOpen: 해당 ID가 열린 상태인지
  const isOpen = openModals.includes(id);

  // D-2. index: 스택에서의 순서 인덱스
  const index = openModals.indexOf(id);

  // D-3. zIndex: 순서별로 겹침 우선순위 설정
  const zIndex = 1000 + (index + 1) * 10;

  return {
    isOpen,
    open: () => open(id),    // D-4. 모달 열기 트리거
    close: () => close(id),  // D-5. 모달 닫기 트리거
    zIndex,
  };
}

import { createPortal } from "react-dom";
import { useModal } from "@/hooks/useModal";
import XIcon from "../icons/x-icon";
import { cn } from "@/utils/utils";

export default function CustomModal({
  id,
  closeBtnStyle,
  children,
}: {
  id: string;
  closeBtnStyle?: string;
  children: React.ReactNode;
}) {
  const { isOpen, close, zIndex } = useModal(id);
  if (!isOpen) return null;  // E-1. 닫힌 모달은 렌더링 안 함

  return createPortal(
    <div
      className="fixed inset-0 flex items-center justify-center"
      style={{ zIndex }}
      onClick={close}         // E-2. 백드롭 클릭으로 닫기
    >
      <div
        className="relative bg-white rounded-lg"
        onClick={e => e.stopPropagation()} // E-3. 내부 클릭 버블 방지
      >
        <button className="absolute top-4 right-4" onClick={close}>
          <XIcon className={cn("size-5 cursor-pointer", closeBtnStyle)} />
        </button>
        {children}            // E-4. 모달 콘텐츠
      </div>
    </div>,
    document.body           // E-5. body에 직접 포탈
  );
}

- 문법: createPortal(children, container)

Q: 왜 쓰는가?

A: 부모 컴포넌트의 CSS 규칙(overflow, z-index 등)에 영향받지 않고 최상위 레이어 제어가 가능해짐

사용 예: 모달, 툴팁, 드롭다운, 알림 배너 등