이 글은 칸반 보드 기능 구현 과정을 데이터 모델 설계부터 자세히 설명합니다.
데이터 모델 구성
Board, Board::Column, Board::Card 모델이 기본 구조를 이룹니다. Board::Column과 Board::Card는 positioned 젬을 활용하여 position 속성을 관리하며, to_partial_path 메서드를 오버라이드하여 뷰 파일 구조를 간결하게 만듭니다. 특히 Board::Card는 폴리모픽 연관 관계 (belongs_to :resource, polymorphic: true)를 사용하여 Message와 같은 다양한 리소스를 카드에 연결, 유연성을 제공합니다.
기본 UI 및 뷰 설정
Tailwind CSS를 사용하여 UI를 구성하며, _board.html.erb, _column.html.erb, _card.html.erb 뷰 파일에서 Rails의 부분 렌더링 기능과 to_partial_path 덕분에 간결한 템플릿 경로를 활용합니다.
컬럼 및 카드 재정렬
핵심 기능인 드래그 앤 드롭은 Stimulus 컨트롤러 (sortable_controller.js)를 통해 구현됩니다.
-
SortableJS 통합:
Sortable.create를 사용하여[draggable]요소에 드래그 기능을 부여하고, 애니메이션 및 고스트 클래스 설정을 통해 부드러운 사용자 경험을 제공합니다. -
위치 업데이트:
onEnd콜백에서Rails Request.js의patch요청을 통해 백엔드로new_position값을 전송합니다.ColumnsController와CardsController는 이 값을 받아 해당Board::Column또는Board::Card의position을 업데이트합니다.
컬럼 간 카드 이동
카드를 컬럼 간에 이동시키는 기능은 Stimulus 컨트롤러에 group 옵션을 추가하여 구현합니다.
-
그룹 설정:
group: this.groupNameValue를 통해 SortableJS 그룹을 지정하여 여러 리스트 간 드래그를 허용합니다. -
목록 변경 감지 및 백엔드 업데이트:
onEnd이벤트에서 새로운 컬럼의 ID를event.to.dataset.sortableListIdValue로 감지하고,new_list_id파라미터와 함께CardsController에 전달합니다.CardsController는board_column_id와position을 동시에 업데이트하여 카드의 소속 컬럼과 순서를 변경합니다.