# KBX FE QA Hardening v38

## 1. 판단

v37의 가장 큰 문제는 컴포넌트 개수가 부족한 것이 아니었다. 화면과 계약은 많았지만 **사용자가 실제로 클릭·입력·전환했을 때 업무 상태가 끝까지 이어지는 FE 상호작용 밀도**가 낮았다.

30년 현장 QA 관점에서 가장 위험한 유형은 “버튼이 있으니 구현된 것처럼 보이는 UI”다. 이런 화면은 데모에서는 통과하지만 운영에서는 오조작, 중복처리, 미저장 유실, 교육비 증가로 이어진다.

## 2. v37에서 P0/P1로 본 결함

### P0 — 미저장 데이터 유실 가능

FE Reference Lab에서 Dirty Tab을 닫아도 보호 절차가 없었다.

표준은 `계속 편집 / 변경 버리기 / 저장 후 이동`을 요구한다. v38은 탭 닫기 시 동일한 3-way guard를 구현했다.

### P0 — 선택 0건 Workflow Action이 활성처럼 보임

T01 Command Bar의 `출고지시`가 행 선택과 시각적으로 결합되지 않았다. 업무 시스템에서 선택 0건 Action은 단순 미관 문제가 아니라 오조작 가능성을 높인다.

v38은 선택 0건에서 disabled, 선택 후 enable, Bulk Bar와 동일 selection source를 사용한다.

### P1 — 화면은 바뀌어 보이지만 업무 상태는 고정

v37의 T05/T06/T07은 Master 행, Queue 요약, mismatch checkbox가 실제 결과를 갱신하지 않는 부분이 있었다.

v38은 다음을 실제 상태 전이로 변경했다.

- T05 품목 → Location/재고이력
- T06 작업유형/예외 → Queue Grid
- T07 불일치 checkbox → Comparison Grid

### P1 — Fast Entry가 “contenteditable 데모”에 가까움

ERP Fast Entry는 Excel 사용자의 기대를 충족해야 한다. 단순 `contenteditable`만으로는 입력 계약이 불명확하다.

v38은 cell input, Enter next, TSV paste, 행 추가/복제/Fill Down, 단가 오류 표시, 오류 시 저장 disable을 넣었다.

### P1 — WMS 수량 입력에 browser prompt 사용

현장 PDA에서 `prompt()`는 제품 UX로 볼 수 없다. Focus, Touch Target, Validation, 오류 복구가 모두 통제되지 않는다.

v38은 수량 Dialog와 예외 신고 Dialog로 교체하고 Scanner keyboard-wedge의 Enter 종료 흐름을 구현했다.

### P1 — Preference 저장 실패가 Shell 초기화를 깨뜨릴 가능성

localStorage는 브라우저 정책/사설모드/임베드 환경에서 실패할 수 있다. Preference는 업무 Source of Truth가 아니다.

v38은 localStorage를 fail-soft로 격리했다. 저장소가 없어도 화면과 업무 흐름은 계속 동작한다.

## 3. 홈 네비게이션 평가

홈은 “대시보드”가 아니라 **업무 시작점**이어야 한다.

v38 홈 우선순위:

1. 실패/예외/중요 알림
2. 미저장/열린 업무 이어서 처리
3. 즐겨찾기/최근 업무
4. 모듈별 표준 화면
5. Ctrl+K 직접 검색

차트·장식 카드는 추가하지 않았다. 사용자가 `지금 무엇을 처리해야 하는가`와 `어디로 들어가야 하는가`를 1~2번의 조작으로 해결하는 데 집중한다.

## 4. 보안 관점

FE 보안은 버튼 숨김이 아니다. 실제 권한/업무 규칙은 서버가 책임져야 한다. 이번 Lab에서 다루는 것은 브라우저 측 공격면과 실패 격리다.

적용:

- restrictive CSP
- 외부 script/style 없음
- dynamic HTML escape
- localStorage allow-list 복원
- 개인정보 샘플 masking
- eval/document.write/prompt 금지

미적용/BE 책임:

- Permission enforcement
- Domain validation
- Concurrency
- Idempotency
- Audit write
- CSRF/Authentication 정책

Reference Lab이 이것들을 구현한 것처럼 가장하지 않는다.

## 5. 과유불급 기준

이번 단계에서 하지 않은 것:

- 자체 Grid Engine
- Runtime JSON UI Builder
- 자체 Router Framework
- API mock server 대형화
- FE에서 Domain Rule 복제
- AI가 화면을 임의 생성하는 구조

Reference Lab은 “실제 FE 문법을 검증하는 얇은 실행 원형”으로 유지한다.

## 6. 다음 QA Gate

다음 iteration에서 우선할 항목:

1. 실제 Vue Golden Screen과 FE Reference의 visual/interaction parity
2. KbxLookup F2 → Search → Enter → Focus restore 실브라우저 검증
3. KbxDataGrid clipboard/edit/error-navigation 실 AG Grid 검증
4. 1280×720 compact overflow 및 200% zoom 접근성
5. WMS 390×844에서 네트워크 지연/중복 Scan/재전송 UX
6. T08 10k/30k row 배경 Job 상태와 화면 이탈/복귀

이 Gate를 통과하기 전에는 새 컴포넌트 종류를 늘리는 것보다 기존 핵심 컴포넌트의 실제 브라우저 계약을 강화하는 것이 우선이다.
