Floating UI 기반 Recursive 구조 도입을 통한 Desktop-grade 메뉴 시스템 구축

md - context menu

pjdev2d2026년 5월 26일3분intermediate

AI 요약

Context

기존 Context Menu 시스템의 단순한 Hover 이벤트 처리와 단일 레벨 렌더링 구조로 인한 UX 불안정성 발생. 특히 뷰포트 이탈 제어 불가 및 중복된 포지셔닝 로직으로 인해 유지보수 효율성이 저하된 상태.

Technical Solution

safePolygon 및 useHover 훅 도입을 통한 커서 이동 경로상의 Gap Flicker 현상 제거
Recursive Rendering 구조 전환을 통한 무제한 depth의 Nested Submenu 확장성 확보
Floating UI size() Middleware 적용으로 가용 뷰포트 높이에 따른 동적 maxHeight 제어 및 스크롤링 구현
useFloatingLayer 공통 추상화 레이어 구축으로 Tooltip, Dropdown 등 다양한 UI 컴포넌트의 포지셔닝 엔진 통합
autoUpdate 활용 및 불필요한 수동 update() 호출 제거를 통한 렌더링 오버헤드 최적화

실천 포인트

- 마우스 호버 기반 UI 설계 시 단순 이벤트 대신 safePolygon과 같은 기하학적 경로 분석 적용 검토 - 계층 구조 데이터 렌더링 시 하드코딩된 레벨 대신 재귀적 컴포넌트 구조 설계 적용 - 뷰포트 경계 충돌 방지를 위해 flip, shift, size와 같은 포지셔닝 미들웨어 파이프라인 구성 - 유사한 좌표 계산 로직을 가진 UI 요소들을 하나의 Floating Layer 추상화 엔진으로 통합 관리

태그

#Middleware #Recursive Rendering #Abstraction Layer #UX Optimization #Floating UI

원문 읽기