Rails 앱에서 Shift+클릭 대량 작업 기능을 구현하기 위한 핵심 단계는 다음과 같습니다.
1. HTML 구조 설정
<ul>태그에data-controller="select"를 추가하여 Stimulus 컨트롤러와 연결합니다.- 각
<li>항목에는data-action="click->select#toggle"을 설정하여 클릭 시 Stimulus 컨트롤러의toggle메서드를 호출하도록 합니다. - 각
<li>내부에는check_box_tag를 사용하여 숨겨진 체크박스를 포함시킵니다. 이 체크박스는 실제 선택 상태를 관리하며,hidden: :hidden옵션으로 UI를 깔끔하게 유지할 수 있습니다.
2. Stimulus 컨트롤러 (select_controller.js) 구현
Stimulus 컨트롤러는 Shift+클릭 로직과 대량 작업 섹션의 가시성 관리를 담당합니다.
toggle(event)메서드:event.shiftKey를 확인하여 Shift 키가 눌렸을 때만 동작합니다. 기본 동작을 방지(event.preventDefault())하고, 현재 클릭된 항목 내의 숨겨진 체크박스의checked상태를 토글합니다.static targets및static values:static targets = ["actions"]를 선언하여 대량 작업 버튼을 포함하는div요소를 참조할 수 있게 합니다.static values = { selectedItems: { type: Number, default: 0 } }를 통해 선택된 항목의 수를 추적하는selectedItemsValue를 정의합니다.selectedItemsValueChanged()메서드:selectedItemsValue가 변경될 때마다 호출됩니다.this.actionsTarget.classList.toggle("visible", this.selectedItemsValue !== 0)를 사용하여 선택된 항목이 하나라도 있으면actions요소에visible클래스를 추가하고, 없으면 제거합니다.#updateSelectedItemsValue()메서드: 모든 체크박스를 순회하며filter메서드를 사용하여checked상태인 체크박스의 수를 계산하고, 이 값을selectedItemsValue에 할당합니다.#checkboxes게터: 컨트롤러 요소 내의 모든 체크박스를 효율적으로 가져오는 프라이빗 게터입니다.
3. 대량 작업 섹션 추가
<ul>태그 내에data-select-target="actions"를 가진div를 추가합니다. 이div안에 “Archive all”, “Delete all” 등과 같은 대량 작업 버튼들을 배치합니다.
4. 백엔드 처리
- 선택된 항목의 ID들은
post_ids[]배열 형태로 컨트롤러(예:Posts::BulkController#update)로 전달되어 백엔드에서 일괄 처리가 가능합니다.