Archive · 2026 · Development
레거시 ERP 프론트엔드 Vite 리빌딩
- Duration
- 2026.04 — 2026.06
- Role
- 프론트엔드 아키텍처·레지스트리 설계, AI 에이전트 개발 파이프라인 구축
- Skills / Tools
- ReactTypeScriptViteFeature-Sliced DesignRadix UIvanilla-extractZustandTanStack QueryAG Grid
Key Accomplishment
- 동적 라우트와 레지스트리 조합으로 마스터 도메인 30화면을 실 API에 연결 — 새 화면을 컴포넌트 추가가 아닌 registry 행 등록으로 확장
- FSD 6레이어 단방향 의존과 3계층 상태 모델(Zustand·React Context·TanStack Query)을 확정해 화면·피처·서버 상태의 책임을 분리
- Radix UI·vanilla-extract·Tailwind v4·AG Grid를 조합한 디자인 시스템과 공통 CRUD 패턴 구축 — 반복 화면의 구현 기준을 통일
- planner·admin·implementer·검증·리뷰어 등 AI 에이전트 7종과 plan/results/done/rules 문서 라이프사이클을 확립 — 구현과 검증을 분리
Architecture
동적 라우트가 레지스트리에서 화면 조립 정보를 조회하고, FSD 계층과 3계층 상태 모델을 통해 실 API와 공통 UI를 연결하는 React SPA 구조입니다.
Technical Challenges
- URL과 탭을 하나의 renderKey로 합성하고 renderer·API·grid·labeling 레지스트리를 함께 조회했습니다. 등록 누락으로 조용히 실패하지 않도록 registry-auditor를 별도 에이전트로 두었습니다.
- 전역 Zustand, 피처 Context, 서버 TanStack Query를 분리하고 화면 전환 시 screenKey 기반 스토어를 재생성했습니다. Table과 도메인 간 이벤트는 타입드 이벤트 채널로 연결했습니다.
- Radix Popover와 AG Grid portal 셀 에디터의 충돌, vanilla-extract 토큰과 Tailwind
@theme간 two-file sync 제약을 규칙화해 구현 선택의 변동을 줄였습니다. - AI 생성 코드의 속도를 통제하기 위해 plan → implementation → validation → review 게이트와 18개 규칙을 운영하고, 리뷰 2회 실패 시 사람에게 에스컬레이션하도록 했습니다.
Details
MoviqAI 플랫폼용 엔터프라이즈 React SPA를 Vite 기반으로 구축했습니다. 2026년 4월 14일부터 6월 4일까지 83개 커밋으로 현재 src 58,453줄·449파일 규모를 만들었습니다.
라우팅은 /app/:screenUrl/:tabUrl 단일 동적 라우트로 두고 renderKey = {screenUrl}_{tabUrl}를 기준으로 renderer·API·grid·labeling 레지스트리를 조회합니다. 새 화면을 레지스트리 행 등록으로 확장하는 OCP 구조입니다.
FSD 6레이어(app → pages → widgets/features → entities → shared), Zustand 5·React Context·TanStack Query 5의 3계층 상태, Radix UI와 vanilla-extract 기반 디자인 시스템을 문서로 확정했습니다.
마스터 사용자·파트너·권한·설정·창고·기사 영역 30화면을 실 API로 구현했습니다. 입고 일부는 filter/toolbar/table 스텁 상태이고 출고·재고 도메인은 아직 시작하지 않았으며, 테스트는 공통 훅·유틸·shared UI 중심 34파일·461케이스입니다.
AI 에이전트 7종의 역할과 검증 게이트, 306편의 plan/results/done/rules 문서 라이프사이클을 확립했습니다. code-verifier는 소스 수정 없이 테스트만 작성하고, code-reviewer와 registry-auditor가 품질과 정합성을 분리 검증합니다.