Dialog 대화상자

현재 페이지 상태를 유지한 채 사용자에게 알리고 관련 작업을 수행하게 합니다.

기본 사용법

제어되는 대화상자

import { useState } from 'react'
import { LhButton, LhDialog } from '@lh-ui/react'

export default function Demo() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <LhButton type="primary" onClick={() => setOpen(true)}>
        대화상자 열기
      </LhButton>
      <LhDialog
        open={open}
        title="알림"
        width="420px"
        footer={
          <>
            <LhButton onClick={() => setOpen(false)}>취소</LhButton>
            <LhButton type="primary" onClick={() => setOpen(false)}>확인</LhButton>
          </>
        }
        onClose={() => setOpen(false)}
      >
        <p>이것은 제어되는 대화상자입니다.</p>
      </LhDialog>
    </>
  )
}

Dialog Props

프로퍼티	설명	타입	선택 가능한 값	기본값
open	열림 여부 (완전 제어)	boolean	—	false
title	제목 (header가 없을 때 aria-label 폴백으로도 사용)	string	—	—
width	너비	string | number	—	—
fullscreen	전체 화면	boolean	—	false
showClose	닫기 버튼 표시	boolean	—	true
closeOnClickModal	마스크 클릭으로 닫기	boolean	—	true
closeOnPressEscape	Esc 누름으로 닫기	boolean	—	true
draggable	드래그 가능 (제목 표시줄 드래그)	boolean	—	false
center	제목과 바닥 가운데 정렬	boolean	—	false
position	사용자 지정 위치 오프셋	{ top?: string; left?: string }	—	—
lockScroll	열림 시 body 스크롤 잠금	boolean	—	true
beforeClose	닫기 전 가로채기 (false / Promise<false> 반환 시 닫지 않음)	() => boolean | Promise<boolean>	—	—
top	상단과의 거리	string	—	—
zIndex	쌓임 순서 (기본값은 useLhZIndex가 증가하며 할당)	number	—	—
header	사용자 지정 헤더 (title 덮어씀)	ReactNode	—	—
footer	사용자 지정 바닥	ReactNode	—	—
themeVars	컴포넌트 수준 테마 변수	Record<string, string>	—	—
sx	빠른 레이아웃 프로퍼티	SxProps	—	—

Dialog 이벤트

이벤트	설명	콜백 시그니처	Vue 대응
onClose	닫기 요청 (마스크 / Esc / 닫기 버튼이 발생시키며, beforeClose가 가로챈 뒤에는 호출되지 않음)	() => void	update:modelValue
onOpen	열리는 순간 발생 (DOM 마운트 완료)	() => void	@open
onOpened	열림 트랜지션 종료 후 발생	() => void	@opened
onCloseStart	닫힘 트랜지션 시작 시 발생	() => void	@close
onClosed	닫힘 트랜지션 종료 후 발생 (DOM 언마운트)	() => void	@closed

ref

forwardRef<HTMLDivElement>. LhDialogInstance에는 현재 명령형 메서드가 없습니다.

완전 제어 의미

plus와 달리, 이 라이브러리의 Dialog는 내부 isVisible 중간 상태가 없습니다. open은 완전히 외부 state가 가지고 있으며, 모든 닫기 경로는 onClose만 호출합니다. 자세한 내용은 마이그레이션 가이드를 참조하세요.

다중 오버레이 Esc

useLhOverlayStack이 열린 순서 스택을 관리하여, Esc는 스택 최상단 오버레이만 닫고 한 번의 키 입력으로 모든 오버레이가 닫히는 것을 방지합니다.

스타일

import '@lh-ui/react/style/dialog'