Overlay

overlay-kit 기반의 오버레이 유틸리티입니다.

Import

import { overlay } from '@liner-engineering/orbit-core';

설치

overlay-kit peer dependency 설치가 필요합니다:

pnpm add overlay-kit

기능

overlay 객체는 overlay-kit의 모든 기능을 포함하며, 추가로 다음 기능을 제공합니다:

메서드	설명
overlay.open()	오버레이 열기 (overlay-kit 제공)
overlay.close()	오버레이 닫기 (overlay-kit 제공)
overlay.openAsync()	Promise 기반 오버레이 (overlay-kit 제공)
overlay.openConfirmation()	확인 다이얼로그 (orbit-core 확장)

기본 사용법

import { overlay } from '@liner-engineering/orbit-core';

// 모달 열기
overlay.open(({ isOpen, close }) => (
  <Modal isOpen={isOpen} onClose={close}>
    <p>Hello World</p>
  </Modal>
));

// Promise 기반 사용
const result = await overlay.openAsync(({ isOpen, close }) => (
  <Dialog isOpen={isOpen} onConfirm={() => close('confirmed')} />
));

설정

overlay-kit 사용을 위해 앱 루트에 OverlayProvider를 설정해야 합니다:

import { OverlayProvider } from 'overlay-kit';

function App() {
  return (
    <OverlayProvider>
      <YourApp />
    </OverlayProvider>
  );
}

참고

overlay-kit에 대한 자세한 내용은 공식 문서를 참조하세요.