🖱️ 드래그앤드롭 운영 파이프라인의 핵심 인터랙션인 드래그앤드롭 기능을 상세히 안내합니다. 카드를 드래그하여 단계를 이동하고, 컬럼 내 순서를 변경할 수 있습니다. 1. 드래그앤드롭 개요 1.1 지원 동작 1.2 기술 구현 라이브러리 : @dnd-kit/core, @dnd-kit/sortable 애니메이션 : 부드러운 전환 효과 접근성 : 키보드 드래그 지원 2. 단계 이동 (Cross-Column) 2.1 기본 드래그 이동할 카드를 마우스로 클릭 & 홀드 원하는 컬럼으로 드래그 드롭 영역에서 마우스 버튼 해제 2.2 드래그 중 시각 피드백 드래그 시작 드래그 중 드롭 ┌─────────┐ ┌─────────┐ ┌─────────┐ │ ┌─────┐ │ │ │ │ ┌─────┐ │ │ │카드 │ │ → │ │ → │ │카드 │ │ │ └─────┘ │ │ │ │ └─────┘ │ │ ... │ │ ... │ │ ... │ └─────────┘ └─────────┘ └─────────┘ ↓ ┌─────────┐ (드래그 중인 카드) │ 카드 │ (반투명, 그림자 효과) └─────────┘ 시각 효과 드래그 카드 : 살짝 확대, 그림자 추가, 반투명 원래 위치 : placeholder (점선 테두리) 드롭 대상 컬럼 : 배경색 하이라이트 드롭 불가 컬럼 : 빨간 테두리 또는 금지 아이콘 2.3 드롭 가능 여부 표시 2.4 드롭 후 처리 일반 이동 즉시 단계 변경 낙관적 업데이트 (UI 먼저 반영) 백그라운드 API 호출 실패 시 롤백 + 에러 토스트 특수 이동 (모달 필요) 기회 전환: 전환 모달 표시 수주: 수주 처리 모달 표시 실주: 실주 처리 모달 표시 3. 순서 변경 (Within-Column) 3.1 같은 컬럼 내 드래그 컬럼 내에서 카드의 표시 순서를 변경합니다. 카드를 클릭 & 홀드 같은 컬럼 내 원하는 위치로 드래그 다른 카드 사이에 삽입 표시선이 나타남 드롭하여 순서 확정 3.2 삽입 표시선 ┌─────────┐ │ 카드 A │ ├─────────┤ ← 삽입 표시선 (파란색) │ 카드 B │ │ 카드 C │ └─────────┘ 3.3 순서 저장 컬럼 내 순서는 서버에 저장됨 새로고침 후에도 순서 유지 다른 사용자에게도 동일하게 표시 4. 다중 선택 드래그 4.1 다중 선택 방법 4.2 다중 선택 표시 ┌─────────────────┐ │ ☑ 카드 A │ ← 선택됨 (파란 테두리) │ ☑ 카드