컴포넌트FOX · Popup

팝업

화면 가운데에 뜨는 확인 창이에요. 줄무늬 제목 줄이 있는 작은 창 모양이고, 뒤 화면은 먹색으로 40% 가려요. 꼭 답해야 하는 일에만 써요.

확인과 취소

버튼 두 개를 놓을 때 주 행동은 오른쪽이에요. 아래 버튼을 눌러 직접 열어 보세요.

CONFIRM

const [open, setOpen] = useState(false);

<Button onClick={() => setOpen(true)}>송금하기</Button>
<Popup
  open={open}
  onClose={() => setOpen(false)}
  onConfirm={send}
  title="송금 확인"
  cancelLabel="취소"
  confirmLabel="보내기"
>
  김하나 님에게 50,000원을 보낼까요?
</Popup>

되돌리기 어려운 확인

destructive를 켜면 확인 버튼이 빨간 글자가 되고, 키보드 초점은 취소 버튼에서 시작해요. 실수로 Enter를 눌러도 삭제되지 않아요.

DESTRUCTIVE

<Popup
  open={open}
  onClose={() => setOpen(false)}
  title="계좌 삭제"
  cancelLabel="취소"
  confirmLabel="삭제하기"
  destructive
>
  삭제하면 거래 내역도 함께 사라져요.
</Popup>

안내만 하는 팝업

cancelLabel을 빼면 버튼이 하나만 나와요. 알려 주기만 하면 되는 내용에 써요.

ALERT

<Popup open={open} onClose={close} title="안내" confirmLabel="알겠어요">
  점검 중이라 잠시 후에 다시 시도해 주세요.
</Popup>

키보드와 접근성

role은 dialog이고 aria-modal이 켜져 있어요. 열면 초점이 팝업 안으로 들어가고 Tab이 밖으로 나가지 않아요. Escape나 바깥 어두운 영역을 누르면 닫히고, 닫히면 초점이 팝업을 연 버튼으로 돌아가요. 실제 화면에서는 document.body 위에 띄워요.

이렇게 써요

「50,000원을 보낼까요?」 보내기 / 취소

이렇게무엇을 하는지 묻는 문장 하나와 버튼 이름으로 동작을 그대로 써요.

「정말 진행하시겠습니까?」 예 / 아니오

이렇게 말고예와 아니오만 있으면 무엇에 답하는지 다시 읽어야 해요.

속성

속성	값	기본값	설명
`open`	boolean	없음	열림 여부
`onClose`	() => void	없음	Escape, 바깥 영역, 취소 버튼에서 불린다
`title`	string	없음	제목 줄 글자이자 화면 읽기 도구가 읽는 이름
`confirmLabel`	string	`확인`	확인 버튼 글자
`cancelLabel`	string	없음	값을 주면 취소 버튼이 함께 나온다
`onConfirm`	() => void	없음	확인을 누르면 먼저 불리고 이어서 onClose가 불린다
`destructive`	boolean	`false`	확인 버튼이 빨간 글자가 되고 초점이 취소 버튼에 간다
`closeOnScrim`	boolean	`true`	바깥 영역을 눌러 닫을지
`container`	HTMLElement \| null	`document.body`	요소를 주면 그 안에서만 뜬다. 문서 예시용