Dialog

사용

import {
  Dialog, DialogTrigger, DialogContent,
  DialogNavigation, DialogBody, DialogActionArea,
  DialogTitle, DialogDescription, DialogClose,
} from "@fluxloop-ai/pds-ui/components/dialog";

<Dialog>
  <DialogTrigger asChild><Button>열기</Button></DialogTrigger>
  <DialogContent size="md">
    <DialogNavigation>
      <DialogTitle>제목</DialogTitle>
      <DialogClose />
    </DialogNavigation>
    <DialogBody>...</DialogBody>
    <DialogActionArea>
      <Button>확인</Button>
    </DialogActionArea>
  </DialogContent>
</Dialog>

Popup

Full

DialogContent Props

Prop	타입	기본	설명
variant	popup | full	popup	popup 중앙 정렬, full 화면 거의 전체
size	sm | md | lg | xl	sm	width — popup 모드에만 적용. sm=320 / md=400 / lg=520 / xl=680
resize	fixed | free	fixed	fixed 는 680px cap, free 는 viewport cap
autoFocusOnOpen	boolean	true	false 면 열릴 때 Radix의 기본 focus 이동을 막음

Slots

Slot	컴포넌트
Overlay	DialogOverlay (Portal 내부 자동)
Container	DialogContent
Navigation	DialogNavigation — 상단 바, 제목/Close 배치
Content	DialogBody — 스크롤 영역
ActionArea	DialogActionArea — 하단 액션 바. 내부 버튼은 min-width: 64px 강제

액션 버튼 컨벤션

DialogActionArea 안에서는 Button variant를 다음과 같이 쓰세요.

역할	Button variant	예
주 동작 (확정/저장/생성)	solid	저장, 만들기, 확인
보조 동작 (취소/닫기)	primary	취소, 닫기
파괴적 동작	danger	삭제

<DialogActionArea>
  <DialogClose asChild>
    <Button variant="primary">취소</Button>
  </DialogClose>
  <Button variant="solid">저장</Button>
</DialogActionArea>

미포함

• bottom variant — 모바일 패턴. 데스크탑 앱 기준이라 미포함
• drag handle / peekHeight — bottom 용 prop, 함께 유보

Registry 설치

npx shadcn add https://pds.pluto.com/r/dialog