카카오톡 예약하기, 그래프 DFS 기반 타임 블록 캘린더 개발기

카카오톡 예약하기 파트너센터의 FE 개발자가 타임 블록형 캘린더를 구현하며 겪은 기술적 도전과 해결 과정을 공유했다. 기존 카드 목록 UI가 판매자에게 정보 파악의 어려움을 준다는 피드백에 따라, 한눈에 재고와 예약 현황을 볼 수 있는 캘린더 도입이 필요했다.

핵심 요구사항은 한 시간대 최대 10개, 최대 6시간 소요되는 예약 건들을 빈 공간 없이 최적화하여 배치하는 것이었다. 개발자는 시각적 우선순위를 고려해 이용 시간이 이른 순으로 정렬하고, 같은 시간대에서는 소요 시간이 긴 순으로 배치하는 규칙을 세웠다. 이를 통해 긴 예약 건이 확장을 가로막지 않도록 앞쪽에 배치해 나머지 블록들이 공간을 확보할 수 있게 했다.

블록 확장을 위해 예약 건을 그래프(Graph) 자료구조로 모델링했다. 각 노드는 이전/다음 예약과의 연결 관계와 그래프 내 깊이(depth), 끝까지의 최대 길이(maxLength)를 가진다. **DFS(Depth-First Search)**를 통해 각 노드의 위치(left)와 너비(width)를 계산하는 공식을 적용하여, 예약 블록들이 서로 겹치지 않으면서도 가용 공간을 최대한 채우도록 배치했다.

특히 상위 루트 노드의 너비 결정으로 인해 하위 노드 사이에 빈 공간이 남는 예외 케이스를 발견하고, 인접하지 않은 노드들을 식별해 최소 공간만큼 확장하는 추가 로직을 구현했다.