Dialog

사용자 결정이 필요한 내용을 모달로 띄워요. Radix 기반의 유일한 클라이언트 컴포넌트라 'use client' 경계 안에서 렌더해요.

사용법

tsx

'use client'
import {
  Dialog, DialogTrigger, DialogContent, DialogHeader,
  DialogTitle, DialogDescription, DialogFooter, DialogClose, Button,
} from '@openiot/ui'

export function Example() {
  return (
    <Dialog>
      <DialogTrigger asChild><Button variant="outline">프로필 수정</Button></DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>프로필 수정</DialogTitle>
          <DialogDescription>변경 사항을 저장하려면 확인을 누르세요.</DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <DialogClose asChild><Button variant="ghost">취소</Button></DialogClose>
          <DialogClose asChild><Button>저장</Button></DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

Bottom Sheet

화면 하단에서 올라와 선택지를 제공하는 다이얼로그예요. 옵션 리스트·간단한 확인에 써요. Dialog 와 같은 Radix 기반이며 하단 슬라이드 애니메이션과 핸들이 기본 포함돼요.

tsx

'use client'
import {
  BottomSheet, BottomSheetTrigger, BottomSheetContent,
  BottomSheetHeader, BottomSheetTitle, BottomSheetFooter, BottomSheetClose,
  Button, RadioGroup, RadioGroupItem,
} from '@openiot/ui'

<BottomSheet>
  <BottomSheetTrigger asChild><Button variant="outline">옵션 선택</Button></BottomSheetTrigger>
  <BottomSheetContent>
    <BottomSheetHeader><BottomSheetTitle>정렬 기준</BottomSheetTitle></BottomSheetHeader>
    <RadioGroup defaultValue="recent" className="gap-3 px-2">
      <label className="flex items-center gap-2"><RadioGroupItem value="recent" /> 최신순</label>
    </RadioGroup>
    <BottomSheetFooter>
      <BottomSheetClose asChild><Button className="w-full">확인</Button></BottomSheetClose>
    </BottomSheetFooter>
  </BottomSheetContent>
</BottomSheet>

구성 요소

Prop	Type	Default	설명
Dialog	Root	—	defaultOpen?, open?, onOpenChange?, modal? 를 받는 루트
DialogTrigger	asChild	—	다이얼로그를 여는 트리거 (보통 Button 위임)
DialogContent	—	—	오버레이 + 패널(max-w-lg, rounded-lg) + X 닫기 내장
DialogHeader	—	—	Title/Description 묶음 영역
DialogTitle	—	—	제목 (text-lg font-semibold)
DialogDescription	—	—	보조 설명 (text-sm muted)
DialogFooter	—	—	우측 정렬 액션 영역
DialogClose	asChild	—	닫기 액션 (Footer 버튼에 위임)

사용법

Bottom Sheet

구성 요소

접근성