1.5 KiB
1.5 KiB
FE 표준 컴포넌트·디자인 시스템·어댑터
절대 규칙
Feature는 primevue/*, ag-grid-*를 직접 import하지 않는다. UI 공급자 의존은 shared/ui/adapter/<vendor>에만 둔다. Feature는 KsButton, KsTextField, KsDataGrid, 표준 Layout과 Screen Type만 사용한다.
3계층
- Adapter Port: Button/Input/Select/Dialog/Tag/Grid의 최소 의미 계약.
- Standard Component: label, error, help, a11y, 금융 상태를 포함하는
Ks*컴포넌트. - Domain Component: Evidence, Reentry, Approval, VersionSet처럼 투자 업무 의미를 가진 컴포넌트.
공통 승격은 최소 3개 사용처가 아니라, 동일 업무 의미·상태·권한·접근성·테스트·변경축이 반복될 때만 허용한다. 단순 CSS 유사성은 공통화 근거가 아니다.
교체 절차
- 새 Vendor Adapter가 모든 Port를 구현한다.
- Adapter contract, Vitest, a11y, Playwright 핵심 여정, visual regression을 통과한다.
- T01~T10 상태 Matrix와 금융 formatter의 의미 diff가 0인지 검증한다.
- ADR과 rollback plan을 승인한다.
- Feature 코드는 수정하지 않고 bootstrap adapter만 교체한다.
상태·표현
LOADING, EMPTY, WARN, ERROR, EXPIRED, UNAUTHORIZED, READONLY, DIRTY, CONFLICT, PROCESSING, PARTIAL을 표준화한다. 색상만으로 상태를 표시하지 않고 텍스트·아이콘·ARIA를 병행한다. 손실·경고·데이터 신선도를 수익보다 먼저 보여준다.