🖱️ 드래그앤드롭 운영
파이프라인의 핵심 인터랙션인 드래그앤드롭 기능을 상세히 안내합니다. 카드를 드래그하여 단계를 이동하고, 컬럼 내 순서를 변경할 수 있습니다.
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 삽입 표시선
드롭할 위치에는 파란 삽입 표시선이 그려져, 카드가 어느 자리에 놓일지 미리 보여 줍니다.
3.3 순서 저장
- 컬럼 내 순서는 서버에 저장됨
- 새로고침 후에도 순서 유지
- 다른 사용자에게도 동일하게 표시
4. 다중 선택 드래그
4.1 다중 선택 방법
| 방법 | 설명 |
|---|---|
| Ctrl + 클릭 | 개별 카드 추가 선택 |
| Shift + 클릭 | 범위 선택 |
| 체크박스 | 카드 좌측 체크박스 클릭 |
4.2 다중 선택 표시
여러 카드를 선택하면 각 카드에 체크와 파란 테두리가 표시되고, 하단에 선택 개수가 나타납니다.
4.3 다중 드래그
선택된 카드 중 하나를 드래그하면 모든 선택 카드가 함께 이동합니다.
여러 장을 함께 끌면 카드가 겹쳐진 모습으로 따라오고, 오른쪽 아래에 선택한 개수 배지가 붙습니다.
4.4 다중 이동 제약
| 상황 | 처리 |
|---|---|
| 모두 같은 유형 (리드/기회) | 일괄 이동 |
| 혼합 유형 | 분리 처리 또는 경고 |
| 특수 이동 필요 (수주 등) | 개별 처리 안내 |
5. 키보드 드래그
5.1 키보드 단축키
| 키 | 동작 |
|---|---|
| Space | 선택한 카드 드래그 시작/종료 |
| ← → | 컬럼 간 이동 |
| ↑ ↓ | 컬럼 내 순서 이동 |
| Enter | 드롭 확정 |
| Esc | 드래그 취소 |
5.2 키보드 포커스
Tab 키로 카드 사이를 이동하면 현재 포커스된 카드에 파란 테두리가 표시됩니다. 키보드만으로도 카드를 골라 단계를 바꿀 수 있습니다.
6. 터치 드래그 (모바일)
6.1 터치 제스처
| 제스처 | 동작 |
|---|---|
| 롱프레스 | 드래그 시작 (0.5초) |
| 드래그 | 카드 이동 |
| 릴리스 | 드롭 |
6.2 터치 피드백
- 롱프레스 시 햅틱 피드백 (지원 기기)
- 드래그 중 카드 확대
- 드롭 영역 하이라이트
6.3 모바일 제약
- 다중 선택 미지원 (모바일)
- 컬럼 가로 스크롤 필요
- 작은 화면에서 사이드 패널 전체화면
7. 에러 처리
7.1 드롭 불가 상황
| 상황 | 처리 |
|---|---|
| 규칙 위반 이동 | 드롭 무시 + 경고 토스트 |
| 권한 부족 | 드롭 무시 + 권한 안내 |
| 네트워크 오류 | 롤백 + 재시도 버튼 |
7.2 에러 토스트 예시
❌ 이동 실패
리드는 "제안" 단계로 직접 이동할 수 없습니다. 먼저 기회로 전환해주세요.
[기회 전환] [닫기]
7.3 낙관적 업데이트 롤백
- 드래그앤드롭하면 화면에 즉시 반영됩니다
- 뒤에서 저장 요청이 나갑니다
- 실패하면 원래 위치로 되돌아가고, 에러 안내와 함께 다시 시도할 수 있습니다
8. 성능 최적화
8.1 대량 카드 처리
- 가상화(Virtualization) 적용: 화면에 보이는 카드만 렌더링
- 컬럼당 최대 50개 표시, 이후 "더 보기"
- 필터 활용 권장
8.2 부드러운 애니메이션
- GPU 가속 사용
- 60fps 목표
- 드래그 중 불필요한 리렌더링 방지
9. 자주 묻는 질문
Q. 드래그가 잘 안 돼요.
A. 카드를 0.1초 이상 누르고 있어야 드래그가 시작됩니다. 클릭과 구분하기 위한 딜레이입니다.
Q. 여러 카드를 한 번에 옮기고 싶어요.
A. Ctrl+클릭으로 여러 카드를 선택한 후 드래그하세요.
Q. 드래그 중 실수로 놓았어요.
A. 실제 드롭 전까지 Esc 키를 누르면 취소됩니다. 드롭 후에는 다시 드래그하여 원래 위치로 이동하세요.
Q. 모바일에서 드래그가 어려워요.
A. 카드를 0.5초 이상 길게 누르면 드래그 모드가 시작됩니다. 손가락을 떼지 않고 이동하세요.