# FE 표준 컴포넌트·디자인 시스템·어댑터

## 절대 규칙

Feature는 `primevue/*`, `ag-grid-*`를 직접 import하지 않는다. UI 공급자 의존은 `shared/ui/adapter/<vendor>`에만 둔다. Feature는 `KsButton`, `KsTextField`, `KsDataGrid`, 표준 Layout과 Screen Type만 사용한다.

## 3계층

1. **Adapter Port**: Button/Input/Select/Dialog/Tag/Grid의 최소 의미 계약.
2. **Standard Component**: label, error, help, a11y, 금융 상태를 포함하는 `Ks*` 컴포넌트.
3. **Domain Component**: Evidence, Reentry, Approval, VersionSet처럼 투자 업무 의미를 가진 컴포넌트.

공통 승격은 최소 3개 사용처가 아니라, **동일 업무 의미·상태·권한·접근성·테스트·변경축**이 반복될 때만 허용한다. 단순 CSS 유사성은 공통화 근거가 아니다.

## 교체 절차

1. 새 Vendor Adapter가 모든 Port를 구현한다.
2. Adapter contract, Vitest, a11y, Playwright 핵심 여정, visual regression을 통과한다.
3. T01~T10 상태 Matrix와 금융 formatter의 의미 diff가 0인지 검증한다.
4. ADR과 rollback plan을 승인한다.
5. Feature 코드는 수정하지 않고 bootstrap adapter만 교체한다.

## 상태·표현

LOADING, EMPTY, WARN, ERROR, EXPIRED, UNAUTHORIZED, READONLY, DIRTY, CONFLICT, PROCESSING, PARTIAL을 표준화한다. 색상만으로 상태를 표시하지 않고 텍스트·아이콘·ARIA를 병행한다. 손실·경고·데이터 신선도를 수익보다 먼저 보여준다.