KBX FE QA Hardening v45

1. 목적

v45는 컴포넌트 수를 늘리는 버전이 아니다. v44까지 완성한 Theme/State/Shell 위에서 사용자가 반복 조회를 줄이면서도 개인정보·업무 민감값·화면 버전 충돌을 Preference에 남기지 않는가, 그리고 Home의 우선 항목이 정확한 후속 Context까지 이어지는가를 실제 FE 품질 기준으로 닫는다.

2. QA 비판

기존 KbxSearchPanel에는 remember, savedSearch 계약이 있었지만 Golden T01에서 사용하지 않았다. 더 큰 문제는 기존 screenPreferenceStore가 screenId만 localStorage key로 사용하고 JSON을 그대로 반환했다는 점이다. Tenant/User 격리, ScreenVersion, 크기 제한, 타입 검증, 저장소 실패 복구가 없으므로 제품 표준의 개인화/재현성 계약보다 약했다.

Home도 우선순위 자체는 좋아졌지만 실패/진행 Operation을 선택하면 Runtime Center 전체 목록만 열려 사용자가 같은 대상을 다시 찾을 수 있었다. Exception Driven Home이 후속 탐색을 재발생시키면 Context Router 완성도가 낮다.

3. v45 구현

3.1 Screen Preference 안전 경계

저장 key:

kbx.screen.preference.v2:{scope}:{ScreenId}:{ScreenVersion}

여기서 scope는 AppFrame이 제공하는 Tenant/User 경계다. 저장 payload는 32KB 이하, 검색 기본값은 최대 24 key, 문자열은 최대 256자로 제한한다. localStorage 접근 실패는 화면 실패로 전파하지 않는다.

3.2 OMS T01 안전한 검색 개인화

OMS-ORD-001에 실제 KbxSearchPanel의 remember / saved-search를 연결했다.

저장 허용:

from / to
channelId
status
exceptionOnly

저장 제외:

keyword

keyword는 주문번호·주문자·상품명 등을 포함할 수 있으므로 기본 localStorage Preference에 저장하지 않는다. Route Context가 존재하면 Home/알림에서 전달된 명시적 Context가 저장 Preference보다 우선한다.

3.3 Home → Runtime Center 정확한 Context

KbxOperationCenter / KbxNotificationCenter에 activeId를 추가했다. Home의 우선 항목에서 특정 Operation/Notification을 선택하면 Runtime Panel을 열고 해당 Row를 aria-current로 표시하며 Focus/scroll한다. Header에서 일반 작업센터를 여는 경우에는 특정 항목을 강제하지 않는다.

3.4 Theme parity

Reference HTML/JavaScript에도 같은 기본조건 저장 / 마지막 조회조건 기억을 구현했다. Preference UI는 기존 Light/Dark/Forced Colors semantic token을 그대로 소비하며 새로운 Theme 계층을 만들지 않는다.

4. 보안 경계

Preference는 UX 편의 상태다. 권한, 주문 상태, 재고, 금액, Concurrency, Idempotency, Audit를 저장하거나 결정하지 않는다. Route Context도 기존 safe workspace resolver와 서버 권한/Domain 검증을 대체하지 않는다.

5. 검증

TypeScript/Vue syntax gate
v41 Golden FE parity
v42 runnable FE/source boundary
v43 Theme/navigation
v44 State/navigation
v45 safe preference/navigation dedicated gate
Reference Chromium Browser QA 14/14

Browser QA는 동일 HTML/CSS/JavaScript asset을 inline harness로 실행했다. 현재 환경에서 package registry가 차단되어 실제 Vite/PrimeVue/AG Grid live runtime E2E로 과장하지 않는다.

6. 다음 병목

다음은 새 Template이 아니라 실제 Vue Runtime에서 pnpm install/build 후 Search Preference를 포함한 Playwright E2E, 그리고 T02/T03의 Permission/Conflict/Integration Error와 server-side Full-query XLSX를 닫는 것이 우선이다.

3.6 KiB Raw Blame History