FullPopup

화면 전체를 덮는 팝업이다. 오른쪽에서 슬라이드해 들어오고, 모바일에서 한 화면짜리 흐름(상세 보기 · 긴 양식)을 띄울 때 쓴다. 폭이 화면이므로 size 를 받지 않는다. 그 외의 props 와 여는 법은 LayerPopup 과 같다.

import { FullPopup, useFullPopup } from "@nui-kit/react";
// 서브패스로 좁힐 때
import { FullPopup } from "@nui-kit/react/popup";
import "@nui-kit/react/styles/popup.css";   // 온디맨드일 때

선언형 — 열림 상태를 직접 소유

<FullPopup open={isOpen} onRequestClose={() => setIsOpen(false)} isTopmost title="상세 정보">…</FullPopup>

open · onRequestClose · isTopmost

명령형 — 컴포넌트를 등록해서 열기

useFullPopup().open({ component }) 로 내용 컴포넌트를 넘긴다.

fullPopup.open({ component: DetailPopup });

useFullPopup().open({ component })

LayerPopup 과 다른 점

	LayerPopup	FullPopup
덮는 범위	가운데 패널, 주변은 dim	화면 전체. dim 이 보이지 않는다
등장	페이드 + 살짝 확대	오른쪽에서 슬라이드
`size`	small · regular · large	받지 않는다
safe-area	—	노치·홈 인디케이터를 피해 여백을 잡는다
기본 접근 이름	"레이어 팝업"	"전체 팝업"

접근성

제목이 없으면 aria-label="전체 팝업" 이 붙는다. dialogLabel 로 바꾼다
dim 이 안 보여도 ESC 와 닫기 버튼으로 닫힌다. 화면을 다 덮으므로 닫기 버튼(hasCloseButton)을 끄지 않는 편이 안전하다
prefers-reduced-motion 에서는 슬라이드 없이 페이드만 남는다
포커스 트랩 · 배경 inert · 쌓임 등 공통 계약은 Popup 개요

API

FullPopup

이름	타입	기본값	설명
`open` *	boolean	—	—
`bodyClassName`	string	—	—
`children`	ReactNode	—	—
`className`	string	—	—
`closeButtonLabel`	string	—	—
`contentAlign`	PopupContentAlign	—	—
`description`	ReactNode	—	—
`dialogLabel`	string	—	title 이 없을 때 dialog 에 붙일 접근 이름
`footer`	ReactNode	—	—
`footerClassName`	string	—	—
`hasCloseButton`	boolean	—	—
`icon`	ReactNode \| null	—	—
`id`	string	—	—
`isTopmost`	boolean	—	스택 최상단인가 — 포커스 트랩과 ESC 를 이 팝업만 처리한다
`onClickClose`	() => void	—	—
`onExited`	() => void	—	닫힘 애니메이션까지 끝난 뒤 호출된다
`onRequestClose`	() => void	—	—
`panelClassName`	string	—	—
`shouldCloseOnBackdrop`	boolean	—	dim 클릭으로 닫히는가
`shouldCloseOnEscape`	boolean	—	—
`title`	ReactNode	—	—

FullPopupProps 에서 자동 생성됨 (components/Popup/Popup.types.ts).