- 진행 기간
- 2022 ~ 2025
- 상태
- 운영 완료
Overview
제품별로 흩어져 있던 프론트엔드를 하나의 모노레포와 디자인 시스템으로 통합하고, 수동으로 반복하던 검증을 CI 파이프라인으로 옮겼습니다.
Tech Stack
ReactTypeScriptpnpmViteGitHub Actions
주요 작업
- 기존 제품별로 Backend+Frontend가 함께 묶여 있던 구조에서 Frontend 팀이 분리됨에 따라, 여러 의료영상 AI 제품(Fundus AI·DeepBrain·Chest X-ray·LungCT 등)의 Frontend를 pnpm workspace·Vite 기반 모노레포로 통합
- 여러 제품에서 공통으로 사용하는 사내 패키지를 개발하여 재사용성 확보. HTTP 통신·토큰 관리(fetch-manager), WebSocket 관리(websocket-manager), 날짜 유틸(date-manager), 공용 커스텀 Hook 등
- 디자인팀과 협업하여 사내 디자인 시스템(Atomic Design 기반)을 구축하고, React 공용 컴포넌트를 개발하여 제품 간 UI 일관성 확보
- 각 제품은 React·React Query·Zustand(구 Recoil에서 전환)·React Hook Form·Cornerstone.js를 공통 스택으로 사용하여 개발 방식을 표준화
- GitHub Actions 기반 CI/CD 프로세스를 정립. PR 시 변경된 앱·공용 패키지만 감지해 lint·typecheck를 수행하고, 개별적으로 수동 실행해왔던 검증 스크립트를 파이프라인에 편입해 자동 실행되도록 전환. release 태그를 기준으로 제품을 식별해 빌드·라이선스 검사·릴리즈까지 이어지는 배포 흐름 구성
- SonarQube 정적 분석의 Bug·Code Smell을 처리 가능한 단위로 묶어 개선 (React Hooks 규칙 위반 등 런타임 리스크 우선)
- 차트 라이브러리 도입 시 후보 라이브러리로 프로토타입을 구현해 장단점을 비교하고 최종 선정에 기여
- 상시 코드 리뷰에 리뷰어로 참여하여 여러 제품 간 구현 방식의 편차를 줄임