트렐로 프로젝트 - 카드 변경 기능 개발

1. 문제 정의

Trello 클론 프로젝트에서 카드를 드래그 앤 드롭으로 이동하는 기능을 구현하고자 했다(백엔드 밖에 없지만).
카드는 리스트 내에서 특정한 위치로 이동할 수 있으며, 이동 후에는 정렬된 순서를 유지해야 한다.
이를 위해 카드의 순서를 나타내는 order 값을 기반으로 이동 위치를 업데이트하는 로직을 작성했다.

2. 초기 접근

처음에는 아래 세 가지 경우만 고려했다:

제일 앞에 두는 경우: 이동할 위치가 첫 번째일 때
제일 뒤에 두는 경우: 이동할 위치가 마지막일 때
중간에 두는 경우: 이동할 위치가 리스트 내 중간일 때

이 경우, order 값을 계산하는 방식은 다음과 같다:

제일 앞에 이동: 첫 번째 카드의 order 값을 반으로 나누어 새로운 order 값으로 설정
제일 뒤에 이동: 마지막 카드의 order 값에 +1을 더해 새로운 order 값으로 설정
중간에 이동: 앞 카드와 뒤 카드의 중간값을 새로운 order 값으로 설정

초기 코드

if (moveCardDto.order === 1) {
  newOrder = cards[0].order / 2;
} else if (moveCardDto.order >= cards.length) {
  newOrder = cards[cards.length - 1].order + 1;
} else {
  const targetOrder = cards[moveCardDto.order].order;
  const preTargetOrder = cards[moveCardDto.order - 1].order;
  newOrder = (targetOrder + preTargetOrder) / 2;
}

이 로직은 간단하고 직관적이었지만, 예상치 못한 문제가 발생했다...

3. 문제점 발견

위의 로직으로 구현했을 때, 앞쪽에서 뒤쪽으로 이동하는 경우에 카드 순서가 밀리는 문제가 발생했다. 예를 들어, 2번째 카드가 5번째 위치로 이동할 때, 새로 계산된 order 값이 예상보다 앞서서 카드가 의도하지 않은 위치에 배치되는 상황이 생겼다.

이 문제는 이동 방향에 따라 참조하는 카드가 달라지기 때문에 발생하는 문제였다 :

뒤에서 앞으로 이동할 때는, 목표 위치의 이전 카드와 목표 위치의 현재 카드 사이의 order 값을 계산.
앞에서 뒤로 이동할 때는, 목표 위치의 현재 카드와 목표 위치의 다음 카드 사이의 order 값을 계산.

4. 문제 해결: 경우 추가

이 문제를 해결하기 위해 이동 방향을 고려한 조건을 추가했습니다:

뒤에서 앞으로 이동 (moveCardDto.order < card.order)
- 목표 위치의 이전 카드와 목표 위치의 현재 카드를 기준으로 order 값을 계산
앞에서 뒤로 이동 (moveCardDto.order > card.order)
- 목표 위치의 현재 카드와 목표 위치의 다음 카드를 기준으로 order 값을 계산

최종 수정된 코드

if (moveCardDto.order === 1) {
  // 제일 앞에 두는 경우
  newOrder = cards[0].order / 2;
} else if (moveCardDto.order >= cards.length) {
  // 제일 뒤에 두는 경우
  newOrder = cards[cards.length - 1].order + 1;
} else if (moveCardDto.order > card.order) {
  // 앞에서 뒤로 이동하는 경우
  const targetOrder = cards[moveCardDto.order].order;
  const preTargetOrder = cards[moveCardDto.order - 1].order;
  newOrder = (targetOrder + preTargetOrder) / 2;
} else {
  // 뒤에서 앞으로 이동하는 경우
  const targetOrder = cards[moveCardDto.order - 1].order;
  const preTargetOrder = cards[moveCardDto.order - 2].order;
  newOrder = (targetOrder + preTargetOrder) / 2;
}

5. 최종 결과

이제 로직이 모든 경우를 정확하게 처리할 수 있다:

제일 앞이나 뒤로 이동하는 경우를 문제없이 처리.
이동 방향에 따라 기준이 되는 카드를 정확하게 참조하여, 카드 순서가 밀리는 문제를 해결.

이 글이 카드 이동 로직을 설계하는 데 도움이 되기를 바랍니다.

저작자표시 비영리 변경금지

청록