Ant Design과 함께 쓰기

Ant Design의 Modal 컴포넌트를 overlay-kit과 함께 사용하는 방법을 알아볼게요.

설치

antd 패키지를 설치해요.

shell

npm install overlay-kit antd

shell

pnpm add overlay-kit antd

shell

yarn add overlay-kit antd

shell

bun add overlay-kit antd

기본 사용법

Ant Design Modal은 open prop으로 열림 상태를, onCancel과 onOk로 각 액션을 처리해요. 두 이벤트 모두 close를 전달하면 overlay-kit이 상태를 관리해줘요.

import { OverlayProvider, overlay } from 'overlay-kit';
import { Button, Modal } from 'antd';

function App() {
  return (
    <Button
      type="primary"
      onClick={() => {
        overlay.open(({ isOpen, close }) => (
          <Modal
            title="정말로 계속하시겠어요?"
            open={isOpen}
            onCancel={close}
            onOk={close}
            cancelText="아니요"
            okText="네"
          />
        ));
      }}
    >
      Confirm Dialog 열기
    </Button>
  );
}

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

Open Sandbox

비동기 결과 받기

overlay.openAsync를 사용하면 사용자가 “확인”을 눌렀는지 “취소”를 눌렀는지 Promise 결과로 받을 수 있어요.

import { useState } from 'react';
import { OverlayProvider, overlay } from 'overlay-kit';
import { Button, Modal } from 'antd';

function App() {
  const [result, setResult] = useState<boolean | null>(null);

  return (
    <div>
      <p>결과: {result === null ? '선택 없음' : result ? '네' : '아니요'}</p>
      <Button
        type="primary"
        onClick={async () => {
          const confirmed = await overlay.openAsync<boolean>(({ isOpen, close }) => (
            <Modal
              title="정말로 계속하시겠어요?"
              open={isOpen}
              onCancel={() => close(false)}
              onOk={() => close(true)}
              cancelText="아니요"
              okText="네"
            />
          ));
          setResult(confirmed);
        }}
      >
        Confirm Dialog 열기
      </Button>
    </div>
  );
}

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

Open Sandbox

애니메이션 후 메모리 해제

Ant Design Modal은 닫기 애니메이션이 끝난 뒤에 실행되는 afterClose 콜백을 제공해요. 여기에 unmount를 전달하면 애니메이션을 유지하면서 메모리를 안전하게 해제할 수 있어요.

import { OverlayProvider, overlay } from 'overlay-kit';
import { Button, Modal } from 'antd';

function App() {
  return (
    <Button
      type="primary"
      onClick={() => {
        overlay.open(({ isOpen, close, unmount }) => (
          <Modal
            title="정말로 계속하시겠어요?"
            open={isOpen}
            onCancel={close}
            onOk={close}
            afterClose={unmount}
            cancelText="아니요"
            okText="네"
          />
        ));
      }}
    >
      Confirm Dialog 열기
    </Button>
  );
}

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

Open Sandbox

Chakra UI shadcn/ui