GAIA Office 기능 유지 보수

[티맥스가이아] GAIA Docs 오피스 - 기능 유지 보수

2024.04 - 2025.02

상시 업무로, GAIA Docs 오피스의 기존 기능에 대해 안정화를 진행했습니다.

React
Typescript
MobX
Sass
GitLab
Java
Redmine

🧩 상세 설명

Point, 그래픽(도형, 사진, 동영상) 관련 기능 단축키 구현

  • 다중 슬라이드 순서 변경, 개체 정렬 순서 변경, 슬라이드 내 이전/다음 개체 선택 등

  • 앱 내 발생한 key 이벤트에 대해, 현재 문서 상태에 따라 적절한 이벤트 핸들러를 매핑 및 로직 작성

  • 키보드로 문서 탐색 및 조작 가능한 기능 확장 → 웹 접근성 개선

일부 상황에서 사용자가 개체 이동하는 속도가 급격히 느려지는 현상 해결

  • react profiler를 통해 불필요한 리렌더링이 발생하는 컴포넌트와 이를 유발하는 MobX Observable 변수 분석

  • 특정 조건 만족 시에만 변수 참조하도록 코드 개선","개체 이동 속도 최대 80% 단축

중복 key 충돌 문제 해결

  • 동시 편집 상황에서 도형의 id가 특정 컴포넌트의 key로 사용되며 언마운트 정상 동작하지 않는 문제

  • 사용자 세션 아이디로 key 값 변경 → 동시 편집 시 렌더링 안정성 확보

도형 크기 조정 시 미세하게 개체가 떨리는 현상 해결

  • 브라우저에서 렌더링 최적화를 위해 left, top에 설정된 값을 반올림하여 적용하며 위치가 미세하게 달라지는 문제 현상

  • transform: translate()를 사용하여, 부드러운 움직임 구현

도형 모양의 안정성 향상

  • 도형 svg 엘리먼트의 path에 NaN 값이 포함되지 않도록 예외 처리 및 유효성 검증