Skip to content
Back to Work

백오피스 고도화

사내와 협력사가 함께 쓰는 사용자 관리 도구를 3년에 걸쳐 고도화했습니다. TypeScript 점진 마이그레이션과 E2E 테스트, 테넌트 권한관리 설계까지.

  • React
  • TypeScript
  • Cypress
  • TanStack Query

문제

사내에서 쓰던 백오피스가 사업 확장으로 협력사(테넌트)와 함께 쓰는 도구가 되면서, 계정별 접근 권한 설계가 필요해졌습니다. 기존 JavaScript 코드베이스는 유지보수 이슈가 잦았고, 회귀 검증 수단이 없어 배포마다 수동 확인에 의존했습니다.

무엇을 했나

TypeScript 점진 마이그레이션과 E2E 테스트

Cypress 테스트 자동화를 적용하면서 프로젝트를 TypeScript로 점진적으로 마이그레이션했습니다. Generic으로 API 응답 타입을 정의해 any 사용을 줄였습니다.

테넌트 권한관리 설계

페이지 로딩 시 계정 정보를 받아 조건부 렌더링하는 권한관리 기능을 설계·개발했습니다. React Hook Form과 MUI로 공통 입력 컴포넌트를 만들어 필터 기능을 한곳에서 관리하도록 개선했습니다.

성과

  • E2E 테스트 커버리지 80% 이상 확보
  • 3개월 내에 전체 코드의 90%를 TypeScript로 전환
  • 협력사 확장에 대응하는 테넌트별 권한관리 체계 구축