이렇게 많은 모달은 처음보는지라,,

먼저 김선배 서비스에 합류하기 전에, 제가 개발하면서 본 최대의 모달 개수는 몇 안되었습니다.

기껏해야 1-2개의 모달 컴포넌트를 쓰고 있었고, 그마저도 형태가 비슷한 모달을 써서, 서비스 내의 많은 모달을 보고 모달이 진짜 많다라는 감탄도 하고, 서비스 내에서 쓰이는 모달이 이렇게도 많을 수 있겠다,,하는 생각도 많이 하였는데요!

한편으로는 많은 모달들을 어떻게 선언적으로 관리할 수 있을까?의 고민도 많이 하였어요.

김선배에서 쓰이는 모달은 크게 3개로 나뉘게됩니다.

FullModal: 전체 화면을 차지하면서 배경색은 흰색인 모달

RiseUpModal: 아래에서 올라오는 bottomsheet형태의 모달

DImmedModal: 전체 화면을 차지하면서 배경색은 어두운 모달

그리고 각각 모달을 useModal의 훅으로 사용하고 있는 구조였습니다.

'use client';
import { useState, useEffect } from 'react';

function useModal(portalId: string) {
  const [modal, setModal] = useState(false);
  const [portalElement, setPortalElement] = useState<Element | null>(null);

  useEffect(() => {
    const portalIdEl = document.getElementById(portalId);
    if (!portalIdEl) {
      return;
    }
    setPortalElement(portalIdEl);
  }, [modal]);

  const modalHandler = () => {
    setModal(!modal);
  };

  return {
    modal,
    modalHandler,
    portalElement,
  };
}

export default useModal;

그리고 이 모달 훅을 컴포넌트 단에서는 다음과 같이 사용하고 있었어요