Dialog - OLUN. Design System

primitive exports: Dialog · DialogPortal · DialogOverlay · DialogTrigger · DialogClose · DialogContent · DialogRawContent · DialogHeader · DialogFooter · DialogTitle · DialogDescription
포커스 트랩: Radix 자동 — 열릴 때 첫 포커스 이동, 닫힐 때 트리거로 복귀
showCloseButton: DialogContent prop — X 버튼 표시 여부 (기본 false)
열기와 닫기: DialogTrigger asChild와 open/onOpenChange로 모달 상태를 제어합니다.
분리된 조합: ConfirmDialog, FormModal, InfoModal은 별도 페이지에서 다룹니다. 이 페이지는 Dialog primitive의 조합 방식만 설명합니다.

안내형

확인 버튼만 있는 안내 다이얼로그

코드 보기tsx

import {
  Dialog, DialogTrigger, DialogContent,
  DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose,
} from "@olundot/ui";
import { Button } from "@olundot/ui";

// 안내형 Dialog: showCloseButton 없음 (기본 false) — X 버튼 미표시.
// 단순 안내 · 정보 전달에 사용. 확인 버튼 하나로 닫습니다.
// 바깥 클릭과 Esc 키로도 닫힘 (Radix 기본).
// DialogContent 기본 패딩 = var(--space-8) (32px).
export function DialogSimple() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="outline">안내 보기</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>응시 안내</DialogTitle>
          <DialogDescription>
            시험은 60분 제한이며, 제한 시간 종료 시 자동 제출됩니다.
            안정적인 네트워크 환경에서 응시하세요.
          </DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <DialogClose asChild>
            <Button variant="outline">확인</Button>
          </DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

표준

취소와 저장 액션이 있는 기본 primitive 조합

코드 보기tsx

import { useState } from "react";
import {
  Dialog, DialogTrigger, DialogContent,
  DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose,
} from "@olundot/ui";
import { Button } from "@olundot/ui";

// 표준 Dialog: 닫기 버튼 미사용 정책 (showCloseButton 사용 안 함).
// 닫기 방식 = 푸터 취소 버튼(명시적 의도) + 바깥 클릭(수동 닫기) + Esc(키보드).
// 폼 입력 · 데이터 등록 등 일반적인 작업에 사용.
export function DialogStandard() {
  const [open, setOpen] = useState(false);
  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button variant="primary">메모 추가</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>학습 메모 추가</DialogTitle>
          <DialogDescription>이 문항에 대한 학습 노트를 남깁니다.</DialogDescription>
        </DialogHeader>
        <div style={{ display: "grid", gap: "12px" }}>
          <label style={{ display: "grid", gap: "4px", fontSize: "0.875rem" }}>
            <span>제목</span>
            <input
              type="text"
              placeholder="메모 제목"
              style={{
                padding: "8px 12px",
                borderRadius: "var(--radius-md)",
                border: "1px solid var(--border-subtle)",
                background: "var(--bg-surface)",
                color: "var(--text-primary)",
              }}
            />
          </label>
          <label style={{ display: "grid", gap: "4px", fontSize: "0.875rem" }}>
            <span>내용</span>
            <textarea
              rows={3}
              placeholder="학습 메모를 입력하세요"
              style={{
                padding: "8px 12px",
                borderRadius: "var(--radius-md)",
                border: "1px solid var(--border-subtle)",
                background: "var(--bg-surface)",
                color: "var(--text-primary)",
                resize: "vertical",
              }}
            />
          </label>
        </div>
        <DialogFooter>
          <DialogClose asChild>
            <Button variant="outline">취소</Button>
          </DialogClose>
          <Button variant="primary">저장</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}