G-Store라우터 유지보수 포털 시스템
Category
Web
Solution
React
Technology
12+ Tech Stacks
라우터 유지보수 현황을 한눈에
라우터 유지보수 포털 시스템 - G-Store
G-Store Networks의 라우터 유지보수 포털 시스템으로, 다중 사용자 유형(작업자/사용자/관리자) 분기 처리를 구현한 엔터프라이즈급 웹 애플리케이션입니다. 작업자는 라우터 유지보수 작업을 등록하고 관리할 수 있으며, 사용자는 자신의 라우터 상태를 확인하고 유지보수 요청을 할 수 있습니다. 관리자는 전체 시스템을 모니터링하고 사용자 및 작업자 관리를 수행할 수 있습니다.
Challenge
다중 사용자 유형 지원
작업자, 사용자, 관리자 등 다양한 사용자 유형에 맞춘 인터페이스를 설계했습니다.
라우터 관리 시스템
라우터의 상태를 실시간으로 모니터링하고 관리할 수 있는 시스템을 구축했습니다.
엑셀 기반 데이터 관리
엑셀 파일을 업로드하여 데이터베이스에 자동으로 매핑하고 관리할 수 있는 기능을 구현했습니다. 또한 전체 데이터를 엑셀 파일로 다운로드할 수 있는 기능도 포함되어 있습니다.
Solution
Technology Stack
Project Approach
React와 Next.js를 활용하여 직관적인 UI/UX를 구현하였고, Recoil을 통해 전역적으로 상태 관리를 수행하며, TypeScript로 코드의 안정성을 높였습니다. MUI와 Tailwind CSS를 사용하여 일관된 디자인 시스템을 구축하였고, dayjs를 활용해 날짜 및 시간 관리를 효율적으로 처리하였습니다. Firebase 인증으로 회원 관리를 수행하고, Google Cloud Functions와 Compute Engine을 통해 안정적인 백엔드 서비스를 구축하였습니다. TypeSense를 활용하여 빠르고 정확한 검색 기능을 제공하였습니다.
Impact
Innovation
5분 이내
역할별 핸들러 분리로 새로운 사용자 유형 추가 시 5분 내 확장 가능
User Experience
30% 향상
모바일에 최적화된 디자인으로 사용자 경험을 30% 향상시켰습니다.
Performance
25% 절감
코드 실행 경로 단순화로 메모리 사용량을 25% 절감하였습니다.
"고객 맞춤형 서비스 제공으로 고객 만족도가 크게 상승했습니다."