기존의 dnd-kit 라이브러리 사용하려 구현하려 했으나, 다음과 같은 이유로 프로젝트에 적합하지 않다고 판단하여 커스텀 드래그앤 드롭 기능의 제작 필요성을 느끼게 되었습니다.

• 작동 방식의 제약: dnd-kit은 작동 방식과 프로젝트의 api가 호환되지 않아 원하는 위치로 드래그해도 UI가 바뀌지 않는 문제가 있었습니다.
• UX: 드래그앤 드롭이 직관적이지 않고 부드럽지 않아 사용자가 느끼기에 어색했습니다.
• 성능 최적화: 프로젝트의 성능을 높이기 위해 불필요한 기능을 제거하고, 필요한 기능만 선택적으로 구현할 수 있는 방안이 필요했습니다.

문제점

커스텀 드래그 앤 드롭 기능을 구현하는 과정에서 다음과 같은 문제점들이 발생했습니다:

• 같은 컬럼 내에서 카드 이동 불가:

  다른 컬럼 간의 카드 이동은 정상적으로 동작했으나, 동일한 컬럼 내에서 카드를 드래그하여 순서를 변경하려고 할 때 카드가 이동하지 않았습니다.

• 카드가 컬럼의 가장 아래에만 위치하는 문제:

  카드를 드래그하여 특정 위치에 드롭하려고 해도, 드롭된 카드가 항상 컬럼의 가장 아래에만 위치하는 현상이 발생했습니다. 예를 들어, 카드를 다른 카드들의 중간에 위치시키려 해도 가장 아래에만 위치했습니다.

문제 원인

위의 문제점들은 다음과 같은 원인들로 인해 발생했습니다:

1. 같은 컬럼 내 카드 이동 불가:

   상태 업데이트 로직의 오류: 같은 컬럼 내에서 카드의 순서를 변경할 때, 상태 업데이트 로직이 올바르게 작동하지 않아 카드가 이동되지 않았습니다.

   이벤트 핸들링 부재: 드래그 이벤트와 드롭 이벤트 간의 연동이 제대로 이루어지지 않아 카드 위치 변경이 반영되지 않았습니다.

2. 카드가 컬럼의 가장 아래에만 위치하는 문제:

   드롭 위치 계산 오류: 드롭 시 카드의 최종 위치를 계산하는 로직에 오류가 있어, 항상 최하단에 위치하게 되었습니다.

해결 방안

위 문제점들을 해결하기 위해 다음과 같은 접근 방식을 고려했습니다:

1. 같은 컬럼 내 카드 이동 불가 문제 해결:

   상태 업데이트 로직 수정: 카드의 순서를 변경할 때, 기존 카드 배열을 깊은 복사하여 새로운 순서로 업데이트하도록 로직을 수정했습니다.

   이벤트 핸들링 강화: 드래그 이벤트(onDragStart, onDragOver, onDrop, onDragEnd) 간의 연동을 강화하여, 동일한 컬럼 내에서도 카드의 위치 변경이 정확하게 반영되도록 구현했습니다.

2. 카드가 컬럼의 가장 아래에만 위치하는 문제 해결:

   드롭 위치 계산 로직 개선: 드래그 오버 이벤트에서 마우스 위치를 기반으로 드롭 위치를 정확하게 계산하도록 로직을 개선했습니다. 이를 위해 각 카드의 위치를 기준으로 드롭 인덱스를 동적으로 계산했습니다.

   레이아웃 업데이트 최적화: 카드 드롭 시, 드롭된 카드의 위치를 즉시 반영하기 위해 상태 업데이트와 렌더링 최적화를 실시했습니다.

배운 점

커스텀 드래그 앤 드롭 기능을 구현하면서 다음과 같은 점을 배울 수 있었습니다.

1. 드래그 앤 드롭 로직의 복잡성 이해:

   드래그 앤 드롭 기능을 단순히 자바스크립트 이벤트 핸들러로 해결할 수 있다고 생각했지만 실제 구현에서는 다양한 이벤트와 상태 관리를 복합적으로 생각해야 했습니다. 특히, 드롭 위치 계산과 상태 업데이트 로직의 일관성이 전체 기능의 완성에 많은 부분을 차지함을 배웠습니다.