모달 관리 시스템 구현과 코드 스플리팅을 통한 동적 로딩을 할 수 있도록 개선해보았습니다.

모달 관리 컨텍스트 구현

• ModalsDispatchContext와 ModalsStateContext를 사용해 모달을 열고 닫는 전역 상태 관리 시스템을 구축했습니다.
• open 및 close 메서드를 제공하여 모달을 동적으로 열고 닫을 수 있도록 했습니다.

interface ModalsDispatchContextProps {
  open: (Component: React.ComponentType<any>, props: any) => void;
  close: (Component: React.ComponentType<any>) => void;
}

useModal 커스텀 훅 구현

• useModals 훅을 통해 컴포넌트 내에서 손쉽게 모달을 열고 닫는 기능을 사용할 수 있도록 했습니다.
• openModal, closeModal 함수로 모달 제어가 가능합니다.

import { useContext } from 'react';
import { ModalsDispatchContext } from '../index.context';

export default function useModals() {
  const { open, close } = useContext(ModalsDispatchContext);

  const openModal = (Component: React.ComponentType<any>, props: any) => {
    open(Component, props);
  };

  const closeModal = (Component: React.ComponentType<any>) => {
    close(Component);
  };

  return {
    openModal,
    closeModal,
  };
}

Modals.tsx를 통한 모달 렌더링

• 현재 열린 모달들의 상태를 관리하고, openedModals 배열을 순회하며 모달 컴포넌트를 동적으로 렌더링합니다.
• 각 모달 컴포넌트에 props를 전달하고, onSubmit, onClose 콜백 처리 기능을 추가했습니다.

loadable/component를 사용한 코드 스플리팅

초기 로딩 시간을 줄이고, 사용자 인터랙션 시에만 모달을 로딩할 수 있도록 성능 최적화를 위해 필요할 때만 모달 컴포넌트를 로드하도록 loadable을 사용했습니다.

loadable/component 의존성을 추가하였기 때문에 추후 작업시 참고 부탁드립니다.

// components/common/Modal/Modals.tsx
export const modals = {
  roleModal: loadable(() => import('@features/auth/SignUp/components/common/RoleModal')),
};