feat: useOverlay hook 추가

[evan-moon]

변경사항

선언형으로 사용하는 모달, 얼럿 등의 컴포넌트를 명령형으로 사용할 수 있게 도와주는 useOverlay 훅을 추가하고, useOverlay로 기능을 100% 대체할 수 있는 ModalProvider를 제거합니다.

function useMyModal () {
  const { open, close, createOverlayElement } = useOverlay();
  useEffect(() => {
    // 오버레이 엘리먼트 등록
    createOverlayElement((isOpen, close) =>
      <Modal show={isOpen} onClose={close} />
    );
  }, []);

  return {
    openMyModal: open,
    closeMyModal: close,
  }
}

const myModal = useMyModal();
myModal.open();
myModal.close();

OverlayContext

현재 등록된 모든 오버레이들을 ID를 키로 가지는 Map으로 관리합니다. Map에 오버레이 타겟을 등록하고 제거함으로써 mount, unmount를 수행합니다.

StateReacter

오버레이 타겟에 전달되는 isOpen 상태를 가지고 있습니다. OverlayContext에 등록된 이후에도 함수 스코프를 벗어나 상태 변경에 Reactive한 렌더링을 수행할 수 있어야 하므로, 외부에서 전달받은 ref에 자신의 isOpen 상태를 변경할 수 있는 메소드를 노출하고 있습니다.

useOverlay

사용자가 사용할 커스텀 오버레이 훅을 만들 수 있는 API를 제공합니다. 오버레이를 OverlayContext에 등록할 수 있는 createOverlayElement 함수와 StateReacter의 상태를 변경할 수 있는 open, close 함수를 노출합니다.
useOverlay는 자신이 가지고 있는 StateReacter의 레퍼런스를 가지고 있기 때문에, 이를 통해 StateReacert의 상태를 직접 변경하고, 이 상태 변경으로 인해 createOverlayElement를 통해 컨텍스트에 주입해놓은 컴포넌트가 다시 렌더링됩니다.

집중적으로 리뷰 받고 싶은 부분이 있나요?

훅의 인터페이스는 현재 회사에서 쓰고 있는 녀석을 참고 했슴다.
구현은 직접 고안해서 하려고 했는데...만들다보니 컨텍스트에 넘겨놓은 컴포넌트의 리렌더링을 발생시키는 부분을 제외하고는 얼추 비슷해졌네유...(역시 다 이유가 있는 구조였....)
더 좋은 아이디어가 있다면 코멘트로 같이 논의해봐요 🙏

[zi-gae]

LGTM :)
많이 배웠습니다 👍

[lubycon-admin]

🎉 This PR is included in version 1.5.0-beta.1 🎉

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[lubycon-admin]

🎉 This PR is included in version 1.5.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[lubycon-admin]

🎉 This PR is included in version 1.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