카카오톡 예약하기, 캘린더 UI 구현 비하인드 스토리

최대 10개의 예약을 한 시간대에 표시하고, 각 예약은 최대 6시간의 소요 시간을 가질 수 있다.

예약 블록들이 빈 공간 없이 최대한 잘 보이도록 배치해야 한다.

이러한 요구사항을 바탕으로, 개발자는 예약 데이터(Reservation Data)를 효율적으로 시각화하는 알고리즘을 설계해야 했다.

이용 시간이 이른 순서대로 정렬: 판매자가 가장 먼저 확인해야 할 예약을 우선 배치하여 사용자 경험(User Experience)을 개선한다.

같은 시간 내 소요 시간이 긴 순서대로 정렬: 블록 확장을 가로막는 긴 예약 건을 먼저 배치하여 공간 효율성(Space Efficiency)을 높인다.

각 예약 건을 그래프의 노드로 표현하고, DFS(Depth-First Search) 알고리즘을 통해 각 노드의 깊이(Depth)와 최대 거리(maxLength)를 계산한다.

계산된 값을 기반으로 각 노드의 left와 width 값을 계산하여 블록을 확장한다.

예외 케이스 발생 시, 남은 공간을 찾아 최소 공간만큼 노드를 확장하는 방식으로 문제를 해결한다.

상위 루트 노드로 인해 하위 노드가 채워지지 않는 경우, 남은 공간을 찾아 노드 확장을 통해 문제를 해결한다.

최소 공간만큼 확장하는 방식을 택하여 UI의 일관성을 유지한다.

이러한 예외 처리 과정을 통해 캘린더 UI의 완성도를 높이고, 다양한 예약 상황에 대응할 수 있도록 한다.