Turbo confirm를 네이티브 다이얼로그로 교체

Source: Dev.to

Rails는 turbo‑links를 사용할 때 파괴적인 액션에 대한 내장 확인 대화상자를 제공합니다. 아마도 수없이 사용해 보셨을 겁니다:

기본 turbo_confirm은 브라우저의 네이티브 confirm 대화상자를 사용합니다. 동작은 하지만 외관이나 내용에 대한 제어가 불가능합니다.

turbo_confirm을 네이티브 다이얼로그로 교체하기

아래는 마크업과 스타일링을 완전히 제어할 수 있는 최소한의 접근법입니다.

1. turbo_confirm 속성 제거

원래 버튼을 Stimulus‑style 액션을 트리거하는 일반 버튼으로 교체합니다:

2. 다이얼로그 마크업 추가

버튼 바로 뒤에 <dialog> 요소를 배치합니다:

<dialog closedby="any">
  <h4>Really delete?</h4>

  <p>Are you sure you want to delete post ""? This cannot be undone.</p>

  <button type="button" data-action="dialog#close">Cancel</button>
  <%= button_to "Delete", post_path(@post), method: :delete, data: { turbo_confirm: false } %>
</dialog>

• closedby="any"는 사용자가 다이얼로그 외부를 클릭하거나 Esc 키를 눌러 닫을 수 있게 합니다.
• 내부의 button_to가 실제 삭제를 수행합니다.

3. Attractive.js 포함하기

레이아웃에 Attractive.js를 추가합니다(예: app/views/layouts/application.html.erb):

이 라이브러리는 dialog#openModal 액션을 제공하므로 별도의 JavaScript를 작성할 필요가 없습니다. 자세한 내용은 docs를 참고하세요.

4. 다이얼로그 스타일링

다이얼로그는 원하는 대로 스타일링할 수 있습니다. 저장소에는 기본 스타일링 예제가 포함되어 있습니다. 고급 CSS 기법은 현대 CSS에 관한 글을 참고하세요.

어떤 상황에 어떤 접근법을 사용할까?

커스텀 다이얼로그는 추가 JavaScript 없이도 간단하게 구현할 수 있으며, 사용자 경험을 완전히 제어할 수 있습니다. ✨