최신 브라우저 기능을 활용하여 JavaScript 없이 확인 대화 상자를 구축하는 방법은 다음과 같습니다.
1. 선언적 대화 상자 제어
command 및 commandfor 속성으로 <dialog> 요소를 제어합니다. 버튼에 commandfor="dialog-id" command="show-modal"을, 취소 버튼에는 command="close"를 사용합니다. showModal()로 열린 대화 상자는 Escape 키로 자동 닫히고, closedby="any" 속성으로 배경 클릭 시 닫히는 “라이트 디스미스”를 활성화합니다. aria-labelledby, aria-describedby, role="alertdialog"를 통해 접근성을 확보합니다.
2. CSS 애니메이션 추가
@starting-style 규칙은 요소의 초기 상태를 정의하여 부드러운 진입 애니메이션을 구현합니다. display 및 overlay 속성에 transition-behavior: allow-discrete를 적용하면 불연속적인 속성에도 전환 타이밍이 적용되어 종료 애니메이션이 가능해집니다. 이를 통해 순수 CSS만으로 세련된 대화 상자 전환 효과를 구현할 수 있습니다.
3. Turbo Confirm 시스템 통합
Turbo.config.forms.confirm 함수를 오버라이드하여 data-turbo-confirm 사용 시 사용자 정의 <dialog>를 표시합니다. application.html.erb에 id="turbo-confirm-dialog"를 가진 <dialog> 템플릿을 추가하고, 확인 버튼은 type="submit"과 form method="dialog"를 통해 returnValue로 사용자 응답을 감지합니다. 메시지 설정, data-turbo-confirm-button을 통한 버튼 텍스트 커스터마이징, 그리고 대화 상자를 여는 최소한의 JavaScript만 필요합니다. body:has(dialog:modal) { overflow: hidden; } CSS 규칙으로 모달이 열려 있는 동안 페이지 스크롤을 방지합니다.