BootstrapDialog로 사용자 확인(체크박스) 다이얼로그 만들기

이 글에서는 BootstrapDialog를 활용해 사용자에게 확인 메시지를 표시하고, 특정 조건(체크박스 선택)이 충족될 때만 동작을 수행하는 다이얼로그를 구현하는 방법을 소개합니다.

---

목표

1. BootstrapDialog를 사용하여 사용자 확인 다이얼로그 생성
   • 사용자에게 중요한 작업(예: 데이터 저장, 취소)을 확인받기 위한 UI를 제공.
2. 체크박스 선택 여부로 동작 제한
   • 사용자가 확인 체크박스를 선택하지 않으면 진행되지 않도록 구현.
3. 사용성 향상 및 코드 구조화
   • 이해하기 쉬운 로직과 이벤트 처리를 통해 유지보수성을 높임.

---

구현하기

예제 1: BootstrapDialog.show() 사용

이 예제에서는 BootstrapDialog.show() 메서드를 이용하여 대화상자를 생성합니다. 이 방법은 즉시 대화상자를 띄우고자 할 때 유용합니다.

BootstrapDialog.show({
  type: BootstrapDialog.TYPE_DANGER, // 다이얼로그의 유형 설정 (Danger 스타일)
  title: '저장', // 다이얼로그 제목
  message: `
    취소하시겠습니까?<br/><br/>
    <div>
      <label>
        <input type="checkbox" id="confirmCheck" />
        확인 했습니다.
      </label>
    </div>
  `, // 메시지와 확인용 체크박스 추가
  closable: true, // 닫기 버튼 허용
  draggable: true, // 다이얼로그 드래그 가능
  buttons: [
    {
      label: 'Cancel', // 취소 버튼
      cssClass: 'btn-secondary',
      action: function (dialog) {
        const confirmCheck = document.getElementById('confirmCheck');
        if (confirmCheck) {
          confirmCheck.remove(); // 체크박스 DOM 제거
        }
        dialog.close(); // 다이얼로그 닫기
      }
    },
    {
      label: 'OK', // 확인 버튼
      cssClass: 'btn-danger',
      action: async function (dialog) {
        // 체크박스 상태 확인
        const confirmCheck = document.getElementById('confirmCheck');
        if (confirmCheck && !confirmCheck.checked) {
          alert('체크박스를 선택해주세요.'); // 체크박스 미선택 시 경고
          return;
        }

        // 로직 실행
        console.log('작업을 진행합니다.');

        if (confirmCheck) {
          confirmCheck.remove(); // 체크박스 DOM 제거
        }
        dialog.close(); // 다이얼로그 닫기
      }
    }
  ]
});

---

코드 설명

1. BootstrapDialog.show() 호출
   다이얼로그를 표시하는 기본 함수입니다. type, title, message 등 다이얼로그의 속성을 설정할 수 있습니다.
2. 체크박스 추가
   메시지(message)에 HTML로 <input type="checkbox"> 요소를 추가합니다.
   • id="confirmCheck"로 DOM 접근을 간단히 처리할 수 있습니다.
3. Cancel 버튼 동작
   사용자가 취소 버튼을 클릭하면:
   • 다이얼로그가 닫히고(dialog.close()),
   • 체크박스가 DOM에서 제거됩니다(confirmCheck.remove()).
4. OK 버튼 동작
   • 체크박스 선택 여부 확인
     체크박스(confirmCheck)가 선택되지 않은 상태에서 진행을 막고 경고 메시지를 표시합니다.
   • 작업 로직 실행
     작업 수행 후 다이얼로그를 닫고, 체크박스를 DOM에서 제거합니다.
5. 장단점
    장점
   • 간편한 방법: 코드가 간결하고, 대화상자가 바로 뜨므로 즉시 확인 대화상자를 띄울 때 유용합니다.
   • 유연한 버튼 구성: 버튼을 자유롭게 추가하고, 각 버튼에 맞는 행동을 지정할 수 있습니다.
   단점
   • 제어의 어려움: 대화상자의 상태를 코드에서 계속 추적하기 어렵고, 여러 대화상자를 동시에 사용할 때 관리가 어려울 수 있습니다.

 

예제 2: BootstrapDialog 객체 생성 후 사용

