시퀸스 다이어그램

sequenceDiagram
    participant Component as 컴포넌트
    participant useModal as useModal 훅
    participant ModalProvider as ModalProvider 컨텍스트
    participant CurrentModal as 모달 컴포넌트
    
    Component->>useModal: openModal(CARD_MODAL, {props})
    useModal->>ModalProvider: 모달 타입과 props 설정
    ModalProvider->>ModalProvider: 상태 업데이트 (modalType, modalProps)
    ModalProvider->>CurrentModal: 모달 렌더링 (isOpen=true)
    CurrentModal->>CurrentModal: 사용자 상호작용
    CurrentModal->>useModal: closeModal()
    useModal->>ModalProvider: 모달 상태 초기화
    ModalProvider->>ModalProvider: modalType=null, modalProps={} 설정
    ModalProvider->>CurrentModal: isOpen=false로 언마운트

사용법

context API를 통해 전역으로 효율적으로 모달을 열고 닫기

• 이번 프로젝트에 모달들은 헤비하고 더티하다 느껴져서
• 룩업 테이블로 모달을 선택후 타입을 받고 openModal을 시킵니다.
• 파일위치 provider/ModalProvider.jsx

import { MODAL_TYPES, useModal } from '@/providers/ModalProvider'

function MyComponent() {
	const { openModal } = useModal()
	
	const handleOpen =  () =>  {
		openModal(MODAL_TYPES.SELL_PHOHO_CARD, {
			// 여기는 해당 모달에 프롭을 내릴수있게 해줍니다.
			type: "sell",
			cardId: 123
		});
	}

1. 전역 상태: 반드시 Providers내부에서 사용