레거시 이슈 트래커와 바닐라 JS 도구로 분산 운영되던 사내 업무 도구들을 단일 React SPA로 통합한 프로젝트의 프론트엔드 설계 문서입니다.
담당 — FE · 아키텍처 설계 · 기술 선정 · 공용 위젯(데이터 테이블·폼·파일·에디터) 구현
React 18 Vite TypeScript TanStack Query TanStack Table Zustand react-hook-form + Zod Radix UI Tailwind CSS
| 지표 | 값 | 비고 |
|---|---|---|
| 도메인 페이지 | 29개 | 단일 SPA 통합 |
| 공용 위젯 | 27개 | 목록·폼 화면 표준화 |
| 대시보드 로딩 | ~1.4s | 레거시 7–8s 대비 (−80%) |
레거시는 별도 백엔드 없이 브라우저가 BaaS 컬렉션에 직접 쿼리하고, 조인·집계를 전부 프론트엔드에서 수행했습니다. 통합 플랫폼에서는 이 집계 로직을 서버로 옮기고 클라이언트는 쿼리 캐시를 갖습니다 — 두 다이어그램에서 위치가 바뀐 상자가 이 전환의 핵심입니다.
같은 기능, 집계 로직의 위치만 다릅니다. 강조된 상자가 브라우저에서 API 서버로 이동하면서 요청 수(×N → ×1)와 로딩 시간(7–8s → 1.4s)이 함께 줄었습니다.
29개 페이지 규모에서 코드가 얽히지 않도록 4개 레이어의 단방향 의존을 강제했습니다. 상위 레이어는 하위를 참조할 수 있지만 역방향과 동일 레이어 간 참조는 금지됩니다. 공유가 필요한 코드는 아래 레이어로 내려보내는 것이 유일한 경로입니다.
@ui @api @hooks @store @permissions @enum @lib이 규칙 덕분에 팀원이 추가한 신규 페이지도 구조 변경 없이 얹힙니다.