GRiD 3.0 UI 업그레이드

🛠️ Skills

• React(TS), mobX, mui, emotion, CSS module, material-react-table

✍🏻 Description

비즈니스 고객사를 위한 플랫폼 GRID 2.0 웹 애플리케이션에 UI/UX를 최적화 하면서 신규 기능을 추가하여 GRID 3.0으로 개편했습니다. 프로젝트는 PM 1명, FE 개발 2명으로 진행되었으며 저는 프론트엔드 리드 개발자로서 선행 코드 리팩터링을 수행하고 퍼블리싱, 스타일링 관리 및 핵심 페이지 개발과 최종 프로덕션 배포까지 수행하였습니다.

📝 Experience

💥 GRID 3.0 UI 개발 및 릴리즈

Mar 2024 ~ Sep 2024

What’s the issue?

2021년 5월 개발 완료되어 유지보수를 거쳐온 GRID 2.0 web 애플리케이션은 "제어 스케줄" 기능에서 센서 도입을 통한 "자동화"로의 확장, 다양한 기기 제품군 도입 등 신규 기능이 추가됨에 따라 사용자의 편의성을 위해 UI/UX의 대대적 개선이 요구됨. 사용자에게 이를 충족하는 직관적인 서비스 제공을 목적으로 24년도 3월부터 GRID 3.0 UI 개편 프로젝트를 수행

What did I do?

• 외주 디자인 용역 조율 및 퍼블리싱 코드 레포지토리 관리
• 기능별 신규 UI 페이지 개발
• 로그인, 회원가입, 계정 찾기, 내정보 등 Auth 관련 페이지 개발
• 각종 기기, 그룹 CRUD 페이지, 밝기 단계 슬라이드 및 파워 제어 컴포넌트 개발
• Zigbee 센서, IR기기 등록 페이지 개발
• 로딩, 네트워크 연결 같은 HTTP Request에 따른 화면, 알림 및 확인 등 공용 화면, 모달 페이지 개발 ⇒ 전체 소스코드 중 75% 리팩터링, mobX 전역 상태 관리 통일 및 4 계층 아키텍처 코드 구조 개선 기여
• 전직원 대상 사내 세미나 진행(24년 9월) 및 상용 배포 완료(25년 1월)

Retrospective points

• 기존에 클래스형 컴포넌트로 구현된 페이지를 함수형 컴포넌트로 바꿈과 동시에 mobX 버전도 6버전으로 올려서 데코레이터 방식과 직접적인 inject 대신 자동 추적과 action 설정으로 교체해 봄
• inject 대신 사용하며 React hooks 친화적인 mobXGlobalContext와 context API 가 혼용되던 걸 mobX global store를 호출해서 구조 분해하는 식으로 사용하여 상태 관리 일관성과 유지보수성을 높일 수 있었음