[GAIA Office] 선도형 기능 고도화

선 도형 관련 기능 개발

2024.05 - 2024.08

기여도: 100%

React
Typescript
MobX
Sass
Gitlab
Java
Cucumber
Puppeteer

🧩 상세 설명

도형 간 연결 기능 구현

  • 선 도형 조작 시, mouse over된 도형 및 연결점의 정보를 전역 상태로 저장

  • 도형 간 위치 관계에 따른 연결선 도형의 최적 경로 계산 로직 구현

  • 계산된 경로에 따라 엘리먼트의 svg path 변경 및 위치/크기/회전 상태에 맞게 transform 적용

  • 도형 간 연결 관계를 Map 구조로 관리 (key: 도형, value: 연결된 선 도형 배열) → 각 도형이 편집될 때 연결된 선 도형들을 get하여, 도형 변형 상태에 따라 선 도형의 모양 변경 처리

Cucumber, Puppeteer을 사용하여 UI 테스트 코드 작성

🌱 배운점

초기 설계의 중요성을 깊이 깨달았습니다. 부실한 설계는 개발 과정에서 많은 시간을 소모하게 하며, 팀 내 피드백을 통해 탄탄히 다지는 과정이 필수적임을 배웠습니다. 좋은 설계가 개발 속도와 품질을 결정한다는 점을 실감하게 되었습니다

코드의 가독성을 높이기 위해 컴포넌트와 커스텀 훅으로 분리하고, 또한 반복적인 로직을 재사용 가능한 형태로 분리하여 최소화하는데 집중했습니다. 대규모 프로젝트에서는 확장성과 유지보수를 고려해 코드의 구조를 고민하는 것이 매우 중요하다는 것을 다시 한 번 깨달았습니다.