토스증권 PC의 그리드 레이아웃 직접 구현

이 게시물은 토스증권 PC 종목 상세 페이지의 복잡한 그리드 레이아웃 UI를 라이브러리 없이 직접 구현한 과정을 소개합니다.

주요 구현 배경과 요구사항

• 패널의 추가, 제거, 크기 변경 지원
• 패널 종류별 최소 크기와 자유로운 디자인 커스텀
• 터치 스크린 지원 및 레이아웃 저장 기능 포함

이진 트리를 활용한 레이아웃 표현과 조작

• 패널 배치를 이진 트리 구조로 모델링하여 공간 분할
• 스플릿 노드로 가로/세로 분할과 분할 비율 관리
• 트리 순회로 각 패널의 좌표와 크기 계산
• 마우스 포인터 위치 계산으로 패널 이동 및 삽입 위치 결정

React 컴포넌트 구성 및 저장/복구

• Layout Manager 모듈과 Movable Grid 컴포넌트로 UI 구현
• 패널 내부 기능은 외부 컴포넌트를 주입하는 Headless 컴포넌트 구조
• 레이아웃과 패널 정보를 JSON 형태로 저장하고 불러오기 가능

이진 트리 자료구조를 활용한 직접 구현으로 복잡한 요구사항을 충족해 PO와 디자이너의 기대에 부응한 사례를 소개합니다.