BrutRB 웹 컴포넌트를 활용한 JavaScript 없는 폼 제출 확인 대화 상자 구현

BrutRB의 웹 컴포넌트는 brut-confirm-submit 및 brut-confirmation-dialog라는 두 가지 주요 요소를 통해 폼 제출 확인 기능을 제공합니다. 이 방식의 가장 큰 장점은 어떠한 JavaScript 코드도 작성할 필요가 없다는 점입니다. 개발자는 오직 HTML 마크업을 사용하여 확인이 필요한 버튼을 brut-confirm-submit 태그로 감싸고, 원하는 메시지를 message 속성으로 지정하면 됩니다.html<form> <brut-confirm-submit message="정말 저장하시겠습니까?"> <button>저장</button> </brut-confirm-submit></form>확인 대화 상자의 실제 UI는 brut-confirmation-dialog 컴포넌트를 사용하여 정의합니다. 이 컴포넌트 내부에 표준 <dialog> 요소를 포함시켜 대화 상자의 구조와 내용을 자유롭게 구성할 수 있습니다. 예를 들어, 제목, 확인 버튼, 취소 버튼 등을 직접 마크업하여 원하는 대로 배치할 수 있습니다.html<brut-confirmation-dialog> <dialog> <h1></h1> <button value="ok"></button> <button value="cancel">취소</button> </dialog></brut-confirmation-dialog>이러한 접근 방식은 CSS를 통해 대화 상자의 모든 시각적 요소를 완벽하게 제어할 수 있게 합니다. 폰트, 색상, 레이아웃 등 디자인 관련 모든 측면을 CSS로 커스터마이징할 수 있어, 애플리케이션의 기존 디자인 시스템에 완벽하게 통합될 수 있습니다. 또한, 이 솔루션은 점진적 개선(Progressive Enhancement) 원칙을 따릅니다. 이는 JavaScript가 비활성화되거나 로드되지 않아도 기본적인 폼 제출 기능은 유지되며, 웹 컴포넌트가 로드될 때 추가적인 사용자 경험을 제공한다는 의미입니다. 기존 HTML 요소에 ‘마법’ 같은 비표준 속성을 추가하지 않으므로, 마크업이 깔끔하고 이해하기 쉽습니다.