dnd-kit 기반 일정 재배치 시스템의 4가지 Edge Case 해결을 통한 UX 신뢰도 확보

Context

Next.js와 Rails API 기반의 소셜 미디어 캘린더에 Drag-and-drop 재배치 기능을 도입함. 단순한 드래그 구현보다 실제 사용자의 스케줄링 제약 사항과 데이터 무결성을 유지하는 Edge Case 처리가 핵심 과제로 부각됨.

Technical Solution

• Slot Snapping: 커서 위치 기반의 임의 시간 생성을 방지하고 사용자 정의 스케줄 내 가장 가까운 유효 슬롯으로 시간을 보정하는 로직 설계
• Collision Validation: 서버 사이드에서 기존 예약 포스트와의 중복 여부를 검증하여 충돌 발생 시 경고 UI를 출력하는 유효성 검사 프로세스 구축
• State Restoration Undo: 범용 히스토리 스택 대신 드래그 직전의 정확한 Timestamp를 저장하여 단일 키 입력으로 즉시 복원하는 전용 Undo 메커니즘 구현
• Pin-aware Reflow: 런칭일 등 고정된 앵커 포스트는 유지하고 나머지 큐(Queue) 항목만 유동적으로 재배치하는 조건부 리플로우 알고리즘 적용