Popup

import { Popup, Button } from '@polarisoffice/pds-react';
import { useState } from 'react';

const [open, setOpen] = useState(false);
const close = () => setOpen(false);
const remove = () => { /* 삭제 처리 */ close(); };

<Button variant="delete" onClick={() => setOpen(true)}>삭제</Button>

<Popup
  open={open}
  onClose={close}
  title="정말 삭제할까요?"
  footer={
    <>
      <Button variant="default" onClick={close}>취소</Button>
      <Button variant="delete" onClick={remove}>삭제</Button>
    </>
  }
>
  삭제된 데이터는 복구할 수 없습니다.
</Popup>

import { Popup, Button } from '@polarisoffice/pds-react';

<Popup
  open={open}
  onClose={close}
  title="서비스 점검 안내"
  footer={<Button variant="primary" onClick={close}>확인</Button>}
>
  6월 30일 02:00–04:00 서비스 점검이 예정되어 있습니다.
</Popup>

import { Popup, Button } from '@polarisoffice/pds-react';

<Popup
  open={open}
  onClose={close}
  closable
  title="Title"
  footer={<Button variant="primary">하러가기</Button>}
>
  Body 내용이 들어가는 영역입니다.
</Popup>

import { Popup, Button } from '@polarisoffice/pds-react';

<Popup
  open={open}
  onClose={close}
  closable
  title="Title"
  dontShowAgain
  onDontShowAgainChange={setSkip}
  footer={<Button variant="primary">확인</Button>}
>
  Body 내용이 들어가는 영역입니다.
</Popup>