# KBX FE QA Hardening v39

## 1. 결론

v38은 T01~T09의 화면 상태와 주요 클릭 흐름을 실제 JavaScript 상태 전이로 올렸지만, 운영 FE 기준으로는 아직 다섯 가지가 부족했다.

1. Dirty 보호가 탭 닫기에 집중되어 화면 간 이동에는 동일하게 적용되지 않았다.
2. Lookup은 핵심 ERP 입력 계약인데 Reference Lab에서 실제 F2 검색/선택/Focus 이동이 없었다.
3. 도움말/AI/제안/작업/알림이 버튼과 Toast 수준이라 Utility Component의 실체가 부족했다.
4. Excel Import가 동기식 Wizard처럼 끝나 장시간 작업의 이탈/복귀 UX를 검증할 수 없었다.
5. WMS Mobile에서 중복 Scanner 입력과 네트워크 검증 실패가 데이터 변경으로 이어지지 않는다는 계약을 실행 증적으로 닫지 못했다.

v39는 BE 결합을 늘리지 않고 위 결함을 실제 HTML/CSS/JavaScript와 핵심 Vue Component에서 보완한다.

## 2. P0/P1 개선

### P0 — Dirty Navigation Guard

기존: Dirty Tab을 `×`로 닫을 때만 보호.

v39:

- Dirty 화면 → Side Navigation
- Dirty 화면 → Workspace Tab
- Dirty 화면 → Home/다른 Screen

모두 `계속 편집 / 변경 버리기 / 저장 후 이동`을 거친다.

단순 `beforeunload`에 의존하지 않고 SPA Navigation 상태에서 동일 계약을 적용한다.

### P0 — F2 Lookup 실제 구현

T02/T03의 Lookup은 다음을 실제 지원한다.

- F2 또는 검색 버튼
- 코드/명칭 검색
- Arrow Up/Down
- Enter 선택
- Esc 닫기
- 선택 후 Code + Name 동시 반영
- 선택 후 다음 Form Control로 Focus 이동
- 취소 시 기존 Trigger Focus 복원

실제 `packages/kbx-ui/src/components/KbxLookup.vue`도 선택/취소 Focus 정책을 분리했다.

### P1 — Context-aware Home Navigation

홈 예외 항목은 이제 단순 화면 링크가 아니다.

- 재고부족 → T01 + `stock` Quick Filter
- 처리오류 → T01 + `error` Quick Filter
- 대사불일치 → T07 + mismatch-only
- Excel Job → T08 + 현재 Job 단계

홈에서 들어간 사용자가 다시 조건을 찾는 재작업을 제거한다.

### P1 — Utility Drawer 실체화

`도움말 / AI / 제안 / 작업 / 알림`을 Toast에서 실제 Drawer로 전환했다.

Drawer는:

- Background `inert`
- Focus Trap
- Esc Close
- Focus Restore

를 지원한다.

AI 빠른 동작은 설명 문자열에서 끝나지 않고 실제 화면 Context로 연결한다. 데이터 변경은 하지 않는다.

### P1 — T08 Background Job UX

T08을 6단계로 명확히 했다.

`파일 → 매핑 → 검증 → 미리보기 → 반영 → 결과`

반영 단계는 비동기 Job을 모사한다.

- Progress
- 처리건수
- 오류 제외건수
- 다른 화면 이동 가능
- Home/작업센터에서 복귀
- 완료 후 결과 확인

FE Reference는 Domain DB Commit을 흉내내지 않고 Job UX와 상태 복구만 검증한다.

### P1 — WMS Scanner/Network Guard

- 동일 Barcode 700ms 이내 중복 입력은 무시
- 중복 시 수량 불변
- `unstable/offline`에서는 서버 검증이 필요한 수량을 반영하지 않음
- Mobile 767px 이하에서는 Desktop Shell을 제거하고 T09가 viewport를 직접 점유

Desktop ERP를 억지로 Mobile Reflow하지 않고 WMS Mobile Template을 분리한다.

## 3. 30년 현장 QA 관점의 비판

### 화면이 많다는 것은 완성도가 아니다

T01~T09가 모두 존재해도 다음이 안 되면 데모다.

- 예외 링크가 실제 예외 필터를 적용하는가?
- Lookup 이후 Focus가 끊기지 않는가?
- Dirty 상태에서 다른 메뉴를 눌러도 데이터가 보호되는가?
- Background Job 중 다른 업무를 할 수 있는가?
- Scanner가 두 번 들어와도 두 번 처리되지 않는가?

v39는 이 질문을 자동/브라우저 증적으로 검증한다.

### FE에서 BE를 흉내내면 안 된다

Reference Lab에서 의도적으로 구현하지 않은 것:

- 실제 권한 판정
- 재고/상태 Domain Validation
- Audit Write
- Idempotency Store
- Outbox/Inbox
- 실제 Hangfire Job

FE는 해당 결과를 올바르게 표현하고 복구하는 계약만 가진다.

### Home은 Dashboard가 아니라 Router + Workbench다

홈 KPI를 늘리는 것이 아니라 `예외 → 실제 필터링된 업무`, `진행 Job → 해당 Job 상태`로 이동해야 한다.

홈의 품질은 Card 수가 아니라 **재탐색 횟수와 Context Switch 수**로 평가해야 한다.

## 4. 브라우저 QA 증적

`apps/web/fe-reference/previews/browser-interaction-v39.json`

31/31 PASS:

- Home intent routing
- T01 keyboard Space/Enter
- Drawer inert/Esc recovery
- Dirty navigation guard
- F2 Lookup + Enter + next focus
- Help/Suggestion Drawer
- T08 6-step + background job leave/return
- WMS duplicate scan guard
- 1280×720 document overflow 없음
- 720px zoom-pressure Shell overflow 없음
- Runtime console/page error 0

추가 렌더링:

- `home-v39-1440x900.png`
- `t01-order-stock-v39-1440x900.png`
- `lookup-v39-1440x900.png`
- `t08-job-v39-1440x900.png`
- `t01-v39-1280x720.png`
- `t09-picking-v39-390x844.png`

## 5. 다음 Gate

새 컴포넌트를 늘리기 전에 다음을 우선한다.

1. 실제 Vue Golden Screen과 Reference Lab의 Visual/Interaction parity 자동 비교
2. 실제 AG Grid KbxDataGrid Clipboard/Paste/Error Navigation 브라우저 테스트
3. T03 Form 전체 `Enter = 다음 입력`과 F2 Lookup 혼합 흐름 E2E
4. 200% Browser Zoom 및 WCAG Focus/Label 자동 검사
5. WMS `unstable/offline → online` 복구 및 Pending Command UX
6. T08 Refresh 이후 Job API 복구 계약 — 이 단계부터는 BE Read API와 결합 필요

이 Gate 전에는 새 Metadata Engine, Runtime UI Builder, 별도 Grid Engine을 추가하지 않는다.
