빠른 시작

이 가이드는 타입이 있는 결과를 반환하는 확인 오버레이를 만듭니다. 런타임은 시각적인 dialog 컴포넌트를 포함하지 않습니다. 대신 어댑터를 등록하고, OverlayHost가 열린 item의 type에 맞는 어댑터를 렌더링하게 합니다.

1. 설치

npm install @ilokesto/overlay@2.0.0 react

2. 어댑터 맵 만들기

import type { OverlayAdapterMap } from '@ilokesto/overlay';

export const overlayAdapters: OverlayAdapterMap = {
  confirm: ({ close, remove, title, description }) => {
    const finish = (result: boolean) => {
      close(result);
      remove();
    };

    return (
      <div role="dialog" aria-modal="true" aria-labelledby="confirm-title">
        <h2 id="confirm-title">{String(title)}</h2>
        {description ? <p>{String(description)}</p> : null}
        <button onClick={() => finish(true)}>확인</button>
        <button onClick={() => finish(false)}>취소</button>
      </div>
    );
  },
};

close(result)는 결정을 기록하고 remove()는 pending promise를 완료합니다. 이 첫 adapter는 exit animation이 없으므로 즉시 제거합니다. motion adapter는 status === 'closing'인 동안 렌더링하고 transition 또는 animation 완료 event에서 remove()를 호출해야 합니다.

3. provider 마운트하기

import { OverlayProvider } from '@ilokesto/overlay';
import { overlayAdapters } from './overlay-adapters';
import { DeleteButton } from './delete-button';

export function App() {
  return (
    <OverlayProvider adapters={overlayAdapters}>
      <DeleteButton />
    </OverlayProvider>
  );
}

OverlayProvider는 기본적으로 provider 단위 저장소를 만들고 children 뒤에 OverlayHost를 마운트합니다. useOverlay를 호출하는 컴포넌트는 반드시 이 provider 안에 있어야 합니다.

4. 오버레이 열기

import { useOverlay } from '@ilokesto/overlay';

export function DeleteButton() {
  const { display } = useOverlay();

  async function handleDelete() {
    const confirmed = await display<boolean>({
      type: 'confirm',
      props: {
        title: 'Delete this project?',
        description: 'This action cannot be undone.',
      },
    });

    if (confirmed) console.log('프로젝트 삭제');
  }

  return <button onClick={() => void handleDelete()}>Delete</button>;
}

호출자가 결과를 기다려야 하면 display<TResult>()를 사용하세요. 생성된 id만 필요하고 lifecycle을 직접 관리한다면 open()이 더 알맞습니다.

5. 실행 및 확인

React 애플리케이션을 시작하고 Delete를 선택하세요. 확인을 선택하면 dialog가 제거되고 삭제 경로가 실행되며 취소는 삭제 없이 제거합니다. 이 예제는 기본 dialog semantics만 제공하고 focus trap, Escape 처리, scroll lock, 시각적 표현은 제공하지 않습니다. 일반 dialog라면 이 정책을 다시 만들지 말고 @ilokesto/modal을 사용하세요.