이 예제에서는 BootstrapDialog 객체를 전역 변수로 선언하고, 필요할 때마다 open() 메서드를 호출하여 대화상자를 띄웁니다. 이 방법은 동적 생성을 원하는 경우에 유용합니다.

 

if (!dialog) newDialog();

dialog.open();

let dialog;
const newDialog = () => {
  dialog = new BootstrapDialog({
    title: '저장',
    message: '저장하시겠습니까?<br/><br/><div><label><input type="checkbox" id="confirmCheck" /> 저장확인 했습니다.</label></div>',
    buttons: [
      {
        label: 'Cancel',
        cssClass: 'btn-secondary',
        action: function(dialog) {
          dialog.close();
        }
      },
      {
        label: 'OK',
        cssClass: 'btn-secondary',
        id: 'confirm-button',
        action: async function(dialog) {
          // 체크박스 상태 확인
          const confirmCheck = document.getElementById('confirmCheck');
          if (confirmCheck && !confirmCheck.checked) {
            alert('체크박스를 선택해주세요.');
            return;
          }
          // 로직 실행
          console.log('작업을 진행합니다.')
          confirmCheck.checked = false; // 체크박스 상태 초기화
          dialog.close();
        }
      }
    ],
  });
};

---

코드 설명

• dialog 객체: BootstrapDialog 객체를 전역 변수로 선언하고, newDialog() 함수에서 한 번만 초기화합니다.
• buttons: "Cancel"과 "OK" 버튼을 정의하며, "OK" 버튼 클릭 시 체크박스를 확인하고, 체크된 경우에만 로직을 실행합니다.
• open() 메서드: dialog.open()으로 대화상자를 열 수 있습니다. 이 방식은 dialog 객체가 이미 존재하는 경우, 다시 생성하지 않고 열기만 합니다.

장점

• 재사용성: 대화상자를 여러 번 열고 닫을 수 있어, 동일한 대화상자를 반복적으로 사용해야 하는 경우 유용합니다.
• 상태 관리 용이: 대화상자의 객체를 변수로 관리하므로, 상태나 설정을 보다 쉽게 변경하거나 추적할 수 있습니다.

단점

• 초기화 필요: 처음에는 newDialog()를 호출하여 대화상자를 초기화해야 하므로, 초기화 코드가 필요합니다.
• 복잡성 증가: 코드가 더 복잡해져서, 간단한 대화상자에는 불필요할 수 있습니다.

 

---

사용자 경험 디자인

체크박스 활용 이유

• 확인 절차 강화: 작업의 중요도를 사용자에게 상기.
• 오작동 방지: 실수로 인한 작업 진행을 예방.

UI 예시

1. 다이얼로그 표시 화면

• 제목: "저장"
• 메시지: 작업 취소 메시지와 확인 체크박스
• 버튼: "Cancel"과 "OK" 버튼

<이미지: 다이얼로그 UI 스크린샷>

---

주요 팁

1. 동적 DOM 조작
   • 다이얼로그가 닫힐 때 추가한 DOM 요소(체크박스)를 제거해 메모리 누수 방지.
2. 유효성 검사
   • OK 버튼 클릭 시 체크박스가 선택되지 않으면 경고를 표시하고 작업 진행을 막습니다.
3. Svelte와의 통합
   • 이 코드는 독립적인 JavaScript로 작성되었지만, Svelte 컴포넌트 내에서 BootstrapDialog를 사용할 수 있습니다.
   • 메시지나 로직은 Svelte의 상태 및 스토어와 연동해 동적으로 변경 가능합니다.

---

추천하는 방법

• 단순한 경우: 대화상자가 단 한 번만 사용된다면 예제 1처럼 BootstrapDialog.show()를 사용하는 것이 더 간편하고 직관적입니다.
• 여러 번 사용해야 할 경우: 대화상자가 여러 번 필요하거나, 대화상자의 상태를 관리해야 한다면 예제 2처럼 BootstrapDialog 객체를 생성하여 관리하는 것이 더 효율적입니다.

결론

두 예제 모두 실용적인 방법이지만, 예제 1은 간단하고 즉시 대화상자를 표시할 때 유용하고, 예제 2는 대화상자의 상태를 관리하거나 여러 번 재사용할 때 유리합니다. 사용하려는 목적에 따라 적합한 방식을 선택하면 됩니다.