개요

DndPage는 직관적인 드래그 앤 드롭(Drag & Drop) 인터페이스를 구현한 React 컴포넌트입니다. @dnd-kit 라이브러리를 활용하여 접근성을 고려한 현대적인 드래그 앤 드롭 기능을 제공하며, 관리자 메뉴 우선순위 설정과 같은 실무 시나리오를 시연합니다.

주요 기능

1. 드래그 앤 드롭 정렬

• 라이브러리: @dnd-kit/core, @dnd-kit/sortable 사용
• 정렬 전략: 수직 리스트 정렬 (verticalListSortingStrategy)
• 충돌 감지: closestCenter 알고리즘 적용
• 접근성: 키보드 네비게이션 및 스크린 리더 지원

2. 시각적 피드백

• 드래그 상태: 투명도 조절 및 스케일 효과
• 호버 효과: 그림자 및 트랜지션 애니메이션
• 드래그 핸들: 직관적인 그립 아이콘으로 드래그 영역 표시
• 우선순위 표시: 색상별 태그로 중요도 구분

3. 실시간 상태 관리

• 순서 추적: 현재 아이템 순서 실시간 표시
• 우선순위 분류: 높음/중간/낮음별 아이템 개수 통계
• 메모이제이션: memo와 useCallback을 통한 성능 최적화

기술적 구현

Native HTML5 Drag and Drop API 구현

드래그 상태 관리