Overlay Extension 이해하기

Dialog, Toast, Bottom Sheet는 현재 화면 위에 떠서 정보를 전달하거나 선택을 받는 UI예요.

개념

Dialog는 확인·입력이 필요할 때, Toast는 짧은 피드백을, Bottom Sheet는 옵션 선택 같은 보조 작업에 써요. GTD UI는 이 패턴을 공통 컴포넌트로 제공해요.

오버레이가 열려 있는 동안에는 배경과의 상호작용을 줄이고, 닫으면 이전 화면으로 자연스럽게 돌아가요.

Dialog 사용하기

트리거와 콘텐츠를 조합해 선언적으로 다이얼로그를 열 수 있어요.

import { Button, Dialog, DialogContent, DialogTrigger, DialogActions, DialogClose } from "@/components/ui";

<Dialog>
  <DialogTrigger asChild>
    <Button variant="secondary">열기</Button>
  </DialogTrigger>
  <DialogContent title="제목" description="설명">
    <DialogActions>
      <DialogClose asChild><Button variant="ghost">취소</Button></DialogClose>
      <DialogClose asChild><Button>확인</Button></DialogClose>
    </DialogActions>
  </DialogContent>
</Dialog>