# KBX FE Completion v37

## 목적

이번 단계의 우선순위는 Backend 연계 완성도가 아니라 **브라우저에서 직접 확인되는 FE 완성도**다. 기존 계약/Manifest/BE 연계 구조를 제거하지 않되, 화면을 보기 위해 API가 먼저 완성되어야 하는 흐름을 분리한다.

## 추가 산출물

`apps/web/fe-reference/`

- `index.html`: 실제 Application Shell + 홈 + T01~T09
- `kbx-fe.css`: KBX Dense Desktop / WMS Touch 시각 규칙
- `kbx-fe.js`: 순수 JavaScript 상호작용
- `README.md`: 실행 및 검증 방법

## FE Reference Lab이 검증하는 계약

### Application Shell

- Global Header 56px
- Side Navigation 220px / Collapsed 56px
- Workspace Tabs 40px
- Ctrl+K 메뉴 검색
- 모듈 필터
- 즐겨찾기 / 최근 메뉴
- Compact / Comfortable 밀도

### Home

Home은 KPI Card Dashboard가 아니라 업무 시작점으로 구성한다.

1. 확인 필요: 실패/예외/중요 알림/진행 작업
2. 바로 시작: 미저장/열린 업무/즐겨찾기/최근
3. 모듈별 업무: OMS/ERP/WMS/공통 메뉴 탐색

### T01 Search/List

Search → Quick Filter → Context → Bulk Action → Grid → Summary → Detail Drawer.

### T02 Master CRUD

목록과 상세를 동시에 유지하고, Form을 2-column Dense layout으로 구성한다.

### T03 Header + Detail Transaction

Header Form → Editable Detail Grid → Summary. 변경 시 Workspace Tab dirty 상태가 시각적으로 나타난다.

### T04 Fast Grid Entry

Enter 이동, contenteditable 기반 실제 셀 편집, Excel Paste를 전제로 한 Grid-first 화면을 제공한다.

### T05 Master/Detail Explorer

품목 → 창고/Location → 재고이력을 한 화면에서 확인한다.

### T06 Work Queue

그래프 Dashboard 대신 지금 처리해야 할 Queue와 예외를 먼저 노출한다.

### T07 Reconcile

Expected / Actual / Difference / Reason / Resolution 문법을 유지한다.

### T08 Excel Import

파일 → 매핑 → 검증 → 반영 → 결과 5단계를 실제 버튼으로 진행할 수 있다.

### T09 WMS Mobile

390px 기준 Picking 화면, 54px CTA, 네트워크 상태, 스캔/수량/예외 피드백을 독립 검증한다.

## 구현 원칙

- FE 원형에서 Backend DTO/Endpoint를 호출하지 않는다.
- 사용자 업무 문법을 확인하기 위해 Mock data를 명시적으로 사용한다.
- Component API를 늘리기 전에 실제 화면에서 반복되는 UI 패턴을 먼저 확인한다.
- Reference Lab에서 검증된 패턴만 `@kbx/ui`에 승격한다.
- PrimeVue/AG Grid 교체를 목표로 하지 않는다. 실제 제품에서는 기존 KBX wrapper를 유지한다.

## 승격 기준

Reference Lab의 패턴을 공통 컴포넌트로 승격할 때 다음 3개를 모두 만족해야 한다.

1. 동일한 업무 의미인가?
2. 동일한 변화 이유를 가지는가?
3. 동일한 UX 계약을 가져야 하는가?

단순히 HTML/CSS가 비슷하다는 이유로 공통화하지 않는다.

## 다음 FE 작업 우선순위

1. Golden Screen `OMS-ORD-001`을 Lab과 실제 Vue 페이지 사이에 Visual Parity 맞추기
2. `OMS-ORD-002` Header/Detail Keyboard flow 완성
3. `KbxDataGrid` 변경/오류/편집/Clipboard 상태의 시각 카탈로그 강화
4. `KbxLookup` F2/Enter/Esc/Focus Restore 브라우저 조작성 강화
5. 홈과 Side Navigation의 화면 수가 100+로 늘어났을 때 정보 탐색성 검증
6. 1280px Compact Desktop 회귀 검증
7. WMS 390×844 실제 Touch/Scanner 상태 회귀 검증
