✏️ 작성자: 주효식 HYOSITIVE
📌 작성자의 한마디: 드래그 앤 드롭, 어렵지 않아요~
최근 나는 드래그 기반의 계획표 서비스인 'DRAG ME'를 개발하고 있다.
우리 서비스의 특징은, 이름에서도 알 수 있듯이 '드래그' 기능이 굉장히 많이 사용된다는 점이다.
특정 계획에 대한 시간을 설정할 때, 특정 계획을 다른 날짜로 이동할 때 모두 드래그 기능이 사용된다.
다양한 드래그 기능들 중, 로직을 구성하고 DB를 설계하는 데 가장 많은 고민을 들였던 부분 중 하나가 바로 '드래그 앤 드롭'으로 인한 순서 변경이었다.
오늘 글에서는 이 기능을 구현하는 과정에서 직면했던 문제를 소개하고, 이를 어떻게 구현했는지에 대해 소개하려고 한다.
그리고 이 계획블록들은, '해당 영역' 내에서 순서 변경이 가능하다.
예를 들어, 왼쪽 이미지의 첫 번째 계획블록인 '드래그미 팀원 만나 팀플'을 7월 25일의 다른 계획블록들 사이나 아래로 옮길 수 있다는 뜻이다.
각 계획블록들은 날짜 변경, 미루기, 자주 사용하는 계획 등록 등의 기능을 통해, 각각 미룬 계획, 자주 사용하는 계획 영역으로 이동할 수 있었고, 각 영역 내에서 모두 순서 변경이 가능했다.
또, 하나의 계획블록 내부에 하위 계획블록을 생성 할 경우, '특정 상위 계획블록의 내부'가 또 다른 영역이 되어 하위 계획블록 내부의 순서가 생겼다.
각 영역 내에서 계획블록들의 순서는 '사용자의 우선순위'를 나타내는 중요한 지표였기 때문에, 이 순서의 관리와 변경이 매우 중요한 기능이었다.
예를 들어, 영역 내의 a, b, c, d, e라는 계획블록들이 각각 0, 1, 2, 3, 4의 절대값 인덱스를 가지고 있을 경우를 생각 해 보겠다.
이 때, a 블록을 맨 아래로 이동할 경우, 실제로 이동하는 블록은 a이지만, 5개의 계획블록들의 모든 인덱스를 모두 변경해줘야 한다.
즉, 변경 후의 a, b, c, d, e 계획블록의 인덱스는 4, 0, 1, 2, 3이 되어야 한다.
계획블록의 개수가 더 늘어나고, 다른 영역으로의 이동까지 고려한다면, 이처럼 절대값 인덱스를 가지는 방식은 분명 무리였다.
이 때문에 다양한 방법을 생각해 보았고, 연결 리스트 구조의 적용까지 생각하던 차에 좋은 레퍼런스를 발견할 수 있었다.
이 방법을 사용해 드래그미 서비스의 필수적이고 중요한 기능을 제대로 구현할 수 있었고, 하나의 기능을 위해 더 효율적인 방법에 대해 고민해보며 많이 성장할 수 있었다.
마지막으로, 우리 팀의 Github 저장소 링크를 공유하며 글을 마친다.
와 신기하네요 ,,